/* * Shubh Laabh Arts — Shop page redesign layer. * * Loaded ONLY on the Shop archive (functions.php, is_shop()), after * shop-main.css. shop-main.css is also loaded by the Product Detail page * (its related-products grid reuses the same card), so it is left as the * shared base; everything here is scoped under .sla-shop (the Shop * archive's own wrapper, see woocommerce/archive-product.php) or under * body.sla-shop-filters-open, and cannot reach any other page. * * 1. Page field + layout * 2. Results / sorting toolbar * 3. Product card * 4. Editorial cards (grid promo + sidebar Vastu card) * 5. Filter sidebar (desktop panel / mobile drawer) * 6. Responsive */ /* ----------------------------------------------------------------------- * 1. Page field + layout * --------------------------------------------------------------------- */ .sla-shop { --sla-card-radius: 14px; --sla-card-pad: 10px; --sla-muted-text: var( --sla-muted-blue ); --sla-gold-line: color-mix( in srgb, var( --sla-champagne-gold ) 45%, var( --sla-ivory-dark ) ); background: var( --sla-warm-cream ); padding-block: clamp( 1.75rem, 3.5vw, 3rem ) clamp( 2.5rem, 5vw, 4.5rem ); } .sla-shop .sla-shop__layout { gap: clamp( 1.5rem, 2.6vw, 2.5rem ); } /* ----------------------------------------------------------------------- * 2. Results / sorting toolbar — a quiet single line: count on the left, * sorting on the right, hairline beneath. Lighter than the cards. * --------------------------------------------------------------------- */ .sla-shop .sla-shop-toolbar { gap: 0.75rem 1rem; margin-bottom: clamp( 1.1rem, 2vw, 1.5rem ); padding-bottom: 0.9rem; border-bottom: 1px solid var( --sla-ivory-dark ); } .sla-shop .sla-shop-toolbar .woocommerce-notices-wrapper { flex: 1 0 100%; order: -1; } .sla-shop .sla-shop-toolbar .woocommerce-notices-wrapper:empty { display: none; } .sla-shop .sla-shop-toolbar .woocommerce-result-count { order: 1; margin: 0 auto 0 0; font-family: var( --sla-font-body ); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; color: var( --sla-muted-text ); opacity: 1; } .sla-shop .sla-shop-toolbar form.woocommerce-ordering { order: 3; position: relative; margin: 0; } /* Native WooCommerce select: shown (skinned) until shop.js enhances it, * and always the element that actually submits the sort. */ .sla-shop .sla-shop-toolbar select.orderby { min-width: 215px; height: 42px; padding: 0 2.4rem 0 1.1rem; font-size: 0.8125rem; font-weight: 600; color: var( --sla-peacock-navy ); background-color: #fff; background-position: right 0.85rem center; border: 1px solid var( --sla-ivory-dark ); border-radius: 999px; transition: border-color 200ms ease, box-shadow 200ms ease; } .sla-shop .sla-shop-toolbar select.orderby:hover, .sla-shop .sla-shop-toolbar select.orderby:focus-visible { border-color: var( --sla-champagne-gold ); box-shadow: 0 0 0 3px color-mix( in srgb, var( --sla-champagne-gold ) 18%, transparent ); outline: none; } /* Premium sort control (assets/js/shop.js): a button + listbox drawn over * the same WooCommerce options. The native select stays in the form, * visually hidden and out of the tab order, and is what submits. */ .sla-shop .sla-sort.is-enhanced select.orderby { position: absolute; width: 1px; height: 1px; min-width: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect( 0 0 0 0 ); clip-path: inset( 50% ); border: 0; white-space: nowrap; pointer-events: none; } .sla-shop .sla-sort__button { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; width: 100%; min-width: 215px; height: 42px; margin: 0; padding: 0 0.9rem 0 1.15rem; font-family: var( --sla-font-body ); font-size: 0.8125rem; font-weight: 600; line-height: 1; color: var( --sla-peacock-navy ); text-align: left; background: #fff; border: 1px solid var( --sla-ivory-dark ); border-radius: 999px; cursor: pointer; transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease; } .sla-shop .sla-sort__button:hover, .sla-shop .sla-sort__button:focus-visible, .sla-shop .sla-sort.is-open .sla-sort__button { border-color: var( --sla-champagne-gold ); box-shadow: 0 0 0 3px color-mix( in srgb, var( --sla-champagne-gold ) 18%, transparent ); outline: none; } .sla-shop .sla-sort__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sla-shop .sla-sort__chevron { display: inline-flex; flex: 0 0 auto; width: 14px; height: 14px; color: var( --sla-antique-gold ); transform: rotate( 90deg ); transition: transform 220ms ease; } .sla-shop .sla-sort__chevron svg { width: 100%; height: 100%; } .sla-shop .sla-sort.is-open .sla-sort__chevron { transform: rotate( -90deg ); } .sla-shop .sla-sort__menu { position: absolute; top: calc( 100% + 8px ); right: 0; z-index: 60; min-width: 100%; width: max-content; max-width: calc( 100vw - 2rem ); margin: 0; padding: 0.4rem; list-style: none; background: var( --sla-warm-cream ); border: 1px solid var( --sla-gold-line ); border-radius: 14px; box-shadow: 0 24px 44px -22px rgba( 6, 47, 58, 0.45 ), 0 2px 6px rgba( 6, 47, 58, 0.06 ); opacity: 0; visibility: hidden; transform: translateY( -4px ); transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; } .sla-shop .sla-sort.is-open .sla-sort__menu { opacity: 1; visibility: visible; transform: translateY( 0 ); transition: opacity 180ms ease, transform 180ms ease, visibility 0s; } .sla-shop .sla-sort__menu:focus { outline: none; } .sla-shop .sla-sort__option { display: flex; align-items: center; gap: 0.65rem; margin: 0; padding: 0.65rem 1rem 0.65rem 0.85rem; border-radius: 9px; font-family: var( --sla-font-body ); font-size: 0.8125rem; font-weight: 500; line-height: 1.2; color: var( --sla-peacock-navy ); white-space: nowrap; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; } /* Gold diamond marks the current choice (outline for the others). */ .sla-shop .sla-sort__option::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; border: 1px solid color-mix( in srgb, var( --sla-champagne-gold ) 55%, transparent ); transform: rotate( 45deg ); } .sla-shop .sla-sort__option:hover, .sla-shop .sla-sort__option.is-active { background: color-mix( in srgb, var( --sla-gold-soft ) 70%, #fff ); } .sla-shop .sla-sort__option[aria-selected="true"] { font-weight: 700; color: var( --sla-antique-gold ); } .sla-shop .sla-sort__option[aria-selected="true"]::before { background: var( --sla-champagne-gold ); border-color: var( --sla-champagne-gold ); } /* Filter-drawer trigger — mobile/tablet only (see §6). */ .sla-shop .sla-shop-toolbar__filter { order: 2; display: none; align-items: center; justify-content: center; gap: 0.5rem; height: 42px; padding: 0 1.1rem; font-family: var( --sla-font-body ); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var( --sla-peacock-navy ); background: #fff; border: 1px solid var( --sla-ivory-dark ); border-radius: 999px; cursor: pointer; transition: border-color 200ms ease; } .sla-shop .sla-shop-toolbar__filter svg { width: 16px; height: 16px; color: var( --sla-antique-gold ); } .sla-shop .sla-shop-toolbar__filter:hover, .sla-shop .sla-shop-toolbar__filter:focus-visible { border-color: var( --sla-champagne-gold ); } .sla-shop .sla-shop-toolbar__filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 999px; background: var( --sla-champagne-gold ); color: var( --sla-peacock-navy ); font-size: 0.6875rem; letter-spacing: 0; } /* ----------------------------------------------------------------------- * 3. Product card * --------------------------------------------------------------------- */ .sla-shop ul.products { gap: clamp( 0.85rem, 1.6vw, 1.5rem ); margin-bottom: 2.5rem; } /* Three equal columns beside the sidebar from tablet up (11 products + * the editorial card = an even 3 × 4 grid); phones keep shop-main.css's * two columns. */ @media ( min-width: 768px ) { .sla-shop ul.products { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } } .sla-shop ul.products li.product.sla-shop-card { display: flex; flex-direction: column; width: auto; float: none; margin: 0; padding: var( --sla-card-pad ); background: #fff; border: 1px solid var( --sla-ivory-dark ); border-radius: var( --sla-card-radius ); overflow: visible; box-shadow: 0 1px 0 rgba( 255, 255, 255, 0.8 ) inset, 0 10px 24px -22px rgba( 7, 59, 76, 0.45 ); transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease; } .sla-shop ul.products li.product.sla-shop-card:hover { transform: translateY( -3px ); border-color: var( --sla-gold-line ); box-shadow: 0 22px 38px -26px rgba( 7, 59, 76, 0.5 ); } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__inner { flex: 1 1 auto; } /* Image — every card the same square frame, inset with its own rounded * corners; product stays the focus (object-fit: cover on the square WC * thumbnail crop, so nothing is stretched). */ .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__media { aspect-ratio: 1 / 1; border-radius: calc( var( --sla-card-radius ) - 5px ); background: var( --sla-warm-cream ); isolation: isolate; } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__media img { width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 0; transition: opacity 450ms ease, transform 700ms ease; } .sla-shop ul.products li.product.sla-shop-card:hover .sla-shop-card__img--primary { transform: scale( 1.03 ); } /* Purpose tag — the product's own backend value (sla_purpose_tag terms), * a premium pill inside the image's top-left corner: soft cream glass, * fine border in the tag's accent family, a small gold diamond. Out of * flow, so it never pushes the card content down; long values wrap onto a * balanced second line and the width is capped so the product stays the * focus. */ .sla-shop ul.products li.product .sla-shop-card__media .sla-shop-card__pill { position: absolute; z-index: 2; top: 0.7rem; right: auto; bottom: auto; left: 0.7rem; display: inline-flex; align-items: center; gap: 0.45rem; max-width: min( calc( 100% - 1.4rem ), 17rem ); margin: 0; padding: 0.38rem 0.85rem 0.38rem 0.7rem; white-space: normal; text-wrap: balance; font-family: var( --sla-font-body ); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.25; background: rgba( 251, 248, 241, 0.94 ); border: 1px solid color-mix( in srgb, currentColor 30%, var( --sla-ivory-dark ) ); border-radius: 999px; box-shadow: 0 6px 16px -10px rgba( 7, 59, 76, 0.6 ); -webkit-backdrop-filter: blur( 4px ); backdrop-filter: blur( 4px ); } .sla-shop ul.products li.product .sla-shop-card__media .sla-shop-card__pill::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; background: var( --sla-champagne-gold ); transform: rotate( 45deg ); } .sla-shop .sla-shop-card__pill.sla-pill--gold, .sla-shop .sla-shop-card__pill.sla-pill--antique { color: var( --sla-antique-gold ); } .sla-shop .sla-shop-card__pill.sla-pill--emerald { color: var( --sla-emerald ); } .sla-shop .sla-shop-card__pill.sla-pill--wine, .sla-shop .sla-shop-card__pill.sla-pill--pink { color: var( --sla-wine ); } /* Body — name › description › rating › price › Add to Cart in one steady * rhythm directly under the image; the button is pinned to the foot so * every card in a row lines it up. */ .sla-shop .sla-shop-card__body { padding: 0.95rem 0.5rem 0.25rem; gap: 0.4rem; } /* Name — after the image, the strongest element on the card. Wraps * naturally (at most two lines) — no reserved blank line. * The selector outranks WooCommerce's `.woocommerce ul.products * li.product h3` (1em size + padding), which would otherwise win. */ .sla-shop ul.products li.product .sla-shop-card__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; margin: 0; padding: 0; overflow: hidden; font-family: var( --sla-font-display ); font-weight: 700; font-size: clamp( 1.375rem, 1.15rem + 0.55vw, 1.6875rem ); line-height: 1.15; letter-spacing: 0.005em; color: var( --sla-peacock-navy ); transition: color 250ms ease; } .sla-shop .sla-shop-card__name-link:hover .sla-shop-card__name, .sla-shop .sla-shop-card__name-link:focus-visible .sla-shop-card__name { color: var( --sla-antique-gold ); } /* Description — two lines at most, longer text ends in an ellipsis. */ .sla-shop .sla-shop-card__significance { font-size: 0.84rem; line-height: 1.5; color: var( --sla-muted-text ); opacity: 1; -webkit-line-clamp: 2; line-clamp: 2; } /* Rating — five stars + count. */ .sla-shop .sla-shop-card__rating { gap: 0.45rem; margin-top: 0.15rem; min-height: 1rem; } .sla-shop .sla-shop-card__stars--layered { position: relative; display: inline-block; line-height: 0; } .sla-shop .sla-shop-card__stars--layered::before { content: none; } .sla-shop .sla-shop-card__stars-base, .sla-shop .sla-shop-card__stars-fill { display: inline-flex; gap: 2px; white-space: nowrap; } .sla-shop .sla-shop-card__stars-base { color: var( --sla-ivory-dark ); } .sla-shop .sla-shop-card__stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #d7a93f; color: color-mix( in srgb, var( --sla-champagne-gold ) 85%, #f0b53a ); filter: drop-shadow( 0 1px 0 rgba( 140, 106, 43, 0.25 ) ); } .sla-shop .sla-shop-card__stars-base svg, .sla-shop .sla-shop-card__stars-fill svg { flex: 0 0 auto; width: 15px; height: 15px; } .sla-shop .sla-shop-card__rating-count { font-size: 0.8125rem; font-weight: 500; line-height: 1; color: var( --sla-muted-text ); opacity: 1; } /* Price — real WooCommerce price in Indian format, or "NA". */ .sla-shop .sla-shop-card__price { margin: 0.1rem 0 0; font-family: var( --sla-font-body ); font-size: 1.1875rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.01em; color: var( --sla-peacock-navy ); } .sla-shop .sla-shop-card__price .woocommerce-Price-currencySymbol { margin-right: 0.12em; } .sla-shop .sla-shop-card__price-na { font-weight: 700; letter-spacing: 0.12em; color: var( --sla-muted-text ); } /* Actions — a single full-width brass ADD TO CART, pinned to the foot. */ .sla-shop .sla-shop-card__actions { display: flex; flex-wrap: wrap; align-items: stretch; margin-top: auto; padding-top: 0.8rem; } /* ADD TO CART — polished brass-and-enamel button. Same size, shape, * type and motion on every card; only the colour varies. * * Button variants — the ONE place these colours are defined. A purely * visual repeating sequence by the product's position in the Shop's * configured product list (sla_shop_card_variant() in inc/shop-card.php * adds .sla-btn-variant-{1-5} to the card), so each product keeps its * colour through sorting, filtering and column changes: * 1 gold · 2 green · 3 maroon · 4 terracotta · 5 teal · repeat. * Each variant sets: light / base / deep stops of the brushed surface, * its edge, the text colour (contrast-checked against the base) and the * shadow tint. Default (no class) = variant 1, champagne gold. */ .sla-shop ul.products li.product.sla-shop-card, .sla-shop ul.products li.product.sla-shop-card.sla-btn-variant-1 { /* 1 — champagne / brass gold (navy text). */ --sla-btn-light: #ddbd7c; --sla-btn-base: #c79a45; --sla-btn-deep: #a97e32; --sla-btn-edge: #9a7229; --sla-btn-text: var( --sla-peacock-navy ); --sla-btn-glow: rgba( 140, 106, 43, 0.55 ); } .sla-shop ul.products li.product.sla-shop-card.sla-btn-variant-2 { /* 2 — deep emerald green (ivory text). */ --sla-btn-light: #3d8263; --sla-btn-base: #2e6f52; --sla-btn-deep: #22563f; --sla-btn-edge: #1d4a36; --sla-btn-text: var( --sla-ivory ); --sla-btn-glow: rgba( 34, 86, 63, 0.55 ); } .sla-shop ul.products li.product.sla-shop-card.sla-btn-variant-3 { /* 3 — refined wine / maroon (ivory text). */ --sla-btn-light: #93404f; --sla-btn-base: #7a2a3b; --sla-btn-deep: #5e1f2d; --sla-btn-edge: #521a27; --sla-btn-text: var( --sla-ivory ); --sla-btn-glow: rgba( 94, 31, 45, 0.55 ); } .sla-shop ul.products li.product.sla-shop-card.sla-btn-variant-4 { /* 4 — warm muted terracotta / rust (ivory text). */ --sla-btn-light: #b0634f; --sla-btn-base: #9a4f40; --sla-btn-deep: #7e3f33; --sla-btn-edge: #6f372c; --sla-btn-text: var( --sla-ivory ); --sla-btn-glow: rgba( 126, 63, 51, 0.55 ); } .sla-shop ul.products li.product.sla-shop-card.sla-btn-variant-5 { /* 5 — deep peacock teal (ivory text). */ --sla-btn-light: #2f8388; --sla-btn-base: #1f6f74; --sla-btn-deep: #175559; --sla-btn-edge: #134a4e; --sla-btn-text: var( --sla-ivory ); --sla-btn-glow: rgba( 23, 85, 89, 0.55 ); } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button { position: relative; isolation: isolate; flex: 1 1 100%; min-width: 0; width: 100%; height: 46px; margin: 0; padding: 0 0.75rem; display: inline-flex; align-items: center; justify-content: center; /* Brushed metal: a fine horizontal grain over a light → base → deep * sweep, lit from above. */ background-color: var( --sla-btn-base ); background-image: repeating-linear-gradient( 90deg, rgba( 255, 255, 255, 0.035 ) 0 1px, transparent 1px 3px ), linear-gradient( 180deg, var( --sla-btn-light ) 0%, var( --sla-btn-base ) 52%, var( --sla-btn-deep ) 100% ); color: var( --sla-btn-text ) !important; border: 1px solid var( --sla-btn-edge ); border-radius: 8px; box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.32 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.16 ), 0 8px 16px -11px var( --sla-btn-glow ); font-family: var( --sla-font-body ); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; line-height: 1.1; text-align: center; text-transform: uppercase; text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.14 ); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: filter 280ms ease, transform 280ms ease, box-shadow 280ms ease; } /* The light (gold) variant carries dark text: an engraved highlight instead. */ .sla-shop ul.products li.sla-btn-variant-1 .sla-shop-card__actions .button { text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.28 ); } /* Light sweep — "polished brass catching light": a soft diagonal band * glides across once every ~7s, staggered card to card, then rests. * Absolutely positioned inside the clipped button, so it never affects * layout. */ .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; z-index: 0; width: 45%; background: linear-gradient( 100deg, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 0.07 ) 30%, rgba( 255, 255, 255, 0.34 ) 50%, rgba( 255, 255, 255, 0.07 ) 70%, rgba( 255, 255, 255, 0 ) 100% ); transform: translateX( -120% ) skewX( -18deg ); pointer-events: none; animation: sla-brass-sweep 7s cubic-bezier( 0.45, 0, 0.25, 1 ) infinite; animation-delay: calc( 1.2s + var( --sla-reveal-delay, 0ms ) * 5 ); } @keyframes sla-brass-sweep { 0% { transform: translateX( -120% ) skewX( -18deg ); } 18%, 100% { transform: translateX( 340% ) skewX( -18deg ); } } /* One-shot sweep for hover / tap. */ @keyframes sla-brass-sweep-once { from { transform: translateX( -120% ) skewX( -18deg ); } to { transform: translateX( 340% ) skewX( -18deg ); } } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button:focus-visible { outline: 2px solid var( --sla-champagne-gold ); outline-offset: 3px; } /* Desktop hover: a touch brighter and richer, 1px lift, deeper shadow, * and the sweep plays again at once. */ @media ( hover: hover ) { .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button:hover, .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button:focus-visible { filter: brightness( 1.07 ) saturate( 1.06 ); transform: translateY( -1px ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.38 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.16 ), 0 14px 22px -12px var( --sla-btn-glow ); } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button:hover::before, .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button:focus-visible::before { animation: sla-brass-sweep-once 900ms cubic-bezier( 0.45, 0, 0.25, 1 ) 1; } } /* Touch screens: no looping — the sweep plays twice after load (slowly * spaced), then rests; a tap plays it once more. */ @media ( hover: none ) { .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button::before { animation-duration: 9s; animation-iteration-count: 2; } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button:active::before { animation: sla-brass-sweep-once 800ms cubic-bezier( 0.45, 0, 0.25, 1 ) 1; } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button:active { filter: brightness( 1.06 ); } } @media ( prefers-reduced-motion: reduce ) { .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button { transition: none; } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button::before, .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button:hover::before, .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button:active::before { display: none; animation: none; } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button:hover, .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button:focus-visible { transform: none; } } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button.loading { opacity: 0.7; } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button.added::after { content: none; } /* WooCommerce appends "View cart" after an AJAX add — its own full row. */ .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions a.added_to_cart { flex: 1 0 100%; order: 3; margin: 0; padding: 0.45rem 0 0; background: none; color: var( --sla-antique-gold ) !important; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; } .sla-shop .sla-shop-card :focus-visible { outline: 2px solid var( --sla-champagne-gold ); outline-offset: 2px; } /* ----------------------------------------------------------------------- * 4. Editorial cards — grid promo + sidebar Vastu card. Deep peacock * field with a soft teal light from above, an inset double hairline gold * frame, the theme's mandala line art, display-serif copy with a gold * line-diamond rule, and a brass CTA. * --------------------------------------------------------------------- */ .sla-shop .sla-shop-editorial { position: relative; isolation: isolate; overflow: hidden; color: var( --sla-ivory ); background-color: var( --sla-peacock-navy ); background-image: radial-gradient( 120% 70% at 50% -10%, color-mix( in srgb, var( --sla-deep-teal ) 70%, transparent ), transparent 70% ), radial-gradient( 90% 50% at 50% 115%, color-mix( in srgb, var( --sla-deep-navy ) 90%, transparent ), transparent 70% ); } .sla-shop .sla-shop-editorial__frame { position: absolute; inset: 9px; z-index: -1; border: 1px solid color-mix( in srgb, var( --sla-champagne-gold ) 45%, transparent ); border-radius: 10px; pointer-events: none; } .sla-shop .sla-shop-editorial__frame::after { content: ''; position: absolute; inset: 4px; border: 1px solid color-mix( in srgb, var( --sla-champagne-gold ) 16%, transparent ); border-radius: 7px; } .sla-shop .sla-shop-editorial__mandala { position: absolute; z-index: -1; top: -6%; right: -2px; width: 42%; height: auto; max-width: none; opacity: 0.2; transform: scaleX( -1 ); pointer-events: none; user-select: none; } .sla-shop .sla-shop-editorial__eyebrow { margin: 0 0 0.7rem; font-family: var( --sla-font-body ); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var( --sla-light-gold ); } .sla-shop .sla-shop-editorial em { font-style: normal; color: var( --sla-light-gold ); } .sla-shop .sla-shop-editorial__rule { display: flex; align-items: center; gap: 0.45rem; width: 88px; margin: 0.85rem 0 0.9rem; color: var( --sla-champagne-gold ); } .sla-shop .sla-shop-editorial__rule::before, .sla-shop .sla-shop-editorial__rule::after { content: ''; flex: 1 1 auto; height: 1px; background: currentColor; opacity: 0.8; } .sla-shop .sla-shop-editorial__rule::after { opacity: 0.35; } .sla-shop .sla-shop-editorial__rule i { flex: 0 0 auto; width: 6px; height: 6px; background: currentColor; transform: rotate( 45deg ); } .sla-shop .sla-shop-editorial .sla-shop-editorial__cta { display: inline-flex; align-items: center; gap: 0.55rem; height: 42px; padding: 0 1.15rem; background: linear-gradient( 180deg, color-mix( in srgb, var( --sla-light-gold ) 70%, var( --sla-champagne-gold ) ), var( --sla-champagne-gold ) ); color: var( --sla-peacock-navy ); border: 1px solid var( --sla-light-gold ); border-radius: 8px; box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.35 ), 0 10px 20px -12px rgba( 0, 0, 0, 0.6 ); font-family: var( --sla-font-body ); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background 250ms ease, transform 250ms ease; } .sla-shop .sla-shop-editorial .sla-shop-editorial__cta svg { width: 14px; height: 14px; transition: transform 250ms ease; } .sla-shop .sla-shop-editorial .sla-shop-editorial__cta:hover, .sla-shop .sla-shop-editorial .sla-shop-editorial__cta:focus-visible { background: var( --sla-light-gold ); transform: translateY( -2px ); } .sla-shop .sla-shop-editorial .sla-shop-editorial__cta:hover svg, .sla-shop .sla-shop-editorial .sla-shop-editorial__cta:focus-visible svg { transform: translateX( 4px ); } .sla-shop .sla-shop-editorial .sla-shop-editorial__cta:focus-visible { outline: 2px solid var( --sla-light-gold ); outline-offset: 3px; } /* Grid promo — one grid cell (11 products + promo = an even 3 × 4 / * 2 × 6 grid). Composed on a centred axis inside an arched double gold * frame (a temple-window silhouette): lotus crest › flanked eyebrow › * three-line heading › line-diamond rule › measured paragraph › brass * CTA, vertically centred, with the gold half-mandala mirrored at both * lower corners for balance. Depth comes from a teal glow above, a deeper * navy pool below and a faint diagonal jaali lattice. */ .sla-shop ul.products li.sla-shop-card--promo { position: relative; container: sla-promo / inline-size; min-height: 340px; padding: 0; background-color: var( --sla-peacock-navy ); background-image: radial-gradient( 95% 55% at 50% 0%, color-mix( in srgb, var( --sla-deep-teal ) 70%, transparent ), transparent 72% ), radial-gradient( 85% 45% at 50% 108%, var( --sla-deep-navy ), transparent 75% ), repeating-linear-gradient( 45deg, rgba( 217, 184, 117, 0.05 ) 0 1px, transparent 1px 15px ), repeating-linear-gradient( -45deg, rgba( 217, 184, 117, 0.05 ) 0 1px, transparent 1px 15px ); border: 1px solid color-mix( in srgb, var( --sla-champagne-gold ) 38%, var( --sla-peacock-navy ) ); border-radius: var( --sla-card-radius ); overflow: hidden; box-shadow: 0 22px 40px -28px rgba( 6, 47, 58, 0.85 ); } .sla-shop ul.products li.sla-shop-card--promo:hover { transform: none; } /* Out of flow: the card takes the height the product cards give its row. */ .sla-shop .sla-shop-promo { position: absolute; inset: 0; isolation: isolate; display: flex; align-items: center; justify-content: center; padding: 3.25rem 1.75rem 2.5rem; text-align: center; color: var( --sla-ivory ); } .sla-shop .sla-shop-promo__frame { position: absolute; inset: 12px; z-index: -1; border: 1px solid color-mix( in srgb, var( --sla-champagne-gold ) 52%, transparent ); border-radius: 50% 50% 10px 10px / 21% 21% 10px 10px; pointer-events: none; } .sla-shop .sla-shop-promo__frame::after { content: ''; position: absolute; inset: 5px; border: 1px solid color-mix( in srgb, var( --sla-champagne-gold ) 18%, transparent ); border-radius: inherit; } .sla-shop .sla-shop-promo__mandala { position: absolute; z-index: -2; bottom: -6%; width: 36%; height: auto; max-width: none; opacity: 0.17; pointer-events: none; user-select: none; } .sla-shop .sla-shop-promo__mandala--left { left: 0; } .sla-shop .sla-shop-promo__mandala--right { right: 0; transform: scaleX( -1 ); } .sla-shop .sla-shop-promo__content { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 16rem; } .sla-shop .sla-shop-promo__lotus { width: 46px; height: auto; margin-bottom: 0.85rem; color: var( --sla-light-gold ); } .sla-shop .sla-shop-promo__eyebrow { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.95rem; font-family: var( --sla-font-body ); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var( --sla-light-gold ); } .sla-shop .sla-shop-promo__eyebrow::before, .sla-shop .sla-shop-promo__eyebrow::after { content: ''; width: 18px; height: 1px; background: currentColor; opacity: 0.7; } .sla-shop .sla-shop-promo__heading { margin: 0; font-family: var( --sla-font-display ); font-weight: 500; font-size: clamp( 1.2rem, 10.4cqi, 2.05rem ); line-height: 1.12; color: var( --sla-ivory ); } .sla-shop .sla-shop-promo__heading em { font-style: italic; font-weight: 600; color: var( --sla-light-gold ); } .sla-shop .sla-shop-promo__rule { display: flex; align-items: center; gap: 0.5rem; width: 84px; margin: 1.05rem 0 1rem; color: var( --sla-champagne-gold ); } .sla-shop .sla-shop-promo__rule::before, .sla-shop .sla-shop-promo__rule::after { content: ''; flex: 1 1 auto; height: 1px; background: currentColor; opacity: 0.75; } .sla-shop .sla-shop-promo__rule i { flex: 0 0 auto; width: 6px; height: 6px; background: currentColor; transform: rotate( 45deg ); } .sla-shop .sla-shop-promo__sub { max-width: 23ch; margin: 0 0 1.4rem; font-family: var( --sla-font-body ); font-size: 0.84rem; line-height: 1.6; color: color-mix( in srgb, var( --sla-ivory ) 82%, transparent ); opacity: 1; } .sla-shop .sla-shop-promo__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; height: 44px; padding: 0 1.35rem; background: linear-gradient( 180deg, color-mix( in srgb, var( --sla-light-gold ) 70%, var( --sla-champagne-gold ) ), var( --sla-champagne-gold ) ); color: var( --sla-peacock-navy ); border: 1px solid var( --sla-light-gold ); border-radius: 8px; box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.35 ), 0 12px 22px -12px rgba( 0, 0, 0, 0.6 ); font-family: var( --sla-font-body ); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background 250ms ease, transform 250ms ease; } .sla-shop .sla-shop-promo__cta svg { width: 14px; height: 14px; transition: transform 250ms ease; } .sla-shop .sla-shop-promo__cta:hover, .sla-shop .sla-shop-promo__cta:focus-visible { background: var( --sla-light-gold ); transform: translateY( -2px ); } .sla-shop .sla-shop-promo__cta:hover svg, .sla-shop .sla-shop-promo__cta:focus-visible svg { transform: translateX( 4px ); } .sla-shop .sla-shop-promo__cta:focus-visible { outline: 2px solid var( --sla-light-gold ); outline-offset: 3px; } /* Narrow cells (tablet 3-up, phones 2-up): same composition, tighter. */ @container sla-promo ( max-width: 240px ) { .sla-shop .sla-shop-promo { padding: 2.6rem 1rem 1.9rem; } .sla-shop .sla-shop-promo__frame { inset: 8px; } .sla-shop .sla-shop-promo__lotus { width: 36px; margin-bottom: 0.6rem; } .sla-shop .sla-shop-promo__eyebrow { margin-bottom: 0.7rem; font-size: 0.625rem; letter-spacing: 0.2em; } .sla-shop .sla-shop-promo__eyebrow::before, .sla-shop .sla-shop-promo__eyebrow::after { display: none; } .sla-shop .sla-shop-promo__eyebrow { white-space: nowrap; } .sla-shop .sla-shop-promo__rule { width: 64px; margin: 0.75rem 0 0.7rem; } .sla-shop .sla-shop-promo__sub { margin-bottom: 1rem; font-size: 0.75rem; line-height: 1.5; } .sla-shop .sla-shop-promo__cta { height: 38px; padding: 0 0.85rem; font-size: 0.625rem; letter-spacing: 0.1em; } .sla-shop .sla-shop-promo__cta svg { display: none; } .sla-shop .sla-shop-promo__mandala { width: 44%; } } @container sla-promo ( max-width: 160px ) { .sla-shop .sla-shop-promo { padding: 1.9rem 0.7rem 1.3rem; } .sla-shop .sla-shop-promo__lotus { width: 28px; margin-bottom: 0.4rem; } .sla-shop .sla-shop-promo__eyebrow { margin-bottom: 0.5rem; font-size: 0.5625rem; letter-spacing: 0.16em; } .sla-shop .sla-shop-promo__heading { font-size: 1.05rem; } .sla-shop .sla-shop-promo__rule { width: 52px; margin: 0.55rem 0 0.5rem; } .sla-shop .sla-shop-promo__sub { margin-bottom: 0.75rem; font-size: 0.6875rem; line-height: 1.45; } .sla-shop .sla-shop-promo__cta { width: 100%; height: 34px; padding: 0 0.4rem; font-size: 0.5625rem; letter-spacing: 0.06em; } } /* Sidebar Vastu card. */ .sla-shop .sla-shop-sidebar__promo.sla-shop-editorial { margin-top: 1.25rem; padding: 1.75rem 1.5rem 1.6rem; border-radius: var( --sla-card-radius ); border: 1px solid color-mix( in srgb, var( --sla-champagne-gold ) 35%, var( --sla-peacock-navy ) ); box-shadow: 0 20px 36px -26px rgba( 7, 59, 76, 0.75 ); } .sla-shop .sla-shop-sidebar__promo .sla-shop-editorial__mandala { top: auto; bottom: -12%; width: 46%; opacity: 0.16; } .sla-shop .sla-shop-sidebar__promo-title { margin: 0; font-family: var( --sla-font-display ); font-weight: 500; font-size: 1.45rem; line-height: 1.15; color: var( --sla-ivory ); } .sla-shop .sla-shop-sidebar__promo-text { margin: 0 0 1.15rem; font-size: 0.8125rem; line-height: 1.55; color: color-mix( in srgb, var( --sla-ivory ) 82%, transparent ); opacity: 1; } /* ----------------------------------------------------------------------- * 5. Filter sidebar * --------------------------------------------------------------------- */ .sla-shop .sla-shop-sidebar { flex: 0 0 272px; width: 272px; } .sla-shop .sla-shop-sidebar__panel { padding: 1.35rem 1.35rem 1.5rem; background: #fff; border: 1px solid var( --sla-ivory-dark ); border-radius: var( --sla-card-radius ); box-shadow: 0 10px 24px -22px rgba( 7, 59, 76, 0.45 ); } .sla-shop .sla-shop-sidebar__head { align-items: center; margin-bottom: 0.35rem; padding-bottom: 0.9rem; border-bottom: 1px solid var( --sla-ivory-dark ); } .sla-shop .sla-shop-sidebar__title { font-weight: 600; font-size: 1.3rem; line-height: 1.2; } .sla-shop .sla-shop-sidebar__clear { margin-left: auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var( --sla-antique-gold ); } .sla-shop .sla-shop-sidebar__close { display: none; } .sla-shop .sla-shop-filter { padding-block: 0.95rem; border-bottom: 1px solid color-mix( in srgb, var( --sla-ivory-dark ) 75%, transparent ); } .sla-shop .sla-shop-filter:last-of-type { border-bottom: 0; } .sla-shop .sla-shop-filter__toggle { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var( --sla-peacock-navy ); } .sla-shop .sla-shop-filter__toggle:focus-visible { outline: 2px solid var( --sla-champagne-gold ); outline-offset: 4px; border-radius: 2px; } .sla-shop .sla-shop-filter__chev { color: var( --sla-champagne-gold ); } .sla-shop .sla-shop-filter__body-inner { padding-top: 0.2rem; } .sla-shop .sla-shop-filter.is-open .sla-shop-filter__body-inner { padding-top: 0.55rem; } .sla-shop .sla-shop-check { gap: 0.65rem; padding-block: 0.32rem; font-size: 0.84rem; font-weight: 500; color: var( --sla-deep-navy ); transition: color 200ms ease; } .sla-shop .sla-shop-check:hover { color: var( --sla-antique-gold ); } .sla-shop .sla-shop-check input { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; width: 17px; height: 17px; margin: 0; background: #fff; border: 1px solid var( --sla-gold-line ); border-radius: 4px; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease; } .sla-shop .sla-shop-check input::after { content: ''; width: 9px; height: 5px; margin-top: -2px; border: solid var( --sla-ivory ); border-width: 0 0 2px 2px; transform: rotate( -45deg ) scale( 0 ); transition: transform 160ms ease; } .sla-shop .sla-shop-check input:checked { background: var( --sla-peacock-navy ); border-color: var( --sla-peacock-navy ); } .sla-shop .sla-shop-check input:checked::after { transform: rotate( -45deg ) scale( 1 ); } .sla-shop .sla-shop-check input:focus-visible { outline: 2px solid var( --sla-champagne-gold ); outline-offset: 2px; } .sla-shop .sla-shop-check em { min-width: 1.6rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var( --sla-ivory ); font-size: 0.6875rem; font-weight: 600; text-align: center; color: var( --sla-muted-text ); opacity: 1; } /* Material: a single fixed value — shown as a quiet static row with a * brass dot instead of an inert checkbox. */ .sla-shop .sla-shop-check--static span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 0.6rem; border-radius: 50%; background: var( --sla-champagne-gold ); vertical-align: 1px; } .sla-shop .sla-shop-check--static:hover { color: var( --sla-deep-navy ); } .sla-shop .sla-shop-filter__body-inner.sla-shop-filter__body--price { gap: 0.6rem; } .sla-shop .sla-shop-filter__body--price label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var( --sla-muted-text ); opacity: 1; } .sla-shop .sla-shop-filter__body--price input { height: 40px; padding: 0 0.7rem; font-size: 0.84rem; color: var( --sla-peacock-navy ); background: var( --sla-warm-cream ); border: 1px solid var( --sla-ivory-dark ); border-radius: 8px; transition: border-color 200ms ease, box-shadow 200ms ease; } .sla-shop .sla-shop-filter__body--price input:focus { outline: none; border-color: var( --sla-champagne-gold ); box-shadow: 0 0 0 3px color-mix( in srgb, var( --sla-champagne-gold ) 18%, transparent ); } .sla-shop .sla-shop-sidebar__actions { padding-top: 0.5rem; } .sla-shop .sla-shop-sidebar__apply { height: 46px; margin: 0; padding: 0 1rem; background: var( --sla-peacock-navy ); color: var( --sla-ivory ); border: 1px solid var( --sla-peacock-navy ); border-radius: 8px; font-size: 0.75rem; letter-spacing: 0.14em; box-shadow: 0 10px 20px -14px rgba( 7, 59, 76, 0.8 ); } .sla-shop .sla-shop-sidebar__apply:hover, .sla-shop .sla-shop-sidebar__apply:focus-visible { background: var( --sla-deep-navy ); box-shadow: inset 0 -2px 0 var( --sla-champagne-gold ), 0 10px 20px -14px rgba( 7, 59, 76, 0.8 ); } /* ----------------------------------------------------------------------- * 6. Responsive * --------------------------------------------------------------------- */ @media ( max-width: 1200px ) and ( min-width: 901px ) { .sla-shop .sla-shop-sidebar { flex-basis: 240px; width: 240px; } } /* Tablet / mobile: the sidebar becomes an off-canvas drawer opened from * the toolbar's Filters button (assets/js/shop.js). */ @media ( max-width: 900px ) { .sla-shop .sla-shop-toolbar__filter { display: inline-flex; } .sla-shop .sla-shop-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 100001; width: min( 380px, 88vw ); flex: none; display: flex; flex-direction: column; padding: 0; background: var( --sla-warm-cream ); overflow: hidden; visibility: hidden; transform: translateX( -105% ); transition: transform 320ms ease, visibility 0s linear 320ms; box-shadow: 24px 0 48px -16px rgba( 6, 47, 58, 0.35 ); } .sla-shop .sla-shop-sidebar.is-open { visibility: visible; transform: translateX( 0 ); transition: transform 320ms ease, visibility 0s; } .sla-shop .sla-shop-sidebar__panel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .sla-shop .sla-shop-sidebar__head { flex: 0 0 auto; margin: 0; padding: 1.1rem 1.25rem; background: #fff; border-bottom: 1px solid var( --sla-ivory-dark ); } .sla-shop .sla-shop-sidebar__close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; margin-left: 0.25rem; padding: 0; background: var( --sla-ivory ); border: 1px solid var( --sla-ivory-dark ); border-radius: 50%; color: var( --sla-peacock-navy ); cursor: pointer; } .sla-shop .sla-shop-sidebar__head .sla-shop-sidebar__clear + .sla-shop-sidebar__close { margin-left: 0.75rem; } .sla-shop .sla-shop-sidebar__close svg { width: 16px; height: 16px; } .sla-shop .sla-shop-sidebar__head .sla-shop-sidebar__title { margin-right: auto; } .sla-shop .sla-shop-filter-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .sla-shop .sla-shop-filter-form > .sla-shop-filter { padding-inline: 1.25rem; } .sla-shop .sla-shop-filter-form { overflow-y: auto; overscroll-behavior: contain; } .sla-shop .sla-shop-sidebar__actions { position: sticky; bottom: 0; margin-top: auto; padding: 0.9rem 1.25rem calc( 0.9rem + env( safe-area-inset-bottom, 0px ) ); background: #fff; border-top: 1px solid var( --sla-ivory-dark ); } .sla-shop .sla-shop-sidebar__promo.sla-shop-editorial { display: none; } body.sla-shop-filters-open { overflow: hidden; } body.sla-shop-filters-open .sla-shop-sidebar__scrim { z-index: 100000; background: rgba( 6, 47, 58, 0.45 ); -webkit-backdrop-filter: blur( 2px ); backdrop-filter: blur( 2px ); } } @media ( max-width: 767px ) { .sla-shop { --sla-card-radius: 12px; --sla-card-pad: 7px; } /* Results line on its own row; FILTERS and the sort control share the * next row in two equal halves that always fit the viewport. */ .sla-shop .sla-shop-toolbar { gap: 0.6rem; } .sla-shop .sla-shop-toolbar .woocommerce-result-count { flex: 1 0 100%; order: 0; font-size: 0.75rem; } .sla-shop .sla-shop-toolbar__filter, .sla-shop .sla-shop-toolbar form.woocommerce-ordering { flex: 0 0 calc( 50% - 0.3rem ); width: calc( 50% - 0.3rem ); min-width: 0; } .sla-shop .sla-shop-toolbar__filter { padding: 0 0.75rem; } .sla-shop .sla-shop-toolbar select.orderby, .sla-shop .sla-sort__button { width: 100%; min-width: 0; } .sla-shop .sla-sort__button { padding: 0 0.8rem 0 0.95rem; font-size: 0.75rem; } .sla-shop ul.products { gap: 0.65rem; } .sla-shop ul.products li.product .sla-shop-card__media .sla-shop-card__pill { top: 0.4rem; left: 0.4rem; gap: 0.3rem; max-width: calc( 100% - 0.8rem ); padding: 0.26rem 0.55rem 0.26rem 0.45rem; font-size: 0.6rem; letter-spacing: 0.02em; } .sla-shop ul.products li.product .sla-shop-card__media .sla-shop-card__pill::before { width: 5px; height: 5px; } .sla-shop .sla-shop-card__body { padding: 0.75rem 0.25rem 0.1rem; gap: 0.3rem; } .sla-shop ul.products li.product .sla-shop-card__name { font-size: 1.1875rem; } .sla-shop .sla-shop-card__significance { font-size: 0.75rem; } .sla-shop .sla-shop-card__stars-base svg, .sla-shop .sla-shop-card__stars-fill svg { width: 12px; height: 12px; } .sla-shop .sla-shop-card__rating { gap: 0.3rem; } .sla-shop .sla-shop-card__rating-count { font-size: 0.72rem; } .sla-shop .sla-shop-card__price { font-size: 1.0625rem; } .sla-shop .sla-shop-card__actions { padding-top: 0.6rem; } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button { height: 40px; padding: 0 0.4rem; font-size: 0.6875rem; letter-spacing: 0.1em; border-radius: 7px; } } /* ----------------------------------------------------------------------- * Card-width adjustments (container queries): the button copy adapts to * the width the card actually has, whatever the viewport/sidebar mix. * --------------------------------------------------------------------- */ .sla-shop ul.products li.product.sla-shop-card { container: sla-card / inline-size; } @container sla-card ( max-width: 150px ) { .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button { font-size: 0.65rem; letter-spacing: 0.06em; } /* Smallest cards: a slimmer tag, so even the longest value stays a * small corner badge rather than covering the product. */ .sla-shop ul.products li.product .sla-shop-card__media .sla-shop-card__pill { top: 0.3rem; left: 0.3rem; max-width: calc( 100% - 0.6rem ); padding: 0.2rem 0.45rem; font-size: 0.5625rem; letter-spacing: 0; line-height: 1.2; } .sla-shop ul.products li.product .sla-shop-card__media .sla-shop-card__pill::before { display: none; } } /* Smallest phones: the sort control keeps its full label. */ @media ( max-width: 359px ) { .sla-shop .sla-sort__button { gap: 0.35rem; padding: 0 0.6rem 0 0.75rem; font-size: 0.6875rem; } .sla-shop .sla-sort__chevron { width: 12px; height: 12px; } .sla-shop .sla-shop-toolbar__filter { gap: 0.35rem; padding: 0 0.5rem; letter-spacing: 0.08em; } } /* ----------------------------------------------------------------------- * ADD TO CART feedback (assets/js/shop.js): "Adding…" while the request * runs (button locked), then "Added ✓" briefly, then back to ADD TO CART. * The label is drawn over the button (::after), so its size never * changes; the shine (::before) keeps running underneath. * --------------------------------------------------------------------- */ .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button.is-adding, .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button.is-added { color: transparent !important; text-shadow: none; } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button.is-adding { pointer-events: none; cursor: progress; } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button.is-adding::after, .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button.is-added::after { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; margin: 0; color: var( --sla-btn-text ); font: inherit; letter-spacing: inherit; text-transform: uppercase; animation: none; } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button.is-adding::after { content: 'Adding…'; opacity: 0.85; } .sla-shop ul.products li.product.sla-shop-card .sla-shop-card__actions .button.is-added::after { content: 'Added \2713'; } /* Buttons are /