/* --------------------------------------------------------------------------- Metric-matched fallbacks. 149 font-family declarations in this file named only the webfont, with no fallback at all. Until the webfont arrives the browser therefore used its own default — Times on Windows Chrome — whose metrics are about 11% narrower than DM Sans. Every text run reflowed on swap, and on a product page that pushed the last breadcrumb onto a second line and dropped everything below it by 26px: a single layout shift of 0.380, which was the entire CLS for that page. size-adjust makes the fallback occupy the same width as the real face, so the swap changes the glyphs without moving anything. The percentages are measured against the actual fonts, not taken from a table. No fixed heights are involved, so nothing can clip. --------------------------------------------------------------------------- */ @font-face{ font-family:"DM Sans Fallback"; src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans"); /* Measured, not tabulated: Arial at 100% renders the reference string at 49.45px where DM Sans renders 51px, so the fallback is scaled up to match. */ size-adjust:103.13%; font-weight:100 900; font-style:normal; ascent-override:99%; descent-override:31%; line-gap-override:0%; } @font-face{ font-family:"Cormorant Fallback"; src:local("Georgia"),local("Times New Roman"),local("Liberation Serif"); size-adjust:103.97%; font-weight:100 900; font-style:normal; ascent-override:92%; descent-override:29%; line-gap-override:0%; } /* ===== BRAND TOKENS ===== */ :root{ --ivory:#FAF7F1; --pearl:#F2ECE1; --ink:#1C1A17; --pounamu:#21503D; --gold:#C2A15B; --gold-cta:#B68A3E; --gold-soft:#E9DCBE; --garnet:#8E2B3A; --muted:#6F685C; --line:#E4DCCD; --card-info:#F9F5EE; --maxw:1320px; --ease:cubic-bezier(.22,.61,.36,1); /* black header */ --h-bg:#000000; --h-text:#FAF7F1; --h-muted:rgba(250,247,241,.62); --h-line:rgba(233,220,190,.16); --h-field:#1B1A17; --h-field-line:rgba(233,220,190,.22); --h-accent:#C2A15B; --h-hover:rgba(255,255,255,.06); /* drawer (mobile) stays dark so the white logo shows */ --d-bg:#1C1A17; --d-sub:#211E18; --d-text:#FAF7F1; --d-muted:rgba(250,247,241,.6); --d-line:rgba(233,220,190,.14); --logo:url("../img/logo.png"); } *{box-sizing:border-box;} /* * The `hidden` attribute wins over any layout rule. * * The browser's own [hidden]{display:none} is a UA rule, so ANY author rule * that sets display on the same element beats it. `.pdp-buy{display:flex}` did * exactly that: the variation Notify Me block is rendered with `hidden` and * un-hidden by product.js only for a sold-out variation, but the attribute had * never had any effect, so every variable product showed "Notify Me When * Available" underneath an enabled Add to Cart — 62 products in this * catalogue. Two more elements were silently broken the same way * (.plp-more__auto, .plp-more__status, both display:flex and both rendered * hidden). * * Five components had already worked around this individually * (.ac-panel[hidden], .cart-drawer[hidden], .cs-modal[hidden], * .co-signin__panel[hidden], .qv-modal[hidden]). One rule here replaces the * pattern and stops the next component rediscovering it. * * `!important` is deliberate and is what every modern reset does: `hidden` * means hidden, and no layout rule may quietly override a state the markup and * the accessibility tree both treat as absolute. To show something, remove the * attribute — never restyle around it. */ [hidden]{display:none !important;} html{-webkit-text-size-adjust:100%;} body{margin:0;background:var(--ivory);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif; font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;} :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px;} .icon{width:22px;height:22px;display:inline-block;fill:none;stroke:currentColor;stroke-width:1.75; stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;} /* ================= HEADER ================= */ .header{position:relative;z-index:80;} /* ---- Top bar (WHITE) ---- */ .topbar{background:#FFFFFF;color:var(--ink);border-bottom:1px solid var(--line); font-family:"Inter",system-ui,sans-serif;font-size:.8rem;letter-spacing:.01em;} .topbar .row{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:40px;display:flex;align-items:center;justify-content:space-between;gap:18px;} .topbar a.phone{display:inline-flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap;color:var(--ink);flex:none;} .topbar a.phone .icon{width:15px;height:15px;color:var(--gold-cta);} .topbar a.phone .phone-ic{width:17px;height:17px;fill:var(--gold-cta);flex:none;} .topbar .promo{flex:1;text-align:center;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--muted);min-width:0;} .topbar .promo .icon{width:16px;height:16px;color:var(--gold-cta);flex:none;} .topbar .promo .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .topbar .promo b{color:var(--ink);font-weight:700;} .topbar .afterpay{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--muted);font-size:.74rem;flex:none;} .topbar .afterpay .ap{background:#b2fce4;color:#06382a;font-weight:700;font-size:.74rem;letter-spacing:-.01em;padding:3px 9px;border-radius:4px;} .topbar .tb-left{display:flex;align-items:center;gap:13px;flex:none;} .topbar .tb-promo{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:600;white-space:nowrap;} .topbar .tb-promo .icon{width:15px;height:15px;color:var(--gold-cta);flex:none;} .topbar a.tb-promo{transition:color .2s;} .topbar a.tb-promo:hover{color:var(--gold-cta);} .topbar .tb-div{width:1px;height:13px;background:var(--line);flex:none;} .topbar .tb-rotator{display:none;} /* ---- Main bar (BLACK) : logo left · search centre · actions right ---- */ .mainbar{background:var(--h-bg);color:var(--h-text);border-bottom:1px solid var(--h-line);transition:padding .35s var(--ease);} .mainbar .row{max-width:var(--maxw);margin:0 auto;padding:18px 22px;display:grid; grid-template-columns:auto 1fr auto;align-items:center;gap:22px;transition:padding .35s var(--ease);} .header.shrink .mainbar .row{padding:11px 22px;} .logo{justify-self:start;display:flex;align-items:center;} .logo .logo-img{display:block;width:184px;height:46px;background:var(--logo) no-repeat left center/contain;transition:.35s var(--ease);} .header.shrink .logo .logo-img{width:150px;height:38px;} /* The header search field. Qualified with `form.` deliberately. WordPress puts the class `search` on for every search-results page, so an unqualified `.search` styled the document body as a search pill: it inherited display:flex and this max-width, which collapsed the whole results page to 440px — and under the 860px breakpoint below, `display:none`, which blanked the page outright on phones. The descendant rules leaked just as far, stripping the border and background from every input on the page and resizing every .icon. */ form.search{justify-self:center;display:flex;align-items:center;gap:10px;background:var(--h-field); border:1px solid var(--h-field-line);border-radius:40px;padding:11px 18px;max-width:440px;width:100%;transition:.25s;} form.search:focus-within{border-color:var(--h-accent);box-shadow:0 0 0 3px rgba(194,162,91,.18);} form.search .icon{width:18px;height:18px;color:var(--h-muted);flex:none;} form.search input{border:none;background:none;outline:none;font-size:.9rem;width:100%;color:var(--h-text);} form.search input::placeholder{color:var(--h-muted);} .actions{justify-self:end;display:flex;align-items:center;gap:4px;} .act{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 11px;border-radius:4px; font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--h-text);transition:color .2s;min-width:46px;} .act:hover{color:var(--h-accent);} .act .icon{width:21px;height:21px;} .act .count{position:absolute;top:2px;right:7px;background:var(--gold);color:#1C1A17;font-size:.55rem;font-weight:700; min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;} .burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:var(--h-text);} /* ---- NAV (BLACK) ---- */ .nav{background:var(--h-bg);position:sticky;top:0;z-index:80;box-shadow:0 10px 30px -22px rgba(0,0,0,.45);} .nav-row{max-width:var(--maxw);margin:0 auto;padding:0 22px;} .nav-list{display:flex;justify-content:center;list-style:none;margin:0;padding:0;gap:2px;} .nav-list>li{display:flex;} .nav-list>li>a,.nav-list>li>.nav-trigger{display:flex;align-items:center;gap:7px;padding:15px 17px; font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--h-text);position:relative;} .nav-list>li>a .ni,.nav-list>li>.nav-trigger .ni{width:17px;height:17px;color:var(--h-accent);stroke-width:1.9;} .nav-list>li>a::after,.nav-list>li>.nav-trigger::after{content:"";position:absolute;left:17px;right:17px;bottom:9px; height:1.5px;background:var(--h-accent);transform:scaleX(0);transform-origin:center;transition:transform .3s var(--ease);} .nav-list .chev{width:13px;height:13px;color:var(--h-muted);transition:transform .3s var(--ease),color .25s var(--ease);} /* ---- the lit parent ---- One state, four ways to earn it: the pointer is on the item, the pointer is inside its open panel, the panel was opened by keyboard or click, or the customer is on that section's page. The second is the one that used to fail, and it fails silently: the panel is a child of its `
  • `, so `li:hover` stays true while the cursor is inside it — but only while the two actually touch. The panel is `top:100%` against the bar, so there is no gap for the pointer to cross, and the transparent positioning layer is `pointer-events:none` so it cannot hold the highlight open over the whole width of the page. `current-menu-ancestor` and `current-menu-parent` come with it, so a customer three levels into Rings still sees Jewellery lit. Those classes are allow-listed onto the item by Stonex_Walker_Mega — core assigns them, and the walker used to drop them along with everything else. */ .nav-list>li:hover>a, .nav-list>li:hover>.nav-trigger, .nav-list>li.is-open>a, .nav-list>li.is-open>.nav-trigger, .nav-list>li.current-menu-item>a, .nav-list>li.current-menu-item>.nav-trigger, .nav-list>li.current-menu-ancestor>a, .nav-list>li.current-menu-ancestor>.nav-trigger, .nav-list>li.current-menu-parent>a, .nav-list>li.current-menu-parent>.nav-trigger{color:var(--h-accent);} .nav-list>li:hover>a::after,.nav-list>li:hover>.nav-trigger::after, .nav-list>li.is-open>a::after,.nav-list>li.is-open>.nav-trigger::after, .nav-list>li.current-menu-item>a::after,.nav-list>li.current-menu-item>.nav-trigger::after, .nav-list>li.current-menu-ancestor>a::after,.nav-list>li.current-menu-ancestor>.nav-trigger::after, .nav-list>li.current-menu-parent>a::after,.nav-list>li.current-menu-parent>.nav-trigger::after{transform:scaleX(1);} .nav-list>li:hover .chev, .nav-list>li.is-open .chev, .nav-list>li.current-menu-item .chev, .nav-list>li.current-menu-ancestor .chev, .nav-list>li.current-menu-parent .chev{color:var(--h-accent);} /* The arrow turns only while the panel is actually open. On the section's own page the item is lit but nothing is expanded, and an upside-down chevron there would claim otherwise. */ .nav-list>li:hover .chev, .nav-list>li.is-open .chev{transform:rotate(180deg);} /* ---- MEGA (premium / editorial) ---- */ /* The panel is a positioning layer, not a surface. It still spans the row so its contents can be placed against the page gutter, but it paints nothing: the white card is `.mega-inner`, which is only as wide as the columns it holds. A full-bleed white bar behind three short lists was most of the problem — it read as a panel that had lost its content rather than one sized to it. `pointer-events:none` matters now that the layer is invisible and wider than the card: without it the transparent half would swallow clicks meant for the page behind. The card turns them back on. */ .mega{position:absolute;left:0;right:0;top:100%; --m-text:#1C1A17;--m-link:#5C564B;--m-muted:#8A8275;--m-line:#ECE4D5;--acc:#B68A3E;--acc2:#C2A15B; color:var(--m-text);background:transparent;border:0;box-shadow:none;pointer-events:none; opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;z-index:70;} .nav-list>li:hover>.mega,.nav-list>li.is-open>.mega{opacity:1;visibility:visible;transform:none;} /* Panel grid: one track per column, sized to the content rather than to the page. Every track is the same width, and they pack from the left gutter instead of being stretched across 1320px. That is the whole fix. The old variants gave each panel a bespoke set of `fr` weights — `1fr 1fr 1.3fr` for Greenstone — which divided the FULL width between however many columns existed, so a panel with two short lists and a card put 356px under four one-word links and stranded the card on the far right. `--mcols` is the track count, written on the panel by the walker from what the panel actually holds: one per column, one for a promotional card, and one more for a double-width column. `--mtrack` is then the largest a track may be, capped so six columns still fit inside the page and never overflow it — `min()` picks the ideal 250px when there is room and the fair share when there is not. `justify-content:start` is what keeps the pack tight: with fixed tracks and no stretching, three columns end where the third column ends. `align-items: start` stops a short column from being stretched to the height of the tallest one, which is what used to make the promotional card's border reach further down the panel than its own content. */ .mega-inner{ --mgap:38px; --mpad:34px; --mtrack-max:250px; /* The page row's own gutter. `.mainbar .row` is `max-width:var(--maxw)` with 22px of padding, so the column everything on the page actually lines up in — logo, nav items, content — is 44px narrower than --maxw. A panel capped at --maxw is that 44px wider than the page it sits under, which is why the six-column ones used to hang past the right-hand gutter. */ --mrow:22px; /* Measured from the page's own column, never from this element's width: the box is `max-content`, so a percentage here would size the tracks from a width that the tracks themselves decide. The responsive rules below lower the track COUNT rather than letting tracks shrink, which is what keeps this a fixed number the grid can be built from. */ --mavail:calc(var(--maxw) - var(--mrow) * 2 - var(--mpad) * 2); --mtrack:min(var(--mtrack-max), calc((var(--mavail) - (var(--mcols) - 1) * var(--mgap)) / var(--mcols))); /* The white card. Only as wide as its columns, capped at the page width. */ background:#FFFFFF; border:1px solid var(--m-line);border-top:0; border-radius:0 0 8px 8px; box-shadow:0 32px 64px -22px rgba(28,26,23,.22); pointer-events:auto; width:max-content; /* Capped at the page's content column, not at --maxw. A six-column panel wants more room than it can have, so it is the one that ends up exactly this wide — which is the point: Jewellery and Watches now both come out flush with the logo above them and the products below, instead of 44px wider than the page and offset from everything. Both terms subtract the SAME gutter, which is the part that was wrong before: the cap fell back to `100% - 32px` — two 16px gutters — while the page row uses 22px. Between --maxw and the breakpoint below it the panel came out 12px wider than the column it belongs in and overhung it by 6px each side. Measured at 1280px: column 22->1258, card 16->1264. Deriving both from --mrow makes the panel the column at every width. */ max-width:calc(min(var(--maxw), 100%) - var(--mrow) * 2); /* Placed under the item that opened it — `--mega-x` is written by main.js, which measures the trigger and the panel and clamps the result inside the page. The `auto` fallback centres it, which is what a visitor sees for the instant before the script runs and what they keep if it never does. */ margin-left:var(--mega-x, auto); margin-right:auto; /* Tightened from 48/54. On a two-column panel the old bottom padding left a band of empty white under the last link that was taller than the gap between two links. */ padding:40px var(--mpad) 40px; display:grid;gap:var(--mgap); /* `minmax(0, …)`, not a bare width. A fixed track is sized from `--maxw` and cannot give way, so between the page maximum and the breakpoint below it — 1280px, say — six tracks asked for 1320px inside a 1280px box and simply overflowed. And because a closed panel is `visibility:hidden` rather than removed, it is still laid out: one panel overflowing put a horizontal scrollbar on the whole document with no menu open at all. The range lets the tracks give up their ideal width when the page is narrower, and take it when it is not. */ grid-template-columns:repeat(var(--mcols), minmax(0, var(--mtrack))); justify-content:start;align-items:start; } /* A long label must wrap inside its track rather than widening it and throwing every column after it out of alignment. */ .mcol,.mfeature{min-width:0;} /* Written as classes rather than an inline style so the responsive rules below can override them — an inline custom property would win over every media query in the stylesheet. */ .mega-cols-1{--mcols:1;} .mega-cols-2{--mcols:2;} .mega-cols-3{--mcols:3;} .mega-cols-4{--mcols:4;} .mega-cols-5{--mcols:5;} .mega-cols-6{--mcols:6;} .mega-cols-7{--mcols:7;} .mega-cols-8{--mcols:8;} /* A tighter gutter once there are six tracks. Capping the card at the page column (correct) cost each of six tracks about 7px — 177px became 170px — and that is exactly the width at which "Necklaces & Pendants", "Greenstone Jewellery" and "View All Gemstones" begin wrapping to two lines. Five gutters at 30px instead of 38 gives the 40px back and puts the tracks at 176px, where they were. Two class names deep so it cannot be undone by source order, and only at this density: 30px is still a clear separation between columns of short links, but it would look cramped under three. */ .mega-inner.mega-cols-6, .mega-inner.mega-cols-7, .mega-inner.mega-cols-8{--mgap:30px;} /* Two tracks for the Watches brand list: nineteen names in a single 250px track read as a ragged wall of one-word lines. It is still on the same grid, so nothing beside it falls out of alignment. */ .mcol.brandcol{grid-column:span 2;} .brand-list{columns:2;column-gap:28px;} .brand-list li{break-inside:avoid;} /* section header: small tracked label + short gold rule */ .mcol h4{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase; color:var(--m-text);font-weight:600;margin:0 0 18px;padding:0 0 13px;position:relative;border:0;line-height:1.2;} .mcol h4::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:1.5px;background:var(--acc);} .mcol h4 .icon{display:none;} .mcol ul + h4{margin-top:30px;} .mcol ul{list-style:none;margin:0;padding:0;} /* clean text links with animated gold underline */ .mlink{position:relative;display:flex;align-items:center;padding:6px 0;font-size:.9rem;font-weight:400; line-height:1.3;color:var(--m-link);transition:color .18s var(--ease);} .mlink .t{position:relative;} .mlink .t::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--acc);transition:width .3s var(--ease);} .mlink:hover{color:var(--m-text);} .mlink:hover .t::after{width:100%;} .mlink .ic{display:none;} .mlink .new{font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc); border:1px solid var(--acc2);padding:1px 5px;border-radius:2px;margin-left:9px;line-height:1.4;} /* material lists: swatch / gem sits in a fixed left gutter so text stays aligned */ .mcol ul.mat .mlink{padding-left:26px;} .mlink .swatch,.mlink .gemicon,.mlink .gi{position:absolute;left:0;top:50%;transform:translateY(-50%);} .mlink .gi{width:17px;height:17px;display:flex;align-items:center;justify-content:center;} .mlink .gi .icon{width:17px;height:17px;color:var(--acc);stroke-width:1.7;} .mlink .swatch{width:14px;height:14px;border-radius:50%;flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset -2px -2px 4px rgba(0,0,0,.16),inset 2px 2px 4px rgba(255,255,255,.5);} .s-ygold{background:radial-gradient(circle at 35% 30%,#f3da93,#c79a3c);} .s-wgold{background:radial-gradient(circle at 35% 30%,#fdfdff,#dcdce2);} .s-rgold{background:radial-gradient(circle at 35% 30%,#f0c2b3,#cf8a76);} .s-silver{background:radial-gradient(circle at 35% 30%,#f2f3f5,#c2c7cf);} .s-tungsten{background:radial-gradient(circle at 35% 30%,#8b8f96,#54585f);} .s-steel{background:radial-gradient(circle at 35% 30%,#c2c7cf,#83888f);} .s-black{background:radial-gradient(circle at 35% 30%,#4d4d4d,#0a0a0a);} .s-multi{background:conic-gradient(from 200deg,#e0556a,#f0c065,#5fc79a,#2f88ad,#6e3f9e,#e0556a);} .s-diamond{background:radial-gradient(circle at 35% 30%,#ffffff,#d7dde6);} .s-cz{background:radial-gradient(circle at 35% 30%,#fbfbfd,#cfcfd8);} .mlink .gemicon{width:15px;height:15px;flex:none;display:flex;align-items:center;justify-content:center;} .mlink .gemicon .gemsvg{width:15px;height:15px;display:block;} /* view-all link */ .mega-all{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:.64rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--acc);border:0;padding:0;transition:gap .25s var(--ease);} .mega-all .icon{width:13px;height:13px;stroke-width:2;transition:transform .3s var(--ease);} .mega-all:hover{gap:13px;} .mega-all:hover .icon{transform:translateX(3px);} /* featured panel: light, editorial */ /* The card is one track wide now, not the 460px it used to be given, so its typography is set for that width. At 2rem the Greenstone heading broke at its own hyphen — "Hand-" / "Finished" / "Pounamu" — which reads as a rendering fault rather than a line break. */ .mfeature{background:linear-gradient(160deg,#FBF7EF,#F1E8D6);border:1px solid var(--m-line);border-radius:12px; padding:28px 26px;color:var(--m-text);display:flex;flex-direction:column;justify-content:flex-end; position:relative;overflow:hidden;min-height:228px;} .mfeature.gold{background:linear-gradient(160deg,#FBF7EF,#EFE4CF);} .mfeature .deco{display:none;} .mfeature .tag{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);font-weight:600;position:relative;} .mfeature h3{font-family:"Cormorant Garamond","Cormorant Fallback",Georgia,"Times New Roman",serif;font-size:1.52rem;font-weight:600;color:var(--ink); margin:10px 0 18px;position:relative;line-height:1.12;text-wrap:balance;} .mfeature .fbtn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:transparent;color:var(--ink); font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:0 0 4px; border:0;border-bottom:1.5px solid var(--acc);border-radius:0;transition:color .25s,border-color .25s;} .mfeature .fbtn .icon{width:13px;height:13px;transition:transform .3s var(--ease);} .mfeature .fbtn:hover{color:var(--acc);} .mfeature .fbtn:hover .icon{transform:translateX(4px);} /* compact single-column dropdown (21st Keys) */ /* Deliberately NOT positioned. Making the wrapper a containing block is what pinned the compact panel under its own trigger; with it static, the panel resolves against the same block every other panel does and centres with them. */ .mini-wrap{position:static;} /* The compact list is centred like every other panel now, rather than dropping under its own trigger. Consistency is the point: a customer moving along the bar should find each panel in the same place, and one dropdown that appears somewhere else reads as a different kind of thing. */ .mega.mini{left:0;right:0;width:auto;} /* `--mega-x` here too, or this one alone stays centred: a more specific `margin-left:auto` silently wins over the placement every other panel gets, and the compact list was the one panel still opening in the middle of the page while its item sat at the end of the bar. */ .mega.mini .mega-inner{max-width:none;min-width:264px;width:max-content; margin-left:var(--mega-x, auto);margin-right:auto;padding:14px;display:block; border-radius:0 0 8px 8px;} .mini-list{list-style:none;margin:0;padding:0;} .mini-list .mlink{padding:9px 14px;border-radius:6px;white-space:nowrap;} .mini-list .mlink:hover{background:#F7F2E8;color:var(--m-text);} /* --------------------------------------------------------------------------- * The stock ceiling, told the same way everywhere. * * Driven by assets/js/qty-limit.js. Three parts: the control takes a red edge * and one short shake, a message appears beneath it, and the "+" carries a * spent state with a tooltip. Every quantity control on the site uses these * same classes, so the product page, Quick View, the drawer, the cart and the * checkout review cannot drift apart in how they say no. * ------------------------------------------------------------------------- */ /* The refused control. A 2px garnet edge and a ring, so it reads at a glance on both the white buy row and the drawer's tinted rows. `!important` is deliberate and narrow: `.pdp-qty`, `.cart-qty` and `.qv__qty` each set their own border, and this has to win over all three for the two seconds it is up. */ .is-limit{ border-color:var(--garnet)!important; box-shadow:0 0 0 3px rgba(142,43,58,.16)!important; transition:border-color .18s var(--ease),box-shadow .18s var(--ease); } /* Six small movements over a third of a second. Long enough to notice, short enough that nobody waits for it to finish — and it never moves the control more than 4px, so nothing around it reflows. */ @keyframes stonex-qty-shake{ 0%,100%{transform:translateX(0);} 15%{transform:translateX(-4px);} 30%{transform:translateX(4px);} 45%{transform:translateX(-3px);} 60%{transform:translateX(3px);} 80%{transform:translateX(-1px);} } .is-shake{animation:stonex-qty-shake .34s var(--ease);} /* The message. Solid garnet rather than the tinted panel this replaced: at 6% opacity on a cream page the old note read as a hint, and the whole point is that it was being missed. */ .qty-limit{ display:none;align-items:center;gap:10px; margin:9px 0 0;padding:10px 14px; border-radius:10px; background:var(--garnet);color:#fff; font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.82rem;font-weight:600;line-height:1.35; box-shadow:0 10px 24px -12px rgba(142,43,58,.7); } .qty-limit.is-shown{display:flex;animation:stonex-qty-rise .22s var(--ease);} .qty-limit__ic{flex:none;width:18px;height:18px;display:flex;align-items:center;justify-content:center;} .qty-limit__ic svg{width:18px;height:18px;display:block;} .qty-limit__text{min-width:0;} @keyframes stonex-qty-rise{ from{opacity:0;transform:translateY(-4px);} to{opacity:1;transform:none;} } /* The product page's own note is styled where it is declared, further down — an override written up here would lose to it on source order. */ /* The spent "+". Dimmed and given a not-allowed cursor, but still pressable — see the note in qty-limit.js on why this is aria-disabled and not the disabled property. */ .pdp-qty__btn.is-maxed,.pdp-qty__btn[aria-disabled="true"], .cart-qty__btn.is-maxed,.cart-qty__btn[aria-disabled="true"], .pdp-sticky__qbtn.is-maxed,.pdp-sticky__qbtn[aria-disabled="true"]{opacity:.38;cursor:not-allowed;} .cart-qty__btn.is-maxed:hover,.cart-qty__btn[aria-disabled="true"]:hover, .pdp-sticky__qbtn.is-maxed:hover,.pdp-sticky__qbtn[aria-disabled="true"]:hover{background:none;} @media(prefers-reduced-motion:reduce){ .is-shake{animation:none;} .qty-limit.is-shown{animation:none;} } /* --------------------------------------------------------------------------- * WooCommerce's own stylesheet, held off the theme's controls. * * woocommerce.css ships on product, cart, checkout and account templates — the * theme keeps it there deliberately, because the variation form and select2 * lean on parts of it. The cost is that its button rules are written as * `.woocommerce button.button.alt`, which outranks a single `.btn-gold` no * matter which stylesheet loads last. On a variable product the Add to Cart * button therefore came out in WooCommerce's default purple while every other * Add to Cart on the site was gold: same button, same class, different colour, * for no reason a customer could see. * * Matched at equal-or-higher specificity rather than with `!important`, so the * theme's own states — hover, disabled, loading — still behave normally. * ------------------------------------------------------------------------- */ .woocommerce button.btn-gold.button, .woocommerce a.btn-gold.button, .woocommerce input.btn-gold.button, .woocommerce button.btn-gold.button.alt, .woocommerce a.btn-gold.button.alt, .woocommerce input.btn-gold.button.alt{ background:linear-gradient(135deg,var(--gold),var(--gold-cta)); color:var(--ink); border:0; border-radius:8px; font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:700;font-size:.78rem; letter-spacing:.1em;text-transform:uppercase; padding:15px 28px; } .woocommerce button.btn-gold.button:hover, .woocommerce a.btn-gold.button:hover, .woocommerce button.btn-gold.button.alt:hover, .woocommerce a.btn-gold.button.alt:hover{ background:linear-gradient(135deg,var(--gold),var(--gold-cta)); color:var(--ink); } /* A disabled Add to Cart — no variation chosen yet — must not look pressable. */ .woocommerce button.btn-gold.button:disabled, .woocommerce button.btn-gold.button.alt:disabled, .woocommerce button.btn-gold.button.alt:disabled[disabled]{ background:linear-gradient(135deg,var(--gold),var(--gold-cta)); color:var(--ink);opacity:.45;cursor:not-allowed; } /* A quantity fixed at one is not a control. WooCommerce emits it as a hidden input; the wrapper collapses so no empty box is left behind, and the input still posts from inside a hidden container. `!important` is the right tool exactly once here. The competition is not the theme's own `.pdp-qty{display:flex}` — two classes settle that — but woocommerce.css, which styles this element as `.woocommerce div.product form.cart .quantity` and outranks anything reasonable a theme can write. The rule does one thing, to one utility class whose entire purpose is to hide, so there is no state it can trap. */ .quantity.pdp-qty--hidden{display:none!important;} /* ================= MOBILE DRAWER (dark) ================= */ .scrim{position:fixed;inset:0;background:rgba(20,18,15,.55);opacity:0;visibility:hidden;transition:.3s;z-index:95;} /* * The open state is `is-on` / `is-open`, not `on`. * * These two selectors were the last survivors of the static reference build, * where the drawer was toggled with a bare `on` class. Everything the theme * actually ships — main.js, cart-save.js, quick-view.js, shop.js — uses the * `is-` prefix, so the class the script added and the class the stylesheet * waited for never met: `#drawer` gained `is-open`, kept * `transform:translateX(-100%)`, and sat 343px off the left edge of the screen. * * The mobile navigation was therefore dead on every page of the site. Nothing * about it looked broken in the markup or in the JavaScript; it took opening * the menu on a phone-sized viewport and reading the drawer's position to see * it, which is the whole reason this audit is measured rather than reviewed. */ .scrim.is-on{opacity:1;visibility:visible;} .drawer{position:fixed;top:0;left:0;bottom:0;width:min(88vw,380px);background:var(--d-bg);color:var(--d-text); z-index:100;transform:translateX(-100%);transition:transform .35s var(--ease);display:flex;flex-direction:column;overflow-y:auto;} /* visibility is the fallback where `inert` is unsupported: it removes the panel from the tab order too. Delayed on close so the slide still plays. */ .drawer{visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s;} .drawer.is-open{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s;} .drawer-top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--d-line);} .drawer-top .logo-img{width:130px;height:32px;background:var(--logo) no-repeat left center/contain;} .drawer-search{display:flex;align-items:center;gap:10px;margin:14px 18px;padding:12px 16px;background:var(--d-sub); border:1px solid var(--d-line);border-radius:40px;} .drawer-search .icon{width:18px;height:18px;color:var(--d-muted);} .drawer-search input{border:none;outline:none;background:none;width:100%;font-size:.9rem;color:var(--d-text);} .drawer-search input::placeholder{color:var(--d-muted);} .dnav{list-style:none;margin:0;padding:0 10px;} .dnav>li{border-bottom:1px solid var(--d-line);} .dnav>li>a,.dacc{width:100%;display:flex;align-items:center;gap:11px;justify-content:flex-start; padding:15px 12px;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;text-align:left;color:var(--d-text);} .dnav .ni{width:18px;height:18px;color:var(--h-accent);flex:none;stroke-width:1.9;} .dacc .chev{width:16px;height:16px;color:var(--d-muted);margin-left:auto;transition:transform .3s var(--ease);} .dacc[aria-expanded="true"] .chev{transform:rotate(180deg);} /* The open state had no rule at all. main.js toggles `is-open` on this element, `.dsub{max-height:0}` was the only height it ever had, and nothing defined what open meant — so tapping a section in the mobile menu rotated its chevron (that IS defined, off `aria-expanded`) and revealed nothing. The same class of defect as the drawer's own `.on` / `is-open` mismatch, one level further in. The height comes from `--dsub-h`, which main.js sets from the panel's own scrollHeight when it opens. The panels range from 22px to 2,175px, so a single hardcoded maximum would either clip the largest menu or make the smallest one animate over a range it does not use. The fallback is sized above the tallest measured panel so the menu still opens if the script's measurement ever fails. */ .dsub{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);background:var(--d-sub);border-radius:6px;margin:0 4px;} .dsub.is-open{max-height:var(--dsub-h,2400px);} .dsub-in{padding:8px 4px 14px;} .dsub h5{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--h-accent);margin:12px 14px 6px;font-weight:700;} .dsub a{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:.86rem;color:var(--d-muted);} .dsub a:hover{color:var(--h-accent);} .dsub .ni{width:17px;height:17px;color:var(--h-accent);stroke-width:1.9;} /* Attribute groups inside a drawer section — gemstone, metal, shape, brand, function, strap — as wrapping pills rather than a column of full-width rows. Eighteen watch brands as rows was eighteen screens of scrolling; as chips it is four. Sizing follows the approved design, with the row height raised to the 44px touch floor the rest of the site now keeps. */ .dchips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 14px 8px;} .dchips a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--d-line);border-radius:30px;font-size:.78rem;color:var(--d-text);} .dchips a:hover{border-color:var(--h-accent);color:var(--h-accent);} .dchips{display:flex;flex-wrap:wrap;gap:7px;padding:6px 14px 4px;} .dchips a{border:1px solid var(--d-line);border-radius:30px;padding:7px 13px;font-size:.78rem;color:var(--d-text);} .drawer-foot{margin-top:auto;padding:18px;display:flex;flex-direction:column;gap:13px;border-top:1px solid var(--d-line);} .drawer-foot a{display:flex;align-items:center;gap:11px;font-size:.86rem;color:var(--d-muted);} .drawer-foot .icon{width:18px;height:18px;color:var(--h-accent);} /* ================= HERO BANNER (placeholder) ================= */ .hero{max-width:var(--maxw);margin:0 auto;padding:26px 22px 20px;} /* * Column ratio, gap and image aspect are one system, not three choices. * * The boxes take their height from their artwork (see the img rule further * down), so the two stacked boxes on the right only finish level with the tall * one on the left if the columns are split to make that true. At the 1320px * container with 22px padding and an 18px gap, the hero art is 1619x971 and the * two promos are 1817x866. With the 1619x971 hero that solved to 1.652fr; the * gemstone hero is 1774x887 (2.000), which re-solves to 1.992fr. Change the hero * artwork's aspect and this number has to be recomputed or the columns drift. */ .hero-grid{display:grid;grid-template-columns:1.992fr 1fr;grid-template-rows:auto auto;gap:18px;align-items:start;} /* * No min-height. The background is a load-time ground only: with a fixed height * and object-fit:contain it became a black letterbox strip above and below every * banner whose art was shorter than the box — most visibly on a phone, where a * 346px-wide box was pinned to 190px for a 165px-tall image. */ .hero .box{background:#0b0b0b;border-radius:4px;position:relative;overflow:hidden;} .hero .big{grid-row:1 / span 2;} .hero .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;} .hero .phi{width:46px;height:46px;color:rgba(233,220,190,.22);fill:none;stroke:currentColor;stroke-width:1.4;} @media(max-width:760px){ .hero-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:14px;} .hero .big{grid-row:auto;} } /* ================= TRUST / VALUE BAR ================= */ .usp{max-width:var(--maxw);margin:0 auto;padding:0 22px;} .usp-row{background:var(--pearl);border:1px solid var(--line);border-radius:6px;padding:22px;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;} .usp-item{display:flex;align-items:center;gap:13px;justify-content:center;} .usp-item .uic{flex:none;color:var(--ink);display:flex;} .usp-item .uic .icon{width:30px;height:30px;stroke-width:1.6;} .usp-item .t{display:flex;flex-direction:column;min-width:0;} .usp-item .t b{font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);line-height:1.25;} .usp-item .t span{font-size:.8rem;color:var(--muted);margin-top:2px;line-height:1.3;} @media(max-width:980px){ .usp-row{grid-template-columns:repeat(3,1fr);row-gap:22px;} } @media(max-width:620px){ .usp-row{grid-template-columns:repeat(2,1fr);gap:18px 14px;padding:18px 16px;} .usp-item{justify-content:flex-start;} } /* ================= SHOP BY CATEGORY (carousel) ================= */ .shop-cats{padding:48px 0 60px;background:var(--ivory);} .shop-cats__inner{max-width:var(--maxw);margin:0 auto;padding:0 22px;} .shop-cats__head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-bottom:30px;} .shop-cats__heading{grid-column:2;text-align:center;} .shop-cats__eyebrow{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-cta);margin:0 0 8px;} .shop-cats__title{font-family:"Cormorant Garamond","Cormorant Fallback",Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(1.8rem,3.2vw,2.4rem);margin:0;line-height:1.05;} .shop-cats__viewall{grid-column:3;justify-self:end;display:inline-flex;align-items:center;gap:8px;font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink); border-bottom:1.5px solid var(--gold);padding-bottom:4px;white-space:nowrap;transition:color .2s,gap .25s var(--ease);} .shop-cats__viewall:hover{color:var(--gold-cta);gap:11px;} .shop-cats__viewall svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;transition:transform .3s var(--ease);} .shop-cats__viewall:hover svg{transform:translateX(3px);} .shop-cats__viewport{position:relative;} .shop-cats__track{list-style:none;margin:0;padding:4px 2px;display:flex;gap:18px;overflow-x:auto; scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;} .shop-cats__track::-webkit-scrollbar{display:none;} .shop-cats__item{flex:0 0 clamp(150px,16vw,196px);scroll-snap-align:start;} .shop-cats__link{display:block;} .shop-cats__media{display:block;position:relative;margin:0;aspect-ratio:4/5;border-radius:8px;overflow:hidden; background:var(--pearl);border:1px solid var(--line);} .shop-cats__media img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;display:block;} .shop-cats__placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(28,26,23,.18);} .shop-cats__placeholder svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.4;} .shop-cats__name{display:block;text-align:center;margin-top:14px;font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.92rem; font-weight:500;color:var(--ink);letter-spacing:.01em;transition:color .2s;} .shop-cats__link:hover .shop-cats__name{color:var(--gold-cta);} .shop-cats__hint{display:none;} .shop-cats__nav{position:absolute;top:calc((100% - 34px) / 2);transform:translateY(-50%);width:48px;height:48px;border-radius:50%; background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px); border:1px solid rgba(28,26,23,.07);box-shadow:0 12px 30px -10px rgba(28,26,23,.38); display:flex;align-items:center;justify-content:center;color:var(--ink);z-index:3;cursor:pointer; transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),opacity .2s,transform .14s var(--ease);} .shop-cats__nav:hover{background:var(--ink);color:#fff;box-shadow:0 16px 38px -10px rgba(28,26,23,.5);} .shop-cats__nav:active{transform:translateY(-50%) scale(.94);} .shop-cats__nav[disabled]{opacity:0;pointer-events:none;} .shop-cats__nav--prev{left:6px;} .shop-cats__nav--next{right:6px;} .shop-cats__nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;} .shop-cats__nav--prev svg{transform:rotate(180deg);} @media(max-width:600px){ .shop-cats__track{gap:14px;} .shop-cats__item{flex-basis:43vw;} .shop-cats__nav{display:none;} .shop-cats__head{grid-template-columns:1fr;justify-items:center;gap:14px;} .shop-cats__heading{grid-column:auto;} .shop-cats__viewall{grid-column:auto;justify-self:center;} .shop-cats__hint{display:flex;align-items:center;justify-content:center;gap:7px;margin:12px 0 0; font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);} .shop-cats__hint svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;} } /* ================= BROWSE OUR WATCH BRANDS ================= */ .bw-block{background:var(--ivory);padding:54px 0 62px;} .watch-brands{padding:0;background:transparent;} .wb__inner{max-width:var(--maxw);margin:0 auto;padding:0 22px;} .wb__head{text-align:center;margin-bottom:26px;} .wb__eyebrow{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-cta);margin:0 0 8px;} .wb__title{font-family:"Cormorant Garamond","Cormorant Fallback",Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(1.8rem,3.2vw,2.4rem);margin:0;line-height:1.05;} .wb__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} .wb__card{position:relative;display:flex;align-items:center;justify-content:center;min-height:128px; background:#0b0a08;border:none;border-radius:6px;padding:26px;text-align:center; box-shadow:0 16px 34px -22px rgba(0,0,0,.85); transition:transform .3s var(--ease),box-shadow .3s var(--ease);} /* gold border is INSET inside the card (not on the outer edge), with even padding all round */ .wb__card::after{content:"";position:absolute;inset:9px;border:2px solid var(--gold);border-radius:3px;pointer-events:none;transition:border-color .3s var(--ease),inset .3s var(--ease);} .wb__card:hover{transform:translateY(-4px);box-shadow:0 24px 46px -20px rgba(0,0,0,.72);} .wb__card:hover::after{border-color:var(--gold-soft);} .wb__logo{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:700;font-size:1.18rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory);transition:color .3s var(--ease); /* A brand with no bundled logo is set in type. Two lines at most, so one long name cannot stretch its whole grid row. */ text-align:center;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .wb__card:hover .wb__logo{color:var(--gold-soft);} .wb__logo-img{max-width:168px;max-height:54px;width:auto;height:auto;object-fit:contain;display:block;} @media(max-width:900px){.wb__grid{grid-template-columns:repeat(3,1fr);}} @media(max-width:560px){.wb__grid{grid-template-columns:repeat(2,1fr);gap:14px;}.wb__card{min-height:96px;padding:18px;}.wb__logo{font-size:1rem;}} /* ================= LIMITED EDITION WATCHES (carousel) ================= */ .limited-ed{padding:48px 0 0;background:transparent;} .le__inner{max-width:var(--maxw);margin:0 auto;padding:0 22px;} .le__head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-bottom:28px;} .le__heading{grid-column:2;text-align:center;} .le__eyebrow{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-cta);margin:0 0 8px;} .le__title{font-family:"Cormorant Garamond","Cormorant Fallback",Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(1.8rem,3.2vw,2.4rem);margin:0;line-height:1.05;} .le__viewall{grid-column:3;justify-self:end;display:inline-flex;align-items:center;gap:8px;font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--gold);padding-bottom:4px;white-space:nowrap;transition:color .2s,gap .25s var(--ease);} .le__viewall:hover{color:var(--gold-cta);gap:11px;} .le__viewall svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;transition:transform .3s var(--ease);} .le__viewall:hover svg{transform:translateX(3px);} .le__viewport{position:relative;} .le__track{list-style:none;margin:0;padding:6px 2px;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;} .le__track::-webkit-scrollbar{display:none;} .le__item{flex:0 0 clamp(230px,24vw,272px);scroll-snap-align:start;display:flex;} .le__card{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;width:100%; transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease);} .le__card:hover{transform:translateY(-4px);box-shadow:0 22px 50px -22px rgba(28,26,23,.3);border-color:var(--gold-soft);} .le__media{position:relative;aspect-ratio:1/1;background:var(--pearl);overflow:hidden;} .le__medialink{display:block;width:100%;height:100%;} .le__media img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;display:block;} .le__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(28,26,23,.16);} .le__ph svg{width:54px;height:54px;fill:none;stroke:currentColor;stroke-width:1.1;} .le__badge{position:absolute;left:12px;top:12px;background:var(--ink);color:var(--gold-soft);font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:3px;z-index:2;} .le__wish{position:absolute;right:11px;top:11px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);z-index:3;cursor:pointer;box-shadow:0 6px 16px -8px rgba(28,26,23,.28);transition:transform .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);} /* default state: crisp OUTLINE heart */ .le__wish svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;} .le__wish:hover{transform:scale(1.08);border-color:var(--ink);box-shadow:0 10px 22px -8px rgba(28,26,23,.36);} .le__wish:active{transform:scale(.96);} .le__wish:focus-visible{outline:2px solid var(--gold);outline-offset:2px;} /* added state: FILLED heart in the brand garnet */ .le__wish.is-active{color:var(--garnet);border-color:rgba(142,43,58,.55);} .le__wish.is-active svg{fill:currentColor;stroke:currentColor;} .le__quick{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(28,26,23,.92);color:var(--ivory);font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:10px;border-radius:6px;opacity:0;transform:translateY(8px);transition:.3s var(--ease);z-index:2;} .le__media:hover .le__quick{opacity:1;transform:none;} .le__quick svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;} .le__body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1;} .le__brand{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-cta);margin:0 0 6px;} .le__name{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.9rem;font-weight:500;line-height:1.35;color:var(--ink);margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.45em;} .le__name a{color:inherit;transition:color .2s;} .le__name a:hover{color:var(--gold-cta);} .le__price{display:flex;align-items:baseline;gap:9px;margin-top:auto;margin-bottom:14px;} .le__price .now{font-family:"Cormorant Garamond","Cormorant Fallback",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.4rem;color:var(--ink);} .le__price .was{font-size:.82rem;color:var(--muted);text-decoration:line-through;} .le__cart{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;background:var(--gold-cta);color:var(--ink);font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:12px;border-radius:6px;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease);} .le__cart:hover{background:var(--ink);color:var(--ivory);} .le__cart.is-added{background:var(--pounamu);color:#fff;} .le__cart svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;} .le__nav{position:absolute;top:calc(clamp(230px,24vw,272px) / 2 + 6px);transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border:1px solid rgba(28,26,23,.07);box-shadow:0 12px 30px -10px rgba(28,26,23,.38);display:flex;align-items:center;justify-content:center;color:var(--ink);z-index:4;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),opacity .2s,transform .14s var(--ease);} .le__nav:hover{background:var(--ink);color:#fff;box-shadow:0 16px 38px -10px rgba(28,26,23,.5);} .le__nav:active{transform:translateY(-50%) scale(.94);} .le__nav[disabled]{opacity:0;pointer-events:none;} .le__nav--prev{left:-8px;} .le__nav--next{right:-8px;} .le__nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;} .le__nav--prev svg{transform:rotate(180deg);} @media(max-width:600px){ .bw-block{padding:36px 0 44px;} .limited-ed{padding-top:16px;} .le__item{flex-basis:74vw;} .le__nav{display:none;} .le__head{grid-template-columns:1fr;justify-items:center;gap:14px;} .le__heading{grid-column:auto;} .le__viewall{grid-column:auto;justify-self:center;} } /* Tablet: fewer tracks, more rows. The tracks are capped, not stretched, so a narrower page would otherwise squeeze six of them to 140px and break the link text onto two lines each. Reducing the count wraps the columns onto a second row at a readable width instead. The promotional card is no longer hidden here. `.mega-4 .mfeature{display:none}` removed a whole panel of editorial content below 1200px — an iPad in landscape is 1024px, so the card was missing on a device plenty of people shop on, with nothing to indicate it. It now simply takes its place in the wrap like any other track. */ @media(max-width:1200px){ .mega-inner{row-gap:30px;} /* Wrapped into balanced rows rather than squeezed. Four tracks go to two — two rows of two — not three, which would leave the promotional card alone on a second row beside an empty half. */ .mega-cols-4{--mcols:2;} .mega-cols-5,.mega-cols-6,.mega-cols-7,.mega-cols-8{--mcols:3;} .brand-list{columns:1;} } /* Below this the three-track card (894px) would be wider than the page. The nav itself hands over to the drawer at 860px, so this band is narrow — but it is the band an iPad in portrait sits in. */ @media(max-width:1000px){ .mega-cols-3,.mega-cols-4,.mega-cols-5,.mega-cols-6,.mega-cols-7,.mega-cols-8{--mcols:2;} } @media(max-width:860px){ form.search{display:none;} .nav{display:none;} .burger{display:flex;} /* The middle column has to be allowed to shrink. A bare `1fr` keeps its automatic minimum, and that minimum is the logo's fixed 184px — so burger + logo + actions + gaps came to 428px inside a 390px viewport and pushed the cart icon off the right edge of every page on the site. minmax(0,1fr) lets the column go below its content, and the logo then scales down against it instead of forcing the row wider. */ .mainbar .row{padding:12px 18px;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;} .logo{justify-self:center;min-width:0;max-width:100%;} /* Taller on a phone, on request. The logo is a contain-fitted background, so height is the only dimension that changes how big the mark reads; width stays generous enough that the wordmark is never the constraint. `max-width:100%` still lets the middle grid column squeeze it on the narrowest screens rather than pushing the cart icon off the row — the reason this rule exists at all. */ .logo .logo-img{width:170px;max-width:100%;height:48px;} /* Visually hidden, NOT display:none. display:none removes the label from the accessibility tree as well as the screen, which left the account, wishlist and cart icons as links with no accessible name at all on mobile — "Links must have discernible text". Clipping hides it visually while a screen reader still announces it. */ .act-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .act{min-width:40px;padding:8px 7px;} .actions{gap:0;} .topbar .tb-left,.topbar .promo,.topbar .afterpay{display:none;} .topbar .row{position:relative;justify-content:center;height:38px;padding:0 14px;} .topbar .tb-rotator{display:block;position:relative;width:100%;height:100%;} .topbar .tb-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center; opacity:0;transition:opacity .55s ease;color:var(--ink);font-weight:600;font-size:.78rem;letter-spacing:.01em; padding:0 14px;pointer-events:none;} .topbar .tb-msg.is-on{opacity:1;} } @media(max-width:1080px){ .topbar .promo{display:none;} } @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}} /* ================= FIRST PURCHASE REWARD ================= */ .reward{background:var(--ivory);padding:48px 22px;} .reward__card{position:relative;overflow:hidden;max-width:var(--maxw);margin:0 auto;padding:42px 48px;border-radius:18px; background:radial-gradient(125% 150% at 88% 0%,#1b1610 0%,#0b0a08 58%); border:1px solid rgba(194,161,91,.3); box-shadow:0 32px 72px -34px rgba(0,0,0,.7); display:flex;align-items:center;gap:40px;flex-wrap:wrap;} .reward__card::before{content:"";position:absolute;top:-45%;right:-4%;width:360px;height:360px;border-radius:50%; background:radial-gradient(circle,rgba(194,161,91,.16),transparent 66%);pointer-events:none;} /* left content */ .reward__lead{position:relative;flex:1 1 290px;min-width:0;} .reward__eyebrow{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 11px;} .reward__title{font-family:"Cormorant Garamond","Cormorant Fallback",Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(1.9rem,3.4vw,2.65rem);line-height:1.05;color:var(--ivory);margin:0 0 12px;} .reward__accent{color:var(--gold);font-style:italic;} .reward__sub{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.93rem;line-height:1.6;color:rgba(250,247,241,.66);margin:0;max-width:34ch;} /* dividers */ .reward__divider{align-self:stretch;flex:none;width:1px;min-height:104px;background:linear-gradient(transparent,rgba(194,161,91,.42),transparent);} /* icon medallions */ .reward__features{position:relative;flex:1 1 380px;display:flex;justify-content:space-around;align-items:flex-start;gap:18px;} .reward__feat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;} .reward__ic{position:relative;width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:radial-gradient(circle at 50% 32%,#241e16,#0b0a08); border:1px solid rgba(194,161,91,.5); box-shadow:0 16px 32px -16px rgba(0,0,0,.85),inset 0 1px 1px rgba(233,220,190,.14); transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);} .reward__ic::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(194,161,91,.22);transition:border-color .35s var(--ease);} .reward__ic svg{width:31px;height:31px;fill:none;stroke:var(--gold);stroke-width:1.6;} .reward__feat:hover .reward__ic{transform:translateY(-5px);border-color:rgba(194,161,91,.9);box-shadow:0 24px 40px -16px rgba(0,0,0,.9),0 0 0 4px rgba(194,161,91,.08),inset 0 1px 1px rgba(233,220,190,.2);} .reward__feat:hover .reward__ic::after{border-color:rgba(194,161,91,.5);} .reward__feat-label{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:rgba(250,247,241,.82);line-height:1.3;max-width:13ch;} /* right CTA */ .reward__action{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;} .reward__action .btn-gold{padding:16px 30px;} .reward__fine{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.72rem;color:rgba(250,247,241,.5);max-width:20ch;line-height:1.45;} @media(max-width:980px){ .reward__card{gap:28px 34px;} .reward__divider{display:none;} .reward__lead{flex:1 1 100%;} .reward__features{flex:1 1 58%;justify-content:flex-start;gap:34px;} .reward__action{flex:1 1 28%;align-items:flex-start;text-align:left;} } @media(max-width:640px){ .reward{padding:36px 16px;} .reward__card{padding:30px 24px;gap:26px;} .reward__features{width:100%;justify-content:space-between;gap:12px;} .reward__action{width:100%;align-items:stretch;text-align:center;} .reward__action .btn-gold{width:100%;justify-content:center;} .reward__feat-label{font-size:.75rem;} } @media(max-width:430px){ .reward__ic{width:62px;height:62px;} .reward__ic svg{width:27px;height:27px;} } /* ================= REUSABLE BUTTONS & SECTION HEADINGS ================= */ .btn-gold{position:relative;display:inline-flex;align-items:center;gap:9px;overflow:hidden;background:linear-gradient(135deg,var(--gold),var(--gold-cta));color:var(--ink);font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:15px 28px;border-radius:8px;white-space:nowrap;box-shadow:0 14px 32px -14px rgba(194,161,91,.5);transition:transform .3s var(--ease),box-shadow .3s var(--ease);} .btn-gold svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .3s var(--ease);} .btn-gold::before{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .6s var(--ease);} .btn-gold:hover{transform:translateY(-3px);box-shadow:0 20px 40px -14px rgba(194,161,91,.62);} .btn-gold:hover::before{left:135%;} .btn-gold:hover svg{transform:translateX(4px);} .btn-gold:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px;} .btn-ghost{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--ink);color:var(--ink);background:transparent;font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:14px 26px;border-radius:8px;transition:background .25s var(--ease),color .25s var(--ease);} .btn-ghost svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;} .btn-ghost:hover{background:var(--ink);color:var(--ivory);} .sect-eyebrow{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-cta);margin:0 0 10px;} .sect-title{font-family:"Cormorant Garamond","Cormorant Fallback",Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(1.9rem,3.3vw,2.7rem);line-height:1.06;color:var(--ink);margin:0;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* ================= LAB GROWN COLLECTION ================= */ .labgrown{background:var(--ivory);padding:60px 0;} .labgrown__inner{max-width:var(--maxw);margin:0 auto;padding:0 22px;display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;} .labgrown__media{position:relative;margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:#0b0a08;box-shadow:0 30px 60px -30px rgba(28,26,23,.5);} .labgrown__video{width:100%;height:100%;object-fit:cover;display:block;} .labgrown__badge{position:absolute;left:16px;top:16px;background:rgba(11,10,8,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(194,161,91,.4);color:var(--gold-soft);font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border-radius:30px;} .labgrown__toggle{position:absolute;right:14px;bottom:14px;width:42px;height:42px;border-radius:50%;background:rgba(11,10,8,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(233,220,190,.35);color:var(--ivory);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s var(--ease);} .labgrown__toggle:hover{background:rgba(11,10,8,.8);transform:scale(1.06);} .labgrown__toggle svg{width:15px;height:15px;fill:currentColor;stroke:none;} .labgrown__toggle .ic-play{display:none;} .labgrown__toggle.is-paused .ic-pause{display:none;} .labgrown__toggle.is-paused .ic-play{display:block;} .labgrown__eyebrow{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-cta);margin:0 0 12px;} .labgrown__title{font-family:"Cormorant Garamond","Cormorant Fallback",Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(2.1rem,4vw,3.1rem);line-height:1.04;color:var(--ink);margin:0 0 18px;} .labgrown__accent{color:var(--gold-cta);font-style:italic;} .labgrown__desc{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.98rem;line-height:1.7;color:var(--muted);margin:0 0 22px;max-width:52ch;} .labgrown__points{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:12px;} .labgrown__points li{display:flex;align-items:center;gap:12px;font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.92rem;color:var(--ink);} .labgrown__points svg{width:20px;height:20px;flex:none;color:var(--gold-cta);} .labgrown__cta{display:flex;flex-wrap:wrap;gap:14px;} @media(max-width:860px){ .labgrown{padding:52px 0;} .labgrown__inner{grid-template-columns:1fr;gap:30px;} .labgrown__media{aspect-ratio:16/12;max-height:420px;} } /* ================= 21ST KEYS COLLECTION (banner + carousel) ================= */ .keysrev{background:var(--pearl);padding:70px 0;} .keysrev__inner{max-width:var(--maxw);margin:0 auto;padding:0 22px;display:grid;grid-template-columns:2fr 3fr;gap:38px;align-items:stretch;} /* LEFT banner */ .keys2__banner{position:relative;margin:0;border-radius:14px;overflow:hidden;min-height:470px;background:linear-gradient(150deg,#16140f,#070706);border:1px solid rgba(194,161,91,.25);box-shadow:0 28px 56px -32px rgba(28,26,23,.45);} .keys2__banner img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;display:block;} .keys2__banner::after{content:"";position:absolute;inset:10px;border:1px solid rgba(194,161,91,.3);border-radius:9px;pointer-events:none;} .keys2__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(233,220,190,.4);} .keys2__ph svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.2;} .keys2__ph em{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-style:normal;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,220,190,.55);} /* RIGHT main */ .keys2__main{min-width:0;display:flex;flex-direction:column;} .keys2__head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px;} .keys2__titles{min-width:0;} .keys2__controls{display:flex;align-items:center;gap:18px;flex:none;} .keys2__viewall{display:inline-flex;align-items:center;gap:8px;font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--gold);padding-bottom:4px;white-space:nowrap;transition:color .2s,gap .25s var(--ease);} .keys2__viewall:hover{color:var(--gold-cta);gap:11px;} .keys2__viewall svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;transition:transform .3s var(--ease);} .keys2__viewall:hover svg{transform:translateX(3px);} .keys2__navs{display:flex;gap:8px;} .keys2__nav{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -12px rgba(28,26,23,.4);display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;transition:.2s var(--ease);} .keys2__nav:hover{background:var(--ink);color:#fff;border-color:var(--ink);} .keys2__nav[disabled]{opacity:.3;pointer-events:none;} .keys2__nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;} .keys2__nav[data-keys-prev] svg,.keys2__nav[data-prev] svg{transform:rotate(180deg);} .keys2__viewport{flex:1;min-height:0;} .keys2__viewport .le__track{gap:18px;align-items:flex-start;height:100%;} .keys2__viewport .le__item{flex:0 0 clamp(200px,30%,272px);} .keys2__viewport .le__media{background:#fff;} .keys2__viewport .le__card{border-color:#ece4d4;} @media(max-width:920px){ .keysrev__inner{grid-template-columns:1fr;gap:26px;} .keys2__banner{min-height:0;aspect-ratio:16/10;} .keys2__viewport .le__item{flex-basis:clamp(220px,42%,260px);} } @media(max-width:560px){ .keysrev{padding:52px 0;} .keys2__head{flex-wrap:wrap;align-items:flex-start;gap:12px;} .keys2__viewport .le__item{flex-basis:76%;} .keys2__banner{aspect-ratio:4/3;} } /* ================= IN-STORE GALLERY (carousel) ================= */ .gallery{background:var(--ivory);padding:64px 0;} .gallery__head{max-width:var(--maxw);margin:0 auto 30px;padding:0 22px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;} .gallery__titles{min-width:0;} .gallery__cta{display:flex;gap:12px;flex-wrap:wrap;flex:none;} .gallery__viewport{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 22px;} .gallery__track{list-style:none;margin:0;padding:4px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;} .gallery__track::-webkit-scrollbar{display:none;} /* 3:2 to match the showroom photographs — a 4/3 slide letterboxed every one of them against the dark gradient, the same fault the hero had. */ .gallery__slide{position:relative;flex:0 0 clamp(260px,42%,520px);scroll-snap-align:start;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,#16140f,#070706);border:1px solid var(--line);box-shadow:0 20px 44px -30px rgba(28,26,23,.4);} .gallery__slide img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;display:block;} .gallery__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(233,220,190,.2);} .gallery__ph svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:1.1;} .gallery__slide::after{content:"";position:absolute;inset:0;border-radius:14px;border:1px solid transparent;transition:border-color .3s var(--ease);pointer-events:none;} .gallery__slide:hover::after{border-color:rgba(194,161,91,.5);} .gallery__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:0 10px 26px -12px rgba(28,26,23,.45);display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;z-index:3;transition:.2s var(--ease);} .gallery__nav:hover{background:var(--ink);color:#fff;border-color:var(--ink);} .gallery__nav[disabled]{opacity:0;pointer-events:none;} .gallery__nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;} .gallery__nav--prev{left:30px;} .gallery__nav--prev svg{transform:rotate(180deg);} .gallery__nav--next{right:30px;} @media(max-width:640px){ .gallery{padding:46px 0;} .gallery__head{margin-bottom:22px;align-items:flex-start;} .gallery__cta{width:100%;} .gallery__cta .btn-gold,.gallery__cta .btn-ghost{flex:1 1 auto;justify-content:center;} .gallery__slide{flex-basis:82%;} .gallery__nav{width:40px;height:40px;} .gallery__nav--prev{left:24px;}.gallery__nav--next{right:24px;} } /* ================= NEWSLETTER ================= */ .newsletter{background:var(--pearl);padding:64px 22px;border-top:1px solid var(--line);} .newsletter__inner{max-width:640px;margin:0 auto;text-align:center;} .newsletter .sect-eyebrow{margin-bottom:10px;} .newsletter__title{margin:0 0 12px;} .newsletter__sub{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.98rem;line-height:1.6;color:var(--muted);margin:0 auto 26px;max-width:46ch;} .newsletter__sub strong{color:var(--ink);} .newsletter__form{display:flex;gap:12px;max-width:480px;margin:0 auto;} .newsletter__input{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:9px;padding:15px 18px;font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.92rem;color:var(--ink);transition:border-color .2s,box-shadow .2s;} .newsletter__input::placeholder{color:var(--muted);} .newsletter__input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(194,161,91,.16);} .newsletter__btn{flex:none;} .newsletter__fine{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.76rem;color:var(--muted);margin:16px 0 0;} @media(max-width:560px){ .newsletter{padding:48px 16px;} .newsletter__form{flex-direction:column;} .newsletter__btn{width:100%;justify-content:center;} } /* ================= FOOTER ================= */ .site-footer{background:#0a0908;color:rgba(250,247,241,.7);position:relative;} .site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(194,161,91,.5),transparent);} .site-footer__top{max-width:var(--maxw);margin:0 auto;padding:54px 22px 32px;text-align:center;border-bottom:1px solid rgba(233,220,190,.12);} .footer__brand{display:inline-block;} .footer__logo{height:46px;width:auto;display:block;margin:0 auto 16px;} .footer__tagline{font-family:"Cormorant Garamond","Cormorant Fallback",Georgia,"Times New Roman",serif;font-style:italic;font-size:1.15rem;color:rgba(250,247,241,.62);margin:0 auto 20px;max-width:48ch;line-height:1.4;} .footer__social{display:flex;justify-content:center;gap:12px;} .footer__social a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(233,220,190,.45);background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:#F0E6CC;transition:.25s var(--ease);} .footer__social a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-2px);} .footer__social svg{width:19px;height:19px;fill:currentColor;stroke:none;} /* Even columns, whatever the count. Fixed fractions meant the link columns bunched to the left while the contact column's short lines left a wide empty band on the right. auto-fit shares the row equally and keeps doing so if a column is ever added or removed. */ .site-footer__grid{max-width:var(--maxw);margin:0 auto;padding:46px 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:34px;} .footer__h{font-family:"DM Sans","DM Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 18px;} /* The accordion control is a real