:root{
    --ink:#0E0B08; --walnut:#1A130C; --walnut-2:#221811;
    --gold:#A0722A; --brass:#C9A868; --brass-bright:#E0C088;
    --parchment:#E8DCC4; --parchment-dim:#b6a888; --oak:#6B4E2A;
    --line:rgba(160,114,42,.28); --line-soft:rgba(160,114,42,.14);
    --display:'Cinzel', serif; --body:'EB Garamond', serif; --util:'Barlow Condensed', sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--ink);color:var(--parchment);font-family:var(--body);font-size:19px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.1;color:var(--brass-bright)}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .eyebrow{font-family:var(--util);text-transform:uppercase;letter-spacing:.32em;font-size:13px;color:var(--gold);font-weight:500}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px}
  .btn{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:2px;transition:all .35s ease;cursor:pointer;border:1px solid var(--gold)}
  .btn-gold{background:var(--gold);color:var(--ink)}
  .btn-gold:hover{background:var(--brass);border-color:var(--brass);transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--brass)}
  .btn-ghost:hover{background:rgba(160,114,42,.1);transform:translateY(-2px)}
  /* Enlarged BUY IT NOW label on the buy-now gold buttons outside the Atelier
     cards (marked .buynow): 18px desktop / 16px mobile, matching the Atelier
     product-card buttons (.glass-card-body .btn) so every buy-now button reads
     at the same size. Only the text size changes — button size, padding, shape
     and colour are unchanged; nowrap keeps the label on a single line. */
  .btn.btn-gold.buynow{font-size:18px!important;white-space:nowrap}
  @media(max-width:620px){ .btn.btn-gold.buynow{font-size:16px!important} }
  .wa-ico{width:17px;height:17px;fill:currentColor}

  header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,border-color .4s,padding .4s;border-bottom:1px solid transparent;padding:22px 0}
  header.scrolled{background:rgba(14,11,8,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft);padding:14px 0}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .brand{display:flex;align-items:center;gap:13px}
  .brand .seal{width:40px;height:40px;flex:none}
  .brand .bt{font-family:var(--display);font-size:19px;letter-spacing:.14em;color:var(--brass-bright);line-height:1}
  .brand .bt small{display:block;font-family:var(--util);font-size:10px;letter-spacing:.34em;color:var(--gold);margin-top:3px}
  .nav-links{display:flex;gap:34px;font-family:var(--util);text-transform:uppercase;letter-spacing:.15em;font-size:15px}
  .nav-links a{color:var(--parchment);transition:color .25s;position:relative;padding-bottom:3px}
  .nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .3s}
  .nav-links a:hover{color:var(--brass-bright)}
  .nav-links a:hover::after{width:100%}
  .nav-cta{flex:none}
  /* Menu button: three vertical dots (kebab) rather than hamburger lines. */
  .burger{display:none;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;padding:8px 7px}
  .burger span{width:5px;height:5px;border-radius:50%;background:var(--brass);transition:.3s}
  .burger:hover span{background:var(--brass-bright)}

  .hero{position:relative;min-height:min(100vh,760px);display:flex;align-items:center;overflow:hidden;background:radial-gradient(120% 90% at 70% 20%, rgba(107,78,42,.22), transparent 55%),radial-gradient(100% 80% at 20% 90%, rgba(34,24,17,.9), transparent 60%),var(--ink);border-bottom:1px solid var(--line-soft)}
  .smoke{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.9}
  .smoke i{position:absolute;bottom:-140px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, rgba(201,168,104,.13), transparent 68%);filter:blur(28px);animation:rise 18s linear infinite}
  .smoke i:nth-child(1){left:12%;animation-delay:0s}
  .smoke i:nth-child(2){left:34%;animation-delay:4s;width:260px;height:260px}
  .smoke i:nth-child(3){left:58%;animation-delay:8s;width:400px;height:400px}
  .smoke i:nth-child(4){left:78%;animation-delay:2s;width:300px;height:300px}
  .smoke i:nth-child(5){left:46%;animation-delay:11s;width:220px;height:220px}
  @keyframes rise{0%{transform:translateY(0) scale(.7);opacity:0}15%{opacity:.8}70%{opacity:.5}100%{transform:translateY(-105vh) scale(1.5);opacity:0}}
  .hero-inner{position:relative;z-index:3;display:flex;align-items:center;width:100%;min-height:58vh}
  .hero-copy{max-width:760px}
  .hero-copy .eyebrow{margin-bottom:26px;display:block}
  .hero h1{font-size:clamp(48px,7vw,88px);letter-spacing:.02em;margin-bottom:8px}
  .hero h1 .l2{color:var(--gold)}
  .hero .lede{font-size:22px;color:var(--parchment);margin:26px 0 38px;max-width:490px;line-height:1.55}
  .hero .lede em{color:var(--brass-bright);font-style:italic}
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
  .scrollcue{margin-top:52px;font-family:var(--util);text-transform:uppercase;letter-spacing:.28em;font-size:12px;color:var(--parchment-dim);display:flex;align-items:center;gap:12px}
  .scrollcue .ln{width:52px;height:1px;background:var(--line);position:relative;overflow:hidden}
  .scrollcue .ln::after{content:'';position:absolute;left:-30%;top:0;width:30%;height:100%;background:var(--gold);animation:sweep 2.4s ease-in-out infinite}
  @keyframes sweep{0%{left:-30%}100%{left:100%}}
  .hero-visual{position:relative;display:flex;justify-content:center;align-items:center}
  .hero-frame{position:relative;width:100%;max-width:440px;border:1px solid var(--line);border-radius:4px;padding:14px;background:linear-gradient(160deg,rgba(34,24,17,.6),rgba(14,11,8,.4))}
  .hero-frame img{border-radius:2px;width:100%;aspect-ratio:1/.86;object-fit:cover}
  .hero-frame .halo{position:absolute;inset:-10% -10% auto;height:60%;background:radial-gradient(circle at 50% 40%, rgba(160,114,42,.3), transparent 62%);filter:blur(20px);z-index:-1}
  .hero-tag{position:absolute;bottom:-16px;right:22px;background:var(--ink);border:1px solid var(--line);border-radius:2px;padding:8px 16px;font-family:var(--util);text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--brass-bright)}

  section{position:relative}
  .band{padding:88px 0}
  /* Home page: tighter gaps BETWEEN sections (~45% less vertical padding) so the
     page feels less bloated. Within-section spacing is untouched. Scoped to
     .home so the other pages keep the default rhythm. */
  .home .band{padding:48px 0}
  .home footer{padding:40px 0 40px}
  .gal-strip-label{text-align:center;margin:52px 0 22px}
  .band.walnut{background:linear-gradient(180deg,var(--walnut),var(--ink))}
  .sec-head{text-align:center;max-width:640px;margin:0 auto 70px}
  .sec-head .eyebrow{display:block;margin-bottom:20px}
  .sec-head h2{font-size:clamp(32px,4.4vw,52px);margin-bottom:20px}
  .sec-head p{color:var(--parchment);font-size:20px}
  .divider{display:flex;align-items:center;justify-content:center;gap:16px;margin:22px 0}
  .divider .dl{width:60px;height:1px;background:var(--line)}
  /* fleur.png is a gold mark on an opaque near-black background; `screen` drops
     that black onto the site's dark sections so only the gold shows (no dark box). */
  .fleur-img{height:32px;width:auto;display:inline-block;vertical-align:middle;mix-blend-mode:screen}

  .acts{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-soft);border:1px solid var(--line-soft)}
  .act{background:var(--ink);padding:52px 38px;transition:background .4s}
  .act:hover{background:var(--walnut-2)}
  .act .num{font-family:var(--display);font-size:15px;letter-spacing:.3em;color:var(--gold);display:block;margin-bottom:26px}
  .act h3{font-size:27px;margin-bottom:14px;color:var(--brass-bright)}
  .act p{color:var(--parchment-dim);font-size:18px}
  .act .ico{width:46px;height:46px;stroke:var(--gold);fill:none;stroke-width:1.4;margin-bottom:22px}

  /* VIDEO — real HTML5 player: heading above, native-controls video below */
  .video-head{text-align:center;max-width:640px;margin:0 auto 40px}
  .video-head h2{font-size:clamp(30px,4.4vw,50px);margin:14px 0 16px}
  .video-head p{font-size:20px;color:var(--parchment)}
  .video-stage{display:flex;justify-content:center}
  /* Portrait 9:16 player, width-driven so it scales cleanly on mobile */
  .exp-video{display:block;width:min(340px,86vw);aspect-ratio:9/16;height:auto;max-width:100%;object-fit:cover;border-radius:6px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55);background:#000}
  /* Video carousel — two portrait 9:16 players, swipe + arrows + dots. Dots sit
     BELOW the frame so they never overlap the native video controls. */
  .video-carousel{max-width:min(340px,86vw);margin:0 auto}
  .video-viewport{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55);background:#000}
  .video-carousel .carousel-slide{aspect-ratio:9/16}
  .video-carousel .carousel-slide video{width:100%;height:100%;object-fit:cover;background:#000;display:block}

  .kit-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
  .kit-photo{aspect-ratio:4/5;border:1px solid var(--line);border-radius:3px;overflow:hidden;position:relative;background:linear-gradient(160deg,var(--walnut-2),var(--ink))}
  .kit-photo img{width:100%;height:100%;object-fit:cover}
  .kit-photo .cap{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;background:linear-gradient(0deg,rgba(14,11,8,.85),transparent);font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--parchment-dim)}
  .kit-list{list-style:none}
  .kit-list li{padding:20px 0;border-bottom:1px solid var(--line-soft);display:flex;gap:18px;align-items:flex-start}
  .kit-list li:first-child{padding-top:0}
  .kit-list .n{font-family:var(--display);color:var(--gold);font-size:15px;letter-spacing:.15em;flex:none;width:34px;padding-top:4px}
  .kit-list h4{font-family:var(--display);font-size:21px;color:var(--brass-bright);font-weight:500;margin-bottom:3px}
  .kit-list p{color:var(--parchment-dim);font-size:17px}

  .craft{background:linear-gradient(180deg,var(--ink),var(--walnut),var(--ink))}
  .craft-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
  .craft-photo{border:1px solid var(--line);border-radius:4px;padding:12px;background:linear-gradient(160deg,rgba(34,24,17,.5),rgba(14,11,8,.3))}
  .craft-photo img{border-radius:2px;width:100%}
  .craft-copy .eyebrow{display:block;margin-bottom:18px}
  .craft-copy h2{font-size:clamp(28px,3.6vw,44px);margin-bottom:24px;line-height:1.18}
  .craft-copy p{font-size:20px;color:var(--parchment);margin-bottom:20px;line-height:1.7}
  .craft-copy p em{color:var(--brass-bright);font-style:italic}
  .signoff{font-family:var(--display);color:var(--gold);letter-spacing:.14em;font-size:16px;margin-top:30px}

  /* GALLERY */
  .gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

  /* FAQ accordion */
  .faq-wrap{max-width:820px;margin:0 auto}
  .faq{border-bottom:1px solid var(--line-soft)}
  .faq[open]{background:linear-gradient(180deg,rgba(34,24,17,.35),transparent)}
  .faq summary{list-style:none;cursor:pointer;padding:24px 6px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--display);font-size:21px;color:var(--brass-bright);transition:color .25s}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--brass)}
  .faq summary .plus{flex:none;width:26px;height:26px;position:relative}
  .faq summary .plus::before,.faq summary .plus::after{content:'';position:absolute;background:var(--gold);border-radius:2px;transition:transform .3s}
  .faq summary .plus::before{top:12px;left:2px;width:22px;height:2px}
  .faq summary .plus::after{top:2px;left:12px;width:2px;height:22px}
  .faq[open] summary .plus::after{transform:rotate(90deg);opacity:0}
  .faq .faq-body{padding:0 6px 26px;font-size:18px;color:var(--parchment-dim);line-height:1.65;max-width:680px}
  .gal-item{border:1px solid var(--line);border-radius:3px;overflow:hidden;position:relative;aspect-ratio:4/3;background:linear-gradient(160deg,var(--walnut-2),var(--ink))}
  .gal-item img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s}
  .gal-item:hover img{transform:scale(1.05)}
  .gal-item.tin-fit{background:#ffffff}
  .gal-item.tin-fit img{object-fit:contain;padding:10px}
  .gal-item.tin-fit:hover img{transform:scale(1.03)}
  .gal-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;color:var(--parchment-dim)}
  .gal-ph svg{width:34px;height:34px;stroke:var(--gold);fill:none;stroke-width:1.3;opacity:.7}
  .gal-ph span{font-family:var(--util);text-transform:uppercase;letter-spacing:.18em;font-size:11px;text-align:center;padding:0 16px;opacity:.75}
  .gal-cap{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:linear-gradient(0deg,rgba(14,11,8,.8),transparent);font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--parchment-dim)}

  .flav{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
  .flav-tabs{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--line-soft)}
  .flav-tab{text-align:left;background:none;border:none;cursor:pointer;font-family:var(--display);font-size:23px;color:var(--parchment-dim);padding:17px 0 17px 26px;position:relative;transition:color .3s;letter-spacing:.04em}
  .flav-tab::before{content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%) scaleY(0);width:2px;height:70%;background:var(--gold);transition:transform .3s}
  .flav-tab:hover{color:var(--parchment)}
  .flav-tab.active{color:var(--brass-bright)}
  .flav-tab.active::before{transform:translateY(-50%) scaleY(1)}
  .flav-panel{border:1px solid var(--line);border-radius:3px;padding:46px;background:linear-gradient(160deg,var(--walnut-2),var(--ink));min-height:280px}
  .flav-panel .tin{display:flex;align-items:center;gap:16px;margin-bottom:24px}
  .flav-panel .tin img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line);background:#000}
  .flav-panel h3{font-size:30px;margin-bottom:2px}
  .flav-panel .pair{font-family:var(--util);text-transform:uppercase;letter-spacing:.2em;font-size:13px;color:var(--gold)}
  .flav-panel .note{font-size:20px;color:var(--parchment);line-height:1.6;margin-bottom:22px}
  .flav-panel .best{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:14px;color:var(--parchment-dim)}
  .flav-panel .best b{color:var(--brass-bright);font-weight:600}

  .club{background:linear-gradient(180deg,var(--walnut),var(--ink));border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
  .club-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .club-copy .eyebrow{display:block;margin-bottom:20px}
  .club-copy h2{font-size:clamp(30px,4vw,48px);margin-bottom:22px;line-height:1.15}
  .club-copy p{font-size:20px;color:var(--parchment);margin-bottom:20px}
  .club-card{border:1px solid var(--line);border-radius:4px;padding:44px;background:linear-gradient(160deg,var(--walnut-2),var(--ink));position:relative;overflow:hidden}
  .club-card .ribbon{font-family:var(--util);text-transform:uppercase;letter-spacing:.24em;font-size:12px;color:var(--gold);margin-bottom:22px}
  .club-card ul{list-style:none;margin:26px 0}
  .club-card li{padding:13px 0;border-bottom:1px solid var(--line-soft);display:flex;gap:13px;align-items:center;font-size:18px;color:var(--parchment)}
  .club-card li:last-child{border-bottom:none}
  .club-card li svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:2;flex:none}
  .club-card .price{font-family:var(--display);font-size:20px;color:var(--brass-bright);margin:8px 0 26px}
  .club-card .price small{font-family:var(--body);font-size:16px;color:var(--parchment-dim)}

  .order{background:radial-gradient(120% 90% at 50% 0%, rgba(107,78,42,.2), transparent 55%),var(--ink);text-align:center}
  .order-inner{max-width:720px;margin:0 auto}
  .order h2{font-size:clamp(34px,5vw,60px);margin-bottom:22px}
  .order .lede{font-size:21px;color:var(--parchment);margin-bottom:12px}
  .trust{display:flex;justify-content:center;gap:38px;flex-wrap:wrap;margin:44px 0 40px}
  .trust .t{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:180px}
  .trust .t svg{width:30px;height:30px;stroke:var(--gold);fill:none;stroke-width:1.5}
  .trust .t b{font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:var(--brass-bright)}
  .trust .t span{font-size:15px;color:var(--parchment-dim);line-height:1.4}
  .order-price{font-family:var(--display);font-size:26px;color:var(--brass-bright);margin-bottom:30px}
  .order-price .thru{color:var(--parchment-dim);font-size:19px}

  footer{background:var(--walnut);border-top:1px solid var(--line-soft);padding:70px 0 40px}
  .foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;margin-bottom:50px}
  .foot-brand{max-width:320px}
  .foot-brand .seal{width:64px;height:64px;margin-bottom:18px}
  .foot-brand .bt{font-family:var(--display);font-size:22px;letter-spacing:.16em;color:var(--brass-bright);margin-bottom:6px}
  .foot-brand small{font-family:var(--util);letter-spacing:.3em;font-size:11px;color:var(--gold);text-transform:uppercase}
  .foot-brand p{font-size:16px;color:var(--parchment-dim);margin-top:16px;font-style:italic}
  .foot-col h5{font-family:var(--util);text-transform:uppercase;letter-spacing:.2em;font-size:13px;color:var(--gold);margin-bottom:18px;font-weight:600}
  .foot-col a,.foot-col p{display:block;font-size:16px;color:var(--parchment-dim);margin-bottom:11px;transition:color .25s}
  .foot-col a:hover{color:var(--brass-bright)}
  /* Find us — social icons + Whish logo */
  .foot-socials{display:flex;gap:14px;margin-bottom:16px}
  .foot-socials a{display:inline-flex;color:var(--parchment-dim);margin:0;transition:color .25s}
  .foot-socials a:hover{color:var(--brass-bright)}
  .foot-socials svg{width:22px;height:22px;display:block}
  .foot-bottom{border-top:1px solid var(--line-soft);padding-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--util);letter-spacing:.1em;font-size:13px;color:var(--parchment-dim);text-transform:uppercase}
  /* Whish payment badge — centered on its own line above the © row, inside the
     footer bottom bar. flex-basis:100% gives it a full-width row so the © /
     tagline spans wrap beneath it (the bar keeps its space-between layout). */
  .whish-bottom{flex-basis:100%;text-align:center}
  .whish-bottom img{height:24px;opacity:0.85;display:block;margin:0 auto 8px}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
  .reveal.in{opacity:1;transform:none}

  @media(max-width:960px){
    .nav-links,.nav-cta{display:none}
    .burger{display:flex}
    .hero-inner{grid-template-columns:1fr}
    .hero-visual{order:-1;margin-bottom:10px}
    .kit-grid,.flav,.club-inner,.craft-inner{grid-template-columns:1fr;gap:40px}
    .craft-photo{max-width:420px;margin:0 auto}
    .acts{grid-template-columns:1fr}
    .gal-grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
    .gal-item.wide{grid-column:span 2}
    .gal-item.tall{grid-row:span 1}
    .flav-tabs{flex-direction:row;flex-wrap:wrap;border-left:none;border-top:1px solid var(--line-soft);gap:8px;padding-top:14px}
    .flav-tab{padding:10px 16px;font-size:19px}
    .flav-tab::before{display:none}
    .flav-tab.active{border-bottom:2px solid var(--gold)}
    .band{padding:60px 0}
    .home .band{padding:34px 0}
  }
  /* Mobile nav is a right-side DRAWER. .mobile-menu is the dimmed backdrop over
     the page (above the fixed header, z-index:100); .drawer-panel slides in
     from the right. The layer stays in the DOM (toggled via visibility, not
     display) so the slide can animate in and out; the global
     prefers-reduced-motion rule strips the transitions, so for those users the
     drawer simply appears/disappears with no slide. */
  .mobile-menu{position:fixed;inset:0;z-index:200;background:rgba(8,6,4,0);visibility:hidden;transition:background .35s ease,visibility 0s linear .35s}
  .mobile-menu.open{visibility:visible;background:rgba(8,6,4,.6);transition:background .35s ease}
  .drawer-panel{position:absolute;top:0;right:0;height:100%;width:66%;max-width:280px;display:flex;flex-direction:column;gap:2px;padding:74px 24px 28px;background:linear-gradient(180deg,var(--walnut-2),var(--ink));border-left:1px solid var(--line);box-shadow:-18px 0 44px rgba(0,0,0,.5);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
  .mobile-menu.open .drawer-panel{transform:translateX(0)}
  /* Compact, left-aligned menu items (plain links only — the Order button keeps
     its button styling). */
  .mobile-menu a:not(.btn){font-family:var(--display);font-size:19px;color:var(--brass-bright);letter-spacing:.05em;padding:13px 4px;border-bottom:1px solid var(--line-soft);transition:color .25s}
  .mobile-menu a:not(.btn):hover{color:#fff}
  .mobile-menu .btn{margin-top:18px;width:100%;justify-content:center}
  /* Close (X) pinned to the top-right corner of the drawer panel. */
  .mobile-menu .close{position:absolute;top:14px;right:16px;z-index:1;background:none;border:none;color:var(--brass);font-size:30px;cursor:pointer;line-height:1;padding:4px 6px}
  .mobile-menu .close:hover{color:var(--brass-bright)}
  /* When the menu is open store.js sets the burger's aria-expanded="true";
     hide it completely (not just cover it) so only the X shows. */
  .burger[aria-expanded="true"]{display:none}

  /* ===== PRODUCT (What's inside) ===== */
  /* Desktop: image left (spanning), heading top-right, details bottom-right.
     Mobile (≤960px): heading first, then the carousel, then the details. */
  .product-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"media head" "media info";column-gap:56px;row-gap:0;align-items:center}
  .product-head{grid-area:head;align-self:end}
  .product-media{grid-area:media}
  .product-info{grid-area:info;align-self:start}
  .carousel{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:linear-gradient(160deg,var(--walnut-2),var(--ink))}
  .carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .carousel-track::-webkit-scrollbar{display:none}
  .carousel-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:6/5}
  .carousel-slide img{width:100%;height:100%;object-fit:contain}
  /* Signature Kit carousel — smaller frame, 3:2 to fit kit-box-closed.jpg cleanly;
     every slide fills via cover (no letterboxing), same approach as the glass card. */
  #product .carousel-slide{aspect-ratio:3/2}
  #product .carousel-slide img{object-fit:cover;object-position:center}
  /* Bundle page — the Signature Kit carousel reuses the same component, 3:2 cover
     framing and ~400px width as the homepage carousel (matching its media column),
     centred in place of the old 360° hero image. */
  .bundle-hero-carousel{max-width:400px;margin:0 auto 42px}
  .bundle-hero-carousel .carousel-slide{aspect-ratio:3/2}
  .bundle-hero-carousel .carousel-slide img{object-fit:cover;object-position:center}
  /* Desktop only: narrow the media column so the tile is noticeably smaller.
     (Mobile keeps the single-column layout from the max-width:960px block.) */
  @media(min-width:961px){ #product .product-grid{grid-template-columns:400px 1fr} }
  .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(14,11,8,.55);backdrop-filter:blur(4px);color:var(--brass);font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s;z-index:2}
  .carousel-arrow:hover{background:var(--gold);color:var(--ink)}
  .carousel-arrow.prev{left:12px}
  .carousel-arrow.next{right:12px}
  .carousel-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:2}
  .carousel-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(232,220,196,.45);cursor:pointer;padding:0;transition:all .3s}
  .carousel-dots button.active{background:var(--gold);width:22px;border-radius:4px}
  .product-head .eyebrow{display:block;margin-bottom:16px}
  .product-head h2{font-size:clamp(30px,4vw,46px);margin-bottom:16px}
  .product-price{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
  .product-price .pp-now{font-family:var(--display);font-size:40px;line-height:1;color:var(--brass-bright)}
  .product-price .pp-was{font-size:22px;color:var(--parchment-dim);text-decoration:line-through}
  .product-price .pp-save{font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:600;color:var(--ink);background:var(--gold);padding:5px 11px;border-radius:2px}
  .product-cod{font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--parchment-dim);margin-bottom:22px}
  .product-desc{font-size:19px;color:var(--parchment);margin-bottom:24px;line-height:1.6}
  .product-points{list-style:none;margin:0 0 30px;display:grid;gap:11px}
  .product-points li{display:flex;gap:12px;align-items:center;font-size:17px;color:var(--parchment)}
  .product-points .pp-ico{font-size:15px;line-height:1;flex:none;width:24px;text-align:center;color:var(--gold)}
  .product-actions{display:flex;gap:14px;flex-wrap:wrap}
  /* Atelier Collection — centered product cards (image on top, text below).
     Three cards sit side by side at EVERY width (no collapse); they shrink to
     fit rather than stacking on mobile. */
  .glass-collection{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1090px;margin:6px auto 0}
  .glass-card{max-width:345px;margin:0 auto;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:linear-gradient(160deg,var(--walnut-2),var(--ink));transition:border-color .3s,transform .3s,box-shadow .3s}
  .glass-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 22px 54px rgba(0,0,0,.45)}
  /* Smaller carousel; images FILL a fixed 3:2 tile (matching mountain-cups-hero-2.jpg)
     with object-fit:cover — no dark bars, overflow cropped, never letterboxed. */
  .glass-card-carousel{border:none;border-radius:0;background:none}
  .glass-card-carousel .carousel-slide{aspect-ratio:3/2}
  .glass-card-carousel .carousel-slide img{object-fit:cover;object-position:center}
  .glass-card-carousel .carousel-arrow{width:34px;height:34px;font-size:20px}
  .glass-card-carousel .carousel-arrow.prev{left:8px}
  .glass-card-carousel .carousel-arrow.next{right:8px}
  /* Body fills the rest of the card (cards are equal height via grid stretch);
     the button is pinned to the bottom so both cards' BUY IT NOW line up
     regardless of how many lines the product name wraps to. */
  .glass-card-body{padding:20px 20px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;flex:1}
  .glass-card-body h3{font-family:var(--display);font-size:24px;color:var(--brass-bright);line-height:1.15;margin-bottom:9px}
  .glass-card-body .product-cod{font-size:12px;margin-bottom:18px}
  /* Larger BUY IT NOW label so the text is better proportioned to the button;
     button size/padding/shape/colour are unchanged — only the text grows. */
  .glass-card-body .btn{min-width:184px;justify-content:center;margin-top:auto;font-size:18px;white-space:nowrap}

  @media(max-width:960px){
    .product-grid{grid-template-columns:1fr;grid-template-areas:"head" "media" "info";column-gap:0;row-gap:26px}
    .product-head{align-self:auto}
  }

  /* ===== REVIEWS (auto-playing carousel — dark cards, dots + swipe) ===== */
  /* Elegant review cards: a delicate gold hairline border + soft depth shadow,
     a faint oversized gold quotation flourish behind the text, a short gold rule
     under the stars, an upright Montserrat quote, and a gold-accented name/city
     — restrained, blended into the dark theme. */
  .review{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(201,168,104,.30);border-radius:8px;padding:30px 26px 26px;background:linear-gradient(158deg,var(--walnut-2),var(--ink));display:flex;flex-direction:column;box-shadow:0 14px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(224,192,136,.06)}
  /* Oversized gold quotation mark, faint, sitting BEHIND the quote (z-index:-1). */
  .review::before{content:"\201C";position:absolute;top:6px;left:16px;z-index:-1;font-family:Georgia,'Times New Roman',serif;font-size:112px;line-height:1;color:var(--gold);opacity:.14;pointer-events:none}
  .review .stars{color:var(--gold);font-size:16px;letter-spacing:3px}
  /* Thin gold divider between the star rating and the quote text. */
  .review .stars::after{content:"";display:block;width:48px;height:1px;margin:14px 0 16px;background:linear-gradient(90deg,var(--brass),rgba(201,168,104,0))}
  .review blockquote{font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-size:16px;color:var(--parchment);line-height:1.62;font-style:normal;margin-bottom:22px;flex:1}
  .review figcaption{font-family:var(--util);text-transform:uppercase;letter-spacing:.2em;font-size:12.5px;color:var(--brass);display:flex;align-items:center;gap:11px}
  /* Hairline gold rule before the reviewer name. */
  .review figcaption::before{content:"";width:24px;height:1px;background:var(--gold);flex:none}
  .rev-carousel{position:relative}
  .rev-viewport{position:relative}
  .rev-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 4px 20px}
  .rev-track::-webkit-scrollbar{display:none}
  .rev-track .review{flex:0 0 min(340px,82%);scroll-snap-align:center}
  /* Dots rendered in normal flow beneath a carousel (reviews) */
  .carousel-dots.dots-below{position:static;margin-top:24px}

  /* Reduced motion: keep the reviews auto-rotating but with NO sliding — stack
     every review in the same spot and reveal only the active one (the JS toggles
     .rm-active), so each appears instantly where the last was. The rotation is
     preserved; the horizontal motion is not. Grid stacking keeps the height at
     the tallest review, so swaps don't shift the layout. Scoped to the reviews
     carousel, so every other carousel is untouched. */
  @media(prefers-reduced-motion:reduce){
    .rev-carousel[data-autoplay] .rev-track{display:grid;grid-template-areas:"stack";gap:0;overflow:hidden;scroll-snap-type:none}
    .rev-carousel[data-autoplay] .rev-track .review{grid-area:stack;width:100%;max-width:100%;visibility:hidden}
    .rev-carousel[data-autoplay] .rev-track .review.rm-active{visibility:visible}
  }

  @media(max-width:620px){
    /* Phones show the worst gap under the scroll cue (tall screens, short copy).
       Cap the hero height so "What's Inside" sits closer below; min(100vh,…)
       means short phones keep their original height and never crowd the header. */
    .hero{min-height:min(100vh,660px)}
    /* Craftsman story: stacked, but with a small image so it doesn't dominate */
    .craft-inner{gap:20px}
    .craft-photo{max-width:180px;margin:0;padding:6px}
    .craft-copy h2{font-size:25px;margin-bottom:14px;line-height:1.2}
    .craft-copy p{font-size:16px;line-height:1.6}
    /* Phones: ONE card per row so each product photo, name and specs read
       clearly at a glance — the old 2-up layout shrank the cards to ~150px,
       too small to register as products. Single column, capped to a
       comfortable width and centered; the card format (photo → name → specs
       → BUY IT NOW) is unchanged, just about twice the size. The image tile
       keeps its 3:2 ratio, so it scales up with the card. Arrows revert to
       their base 34px so they stay easy to tap. */
    .glass-collection{grid-template-columns:1fr;gap:26px;max-width:430px}
    .glass-card{max-width:100%}
    .glass-card-body{padding:18px 18px 22px}
    .glass-card-body h3{font-size:21px;margin-bottom:7px;line-height:1.15}
    .glass-card-body .product-cod{font-size:12px;letter-spacing:.03em;margin-bottom:16px;line-height:1.4}
    .glass-card-body .btn{min-width:200px;width:auto;padding:14px 26px;font-size:16px;letter-spacing:.1em;gap:8px}
    /* Reviews: extra-compact cards on phones (they were oversized). */
    .review{padding:26px 20px 22px}
    .review .stars{font-size:15px}
    .review .stars::after{margin:12px 0 14px}
    .review::before{font-size:88px;top:4px;left:13px}
    .review blockquote{font-size:15px;margin-bottom:18px;line-height:1.6}
    .rev-track .review{flex:0 0 min(300px,86%)}
  }

  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
  :focus-visible{outline:2px solid var(--brass);outline-offset:3px}

  /* ===== Floating WhatsApp contact button (contact only — every page) ===== */
  .wa-float{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.4);transition:transform .25s ease,box-shadow .25s ease}
  .wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 28px rgba(0,0,0,.5)}
  .wa-float:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .wa-float svg{width:30px;height:30px;fill:#fff}
  @media(max-width:620px){.wa-float{right:16px;bottom:16px;width:52px;height:52px}.wa-float svg{width:28px;height:28px}}

  /* Lock background scroll while the Oak Club sign-up modal is open */
  body.modal-open{overflow:hidden}