/* ============================================================ F. BINSABBAR storefront v3 - maison idiom, MONOCHROME. Black/white/grey only (no gold). Brand-library icons. Scaffolding full-width mega-menu. Reused live-site pieces: collection carousel, SliderCounter pagination, rich PDP details column, 3D/AR viewer, region+language selector, cookies dialog, card gradient grounds, product tags. Tajawal-first Arabic. Block-composed. 100% responsive. ============================================================ */ :root{ --paper:#FFFFFF; --cream:#FBFAF8; --sand-l:#F5F1EC; --sand:#E6E1D8; --greige:#D9D3C8; --ink:#121212; --ink-warm:#1C1814; --grey:#6A655C; --grey-l:#6F6A61; --hair:rgba(18,18,18,.12); --hair-soft:rgba(18,18,18,.06); --card-grad:linear-gradient(142deg,#f3f3f2,#ffffff); --frost:rgba(255,255,255,.14); --frost-b:rgba(255,255,255,.55); --chip:rgba(18,18,18,.05); --chip-b:rgba(18,18,18,.16); --mx:clamp(16px,3.5vw,50px); --maxw:1600px; --hh:88px; --ctrl-h:48px; --ctrl-h-sm:44px; --ctrl-pad:16px; /* unified form-control geometry (W1) */ /* ONE house family for display AND body (owner directive 2026-07-17): Futura PT, served by the house Adobe Fonts kit (use.typekit.net/vvg4egg.css, family slug "futura-pt"). WEIGHTS 300-400 ONLY - nothing in the storefront may set font-weight above 400. Two tokens are kept so a future directive can re-split display from body. */ --fdisp:"futura-pt","Futura PT","Futura",Helvetica,Arial,system-ui,sans-serif; --fbody:"futura-pt","Futura PT","Futura",Helvetica,Arial,system-ui,sans-serif; --far:"Tajawal","SF Arabic","Geeza Pro","Noto Naskh Arabic",sans-serif; --e1:cubic-bezier(.4,0,.2,1); --motif:11px; /* brand motif glyph size: 11px everywhere (owner decision). Only exception: .pv-noimg .ico 46px. */ /* ---- SEMANTIC TYPOGRAPHY ROLES (audited house baseline, 2026-07-17) ---- The single source for every storefront font size. Rules reference a ROLE, never a raw px value, so a role change reflects across every route, block and control at once. The section/PLP/editorial-H1 heading switches at exactly 768px. Desktop and tablet footer labels are the fixed 10/15 owner treatment; --ty-f-head is the 16/20 mobile accordion label. Latin tracking is .4px everywhere except overlines / eyebrows / references (1px, uppercase). Arabic zeroes all tracking (#site.ar, an intentional shaping/readability exception). */ --ty-track:.4px; /* house Latin tracking */ --ty-track-over:1px; /* overline / eyebrow / reference tracking */ --ty-body:16px; --ty-body-lh:24px; /* body copy, primary CTAs, PDP description/details/accordion */ --ty-compact:14px; --ty-compact-lh:21px; /* compact supporting text (genuinely secondary copy only) */ --ty-label:14px; --ty-label-lh:17.5px; /* labels, navigation, filters, product names + prices, standard + compact controls */ --ty-over:10px; --ty-over-lh:15px; /* overline / eyebrow / product reference (uppercase) */ --ty-h-sm:22px; --ty-h-sm-lh:27.5px; /* small heading / PDP product title (owner: 22px) */ --ty-h-sec:24px; --ty-h-sec-lh:30px; /* section + PLP heading + editorial story H1 (32/40 from 768px) */ --ty-h-hero:32px; --ty-h-hero-lh:40px; /* hero heading (fixed at every width) */ --ty-h-ed:24px; --ty-h-ed-lh:30px; /* editorial statement + editorial section headings */ --ty-f-head:16px; --ty-f-head-lh:20px; /* mobile footer accordion heading */ --ty-help:12px; --ty-help-lh:18px; /* helper / hint text (a helper is never below 10px) */ } @media(min-width:768px){:root{--ty-h-sec:32px;--ty-h-sec-lh:40px;}} *{box-sizing:border-box;} html,body{margin:0;padding:0;background:#fff;} body{background:var(--paper);} #site{background:var(--paper);color:var(--ink);font-family:var(--fbody);font-size:var(--ty-body);line-height:1.5;letter-spacing:var(--ty-track); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} img{display:block;max-width:100%;} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;} a{color:inherit;text-decoration:none;} :focus-visible{outline:2px solid var(--ink);outline-offset:3px;} ::selection{background:var(--ink);color:#fff;} .ico{width:24px;height:24px;color:inherit;flex:none;} #site.ar .flip{transform:scaleX(-1);} .wm{display:inline-flex;align-items:center;line-height:0;} .wm svg{height:21px;width:auto;display:block;} .wm .ar-lock{display:none;} #site.ar .wm .en-lock{display:none;} #site.ar .wm .ar-lock{display:inline-flex;} .house-mark svg{height:118px;width:auto;color:var(--ink);} /* type */ .disp{font-family:var(--fdisp);} #site.ar,#site.ar .disp{font-family:var(--far);} /* AR chrome: eyebrows, buttons, breadcrumbs, tags, mega-menu, footer, prices and counts hard-code var(--fdisp) (Latin), which would override the inherited Arabic and fall back to a system font. Re-point --fdisp itself to --far (Tajawal) inside AR so ALL display/chrome text uses one Arabic typeface. Tokenized, monochrome, letter-spacing still zeroed below. */ #site.ar{--fdisp:var(--far);} #site [lang="ar"]{font-family:var(--far);letter-spacing:0;text-transform:none;} #site.ar *{letter-spacing:0 !important;} .ey{font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--grey);font-weight:400;} .ey.on{color:rgba(255,255,255,.92);} .h1{font-family:var(--fdisp);font-weight:400;font-size:var(--ty-h-hero);line-height:var(--ty-h-hero-lh);letter-spacing:var(--ty-track);margin:0;} .h2{font-family:var(--fdisp);font-weight:400;font-size:var(--ty-h-sec);line-height:var(--ty-h-sec-lh);letter-spacing:var(--ty-track);margin:0;} .h2.title{letter-spacing:var(--ty-track);} .h3{font-family:var(--fdisp);font-weight:400;font-size:var(--ty-h-sm);line-height:var(--ty-h-sm-lh);letter-spacing:var(--ty-track);margin:0;} .lead{font-size:var(--ty-body);line-height:var(--ty-body-lh);color:var(--ink-warm);} .small{font-size:var(--ty-help);line-height:var(--ty-help-lh);color:var(--grey);} /* Owner-directed compact text link: 30px height + weight 500 (approved exceptions). */ .lcta{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);font-weight:500;display:inline-flex;align-items:center;gap:10px;color:inherit;min-width:44px;min-height:30px;padding-bottom:3px;border-bottom:1px solid currentColor;transition:gap .25s var(--e1);} .lcta:hover{gap:16px;} .lcta .ico{width:18px;height:18px;} /* buttons - pill; glass on image / black fill / black outline */ .btn{font-family:var(--fdisp);font-size:var(--ty-body);line-height:var(--ty-body-lh);letter-spacing:var(--ty-track);font-weight:400;height:52px;padding:0 34px; display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff; transition:opacity .25s,background .25s,color .25s,border-color .25s;} .btn:hover{opacity:.85;} .btn.out{background:transparent;color:var(--ink);} .btn.out:hover{background:var(--ink);color:#fff;opacity:1;} .btn.glass{background:var(--frost);color:#fff;border:1px solid var(--frost-b);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);} .btn.glass:hover{background:rgba(255,255,255,.26);opacity:1;} .btn.block{width:100%;} .btn .ico{width:16px;height:16px;} .btn.sm{height:46px;padding:0 24px;font-size:var(--ty-label);} /* arrow-only: circular icon button (a compact go/next action) */ .btn.abtn{width:52px;height:52px;padding:0;flex:none;} .btn.abtn .ico{width:18px;height:18px;} .btn.abtn.sm{width:46px;height:46px;} /* tag badge (frosted mono) */ .tag{font-family:var(--fdisp);font-size:var(--ty-over);font-weight:500;letter-spacing:var(--ty-track-over);text-transform:uppercase;padding:2px 9px;border:1px solid var(--frost-b);background:var(--frost);color:var(--ink);border-radius:999px;line-height:var(--ty-over-lh);opacity:.85;backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);} .tag.on{color:#fff;} /* ============ HEADER ============ */ .hdr{position:fixed;top:0;inset-inline:0;z-index:60;height:var(--hh);display:flex;align-items:center;color:#fff; border-bottom:1px solid transparent;transition:background .25s var(--e1),color .25s var(--e1),border-color .25s var(--e1),transform .34s var(--e1);} .hdr.solid{background:var(--paper);color:var(--ink);border-bottom-color:var(--hair);} /* A page may deliberately remove its hero scrim, but transparent white navigation still needs a stable reading ground. Keep the guard inside the header so it never changes editor-owned media. */ #site.hdr-overlay .hdr:not(.solid){background:transparent;text-shadow:0 1px 9px rgba(18,18,18,.42);} #site.hdr-overlay .hdr:not(.solid)::before{content:"";position:absolute;inset-inline:0;top:0;height:calc(var(--hh) * 2.4);z-index:0;pointer-events:none;background:linear-gradient(to bottom,rgba(18,18,18,.4),rgba(18,18,18,.18) 42%,transparent);} #site.hdr-overlay .hdr:not(.solid) .ico,#site.hdr-overlay .hdr:not(.solid) .wm svg{filter:drop-shadow(0 1px 5px rgba(18,18,18,.48));} /* hide-on-scroll-down, reveal-on-scroll-up (JS toggles .hdr-hidden; never hidden at the very top or while the mega is open) */ .hdr.hdr-hidden{transform:translateY(-100%);} .hdr .bar{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--mx);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;} .hdr .ico{width:18px;height:18px;} .brand{align-self:center;} .hdr .l,.hdr .r{display:flex;align-items:center;gap:18px;} .hdr .r{justify-content:flex-end;} .hbtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:44px;min-height:44px;font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);transition:opacity .25s;} .hbtn:hover,.icobtn:hover{opacity:.6;} /* 44px hit area on the icon buttons without enlarging the glyph or shifting spacing (negative margin nets the footprint back to the ~20px glyph). */ .icobtn{display:inline-flex;align-items:center;justify-content:center;position:relative;min-width:44px;min-height:44px;margin-inline:-12px;} .brand{grid-column:2;justify-self:center;min-width:44px;min-height:44px;align-items:center;justify-content:center;} .bagcount{position:absolute;inset-inline-end:3px;top:5px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--fdisp);font-size:var(--ty-over);line-height:16px;text-align:center;} .hide-sm{display:inline-flex;} .show-sm{display:none;} @media(max-width:900px){.hdr{--hh:54px;} .hide-sm{display:none;} .show-sm{display:inline-flex;} .hdr .bar{grid-template-columns:1fr auto 1fr;} .wm svg{height:16px;} .hdr .ico{width:18px;height:18px;}} /* ---- left navigation drawer with a category gallery stage ---- */ .scrim{position:fixed;inset:0;background:rgba(18,18,18,.48);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s;z-index:70;} .scrim.open{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s;} .mega{position:fixed;inset-block:0;inset-inline-start:0;z-index:80;display:flex;flex-direction:column;width:clamp(360px,33.333vw,520px);height:100vh;height:100dvh;color:var(--ink);background:transparent;border-inline-end:1px solid var(--hair);overflow:visible;transform:translateX(-102%);transition:transform 1.4s cubic-bezier(.19,1,.22,1),visibility 0s 1.4s;visibility:hidden;} #site.ar .mega{transform:translateX(102%);} .mega.open{transform:none;visibility:visible;transition:transform 1.4s cubic-bezier(.19,1,.22,1),visibility 0s;} #site.ar .mega.open{transform:none;} .mega.closing{transform:translateX(-102%);visibility:hidden;transition:transform .48s var(--e1),visibility 0s .48s;} #site.ar .mega.closing{transform:translateX(102%);} .mega-top{position:relative;z-index:5;flex:none;height:var(--hh);display:flex;align-items:center;background:var(--paper);} .mega-top .bar{width:100%;padding-inline:var(--mx);display:flex;align-items:center;justify-content:flex-start;} .mega-top .ico{width:18px;height:18px;} .mega-inner{position:relative;flex:1;min-height:0;background:var(--paper);overflow:visible;} .mega-side{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;padding:0 var(--mx);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;opacity:1;transform:none;transition:opacity .2s ease,transform .24s var(--e1);} .mega-side::-webkit-scrollbar,.mega-panel::-webkit-scrollbar,.mega-body::-webkit-scrollbar,.mega-feat::-webkit-scrollbar{display:none;} /* The parent rail stays put and fades (house idiom) while the category panel slides OVER it from the near edge; a translate here would extend the drawer scroll area. */ .mega.drilled .mega-side{opacity:0;pointer-events:none;} .mega-rail{list-style:none;margin:0;padding:0;} .mega-rail li{border-bottom:0;} .mega-rail button,.mega-rail .mega-direct,.mega-back,.mega-col a{position:relative;width:100%;min-height:58px;padding:12px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:start;color:var(--ink);font-family:var(--fdisp);font-size:20px;line-height:var(--ty-h-sm-lh);font-weight:400;letter-spacing:var(--ty-track);transition:opacity .2s;} .mega-rail button:hover,.mega-rail button:focus-visible,.mega-rail .mega-direct:hover,.mega-rail .mega-direct:focus-visible,.mega-back:hover,.mega-back:focus-visible,.mega-col a:hover,.mega-col a:focus-visible{opacity:.55;} .mega-rail button .ico,.mega-back .ico{width:1em;height:1em;opacity:1;color:var(--ink);flex:none;} .mega-rail .mega-direct .ico{opacity:.45;} /* Utility controls form the drawer's full-width footer block. */ .mega-util{margin-top:auto;margin-inline:calc(var(--mx) * -1);padding:24px var(--mx) 28px;border-top:1px solid var(--hair-soft);display:flex;flex-direction:column;gap:9px;} .mega-ulinks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;} /* Owner-directed 16px/32px utility links (approved exception to the 44px target rule). */ .mega-ulinks a{width:fit-content;min-height:32px;display:inline-flex;align-items:center;gap:9px;color:var(--grey);font-family:var(--fdisp);font-size:16px;line-height:var(--ty-body-lh);letter-spacing:var(--ty-track);transition:color .2s;} .mega-ulinks a:hover{color:var(--ink);} .mega-ulinks a .ico{width:17px;height:17px;flex:none;} /* Account and Wishlist form one mobile-only group. They use the same link styling as the authored service links and stay hidden where the desktop header already carries them. */ .mega-syslinks{display:none;} .mega-ship{width:fit-content;min-height:44px;display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);transition:opacity .2s;} .mega-ship .ico{width:17px;height:17px;}.mega-ship:hover{opacity:.6;} .mega-langs{display:inline-flex;align-items:center;gap:11px;width:fit-content;} .mega-lang{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--grey);font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);transition:color .2s;} .mega-lang.on{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;} .mega-lang:hover{color:var(--ink);}.mega-lang-sep{color:var(--hair);} /* The category panel replaces the category list inside the drawer. */ /* Owner directive: drilling REPLACES the main column with a pure crossfade (no slide); the featured imagery then slides out from behind the drawer with its own fade (.mega-feat). */ .mega-panel{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;background:var(--paper);opacity:0;visibility:hidden;transition:opacity .34s ease,visibility 0s .34s;overflow:visible;} .mega.drilled .mega-panel{opacity:1;visibility:visible;transition:opacity .34s ease,visibility 0s;} .mega-back{z-index:3;flex:none;padding-inline:var(--mx);justify-content:flex-start;background:var(--paper);} .mega-body{position:relative;z-index:3;flex:1;min-height:0;padding:26px var(--mx) 46px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px;align-content:start;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;} .mega-body.empty{display:none;} .mega-col h4{margin:0 0 14px;color:var(--grey);font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);font-weight:400;letter-spacing:var(--ty-track-over);text-transform:uppercase;} .mega-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;} /* Featured image cards reveal on a stage behind the drawer. */ .mega-feat{--mega-feat-gap:clamp(18px,2vw,30px);--mega-feat-top:calc(var(--hh) + clamp(30px,4vw,58px));position:absolute;z-index:1;inset-block-start:calc(var(--hh) * -1);inset-block-end:auto;inset-inline-start:100%;width:calc(100vw - clamp(360px,33.333vw,520px));height:calc(100% + var(--hh));padding:var(--mega-feat-top) clamp(30px,4vw,58px) clamp(30px,4vw,58px);display:flex;flex-direction:column;gap:var(--mega-feat-gap);background:var(--paper);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;scroll-snap-type:none;scroll-padding-block-start:var(--mega-feat-top);opacity:0;transform:translateX(-46px);transition:opacity .42s ease,transform .42s var(--e1);} .mega-feat.scrollable{scroll-snap-type:y proximity;} .mega-feat-page{flex:0 0 100%;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:max-content;gap:var(--mega-feat-gap);align-content:start;scroll-snap-align:start;} .mega-feat-page[data-page-count="1"]{grid-template-columns:minmax(0,min(100%,420px));} .mega-feat-page[data-page-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));} .mega-feat-page[data-page-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr));} #site.ar .mega-feat{transform:translateX(46px);} .mega.drilled .mega-feat{opacity:1;transform:none;transition:opacity .75s .18s ease,transform 1.55s cubic-bezier(.19,1,.22,1);} #site.ar .mega.drilled .mega-feat{transform:none;} .mega-feat.empty{display:none;} .mfeat{display:flex;flex-direction:column;color:inherit;min-width:0;min-height:0;} .mfeat-img{display:block;flex:none;min-height:0;aspect-ratio:4/5;background:var(--sand-l);background-size:cover;background-position:center;overflow:hidden;transition:opacity .3s,transform .8s var(--e1);} .mfeat:hover .mfeat-img,.mfeat:focus-visible .mfeat-img{opacity:.88;transform:translateY(-4px);} .mfeat-cap{display:block;margin-top:10px;color:var(--ink);font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);} @keyframes mega-feature-in{from{opacity:0;transform:translateY(-22px);}to{opacity:1;transform:none;}} .mega.drilled .mfeat{animation:mega-feature-in .6s var(--e1) both;animation-delay:calc(.18s + (var(--mfeat-order,0) * .11s));} @media(max-width:900px){ .mega,#site.ar .mega{width:100vw;border-inline-end:0;background:var(--paper);overflow:hidden;transform:translateY(-102%);transition-duration:.65s;} .mega.open,#site.ar .mega.open{transform:none;transition-duration:.65s;} .mega.closing,#site.ar .mega.closing{transform:translateY(-102%);transition-duration:.42s;} .mega-top{height:auto;min-height:var(--hh);padding-top:env(safe-area-inset-top);} .mega-top .bar{min-height:var(--hh);} .mega-side{padding-top:0;} .mega-rail button,.mega-rail .mega-direct,.mega-back,.mega-col a{min-height:44px;} .mega-util{padding-bottom:max(28px,env(safe-area-inset-bottom));} .mega-syslinks{display:flex;margin-block:16px 24px;} .mega-panel{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;transform:translateY(-12px);transition:opacity .22s ease,transform .3s var(--e1),visibility 0s .3s;} .mega.drilled .mega-panel{transform:none;transition:opacity .24s .08s ease,transform .32s .08s var(--e1),visibility 0s;} .mega-body{flex:none;min-height:auto;padding-top:20px;grid-template-columns:1fr;gap:24px;overflow:visible;} .mega-feat,.mega-feat[data-count]{position:relative;inset:auto;width:auto;height:auto;padding:10px var(--mx) 48px;gap:28px;overflow:visible;scroll-snap-type:none;opacity:0;transform:translateY(-12px);} .mega-feat-page,.mega-feat-page[data-page-count]{flex:none;min-height:0;grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto;gap:28px;} .mega-feat-page[data-page-count="3"] .mfeat:nth-child(3){grid-column:auto;} #site.ar .mega-feat{transform:translateY(-12px);} .mega.drilled .mega-feat{opacity:1;transform:none;transition:opacity .34s .16s ease,transform .52s var(--e1);} #site.ar .mega.drilled .mega-feat{transform:none;} .mfeat-img{flex:none;min-height:0;aspect-ratio:4/5;} @keyframes mega-mobile-item-in{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}} .mega.open:not(.drilled) .mega-rail li,.mega.open:not(.drilled) .mega-ulinks li,.mega.open:not(.drilled) .mega-ship,.mega.open:not(.drilled) .mega-langs,.mega.drilled .mega-back,.mega.drilled .mega-col{animation:mega-mobile-item-in .3s var(--e1) both;} .mega.open:not(.drilled) .mega-rail li:nth-child(1){animation-delay:.04s;} .mega.open:not(.drilled) .mega-rail li:nth-child(2){animation-delay:.08s;} .mega.open:not(.drilled) .mega-rail li:nth-child(3){animation-delay:.12s;} .mega.open:not(.drilled) .mega-rail li:nth-child(4){animation-delay:.16s;} .mega.open:not(.drilled) .mega-rail li:nth-child(5){animation-delay:.2s;} .mega.open:not(.drilled) .mega-rail li:nth-child(n+6){animation-delay:.24s;} .mega.open:not(.drilled) .mega-syslinks li:nth-child(1){animation-delay:.28s;} .mega.open:not(.drilled) .mega-syslinks li:nth-child(2){animation-delay:.32s;} .mega.open:not(.drilled) .mega-service-links li{animation-delay:.36s;} .mega.open:not(.drilled) .mega-ship{animation-delay:.4s;} .mega.open:not(.drilled) .mega-langs{animation-delay:.44s;} .mega.drilled .mega-back{animation-delay:.08s;} .mega.drilled .mega-col:nth-child(1){animation-delay:.12s;} .mega.drilled .mega-col:nth-child(n+2){animation-delay:.16s;} } /* ============ VIEWS ============ */ .view{display:none;} .view.active{display:block;} .contain{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--mx);} .band{padding-block:clamp(56px,9vw,120px);} .fb-404{min-height:100vh;display:grid;place-items:center;padding-block:clamp(48px,9vw,120px);text-align:center;} .fb-404-in{width:min(620px,100%);} .fb-404-mark{width:56px;height:auto;margin:0 auto 28px;} .fb-404 .h1{margin-bottom:18px;} .fb-404 .lead{margin:8px auto;} .fb-404 .btn{margin-top:28px;} .pad-top{padding-top:var(--hh);} /* HERO */ .hero{position:relative;height:92vh;min-height:520px;display:flex;align-items:flex-end;background-size:cover;background-position:center;overflow:hidden;} .hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:drift 16s ease forwards;} .hero .sc{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(18,18,18,.28),transparent 26%),linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.12) 40%,transparent 62%);} .hero .in{position:relative;z-index:2;width:100%;max-width:none;margin-inline:0;color:#fff;padding-inline:var(--mx);padding-bottom:var(--mx);text-align:start;} .hero .h1{color:#fff;margin:16px 0 22px;max-width:30ch;text-wrap:balance;} @keyframes drift{to{transform:scale(1.06);}} .stmt{background:var(--cream);text-align:center;} .stmt .in{max-width:58ch;margin-inline:auto;} .stmt .h2{margin-bottom:22px;} .stmt .lead{margin-bottom:26px;} .full{position:relative;min-height:82vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background-size:cover;background-position:center;} .full.sm{min-height:78vh;} .full .sc{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 62%,rgba(0,0,0,.5),rgba(0,0,0,.28) 55%,rgba(0,0,0,.12));} .full .in{position:relative;z-index:2;max-width:44ch;padding-inline:24px;} .full .h2{color:#fff;margin:14px 0 24px;} /* ---- SliderCounter (reusable carousel + pagination) ---- */ .row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:40px;flex-wrap:wrap;} .slider{position:relative;} .rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px;} .rail::-webkit-scrollbar{display:none;} .rail>*{flex:0 0 clamp(220px,23vw,300px);scroll-snap-align:start;} .rail.collections>*{flex-basis:clamp(240px,26vw,340px);} .fb-collection-carousel{padding-bottom:24px;} .fb-collection-carousel .rail.collections{padding-inline:var(--mx);scroll-padding-inline:var(--mx);} .sctrl{width:fit-content;max-width:calc(100% - 32px);display:flex;align-items:center;justify-content:center;gap:0;margin:24px auto 0;padding:6px;background:rgba(189,189,189,.16);-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);border:1px solid rgba(255,255,255,.1);border-radius:100vh;} .sctrl[hidden]{display:none!important;} .sarrow{display:none;} .sdots{display:flex;gap:0;align-items:center;justify-content:center;flex:0 1 auto;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;} .sdots::-webkit-scrollbar{display:none;} .sdot{position:relative;width:22px;height:22px;flex:0 0 22px;border-radius:0;background:transparent;padding:0;} .sdot::before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:999px;background:#000;opacity:.8;transform:translate(-50%,-50%);} .sdot.on::before{display:none;} .sdot-gallery .ico{width:14px;height:14px;color:var(--ink);opacity:.85;} /* collection card (reused, rounded per owner setting) */ .ccard{display:block;color:inherit;} .ccard .pv{aspect-ratio:5/6;background:#f4f4f4;overflow:hidden;border-radius:14px;} .ccard .pv img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e1);} .ccard:hover .pv img{transform:scale(1.04);} .ccard .nm{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);font-weight:400;margin:14px 0 2px;} .ccard .cc-ey{font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--grey);margin-top:14px;} .ccard .cc-ey + .nm{margin-top:4px;} .ccard .dc{font-size:var(--ty-compact);line-height:var(--ty-compact-lh);color:var(--grey);} /* product card - gradient ground + tag */ .pcard{position:relative;display:block;color:inherit;min-width:0;} .pcard .pv{position:relative;aspect-ratio:1/1;background:var(--card-grad);overflow:hidden;} .pcard .pv img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e1);} .pcard:hover .pv img{transform:scale(1.04);} /* swipeable image track on the card (touch scroll-snap; no dots/arrows) */ .pcard .pv-track{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;} .pcard .pv-track::-webkit-scrollbar{display:none;} .pcard .pv-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;} .pcard:hover .pv-track img{transform:none;} .pcard .tagrow{position:absolute;top:12px;inset-inline-start:12px;display:flex;gap:6px;z-index:2;} .pcard .wish{position:absolute;top:0;inset-inline-end:0;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);opacity:0;transition:opacity .25s;} .pcard .wish .ico{width:16px;height:16px;} .pcard:hover .wish,.pcard:focus-within .wish{opacity:1;} /* Saved state: a SAVED heart stays visible on every device and renders FILLED. The two-icon pattern ([data-wish] carries an outline + a filled glyph) works everywhere the heart appears. */ .pcard .wish.on{opacity:1;} @media(hover:none){.pcard .wish{opacity:.92;}} [data-wish] .ico-heart-f{display:none;} [data-wish].on .ico-heart-o{display:none;} [data-wish].on .ico-heart-f{display:inline-block;} .pcard .meta{padding-top:14px;min-height:70px;} .pcard .pprice{opacity:.7;} /* single-line title: nowrap + horizontal scroll on overflow (touch native, desktop drag), with a trailing fade added by JS (.is-clip) only when it overflows; the fade flips to the leading edge in AR. */ .pname{font-size:var(--ty-label);letter-spacing:var(--ty-track);margin:0;line-height:var(--ty-label-lh);white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;scrollbar-width:none;-ms-overflow-style:none;} .pname::-webkit-scrollbar{display:none;} .pname.is-clip{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent 100%);mask-image:linear-gradient(to right,#000 82%,transparent 100%);cursor:grab;} #site.ar .pname.is-clip{-webkit-mask-image:linear-gradient(to left,#000 82%,transparent 100%);mask-image:linear-gradient(to left,#000 82%,transparent 100%);} .pname.is-drag{cursor:grabbing;user-select:none;} .pprice{font-size:var(--ty-label);line-height:var(--ty-label-lh);margin-top:6px;font-variant-numeric:tabular-nums;white-space:nowrap;} .pprice.por{font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--ink);} /* editorial split */ .split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;} .split .imgcol{position:relative;min-height:clamp(420px,52vw,660px);background-size:cover;background-position:center;} .split .txtcol{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,6vw,96px);} .split .txtcol .h2{margin:14px 0 18px;} .split .txtcol .lead{margin-bottom:26px;max-width:42ch;} .split[data-side="right"] .imgcol{order:2;} .split[data-side="right"] .txtcol{order:1;} @media(max-width:820px){.split{grid-template-columns:1fr;} .split .imgcol,.split[data-side="right"] .imgcol{order:0;min-height:62vw;} .split .txtcol,.split[data-side="right"] .txtcol{order:1;padding:48px var(--mx);}} /* discover tiles */ .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} @media(max-width:820px){.tiles{grid-template-columns:1fr;}} .tile{position:relative;aspect-ratio:3/4;overflow:hidden;display:flex;align-items:flex-end;color:#fff;} .tile .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 5s ease;} .tile:hover .bg{transform:scale(1.05);} .tile .sc{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%);} .tile .cap{position:relative;z-index:2;padding:24px;} .tile .cap .h3{color:#fff;} /* ============ PLP ============ */ .plp-hero{position:relative;height:52vh;min-height:340px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background-size:cover;background-position:center;} .plp-hero .sc{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 60%,rgba(0,0,0,.5),rgba(0,0,0,.28) 60%,rgba(0,0,0,.12));} .plp-hero .in{position:relative;z-index:2;} .plp-hero .h1{color:#fff;} .plp-hero .lead{color:rgba(255,255,255,.92);margin-top:12px;} /* Owner-directed breadcrumb: 16px sentence case, ink, 44px line. */ .crumb{font-family:var(--fdisp);font-size:16px;line-height:44px;letter-spacing:0;color:var(--ink);padding-block:20px;} .crumb a:hover{color:var(--ink);} .filterbar{position:sticky;top:var(--hh);z-index:30;background:var(--paper);border-block:1px solid var(--hair);} .filterbar .in{display:flex;justify-content:space-between;align-items:center;padding-block:14px;} .fl,.fr{display:flex;align-items:center;gap:22px;} .fbtn{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);display:inline-flex;gap:8px;align-items:center;min-height:44px;} .fbtn .ico{width:15px;height:15px;} .fcount{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);color:var(--grey);} .plp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 20px;padding-block:clamp(40px,5vw,64px);} @media(max-width:900px){.plp-grid{grid-template-columns:repeat(2,1fr);gap:44px 16px;}} .loadmore{display:flex;justify-content:center;padding-bottom:clamp(48px,7vw,96px);} /* ============ PDP ============ */ .pdp-wrap{display:grid;grid-template-columns:62% 38%;align-items:start;} @media(max-width:900px){.pdp-wrap{grid-template-columns:1fr;}} .pdp-gal{display:flex;flex-direction:column;gap:6px;} .pdp-gal .rail.gallery>*{flex:0 0 100%;} .pdp-slide{position:relative;aspect-ratio:4/5;background:var(--card-grad);overflow:hidden;} .pdp-slide img{width:100%;height:100%;object-fit:cover;} .pdp-hero-fr{position:relative;aspect-ratio:4/5;background:var(--card-grad);overflow:hidden;} .pdp-hero-fr img{width:100%;height:100%;object-fit:cover;} .pdp-gal .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;} .pdp-gal .thumbs .fr{aspect-ratio:4/5;background:var(--card-grad);overflow:hidden;} .pdp-gal .thumbs img{width:100%;height:100%;object-fit:cover;} /* 3D toggle + viewer overlay */ .v3d-toggle{position:absolute;bottom:14px;inset-inline-start:16px;z-index:3;width:36px;height:36px;border-radius:100vh;background:rgba(189,189,189,.16);color:var(--ink);border:1px solid rgba(255,255,255,.1);display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px);transition:background .2s,color .2s,border-color .2s,opacity .2s,transform .2s;} .v3d-toggle:hover{background:rgba(189,189,189,.26);} .v3d-toggle.on{background:var(--ink);color:#fff;border-color:var(--ink);} .v3d-toggle .ico{width:14px;height:14px;} .v3d-toggle[hidden]{display:none!important;} .pdp-gal.fbj-personalizing .v3d-toggle{opacity:0;transform:translateY(8px);pointer-events:none;} .v3d{position:absolute;inset:0;z-index:2;background:var(--card-grad);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;opacity:0;visibility:hidden;transition:opacity .3s;} .v3d.on{opacity:1;visibility:visible;} .v3d .cube{width:96px;height:96px;transform-style:preserve-3d;animation:spin3d 9s linear infinite;} .v3d .cube span{position:absolute;inset:0;border:1px solid rgba(255,255,255,.5);} .v3d .cube .f1{transform:translateZ(48px);} .v3d .cube .f2{transform:rotateY(90deg) translateZ(48px);} .v3d .cube .f3{transform:rotateY(180deg) translateZ(48px);} .v3d .cube .f4{transform:rotateY(270deg) translateZ(48px);} .v3d .cube .f5{transform:rotateX(90deg) translateZ(48px);} .v3d .cube .f6{transform:rotateX(-90deg) translateZ(48px);} @keyframes spin3d{to{transform:rotateX(-20deg) rotateY(360deg);}} .v3d .cap{color:rgba(255,255,255,.7);font-family:var(--fdisp);font-size:var(--ty-over);letter-spacing:var(--ty-track-over);text-transform:uppercase;text-align:center;max-width:30ch;line-height:1.6;} .pdp-info{position:sticky;top:calc(var(--hh) + 20px);padding:clamp(28px,4vw,56px);} @media(max-width:900px){.pdp-info{position:static;padding:32px 0 0;}} .pdp-info .tagrow{display:flex;gap:6px;margin-bottom:14px;} .pdp-info .tag{color:var(--ink);} .pdp-info .h3{margin:8px 0 0;} .pdp-price{font-size:var(--ty-label);line-height:var(--ty-label-lh);margin:18px 0;font-variant-numeric:tabular-nums;} .pdp-price.por{font-family:var(--fdisp);font-size:var(--ty-label);letter-spacing:var(--ty-track-over);text-transform:uppercase;} .pdp-invref{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--grey);margin-bottom:20px;} .invdot{display:inline-flex;align-items:center;gap:7px;} .invdot i{width:8px;height:8px;border-radius:999px;background:var(--ink);} .invdot.low i{background:transparent;border:1.5px solid var(--ink);} .pdp-desc{font-size:var(--ty-body);line-height:var(--ty-body-lh);color:var(--ink-warm);max-width:42ch;margin-bottom:24px;} .opt{margin-bottom:22px;} .opt .lbl{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);color:var(--grey);margin-bottom:10px;} /* PDP quantity now uses the kit .stepper component (see UNIFIED FORM + UI COMPONENTS) */ .pdp-cta{display:flex;flex-direction:column;gap:10px;margin:8px 0 16px;} .wishline{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);} .reassure{font-family:var(--fdisp);font-size:var(--ty-help);line-height:var(--ty-help-lh);letter-spacing:var(--ty-track);color:var(--grey);margin-top:8px;} .acc{margin-top:22px;border-top:1px solid var(--hair);} .acc .item{border-bottom:1px solid var(--hair);} .acc .q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-body-lh);letter-spacing:var(--ty-track);} .acc .q .ico{width:16px;height:16px;transition:transform .25s;} .acc .item.open .q .ico{transform:rotate(45deg);} .acc .a{max-height:0;overflow:hidden;transition:max-height .25s ease;} .acc .a .inn{padding-bottom:18px;max-width:44ch;font-size:var(--ty-label);color:var(--grey);line-height:var(--ty-compact-lh);} /* ============ COMPONENTS PAGE ============ */ .sys-head{background:var(--cream);text-align:center;} .sys-sec{padding-block:clamp(40px,6vw,72px);border-top:1px solid var(--hair);} .sys-sec>.contain>.ey{margin-bottom:26px;display:block;} .sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;} .sw{border:1px solid var(--hair);} .sw .chip{height:76px;} .sw .lab{padding:10px 12px;font-size:var(--ty-help);} .sw .lab b{display:block;font-family:var(--fdisp);font-size:var(--ty-over);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--grey);margin-top:2px;} .type-row{padding:14px 0;border-bottom:1px solid var(--hair-soft);display:flex;justify-content:space-between;align-items:baseline;gap:20px;} .type-row .tk{font-family:var(--fdisp);font-size:var(--ty-over);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--grey);white-space:nowrap;} .icons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:2px;background:var(--hair-soft);border:1px solid var(--hair-soft);} .icell{background:var(--paper);display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 8px;} .icell .ico{width:24px;height:24px;color:var(--ink);} .icell .n{font-family:var(--fdisp);font-size:var(--ty-over);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--grey);text-align:center;} .icell.new{background:var(--cream);} .blocks-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;} .blk{border:1px solid var(--hair);padding:18px;} .blk .bn{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);margin:0 0 6px;} .blk .bd{font-size:var(--ty-compact);color:var(--grey);line-height:var(--ty-compact-lh);} .blk .bt{font-family:var(--fdisp);font-size:var(--ty-over);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--ink);margin-top:10px;display:block;} /* ============ FOOTER ============ */ footer{border-top:1px solid var(--hair);} .news{text-align:center;padding-block:clamp(48px,7vw,84px);border-bottom:1px solid var(--hair);} .news .ey{margin-bottom:22px;} .news form,.nl-form{display:inline-flex;align-items:center;gap:14px;border-bottom:1px solid var(--ink);padding-bottom:8px;min-width:min(420px,82vw);justify-content:space-between;} .news .inp.bare{flex:1;min-width:0;min-height:44px;} /* the field is the kit .inp.bare; the form owns the underline (store.css UNIFIED COMPONENTS) */ .news button{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);white-space:nowrap;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;} .nl-disclosure{max-width:54ch;margin:14px auto 0;color:var(--grey);font-size:var(--ty-help);line-height:var(--ty-help-lh);} .nl-disclosure a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;} /* Centered House signature: ONE gate logo + ONE fixed signature sentence (replaces the retired global footer newsletter sign-up and the old .fbrand duplicate branding). */ .fsig{text-align:center;padding-block:clamp(44px,6vw,76px);border-bottom:1px solid var(--hair);} .fsig-in{display:flex;flex-direction:column;align-items:center;gap:0;} .fsig-mark{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--ink);} .fsig-mark img{display:block;width:clamp(24px,2.4vw,32px);height:auto;} .fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding-block:clamp(40px,6vw,68px);} /* Owner-directed: footer group headings are 10px uppercase weight 500 at EVERY width (an approved exception to the 400-weight cap; the kit serves the 500 cut). */ .fcol h5{font-family:var(--fdisp);font-size:10px;line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--ink);margin:0 0 16px;font-weight:500;} .fcol .q{display:none;} .fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;} .fcol a{font-size:var(--ty-label);line-height:var(--ty-label-lh);color:var(--grey);transition:color .2s;min-width:44px;min-height:20px;display:inline-flex;align-items:center;} .fcol a:hover{color:var(--ink);} .futil{border-top:1px solid var(--hair);padding-block:22px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;} .futil .sel{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);display:inline-flex;gap:9px;align-items:center;min-height:44px;} .futil .soc{display:flex;gap:18px;} .futil .soc a{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);text-transform:uppercase;color:var(--grey);min-height:44px;display:inline-flex;align-items:center;} .fbot{border-top:1px solid var(--hair-soft);padding-block:20px;text-align:center;} .fbot-wordmark{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;} .fbot-wordmark img{display:block;width:clamp(96px,10vw,120px);height:auto;} @media(max-width:820px){.fcols{grid-template-columns:1fr 1fr;gap:30px;}} @media(max-width:600px){ .fcols{grid-template-columns:1fr;gap:0;} .fcol{border-top:1px solid var(--hair-soft);} .fcol h5{display:none;} .fcol .q{display:flex;justify-content:space-between;align-items:center;width:100%;padding:18px 0;font-family:var(--fdisp);font-size:var(--ty-f-head);line-height:var(--ty-f-head-lh);letter-spacing:var(--ty-track);} .fcol .q .ico{width:14px;height:14px;transition:transform .25s;} .fcol.open .q .ico{transform:rotate(45deg);} .fcol ul{max-height:0;overflow:hidden;transition:max-height .25s ease;gap:0;} .fcol.open ul{max-height:400px;} .fcol ul li{padding-block:7px;} } /* ---- region / country + language modal (centred, monochrome) ---- */ .loc{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:20px;background:rgba(20,18,16,.42);opacity:0;visibility:hidden;transition:opacity .28s var(--e1),visibility .28s;} .loc.open{opacity:1;visibility:visible;} .loc-card{position:relative;width:min(540px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.24);padding:clamp(30px,4vw,46px);transform:translateY(10px);transition:transform .28s var(--e1);} .loc.open .loc-card{transform:none;} .loc-x{position:absolute;top:16px;inset-inline-end:16px;width:44px;height:44px;display:grid;place-items:center;color:var(--ink);background:var(--paper);border:1px solid var(--hair);border-radius:999px;transition:background .2s var(--e1),border-color .2s var(--e1);} .loc-x:hover{background:var(--sand-l);border-color:var(--ink);} .loc-x .ico{width:18px;height:18px;} .loc-h{font-size:var(--ty-h-sm);line-height:var(--ty-h-sm-lh);margin:0 0 12px;padding-inline-end:42px;} .loc-sub{margin:0 0 28px;font-size:var(--ty-compact);line-height:var(--ty-compact-lh);color:var(--ink-warm);max-width:44ch;} .loc-field{margin-bottom:20px;} .loc-field>label,.loc-field>.ey{display:block;margin-bottom:10px;} .loc-field .selfield{width:100%;} .loc-langs{display:flex;gap:10px;flex-wrap:wrap;} .loc-langs button{flex:1 1 140px;height:var(--ctrl-h);padding:0 20px;border:1px solid var(--hair);border-radius:999px;background:var(--paper);color:var(--ink);font-family:var(--fdisp);font-size:var(--ty-label);letter-spacing:var(--ty-track);transition:border-color .2s,background .2s,color .2s;} .loc-langs button:hover{border-color:var(--ink);} .loc-langs button.sel{border-color:var(--ink);background:var(--ink);color:#fff;} .loc-confirm{margin-top:8px;} .loc-all{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:var(--ctrl-h);margin-top:12px;padding:0 22px;border:1px solid var(--hair);border-radius:999px;background:var(--paper);font-size:var(--ty-label);transition:background .2s var(--e1),border-color .2s var(--e1);} .loc-all:hover{gap:10px;background:var(--sand-l);border-color:var(--ink);} #site.ar .loc-card{font-family:var(--far);} /* ---- full country / region selector page (#/regions) ---- */ .regsel{padding-block:clamp(28px,5vw,64px);} .regsel-head{margin-bottom:clamp(24px,4vw,48px);} .regsel-h{margin:8px 0 0;} .regsel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(24px,3vw,44px);} .regsel-col h3{font-size:var(--ty-body);line-height:var(--ty-body-lh);margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--hair);} .regsel-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;} .regsel-list button{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;text-align:start;padding:8px 0;font-size:var(--ty-label);line-height:var(--ty-label-lh);color:var(--ink-warm);transition:color .2s;} .regsel-list button:hover{color:var(--ink);} .regsel-lock{width:12px;height:12px;opacity:.55;flex:none;} .regsel-foot{margin-top:clamp(28px,4vw,52px);padding-top:20px;border-top:1px solid var(--hair);font-size:var(--ty-compact);line-height:var(--ty-compact-lh);color:var(--ink-warm);} .regsel-foot .ey{margin-inline-end:8px;} .regsel-intl{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:none;border:0;color:inherit;font:inherit;font-size:var(--ty-compact);cursor:pointer;padding:0;text-align:start;transition:gap .25s var(--e1),color .2s;} .regsel-intl:hover{gap:12px;color:var(--ink);} .regsel-intl .ico{width:14px;height:14px;} /* ---- cookies (docked bar + expandable preferences, monochrome) ---- */ .cookie{position:fixed;inset-inline:0;bottom:0;z-index:120;background:var(--paper);border-top:1px solid var(--ink);transform:translateY(110%);transition:transform .4s var(--e1);} .cookie.show{transform:none;} .cookie .in{max-width:var(--maxw);margin-inline:auto;padding:22px var(--mx);display:flex;align-items:center;gap:28px;flex-wrap:wrap;} .cookie .ck-copy{flex:1;min-width:260px;} .cookie-h{font-size:var(--ty-body);line-height:var(--ty-body-lh);margin:0 0 6px;} .cookie p{margin:0;font-size:var(--ty-compact);color:var(--ink-warm);max-width:72ch;line-height:var(--ty-compact-lh);} .cookie p a{text-decoration:underline;text-underline-offset:2px;} .cookie .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .cookie .prefs{width:100%;display:none;gap:22px;flex-wrap:wrap;align-items:center;padding-top:14px;margin-top:14px;border-top:1px solid var(--hair-soft);} .cookie.manage .prefs{display:flex;} .cookie .ck-decline{font-size:var(--ty-help);text-decoration:underline;text-underline-offset:2px;color:var(--ink-warm);min-height:44px;display:inline-flex;align-items:center;} .ck{display:inline-flex;align-items:center;gap:9px;font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);color:var(--ink-warm);} /* the cookie toggles are the kit .chk checkbox (store.css UNIFIED COMPONENTS) */ .ck .chk{width:44px;height:44px;} /* keep the governed target while the visible box remains 18px */ @media(max-width:640px){.cookie .in{gap:14px;} .cookie .acts{width:100%;} .cookie .acts .btn{flex:1;} .loc{padding:12px;} .loc-card{max-height:calc(100vh - 24px);padding:28px 20px 22px;border-radius:22px;} .loc-x{top:12px;inset-inline-end:12px;}} /* ============ MOTION ============ */ .js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--e1),transform .7s var(--e1);} .js .reveal.in{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){ .js .reveal{opacity:1 !important;transform:none !important;transition:opacity .3s;} .hero .bg,.tile .bg,.v3d .cube{animation:none !important;} .pcard:hover .pv img,.ccard:hover .pv img{transform:none;} .mega,.mega.open,.mega.closing{transition:transform .01ms linear,visibility 0s !important;} .mega-panel,.mega.drilled .mega-panel,.mega-feat,.mega.drilled .mega-feat{transition:opacity .01ms linear,transform .01ms linear,visibility 0s !important;} .mega-rail li,.mega-ulinks li,.mega-ship,.mega-langs,.mega-back,.mega-col,.mfeat{animation:none!important;} .mfeat-img{transition:none!important;}.hdr{transition:background .2s,color .2s,border-color .2s !important;} .rail{scroll-behavior:auto;} } /* ===================== storefront additions (overnight build) ===================== */ .fb-notice{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:300;background:var(--ink);color:#fff;font-family:var(--fdisp);font-size:var(--ty-label);letter-spacing:var(--ty-track);padding:13px 22px;border-radius:999px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;max-width:90vw;text-align:center;} .fb-notice.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);} .fb-notice.err{background:#3a3a3a;} #site.ar .fb-notice{font-family:var(--far);} /* Region nudge banner (geo suggestion). Light panel so the standard .btn / .btn.out contrast; monochrome, reuses house tokens + .btn.sm. */ .mkt-banner{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(200%);z-index:120;display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:min(640px,calc(100vw - 28px));background:var(--paper);color:var(--ink);border:1px solid var(--hair);padding:14px 20px;border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.16);transition:transform .42s var(--e1);} .mkt-banner.show{transform:translateX(-50%) translateY(0);} .mkt-banner-t{font-size:var(--ty-compact);line-height:var(--ty-compact-lh);color:var(--ink-warm);} .mkt-banner-a{display:flex;gap:10px;flex-wrap:wrap;} .mkt-banner .btn.sm{height:40px;padding:0 18px;} #site.ar .mkt-banner{font-family:var(--far);} /* quote block */ .qband{text-align:center;} .qband .qrule{display:block;width:48px;height:1px;background:var(--ink);margin:0 auto 26px;} .qband .qbig{font-size:var(--ty-h-ed);line-height:var(--ty-h-ed-lh);letter-spacing:var(--ty-track);color:var(--ink-warm);max-width:26ch;margin:0 auto;font-weight:400;} .qband .qcite{display:block;margin-top:18px;font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--grey);font-style:normal;} /* richtext block */ .rtband .rtbody{max-width:70ch;margin-inline:auto;} .rtband .rtbody p{margin:0 0 1em;} .rtband .rtbody a{border-bottom:1px solid currentColor;} /* spacer block: vertical whitespace + an optional contained hairline rule (monochrome) */ .fb-spacer{display:flex;align-items:center;justify-content:center;padding-inline:var(--mx);} .fb-spacer[data-size="sm"]{min-height:clamp(20px,3vw,32px);} .fb-spacer[data-size="md"]{min-height:clamp(36px,6vw,64px);} .fb-spacer[data-size="lg"]{min-height:clamp(56px,9vw,104px);} .fb-spacer[data-size="xl"]{min-height:clamp(80px,13vw,160px);} .fb-spacer .fb-rule{width:100%;max-width:var(--maxw);height:1px;background:var(--hair);} /* 3D iframe (replaces the concept cube) */ .fbj-3d-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--card-grad);} /* ===== review fixes (a11y focus / rtl bidi / contrast) ===== */ .pcard-a{display:block;color:inherit;} .pcard .wish{z-index:3;} .lead,.dc,.ccard .dc{unicode-bidi:plaintext;} /* ===================== owner directives (post-launch) ===================== */ /* NEW CREATIONS / product carousel block: edge-to-edge, no-gap row of up to 8 (heading stays contained). Owner directive: the block carries NO bottom padding. */ .band.s-newrow{padding-bottom:0;} .s-newrow .newrow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(28px,4vw,44px);} @media(max-width:1000px){.s-newrow .newrow{grid-template-columns:repeat(3,1fr);}} @media(max-width:640px){.s-newrow .newrow{grid-template-columns:repeat(2,1fr);}} .newrow .pcard .meta{padding:14px 12px 22px;} /* PLP grid: edge-to-edge, no gaps, no side margins + featured merchandising cards */ .plp-grid{grid-template-columns:repeat(4,1fr);gap:0;grid-auto-flow:dense;padding-top:0;padding-bottom:clamp(44px,6vw,72px);} @media(max-width:1100px){.plp-grid{grid-template-columns:repeat(3,1fr);}} @media(max-width:700px){.plp-grid{grid-template-columns:repeat(2,1fr);}} .plp-grid .pcard .meta{padding:14px 14px 26px;} .grid-gap-card{position:relative;display:flex;min-width:0;min-height:100%;overflow:hidden;background:var(--sand-l);color:var(--ink);text-align:start;align-self:stretch;} .grid-gap-card-in{width:100%;min-height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(20px,2.5vw,32px);padding:clamp(24px,4vw,56px);} .grid-gap-text{max-width:27ch;margin:0;font-family:var(--fdisp);font-size:clamp(20px,2.2vw,34px);line-height:1.18;letter-spacing:var(--ty-track);unicode-bidi:plaintext;} .grid-gap-cta{flex:none;max-width:100%;text-align:center;} @media(max-width:700px){.grid-gap-card-in{padding:clamp(22px,7vw,34px);}.grid-gap-text{font-size:clamp(18px,5vw,25px);}} .feat-card{position:relative;overflow:hidden;display:flex;align-items:flex-end;color:#fff;min-height:100%;} /* Featured merch cards sit on ONE grid row so their height always equals the product cards beside them (owner rule: featured card height == product card height). */ .feat-card.feat-big{grid-column:span 2;grid-row:span 1;} .feat-card.feat-wide{grid-column:span 2;grid-row:span 1;} @media(max-width:700px){.feat-card.feat-big,.feat-card.feat-wide{grid-column:1 / -1;grid-row:span 1;aspect-ratio:16 / 10;min-height:0;}} .feat-card .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 5s var(--e1);} .feat-card:hover .bg{transform:scale(1.05);} .feat-card .sc{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,18,18,.55),rgba(18,18,18,.04) 55%);} .feat-card .feat-cap{position:relative;z-index:2;padding:clamp(20px,2.6vw,34px);} .feat-card .feat-ey{color:rgba(255,255,255,.92);} .feat-card .feat-h{margin:8px 0 12px;max-width:16ch;} #site.ar .feat-card .feat-cap{text-align:right;} /* PDP additions (live parity): VAT note, advisor, personalization, share */ .pdp-price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:2px;} .pdp-vat{flex-basis:100%;font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--grey);} .pdp-advisor-body p{margin:0 0 16px;} .pdp-inline-action{width:fit-content;min-height:44px;color:var(--ink);background:transparent;} .pdp-inline-action .ico{width:17px;height:17px;} .pdp-inline-action.on{color:var(--ink);} .pdp-secondary-actions{display:flex;align-items:center;justify-content:flex-start;gap:clamp(24px,4vw,48px);padding-top:18px;} .pdp-secondary-action{flex:0 0 auto;} .pdp-variant{margin:20px 0 10px;} .pdp-variant-trigger{width:100%;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0;border-block:1px solid var(--hair);font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);color:var(--ink);text-align:start;} .pdp-variant-label{display:inline-flex;align-items:center;gap:6px;} .pdp-variant-label .ico{width:14px;height:14px;} .pdp-variant-value{font-weight:400;color:var(--grey);} .pdp-variant-active{overflow:hidden;} .pdp-variant-dialog{position:fixed;inset:0;z-index:190;display:grid;place-items:center;padding:24px;} .pdp-variant-dialog[hidden]{display:none;} .pdp-variant-backdrop{position:absolute;inset:0;width:100%;height:100%;background:rgba(20,18,16,.42);cursor:default;} .pdp-variant-sheet{position:relative;z-index:1;width:min(520px,100%);max-height:min(680px,calc(100dvh - 48px));overflow:auto;padding:clamp(28px,4vw,42px);background:var(--paper);border:1px solid var(--hair);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.22);} .pdp-variant-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px;} .pdp-variant-head .h3{margin:0;} .pdp-variant-close{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;flex:none;border:1px solid var(--hair);border-radius:999px;color:var(--ink);background:var(--paper);} .pdp-variant-close:hover{border-color:var(--ink);} .pdp-variant-close .ico{width:17px;height:17px;} .pdp-variant-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px;} .pdp-variant-option{min-height:52px;padding:0 14px;border:1px solid var(--hair);border-radius:999px;background:var(--paper);color:var(--ink);font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);} .pdp-variant-option:hover{border-color:var(--ink);} .pdp-variant-option.sel{border-color:var(--ink);background:var(--ink);color:#fff;} @media(max-width:640px){ .pdp-variant-dialog{place-items:end stretch;padding:0;} .pdp-variant-sheet{width:100%;max-height:78dvh;border-inline:0;border-bottom:0;border-radius:24px 24px 0 0;padding:26px 22px max(30px,env(safe-area-inset-bottom));} } .pdp-personalize{display:flex;flex-direction:column;margin:22px 0 8px;padding:0;border:0;background:transparent;} .pdp-personalize .pdp-personalize-open{margin:0;border-color:#6667ab;background:#fff;color:#6667ab;} .pdp-personalize .pdp-personalize-open:hover{border-color:#6667ab;background:#fff;color:#6667ab;opacity:.82;} .pdp-personalize .pdp-personalize-open .ico{width:19px;height:19px;} .pdp-personalize .pdp-personalize-open[hidden]{display:none;} .pdp-personalize-active{overflow:hidden;} .pdp-info.fbj-personalize-layer,.pdp-info.fbj-variant-layer{z-index:220;} .pdp-personalize-dialog{position:fixed;inset:0;z-index:180;display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,34vw);width:100vw;height:100dvh;background:#fff;color:#111;animation:pdp-personalize-dialog-in .18s ease-out;} .pdp-personalize-dialog[hidden]{display:none;} .pdp-personalize-viewer{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--card-grad);} .pdp-personalize-viewer .v3d{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:1;visibility:visible;background:var(--card-grad);} .pdp-personalize-viewer .fbj-3d-iframe{background:var(--card-grad);} /* 2D fallback preview: the personalization template image with the typed initials overlaid. */ .pdp-personalize-2d{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(20px,4vw,56px);} .pdp-personalize-2d-img{max-width:100%;max-height:100%;object-fit:contain;} /* Laser-engraving look: the initials read as a fine mark incised into the metal - a small size, tight tracking, blended into the surface (multiply) with a lit lower edge and a shadowed upper edge so the letters appear recessed rather than printed on top. */ .pdp-personalize-2d-initials{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:500;font-size:12px;line-height:1;letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;white-space:nowrap;pointer-events:none;color:rgba(38,38,38,.85);mix-blend-mode:multiply;text-shadow:0 .5px .4px rgba(255,255,255,.5),0 -.5px .4px rgba(0,0,0,.3);} .pdp-personalize-2d-initials:empty{display:none;} .pdp-personalize-panel{position:relative;min-width:0;min-height:0;background:#fff;border:0;overflow:hidden;} /* Top scroll-fade: the content itself fades out at the top edge as it scrolls up toward the model/image. The fade zone is shorter than the top padding, so at rest (unscrolled) it sits over empty padding and the heading stays fully visible - the text only fades while scrolling. */ .pdp-personalize-panel-in{height:100%;display:flex;flex-direction:column;padding:clamp(58px,7vh,88px) clamp(30px,4vw,64px) clamp(28px,4vh,48px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 clamp(44px,6vh,76px));mask-image:linear-gradient(to bottom,transparent 0,#000 clamp(44px,6vh,76px));} .pdp-personalize-close{position:absolute;top:22px;inset-inline-end:22px;z-index:2;width:44px;height:44px;border:1px solid rgba(17,17,17,.42);border-radius:999px;display:flex;align-items:center;justify-content:center;background:#fff;color:#111;transition:background .2s,color .2s;} .pdp-personalize-close:hover{background:#111;color:#fff;} .pdp-personalize-close .ico{width:18px;height:18px;} .pdp-personalize-heading{padding-inline-end:44px;} .pdp-personalize-heading .ey{color:#111;} .pdp-personalize-heading .h3{margin:10px 0 12px;color:#111;} .pdp-personalize-heading p{max-width:42ch;margin:0;color:rgba(17,17,17,.72);font-size:var(--ty-compact);line-height:var(--ty-compact-lh);} .pdp-personalize-product{display:flex;align-items:center;gap:14px;margin:clamp(28px,4vh,44px) 0 24px;padding:16px 0;border-block:1px solid rgba(17,17,17,.18);} .pdp-personalize-product>.ico{width:24px;height:24px;flex:0 0 auto;} .pdp-personalize-product div{display:flex;flex-direction:column;gap:4px;min-width:0;} .pdp-personalize-product strong{font-family:var(--fdisp);font-size:var(--ty-label);letter-spacing:var(--ty-track);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pdp-personalize-product span{font-family:var(--fdisp);font-size:var(--ty-over);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:rgba(17,17,17,.62);} .pdp-personalize-fields{margin-top:auto;padding-top:12px;} .pdp-personalize-label{display:flex;align-items:center;justify-content:space-between;gap:14px;} .pdp-personalize-label .fld-lbl{margin-bottom:8px;color:#111;} .pdp-personalize-label [data-personalize-count]{font-family:var(--fdisp);font-size:var(--ty-over);letter-spacing:var(--ty-track-over);color:rgba(17,17,17,.66);} .pdp-personalize .inp.line{height:50px;padding-inline:18px;border:1px solid rgba(17,17,17,.38);border-radius:999px;background:#fff;color:#111;font-family:var(--fdisp);font-size:18px;letter-spacing:.15em;text-transform:uppercase;} .pdp-personalize .inp.line:focus{border-color:#111;} .pdp-personalize .fld-help{max-width:94%;margin:9px 2px 0;color:rgba(17,17,17,.68);} .pdp-personalize-actions{display:flex;flex-direction:column;gap:10px;margin-top:26px;} .pdp-personalize-actions .btn{margin:0;border-color:#111;background:#111;color:#fff;} .pdp-personalize-actions .btn:hover:not(:disabled){background:#fff;color:#111;} .pdp-personalize-actions .btn:disabled{opacity:.32;cursor:not-allowed;} .pdp-personalize-actions .lcta{align-self:center;color:#111;} .pdp-personalize-legal{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(17,17,17,.18);font-size:10px;line-height:1.55;color:rgba(17,17,17,.66);} .pdp-personalize-legal a{text-decoration:underline;text-underline-offset:3px;} @keyframes pdp-personalize-dialog-in{from{opacity:0;}to{opacity:1;}} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;} @media(max-width:900px){ .pdp-personalize-dialog{grid-template-columns:1fr;grid-template-rows:52dvh 48dvh;} .pdp-personalize-panel{border:0;} .pdp-personalize-panel-in{padding:38px 22px max(28px,env(safe-area-inset-bottom));} .pdp-personalize-close{top:12px;inset-inline-end:14px;width:40px;height:40px;} .pdp-personalize-heading{padding-inline-end:36px;} .pdp-personalize-heading .h3{margin:7px 0 8px;} .pdp-personalize-heading p{font-size:var(--ty-compact);line-height:var(--ty-compact-lh);} .pdp-personalize-product{margin:20px 0 14px;padding:12px 0;} .pdp-personalize-fields{margin-top:0;padding-top:0;} .pdp-personalize-actions{margin-top:18px;} } @media(max-width:900px) and (max-height:700px){.pdp-personalize-dialog{grid-template-rows:46dvh 54dvh;}} @media(prefers-reduced-motion:reduce){.pdp-personalize-dialog{animation:none;}} /* PDP service and secondary actions follow the product information in one reading order. */ /* ===================== owner directives iter 2 ===================== */ /* card = ONE card, ONE background (image + title + price share the ground) */ .pcard-a{background:var(--sand-l);} .pcard .pv{background:transparent;} .pcard .meta{padding:14px 14px 20px;} .newrow .pcard .meta,.plp-grid .pcard .meta{padding:14px 16px 22px;} .pv-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;} .pv-noimg .ico{width:46px;height:46px;color:var(--greige);} .ptax{font-size:var(--ty-over);line-height:var(--ty-over-lh);color:var(--grey);margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* PDP collection description + Product Details icon list */ .pdp-coldesc{font-size:var(--ty-compact);line-height:var(--ty-compact-lh);color:var(--grey);margin:18px 0 4px;} .pdp-details{margin:22px 0 6px;padding-top:20px;} .pdp-details-h{font-size:var(--ty-body);line-height:var(--ty-body-lh);letter-spacing:var(--ty-track);font-weight:500;margin:0 0 14px;} .pdp-dl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;} .pdp-dl li{display:flex;align-items:center;gap:12px;font-size:var(--ty-label);line-height:var(--ty-compact-lh);color:var(--ink);} .pdp-dl li .ico{width:22px;height:22px;color:var(--ink);flex:none;} .pdp-dl-note{padding-inline-start:34px !important;color:var(--grey) !important;font-size:var(--ty-compact);line-height:var(--ty-compact-lh);} /* PDP gallery: DESKTOP = stacked column of all images (no slider) */ .pdp-gal .rail.gallery{flex-direction:column;overflow:visible;gap:6px;scroll-snap-type:none;} .pdp-gal .rail.gallery>*{flex:0 0 auto;} .pdp-gal .sctrl{display:none;} /* MOBILE = full-bleed carousel, gallery pinned to top, details scroll over it */ @media(max-width:900px){ /* The PDP already mounts at the viewport root. Keep the gallery full-bleed without widening the complete product surface or relying on global overflow clipping. */ .pdp-wrap{width:100%;min-width:0;margin-inline:0;} .pdp-gal{position:sticky;top:var(--hh);z-index:1;} .pdp-gal .rail.gallery{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;} .pdp-gal .rail.gallery>*{flex:0 0 100%;scroll-snap-align:start;} .pdp-gal .sctrl{display:flex;justify-content:center;position:relative;z-index:3;margin-top:-44px;padding-bottom:14px;} .pdp-info{position:relative;z-index:2;background:var(--paper);padding:30px var(--mx) 0;} } /* ===================== owner directives iter 3 ===================== */ /* Collection grid: each card has its OWN gradient bg + fills its cell (no white gaps) */ .pcard{height:100%;} .pcard-a{background:var(--card-grad);height:100%;} .pcard .pv img{object-fit:cover;} /* PDP: header OVERLAYS the gallery (transparent bg, ink glyphs over the light gallery) */ #site.pdp-view .hdr{color:var(--ink);} #site.pdp-view .hdr.solid{background:var(--paper);color:var(--ink);} /* PDP: gallery flush to top-left (no margins) + ONE continuous gradient bottom->top */ .pdp-wrap{grid-template-columns:60% 40%;align-items:stretch;} .pdp-gal{background:var(--card-grad);} .pdp-gal .rail.gallery{flex-direction:column;overflow:visible;gap:0;scroll-snap-type:none;padding-bottom:0;} .pdp-gal .rail.gallery>*{flex:0 0 auto;} .pdp-gal .sctrl{display:none;} .pdp-slide{background:transparent;aspect-ratio:4/5;} .pdp-slide img{object-fit:contain;} .pdp-info{position:sticky;top:var(--hh);align-self:start;margin-top:var(--hh);padding:34px clamp(24px,4vw,64px) 72px clamp(34px,4.5vw,76px);} .pdp-crumb{color:var(--ink);} /* Related rail: edge-to-edge cards with no side padding and no gaps. The heading stays contained. */ .pdp-related .rail.rel{gap:0;} .pdp-related .rail.rel>*{flex:0 0 25%;} @media(max-width:1000px){.pdp-related .rail.rel>*{flex-basis:33.333333%;}} @media(max-width:640px){.pdp-related .rail.rel>*{flex-basis:50%;}} @media(max-width:900px){.pdp-related .row-head.contain{max-width:none;padding-inline:0;}} @media(max-width:900px){ .pdp-wrap{grid-template-columns:1fr;} .pdp-gal{position:sticky;top:0;z-index:1;margin-inline:0;} .pdp-gal .rail.gallery{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;} .pdp-gal .rail.gallery>*{flex:0 0 100%;scroll-snap-align:start;} .pdp-gal .sctrl{display:flex;justify-content:center;position:relative;z-index:3;margin-top:-44px;padding-bottom:14px;} .pdp-info{position:relative;top:auto;z-index:2;background:var(--paper);margin-top:0;padding:30px var(--mx) 40px;} } /* ===================== owner directives iter 4 ===================== */ /* Desktop gallery: images at NATURAL size -> first touches the top, no gaps between images */ .pdp-slide{aspect-ratio:auto;background:transparent;} .pdp-slide img{width:100%;height:auto;object-fit:unset;display:block;} /* Breadcrumb: centered, with full-bleed top + bottom dividers */ .pdp-crumb-bar{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-top:0;} .pdp-crumb-bar .crumb{justify-content:center;text-align:center;padding-block:18px;margin:0;} @media(max-width:900px){ /* details get proper side margins; gallery stays full-bleed */ .pdp-info{padding:32px 22px 44px;} /* gallery = 1:1, pinned to top (details cover it while scrolling) */ .pdp-slide{aspect-ratio:1/1;} .pdp-slide img{height:100%;object-fit:cover;} /* Matches the live Shopify PDP pagination measurements. */ .pdp-gal .sctrl{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);height:36px;padding:6px;margin:0;z-index:4;} } /* ---- dynamic template slots: placeholder shown in the editor before the storefront fills it ---- */ /* PDP mobile: the gallery dots fade while the page is scrolled and return only near the top (app-core toggles .is-hidden when scrollY > 40). Reduced-motion drops the transition. */ @media(max-width:900px){ .pdp-gal .sctrl{transition:transform .4s ease,opacity .4s ease;} .pdp-gal .sctrl.is-hidden{opacity:0;pointer-events:none;} .pdp-gal.fbj-3d-on .sctrl{opacity:0;transform:translateX(-50%) translateY(60px);pointer-events:none;} } @media(max-width:900px) and (prefers-reduced-motion:reduce){.pdp-gal .sctrl{transition:none;}.pdp-gal .sdot-gallery .ico{transition:none;}} /* editor dyn-slot placeholder: hug content (no reserved 200px gap); the live storefront replaces it. */ .dyn-slot{display:flex;align-items:center;justify-content:center;padding:32px var(--mx);border:1px dashed var(--hair);background:var(--sand-l);} .dyn-ph{display:flex;flex-direction:column;gap:8px;text-align:center;color:var(--grey);} .dyn-ph-t{font-size:var(--ty-h-sm);line-height:var(--ty-h-sm-lh);color:var(--ink);} .dyn-ph-s{font-size:var(--ty-compact);line-height:var(--ty-compact-lh);} /* When the editor preview FILLS a slot, the
is kept as a transparent wrapper (so the block stays selectable) - strip the placeholder chrome so the live content lays out naturally. */ .dyn-slot.dyn-live{min-height:0;display:block;padding:0;border:0;background:none;} /* ---- template-driven PLP extras (opt-in; the hand-coded PLP is unaffected) ---- */ /* collectionhero scrim is now driven by data-content + data-fx (see IMAGE-BG section, W3) */ /* productgrid column choice (2 | 3 | 4). Below 700px the base .plp-grid stays 2-up for mobile. */ @media(min-width:701px){ .plp-grid.cols-2{grid-template-columns:repeat(2,1fr);} .plp-grid.cols-3{grid-template-columns:repeat(3,1fr);} .plp-grid.cols-4{grid-template-columns:repeat(4,1fr);} } /* productgrid stand-alone count line (only when no filters block carries the count) */ .plp-gridcount{padding-block:clamp(14px,2vw,20px);} .plp-gridcount .fcount{display:block;} /* ============================================================================ UNIFIED WEBSITE FORM + UI COMPONENTS (W1 - single source of truth) Every storefront form control is one of these. Change a rule here and it updates the concierge, search, newsletter, cookies, filters, PDP and every future form at once. MONOCHROME (var(--token) only), 44px+ hit targets, RTL via logical properties, visible :focus-visible rings. Error state is ink emphasis (no red). Buttons live in the .btn family near the top. ============================================================================ */ /* ---- field scaffold: label + control + helper / error ---- */ .fld{margin-bottom:clamp(18px,2.4vw,26px);} .fld:last-child{margin-bottom:0;} .fld-lbl{display:block;font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);color:var(--grey);margin-bottom:11px;} .fld-lbl .req{color:var(--ink);} .fld-help{font-size:var(--ty-help);line-height:var(--ty-help-lh);color:var(--grey);margin-top:8px;} .fld-err{font-family:var(--fdisp);font-size:var(--ty-help);line-height:var(--ty-help-lh);letter-spacing:var(--ty-track);color:var(--ink);margin-top:8px;display:none;} .fld.err .fld-err{display:block;} /* mono error = ink emphasis, never a red literal */ .fld.err .inp,.fld.err .selfield>select{border-color:var(--ink);} /* ---- text input / textarea : the box field ---- */ .inp{width:100%;height:var(--ctrl-h);border:1px solid var(--hair);background:var(--paper);padding:0 20px; font-family:var(--fbody);font-size:var(--ty-label);color:var(--ink);border-radius:999px;transition:border-color .18s var(--e1),background .18s var(--e1),box-shadow .18s var(--e1);} .inp::placeholder{color:var(--grey-l);opacity:1;} .inp:hover{border-color:var(--chip-b);} /* single crisp focus line: 1px border + adjacent 1px shadow (same ink) = one ~2px ring, no gap, no layout shift, still keyboard-visible */ .inp:focus,.inp:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);} .inp:disabled{color:var(--greige);background:var(--sand-l);cursor:not-allowed;} textarea.inp{height:auto;min-height:98px;padding:13px 18px;line-height:1.55;resize:vertical;border-radius:22px;} /* multi-line: soft-rounded, not a full pill */ .inp.sm{height:var(--ctrl-h-sm);font-size:var(--ty-label);padding:0 18px;} /* underline variant: a self-contained editorial line field (bottom rule only) */ .inp.line{border:0;border-bottom:1px solid var(--hair);padding-inline:0;background:none;height:var(--ctrl-h-sm);border-radius:0;} /* underline stays flat (reset the inherited pill so the bottom rule is not bowed) */ .inp.line:focus,.inp.line:focus-visible{outline:none;border-bottom-color:var(--ink);box-shadow:none;} /* bare variant: a naked field inside a composite (search bar, newsletter row, phone). The container owns the frame + scale; the field keeps the kit's colour / placeholder / focus base. */ .inp.bare{border:0;background:none;height:auto;min-height:0;padding:0;border-radius:0;} .inp.bare:focus,.inp.bare:focus-visible{outline:none;box-shadow:none;} .inp.bare::placeholder{color:var(--grey);} /* newsletter + search parity: composite fields keep the --grey placeholder */ /* normalise the native search field: drop the off-brand OS clear (x) + decoration */ .inp[type="search"]{-webkit-appearance:none;appearance:none;} .inp[type="search"]::-webkit-search-cancel-button,.inp[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;} /* ---- select : styled native