.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } [data-cart-promo-status][hidden] { display: none !important; } .editorial-shadow { box-shadow: 0 10px 30px -15px rgba(57, 0, 9, 0.1); } .glass-overlay { background: rgba(251, 249, 244, 0.85); backdrop-filter: blur(8px); } .material-symbols-wght-200 { font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24; } .material-symbols-filled { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; } body { background-color: #fbf9f4; scroll-behavior: smooth; } @media (prefers-reduced-motion: no-preference) { main .reveal-item, body > footer .reveal-item { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } main .reveal-item.reveal-visible, body > footer .reveal-item.reveal-visible { opacity: 1; transform: translateY(0); will-change: auto; } } /* -------------------------------------------------------------- */ /* Shop — product card image (uniform 3:4 frame on /shop) */ /* -------------------------------------------------------------- */ .shop-card__media { display: block; width: 100%; aspect-ratio: 3 / 4; position: relative; overflow: hidden; background-color: #f0eee9; /* surface-container */ } .shop-card__media .shop-card__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; } /* -------------------------------------------------------------- */ /* Shop — luxury overlay filter sidebar */ /* */ /* The wrapper is portaled to by shop.js, but we also */ /* defensively force it out of any inherited containing block */ /* so it can NEVER affect the page layout, even before JS runs. */ /* -------------------------------------------------------------- */ .shop-filter-portal { position: fixed !important; inset: 0 !important; width: 100vw; height: 100vh; height: 100dvh; margin: 0; padding: 0; contain: layout style; overflow: hidden; /* Keep the portal renderable during the close transition, then snap it to `hidden` so nothing inside can leak. */ transition: visibility 0s linear 0s; } .shop-filter-portal[aria-hidden='true'] { pointer-events: none; visibility: hidden; transition: visibility 0s linear 500ms; } .shop-filter-portal[aria-hidden='false'] { visibility: visible; } /* Backdrop is painted first; keep the drawer above it so category/sort links receive clicks. */ .shop-filter-portal [data-shop-filter-backdrop] { z-index: 0; } .shop-filter-aside { z-index: 1; /* Closed = off-screen left. Use translate3d for sub-pixel-safe GPU layer and an extra 1px to defeat any rounding that could expose a hairline. */ transform: translate3d(-100%, 0, 0) translateX(-1px); box-shadow: none; transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease-out; will-change: transform; backface-visibility: hidden; } .shop-filter-portal[aria-hidden='false'] .shop-filter-aside { transform: translate3d(0, 0, 0); box-shadow: 24px 0 60px rgba(0, 0, 0, 0.08); transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 350ms ease-in 200ms; } /* -------------------------------------------------------------- */ /* Shop — luxury dual range price slider */ /* Geometry: container 24px, track 1px (centered), thumb 14px */ /* WebKit: thumb anchors to the top of the runnable track, so we */ /* push it down by (container - thumb) / 2 = 5px. */ /* Firefox: thumb is auto-centered in the track. */ /* -------------------------------------------------------------- */ .shop-range { position: relative; height: 24px; padding: 0 7px; } .shop-range__track { position: absolute; left: 7px; right: 7px; top: 50%; transform: translateY(-50%); height: 1px; background: rgba(57, 0, 9, 0.18); pointer-events: none; } .shop-range__fill { position: absolute; top: 0; bottom: 0; background: #390009; pointer-events: none; } .shop-range__input { position: absolute; top: 0; left: 0; width: 100%; height: 24px; background: transparent; appearance: none; -webkit-appearance: none; pointer-events: none; outline: none; margin: 0; } .shop-range__input::-webkit-slider-runnable-track { background: transparent; height: 24px; border: 0; } .shop-range__input::-moz-range-track { background: transparent; height: 24px; border: 0; } .shop-range__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; height: 14px; width: 14px; margin-top: 5px; border-radius: 9999px; background: #390009; border: 2px solid #fbf9f4; box-shadow: 0 1px 3px rgba(57, 0, 9, 0.25); pointer-events: auto; cursor: pointer; transition: transform 0.2s ease; } .shop-range__input::-webkit-slider-thumb:hover, .shop-range__input::-webkit-slider-thumb:active { transform: scale(1.1); } .shop-range__input::-moz-range-thumb { box-sizing: border-box; height: 14px; width: 14px; border-radius: 9999px; background: #390009; border: 2px solid #fbf9f4; box-shadow: 0 1px 3px rgba(57, 0, 9, 0.25); pointer-events: auto; cursor: pointer; transition: transform 0.2s ease; } .shop-range__input::-moz-range-thumb:hover, .shop-range__input::-moz-range-thumb:active { transform: scale(1.1); } .shop-range__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(57, 0, 9, 0.18); } .shop-range__input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(57, 0, 9, 0.18); } /* -------------------------------------------------------------- */ /* Mega-search — product card titles (strict 2 lines) */ /* -------------------------------------------------------------- */ #mega-search-products-grid .mega-search-product__title { margin: 0; height: 2.375rem; /* 14px × 1.35 line-height × 2 lines */ max-height: 2.375rem; overflow: hidden; } #mega-search-products-grid .mega-search-product__title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-family: Manrope, system-ui, sans-serif; font-size: 0.875rem; line-height: 1.35; font-weight: 400; color: inherit; text-decoration: none; } #mega-search-products-grid .mega-search-product__title a:hover { color: #58111a; }