/* ════════════════════════════════════════════════
   WATEEN PERFUMES — HERO
   ════════════════════════════════════════════════ */

:root{
  --gold:        #b98b52;
  --gold-light:  #d7b184;
  --gold-deep:   #8f6633;
  --ink:         #14100c;
  --ink-soft:    #3a322a;
  --cream:       #f3ece2;
  --sand:        #e8ddcd;

  --f-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  --nav-h: 112px;
  /* snappy, "smooth but fast" curves */
  --ease:  cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--f-body);
  /* matches the hero art's base tone, so any rounding gap below the hero
     reads as part of the photo rather than a black band */
  background:#dcc9b8;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ text-decoration:none; color:inherit; }


/* ═══════════════ ANNOUNCEMENT BAR ═══════════════ */

.announce{
  position:relative;
  z-index:60;
  background:linear-gradient(90deg,#0d0a07,#1c1611 50%,#0d0a07);
  color:var(--sand);
  overflow:hidden;
  border-bottom:1px solid rgba(185,139,82,.22);
}
.announce::before,
.announce::after{
  content:'';
  position:absolute; top:0; bottom:0; width:90px; z-index:2;
  pointer-events:none;
}
.announce::before{ left:0;  background:linear-gradient(90deg,#0d0a07,transparent); }
.announce::after { right:0; background:linear-gradient(270deg,#0d0a07,transparent); }

.announce__track{
  display:flex;
  align-items:center;
  gap:44px;
  width:max-content;
  padding:11px 0;
  animation:marquee 34s linear infinite;
}
.announce__track span{
  font-size:10.5px;
  letter-spacing:.34em;
  font-weight:300;
  white-space:nowrap;
}
.announce__dot{ color:var(--gold); font-size:9px !important; }

/* ---------- live promo-code banner: replaces the marquee when a coupon is featured ---------- */
.announce.is-promo{
  background:linear-gradient(90deg,#241a0d,#3a2810 50%,#241a0d);
  border-bottom:1px solid rgba(185,139,82,.4);
}
.announce.is-promo::before,
.announce.is-promo::after{ display:none; }
.promoBar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  padding:9px 16px;
  text-align:center;
}
.promoBar__star{ color:var(--gold); font-size:11px; }
.promoBar__txt{
  font-size:10.5px;
  letter-spacing:.18em;
  font-weight:300;
  color:var(--sand);
  white-space:nowrap;
}
.promoBar__code{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(185,139,82,.16);
  border:1px solid rgba(185,139,82,.5);
  border-radius:20px;
  padding:3px 6px 3px 14px;
  font-size:11px;
  letter-spacing:.16em;
  font-weight:600;
  color:var(--gold-light);
}
.promoBar__copyBtn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:var(--gold);
  color:#1c1611;
  border:none;
  border-radius:16px;
  padding:4px 11px;
  font-size:9px;
  font-weight:600;
  letter-spacing:.1em;
  cursor:pointer;
  transition:background .16s var(--ease), transform .12s var(--ease);
  font-family:var(--f-body);
}
.promoBar__copyBtn:hover{ background:var(--gold-light); }
.promoBar__copyBtn:active{ transform:translateY(1px); }
.promoBar__copyBtn svg{ width:11px; height:11px; }
.promoBar__copyBtn.is-copied{ background:#5a8f6b; color:#fff; }
@media (max-width:640px){
  .promoBar{ gap:8px; padding:9px 10px; }
  .promoBar__txt{ font-size:9.5px; letter-spacing:.12em; }
  .promoBar__code{ font-size:10px; padding:3px 5px 3px 11px; }
}

@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}


/* ═══════════════ NAVBAR — floating glass capsules ═══════════════ */

.nav{
  position:absolute;          /* floats ON the hero image */
  top:64px; left:0; right:0;   /* clear of the announcement banner */
  z-index:50;
  transition:transform 0.16s var(--ease), top 0.16s var(--ease);
}

/* ---------------- desktop bar ---------------- */

.nav__bar{
  position:relative;
  max-width:1660px;
  margin:0 auto;
  padding:0 30px;
  display:grid;
  /* the two halves split the row evenly; the medallion is centred on the
     page itself (below), so it lands on the exact midpoint */
  grid-template-columns:1fr 1fr;
  align-items:center;
}

/* the two glass halves */
.nav__cap{
  position:relative;
  height:76px;
  display:flex;
  align-items:center;
  background:linear-gradient(180deg,
    rgba(255,252,248,.62),
    rgba(246,238,229,.44));
  backdrop-filter:blur(26px) saturate(165%);
  -webkit-backdrop-filter:blur(26px) saturate(165%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    0 18px 44px -22px rgba(94,68,40,.5),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(185,139,82,.16);
  transition:background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* the inner edge of each half tucks under the medallion */
.nav__cap--left{
  border-radius:44px;
  padding:0 96px 0 26px;   /* room for the medallion overlapping the inner edge */
  margin-right:-56px;
  justify-content:flex-start;
  gap:26px;
}
.nav__cap--right{
  border-radius:44px;
  padding:0 20px 0 96px;
  margin-left:-56px;
  justify-content:flex-end;
  gap:22px;
}

/* thin gold hairline riding the top edge, like the reference */
.nav__cap::after{
  content:'';
  position:absolute; left:34px; right:34px; top:-1px;
  height:1px;
  background:linear-gradient(90deg,
    transparent, rgba(215,177,132,.85), transparent);
  pointer-events:none;
}

/* ---- vertical tagline inside the left capsule ---- */
.nav__tag{
  font-size:8.5px;
  line-height:1.55;
  letter-spacing:.26em;
  font-weight:400;
  color:var(--gold-deep);
  white-space:nowrap;
}
.nav__tagStar{
  margin-left:-18px;
  font-size:9px;
  color:var(--gold);
  align-self:flex-end;
  padding-bottom:16px;
  animation:twinkle 3.4s ease-in-out infinite;
}
.nav__div{
  width:1px; height:34px;
  background:linear-gradient(180deg,transparent,rgba(143,102,51,.4),transparent);
}

/* ---- links ---- */
.nav__links{
  display:flex;
  align-items:center;
  gap:30px;
}
.nav__links a{
  position:relative;
  font-size:11.5px;
  letter-spacing:.2em;
  font-weight:400;
  color:#4a3f34;
  padding:8px 0 14px;
  transition:color 0.17s var(--ease);
}
/* the little dot under the active item */
.nav__links a i{
  position:absolute;
  left:50%; bottom:4px;
  width:4px; height:4px;
  margin-left:-2px;
  border-radius:50%;
  background:var(--gold);
  opacity:0;
  transform:scale(.4);
  transition:opacity 0.2s var(--ease), transform 0.23s var(--ease-out);
}
.nav__links a:hover{ color:var(--gold-deep); }
.nav__links a:hover i,
.nav__links a.is-active i{ opacity:1; transform:scale(1); }
.nav__links a.is-active{ color:var(--gold-deep); }

/* ---- logo medallion ---- */
.nav__medallion{
  /* pinned to the exact horizontal centre of the bar */
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:250px; height:250px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(160deg,
    rgba(255,253,250,.9),
    rgba(243,234,223,.72));
  backdrop-filter:blur(26px) saturate(165%);
  -webkit-backdrop-filter:blur(26px) saturate(165%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    0 22px 50px -20px rgba(94,68,40,.55),
    inset 0 2px 0 rgba(255,255,255,.95);
  transition:transform 0.28s var(--ease-out), box-shadow 0.25s var(--ease);
}
/* the warm glow ring around it */
.nav__medallionRing{
  position:absolute; inset:-5px;
  border-radius:50%;
  background:conic-gradient(from 210deg,
    rgba(215,177,132,0),
    rgba(215,177,132,.85) 25%,
    rgba(255,244,228,.95) 50%,
    rgba(215,177,132,.85) 72%,
    rgba(215,177,132,0));
  filter:blur(5px);
  opacity:.9;
  z-index:-1;
  animation:ringSpin 14s linear infinite;
}
@keyframes ringSpin{ to{ transform:rotate(360deg); } }

.nav__medallion img{
  width:94%;
  height:auto;
  filter:contrast(1.06);
}
.nav__medallion:hover{
  /* keep the centring translate, then lift */
  transform:translate(-50%,-50%) translateY(-3px) scale(1.02);
  box-shadow:
    0 28px 58px -20px rgba(94,68,40,.6),
    inset 0 2px 0 rgba(255,255,255,.95);
}

/* ---- icon pill ---- */
.nav__pill{
  display:flex;
  align-items:center;
  gap:2px;
  padding:5px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 6px 16px -10px rgba(94,68,40,.5);
}
.nav__icon{
  position:relative;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:50%;
  color:#41372d;
  transition:color 0.16s var(--ease), background 0.17s var(--ease), transform 0.17s var(--ease);
}
.nav__icon svg{ width:17px; height:17px; }
.nav__icon:hover{
  color:var(--gold-deep);
  background:rgba(255,255,255,.85);
  transform:translateY(-2px);
}
.nav__badge{
  position:absolute; top:-1px; right:-1px;
  min-width:17px; height:17px;
  padding:0 4px;
  display:grid; place-items:center;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-size:9.5px;
  font-weight:500;
}

/* ---- currency ---- */
.nav__cur{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 4px 8px 8px;
  font-size:11.5px;
  letter-spacing:.16em;
  color:#4a3f34;
  transition:color 0.16s var(--ease);
}
.nav__cur svg{ width:11px; height:8px; transition:transform 0.2s var(--ease); }
.nav__cur:hover{ color:var(--gold-deep); }
.nav__cur:hover svg{ transform:translateY(2px); }

/* ---- scrolled: the same plain, full-width white navbar used on the
   category/product pages — one solid opaque bar, no glass, no split
   capsules, no gap in the middle ---- */
.nav.is-stuck{
  position:fixed;
  top:0;
}
.nav.is-stuck .nav__bar{
  max-width:none;
  padding:0 30px;
  background:#fff;
  border-bottom:1px solid rgba(58,50,42,.08);
  box-shadow:0 2px 16px -8px rgba(94,68,40,.14);
}
.nav.is-stuck .nav__cap{
  height:72px;
  margin:0;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
.nav.is-stuck .nav__cap--left{ padding-right:70px; }
.nav.is-stuck .nav__cap--right{ padding-left:70px; }
.nav.is-stuck .nav__medallion{
  width:auto; height:auto;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:0;
  box-shadow:none;
}
.nav.is-stuck .nav__medallionRing{ display:none; }
.nav.is-stuck .nav__medallion img{ width:72px; height:auto; }
.nav.is-hidden{ transform:translateY(calc(-100% - 40px)); }

/* the mobile shell is desktop-hidden */
.nav__mob{ display:none; }


/* ---------------- mobile bar ---------------- */

@media (max-width:1180px){
  .nav__bar{ display:none; }

  .nav__mob{
    display:block;
    padding:0 10px;
  }

  .nav__mobTop{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    min-height:150px;
  }
  /* centred on the row itself, so the burger and pill widths can't shift it —
     sits higher than the controls so the bigger logo owns the top of the bar */
  .nav__mobLogo{
    position:absolute;
    left:50%;
    top:46%;
    transform:translate(-50%,-50%);
    pointer-events:auto;
  }

  /* burger in its own round glass capsule — nudged down, clear of the logo */
  .nav__burger{
    flex:0 0 auto;
    align-self:center;
    margin-top:30px;
    width:42px; height:42px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:4px;
    border-radius:50%;
    background:linear-gradient(180deg,
      rgba(255,252,248,.62),
      rgba(246,238,229,.44));
    backdrop-filter:blur(24px) saturate(165%);
    -webkit-backdrop-filter:blur(24px) saturate(165%);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 14px 34px -18px rgba(94,68,40,.5),
               inset 0 1px 0 rgba(255,255,255,.9);
    transition:transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  }
  .nav__burger span{
    display:block;
    width:19px; height:1.6px;
    border-radius:2px;
    background:#3b3229;
    box-shadow:none;
    transition:transform 0.23s var(--ease), width 0.2s var(--ease), opacity 0.16s;
  }
  .nav__burger:active{ transform:scale(.94); }

  /* centre logo — no medallion on mobile, the art shows through */
  .nav__mobLogo{
    flex:0 0 auto;
    display:block;
    transition:transform 0.25s var(--ease);
  }
  .nav__mobLogo img{
    height:150px; width:auto;
    filter:drop-shadow(0 2px 10px rgba(255,255,255,.6))
           drop-shadow(0 1px 3px rgba(255,255,255,.75));
  }
  .nav__mobLogo:active{ transform:translate(-50%,-50%) scale(.97); }

  /* icons in a glass capsule — nudged down, clear of the logo */
  .nav__pill--mob{
    flex:0 0 auto;
    align-self:center;
    margin-top:30px;
    gap:0;
    padding:4px 5px;
    background:linear-gradient(180deg,
      rgba(255,252,248,.62),
      rgba(246,238,229,.44));
    backdrop-filter:blur(24px) saturate(165%);
    -webkit-backdrop-filter:blur(24px) saturate(165%);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 14px 34px -18px rgba(94,68,40,.5),
               inset 0 1px 0 rgba(255,255,255,.9);
  }
  .nav__pill--mob .nav__icon{ width:27px; height:27px; }
  .nav__pill--mob .nav__icon svg{ width:14px; height:14px; }
  .nav__pill--mob .nav__badge{
    min-width:15px; height:15px;
    font-size:8.5px;
    top:0; right:0;
  }

  .nav.is-stuck{ position:fixed; top:6px; }
  .nav.is-stuck .nav__mobTop{ min-height:96px; }
  .nav.is-stuck .nav__mobLogo img{ height:86px; }
  /* once scrolled the row is tight again — drop the spacing that separated
     the controls from the full-size logo */
  .nav.is-stuck .nav__burger,
  .nav.is-stuck .nav__pill--mob{ margin-top:0; }
  /* scrolled: see-through, same as the desktop capsules */
  .nav.is-stuck .nav__burger,
  .nav.is-stuck .nav__pill--mob{
    background:transparent;
    border-color:transparent;
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    box-shadow:none;
  }
}

/* ═══════════════ MOBILE DRAWER ═══════════════ */

.drawer{
  position:fixed; inset:0;
  z-index:100;
  visibility:hidden;
  pointer-events:none;
  /* the closed panel is parked at translateX(100%) — clip it so it
     cannot widen the layout viewport and push the nav icons off-screen */
  overflow:hidden;
}
.drawer::before{
  content:'';
  position:absolute; inset:0;
  background:rgba(10,7,5,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity 0.25s var(--ease);
}
.drawer__panel{
  position:absolute; inset:0 auto 0 0;
  width:min(420px,88vw);
  padding:26px 0 22px;
  display:flex;
  flex-direction:column;
  background:var(--cream);
  color:var(--ink);
  border-right:1px solid rgba(58,50,42,.1);
  transform:translateX(-100%);
  transition:transform 0.31s var(--ease-out);
  overflow-y:auto;
}
.drawer.is-open{ visibility:visible; pointer-events:auto; }
.drawer.is-open::before{ opacity:1; }
.drawer.is-open .drawer__panel{ transform:translateX(0); }

/* ---- head: logo left, close right ---- */
.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 26px 20px;
}
.drawer__logo{
  width:118px;
  opacity:.95;
}
.drawer__close{
  flex:0 0 auto;
  width:38px; height:38px;
  display:grid; place-items:center;
  color:var(--ink);
  border:1px solid rgba(58,50,42,.18);
  border-radius:50%;
  transition:color 0.16s, border-color 0.16s, transform 0.2s var(--ease);
}
.drawer__close svg{ width:16px; height:16px; }
.drawer__close:hover{ color:var(--gold-deep); border-color:var(--gold); transform:rotate(90deg); }

/* ---- link rows: icon + label + chevron ---- */
.drawer__links{ display:flex; flex-direction:column; padding:0 14px; }
.drawer__links a{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  padding:15px 12px;
  border-radius:10px;
  font-family:var(--f-body);
  font-size:13px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--ink);
  opacity:0;
  transform:translateX(18px);
  transition:background .18s var(--ease), color 0.17s var(--ease);
}
.drawer.is-open .drawer__links a{
  animation:drawerIn 0.3s var(--ease-out) forwards;
  animation-delay:calc(0.1s + var(--i) * 0.05s);
}
.drawer__linkIco{
  flex:0 0 auto;
  width:22px; height:22px;
  display:grid; place-items:center;
  color:var(--ink);
}
.drawer__linkIco svg{ width:19px; height:19px; }
.drawer__linkText{ flex:1 1 auto; }
.drawer__linkArrow{
  flex:0 0 auto;
  width:15px; height:15px;
  color:rgba(58,50,42,.4);
  transition:transform .18s var(--ease);
}
.drawer__links a:hover{ background:rgba(185,139,82,.1); color:var(--gold-deep); }
.drawer__links a:hover .drawer__linkArrow{ transform:translateX(3px); color:var(--gold-deep); }
.drawer__links a.is-active{ background:rgba(58,50,42,.08); }

/* ---- quick row: account / wishlist / cart ---- */
.drawer__quick{
  display:flex;
  align-items:stretch;
  gap:8px;
  margin:18px 26px 0;
  padding-top:18px;
  border-top:1px solid rgba(58,50,42,.12);
  opacity:0;
  transform:translateX(18px);
}
.drawer.is-open .drawer__quick{
  animation:drawerIn 0.3s var(--ease-out) forwards;
  animation-delay:calc(0.1s + var(--i) * 0.05s);
}
.drawer__quickItem{
  position:relative;
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:6px 4px;
  font-family:var(--f-body);
  font-size:9.5px;
  letter-spacing:.04em;
  color:var(--ink-soft);
  transition:color .18s var(--ease);
}
.drawer__quickItem svg{ width:21px; height:21px; }
.drawer__quickItem:hover{ color:var(--gold-deep); }
.drawer__quickBadge{
  position:absolute;
  top:-2px; right:calc(50% - 22px);
  min-width:16px; height:16px;
  padding:0 4px;
  display:grid; place-items:center;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-size:9px;
  font-style:normal;
  font-weight:500;
}

.drawer__foot{
  margin-top:26px;
  padding:22px 26px 4px;
  text-align:center;
  opacity:0;
}
.drawer.is-open .drawer__foot{
  animation:drawerIn 0.3s var(--ease-out) forwards;
  animation-delay:calc(0.1s + var(--i) * 0.05s);
}
.drawer__social{
  display:flex; align-items:center; justify-content:center;
  gap:14px;
  margin-bottom:16px;
}
.drawer__social a{
  display:grid; place-items:center;
  width:34px; height:34px;
  border-radius:50%;
  color:#fff;
  transition:transform .18s var(--ease), filter .18s var(--ease);
}
.drawer__social svg{ width:16px; height:16px; }
.drawer__social a:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.drawer__social a.is-wa{ background:#25D366; }
.drawer__social a.is-fb{ background:#1877F2; }
.drawer__social a.is-ig{
  background:radial-gradient(circle at 28% 108%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.drawer__footStar{ display:block; font-size:13px; color:var(--gold); margin-bottom:10px; }
.drawer__foot p{
  margin:0;
  font-size:10.5px;
  letter-spacing:.1em;
  line-height:1.6;
  color:var(--ink-soft);
}

/* ---- signature credit line at the very bottom of the drawer ----
   The drawer background is light, so unlike the dark footer strip this
   glass plaque runs on a dark tint of its own — otherwise white "Powered
   by" text would disappear against the cream panel. */
.drawer__credit{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  padding:9px 18px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(35,28,20,.92), rgba(20,16,12,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px -12px rgba(30,20,10,.5);
}
.drawer__credit__star{ color:var(--gold); font-size:8px; }
.drawer__credit__label{
  font-family:'Cormorant Garamond', serif;
  font-style:normal;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#fff;
}
.drawer__credit__name{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.16em;
  background:linear-gradient(120deg, var(--gold-light), #fff5e0 50%, var(--gold-light));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:var(--gold-light);
  color:var(--gold-light);
  transition:letter-spacing .22s var(--ease);
}
.drawer__credit:hover .drawer__credit__name{ letter-spacing:.22em; }

@keyframes drawerIn{
  to{ opacity:1; transform:translateX(0); }
}


/* ═══════════════ CART DRAWER ═══════════════ */

.cartd{
  position:fixed; inset:0;
  z-index:101;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
}
.cartd::before{
  content:'';
  position:absolute; inset:0;
  background:rgba(10,7,5,.5);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  opacity:0;
  transition:opacity 0.25s var(--ease);
}
.cartd.is-open{ visibility:visible; pointer-events:auto; }
.cartd.is-open::before{ opacity:1; }
.cartd.is-open .cartd__panel{ transform:translateX(0); }

.cartd__panel{
  position:absolute; inset:0 0 0 auto;
  width:min(440px,90vw);
  display:flex;
  flex-direction:column;
  background:var(--cream);
  color:var(--ink);
  border-left:1px solid rgba(58,50,42,.1);
  transform:translateX(100%);
  transition:transform 0.32s var(--ease-out);
  overflow-y:auto;
}

.cartd__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 26px 18px;
}
.cartd__head h2{
  margin:0;
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.35rem;
  letter-spacing:.06em;
}
.cartd__head h2 span{ font-weight:400; color:var(--ink-soft); }
.cartd__close{
  width:36px; height:36px;
  display:grid; place-items:center;
  color:var(--ink);
  border:1px solid rgba(58,50,42,.18);
  border-radius:50%;
  transition:color 0.16s, border-color 0.16s, transform 0.2s var(--ease);
}
.cartd__close svg{ width:15px; height:15px; }
.cartd__close:hover{ color:var(--gold-deep); border-color:var(--gold); transform:rotate(90deg); }

/* ---- free shipping progress ---- */
.cartd__ship{
  margin:0 26px 18px;
  padding:14px 16px;
  border-radius:10px;
  background:rgba(185,139,82,.1);
}
.cartd__shipIco{ display:inline-flex; width:16px; height:16px; margin-right:6px; vertical-align:-3px; color:var(--gold-deep); }
.cartd__shipIco svg{ width:100%; height:100%; }
.cartd__ship p{
  display:inline;
  margin:0;
  font-size:11.5px;
  color:var(--ink-soft);
}
.cartd__ship p b{ color:var(--ink); font-weight:600; }
.cartd__shipBar{
  margin-top:10px;
  height:5px;
  border-radius:999px;
  background:rgba(58,50,42,.14);
  overflow:hidden;
}
.cartd__shipBar i{
  display:block; height:100%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  border-radius:999px;
  transition:width .4s var(--ease-out);
}
.cartd__shipNums{
  display:block;
  margin-top:6px;
  text-align:right;
  font-size:10px;
  color:var(--ink-soft);
}
.cartd__shipNums b{ color:var(--ink); font-weight:600; }

/* ---- items ---- */
.cartd__items{
  flex:1 1 auto;
  padding:0 26px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.cartd__item{
  display:grid;
  grid-template-columns:76px 1fr auto;
  gap:14px;
  align-items:start;
  padding-bottom:18px;
  border-bottom:1px solid rgba(58,50,42,.1);
}
.cartd__item:last-child{ border-bottom:0; }
.cartd__itemImg{
  width:76px; height:76px;
  border-radius:6px;
  background:var(--sand);
  display:grid; place-items:center;
  overflow:hidden;
}
.cartd__itemImg img{ max-width:82%; max-height:82%; object-fit:contain; }
.cartd__itemInfo b{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--ink); }
.cartd__itemInfo i{ display:block; margin-top:2px; font-style:normal; font-size:10.5px; color:var(--ink-soft); }
.cartd__itemPrice{ display:block; margin-top:8px; font-size:12.5px; font-weight:600; color:var(--ink); }
.cartd__itemRemove{
  width:24px; height:24px;
  display:grid; place-items:center;
  color:var(--ink-soft);
  transition:color .18s var(--ease);
}
.cartd__itemRemove svg{ width:13px; height:13px; }
.cartd__itemRemove:hover{ color:#b4413f; }
.cartd__qty{
  grid-column:2 / 3;
  display:inline-flex;
  align-items:center;
  gap:0;
  margin-top:8px;
  border:1px solid rgba(58,50,42,.2);
  border-radius:999px;
  width:fit-content;
}
.cartd__qty button{
  width:26px; height:26px;
  display:grid; place-items:center;
  font-size:13px;
  color:var(--ink);
  transition:color .16s var(--ease);
}
.cartd__qty button:hover{ color:var(--gold-deep); }
.cartd__qty span{
  min-width:22px;
  text-align:center;
  font-size:11.5px;
  font-weight:500;
}

/* ---- empty state ---- */
.cartd__empty{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:40px 26px;
  text-align:center;
  color:var(--ink-soft);
}
.cartd__empty svg{ width:44px; height:44px; opacity:.5; }
.cartd__empty p{ margin:0; font-size:13px; letter-spacing:.04em; }
.cartd__empty .ghost{ margin-top:6px; }

/* ---- footer: totals + checkout ---- */
.cartd__foot{
  margin-top:auto;
  padding:20px 26px 30px;
  border-top:1px solid rgba(58,50,42,.12);
}
.cartd__promo{
  display:flex; align-items:center; gap:10px;
  width:100%;
  margin-bottom:18px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(58,50,42,.12);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--ink-soft);
}
.cartd__promo svg{ width:17px; height:17px; flex:0 0 auto; }
.cartd__promo span{ margin-left:auto; font-size:16px; color:var(--ink-soft); }
.cartd__promo:hover{ color:var(--gold-deep); }

.cartd__totals p{
  display:flex; justify-content:space-between;
  margin:0 0 8px;
  font-size:12px;
  color:var(--ink-soft);
}
.cartd__totals p b{ color:var(--ink); font-weight:500; }
.cartd__grand{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(58,50,42,.14);
  font-size:15px;
  font-weight:600;
}
.cartd__grand b{ font-family:var(--f-display); font-size:1.4rem; font-weight:600; }
.cartd__vat{ margin:2px 0 18px; text-align:right; font-size:9.5px; color:var(--ink-soft); }

.btn--cartCheckout{ width:100%; min-width:0; padding:17px 20px; margin-bottom:10px; }
.btn--cartCheckout .btn__label{ font-size:11px; letter-spacing:.22em; }
.cartd__continue{
  display:block;
  width:100%;
  padding:15px 20px;
  text-align:center;
  font-size:11px;
  letter-spacing:.2em;
  color:var(--ink);
  border:1px solid rgba(58,50,42,.24);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.cartd__continue:hover{ border-color:var(--gold); background:rgba(185,139,82,.08); }

.cartd__trust{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:22px;
}
.cartd__trust span{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  font-size:8.5px;
  color:var(--ink-soft);
}
.cartd__trust svg{ width:20px; height:20px; color:var(--ink); }
.cartd__trust b{ font-size:8.5px; letter-spacing:.02em; color:var(--ink); font-weight:600; }
.cartd__trust i{ font-style:normal; font-size:7.5px; }


/* ═══════════════ SEARCH MODAL ═══════════════ */

.searchm{
  position:fixed; inset:0;
  z-index:102;
  visibility:hidden;
  pointer-events:none;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:6vh 20px;
  overflow-y:auto;
}
.searchm::before{
  content:'';
  position:fixed; inset:0;
  background:rgba(10,7,5,.5);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  opacity:0;
  transition:opacity 0.25s var(--ease);
  z-index:-1;
}
.searchm.is-open{ visibility:visible; pointer-events:auto; }
.searchm.is-open::before{ opacity:1; }
.searchm.is-open .searchm__panel{ opacity:1; transform:translateY(0) scale(1); }

.searchm__panel{
  position:relative;
  width:100%;
  max-width:1040px;
  max-height:88vh;
  display:flex;
  flex-direction:column;
  background:var(--cream);
  color:var(--ink);
  border-radius:10px;
  /* clip to the rounded corners; internal scrolling happens in
     .searchm__body below, never on this panel itself */
  overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(20,16,12,.55);
  opacity:0;
  transform:translateY(-16px) scale(.98);
  transition:opacity .28s var(--ease-out), transform .3s var(--ease-out);
}

.searchm__head{
  flex:0 0 auto;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:30px 34px 0;
}
.searchm__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:600;
  font-size:2rem;
  letter-spacing:.05em;
}
.searchm__sub{
  margin:5px 0 0;
  font-size:12px;
  letter-spacing:.22em;
  color:var(--ink-soft);
}
.searchm__close{
  width:38px; height:38px;
  display:grid; place-items:center;
  color:var(--ink);
  border:1px solid rgba(58,50,42,.18);
  border-radius:50%;
  transition:color 0.16s, border-color 0.16s, transform 0.2s var(--ease);
}
.searchm__close svg{ width:16px; height:16px; }
.searchm__close:hover{ color:var(--gold-deep); border-color:var(--gold); transform:rotate(90deg); }

.searchm__bar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:12px;
  margin:22px 34px 0;
  padding:14px 18px;
  border:1px solid rgba(58,50,42,.22);
  border-radius:8px;
}
.searchm__bar svg{ width:20px; height:20px; flex:0 0 auto; color:var(--ink-soft); }
.searchm__bar input{
  flex:1 1 auto;
  border:0; background:none; outline:0;
  font:inherit; font-size:17px;
  color:var(--ink);
}
.searchm__bar input::placeholder{ color:rgba(58,50,42,.45); }
.searchm__clear{
  flex:0 0 auto;
  width:22px; height:22px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(58,50,42,.12);
  color:var(--ink-soft);
  transition:opacity .15s var(--ease);
}
.searchm__clear svg{ width:10px; height:10px; }
.searchm__clear[hidden]{ display:none; }

.searchm__tabs{
  flex:0 0 auto;
  display:flex; gap:26px;
  margin:20px 34px 0;
  padding-bottom:14px;
  border-bottom:1px solid rgba(58,50,42,.14);
}
.searchm__tabs button{
  position:relative;
  padding-bottom:12px;
  font-size:12.5px;
  letter-spacing:.14em;
  font-weight:500;
  color:var(--ink-soft);
  transition:color .18s var(--ease);
}
.searchm__tabs button::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-1px;
  height:2px;
  background:var(--ink);
  transform:scaleX(0);
  transition:transform .2s var(--ease);
}
.searchm__tabs button.is-active{ color:var(--ink); }
.searchm__tabs button.is-active::after{ transform:scaleX(1); }
.searchm__tabs button:hover{ color:var(--ink); }

.searchm__body{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:0;
  flex:1 1 auto;
  /* the real fix: a grid item's default min-height is auto (its content's
     natural height), which lets .searchm__body grow past the flex panel
     and get clipped by its overflow:hidden instead of scrolling. min-height:0
     lets this item actually shrink to the panel's available space so its
     own overflow-y can take over. */
  min-height:0;
  overflow-y:auto;
}
.searchm__side{
  padding:22px 20px 22px 34px;
  background:var(--cream);
  border-right:1px solid rgba(58,50,42,.1);
}
.searchm__sideBlock{ margin-bottom:24px; }
.searchm__sideTitle{
  margin:0 0 12px;
  font-size:11.5px;
  letter-spacing:.16em;
  font-weight:600;
  color:var(--ink);
}
.searchm__sideBlock a,
.searchm__sideBlock label{
  display:flex; align-items:center; gap:8px;
  margin-bottom:10px;
  font-size:13.5px;
  color:var(--ink-soft);
  cursor:pointer;
  transition:color .16s var(--ease);
}
.searchm__sideBlock a:hover,
.searchm__sideBlock label:hover{ color:var(--gold-deep); }
.searchm__sideBlock a i,
.searchm__sideBlock label i{ font-style:normal; color:rgba(58,50,42,.5); }
.searchm__sideBlock input[type="checkbox"]{ accent-color:var(--ink); }

.searchm__results{
  padding:22px 34px;
  display:flex;
  flex-direction:column;
  background:var(--cream);
}
.searchm__resultsTitle{
  margin:0 0 16px;
  font-size:13px;
  letter-spacing:.09em;
  font-weight:600;
  color:var(--ink);
}
.searchm__row{
  display:grid;
  grid-template-columns:104px 1fr auto auto auto;
  align-items:center;
  gap:20px;
  padding:22px 14px;
  border-bottom:1px solid rgba(58,50,42,.08);
  border-radius:10px;
  transition:background .16s var(--ease), box-shadow .16s var(--ease);
}
.searchm__row:hover{
  background:#fff;
  box-shadow:0 10px 28px -14px rgba(94,68,40,.28);
}
.searchm__row:last-child{ border-bottom:0; }
.searchm__rowImg{
  width:104px; height:104px;
  border-radius:10px;
  background:#fff;
  border:1px solid rgba(58,50,42,.08);
  display:grid; place-items:center;
  overflow:hidden;
}
.searchm__rowImg img{ max-width:84%; max-height:84%; object-fit:contain; }
.searchm__rowInfo b{ display:block; font-size:18.5px; font-weight:600; color:var(--ink); }
.searchm__rowInfo i{ display:block; margin-top:4px; font-style:normal; font-size:15px; color:var(--ink-soft); }
.searchm__rowInfo em{ display:block; margin-top:6px; font-style:normal; font-size:13px; color:var(--gold); }
.searchm__rowPrice{ font-size:18px; font-weight:600; white-space:nowrap; }
.searchm__rowAdd{
  padding:12px 22px;
  font-size:11.5px;
  letter-spacing:.12em;
  color:#fff;
  background:var(--ink);
  border-radius:3px;
  white-space:nowrap;
  transition:background .18s var(--ease);
}
.searchm__rowAdd:hover{ background:var(--gold-deep); }
.searchm__rowWish{
  width:40px; height:40px;
  display:grid; place-items:center;
  color:var(--ink-soft);
  transition:color .18s var(--ease);
}
.searchm__rowWish svg{ width:19px; height:19px; }
.searchm__rowWish:hover{ color:#b4413f; }
.searchm__rowWish.is-on{ color:#b4413f; }
.searchm__rowWish.is-on svg{ fill:#b4413f; }

.searchm__empty{
  padding:40px 10px;
  text-align:center;
  color:var(--ink-soft);
  font-size:14.5px;
}

.searchm__foot{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 34px;
  border-top:1px solid rgba(58,50,42,.12);
  background:rgba(185,139,82,.08);
  border-radius:0 0 10px 10px;
}
.searchm__foot p{
  margin:0;
  font-size:12.5px;
  line-height:1.6;
  color:var(--ink-soft);
}
.searchm__foot p b{ display:block; font-size:13px; letter-spacing:.03em; color:var(--ink); margin-bottom:2px; }
.searchm__foot .ghost{ flex:0 0 auto; margin-top:0; white-space:nowrap; }

/* ═══════════════ HERO ═══════════════ */

.hero{
  position:relative;
  height:100vh;     /* fallback for browsers without svh */
  height:100svh;    /* excludes mobile browser chrome */
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--cream);
}

.hero__bg{
  /* <picture> is inline by default — without this it won't fill the hero box */
  display:block;
  position:absolute; inset:0;
  overflow:hidden;
  /* pointer parallax, written by hero.js */
  --px:0px;
  --py:0px;
  transform:translate3d(var(--px),var(--py),0);
  will-change:transform;
}
.hero__bg img{
  width:100%; height:100%;
  /* fill the fold; the art is 16:9 so on most laptops almost nothing is
     trimmed, and the anchor keeps the bottle safe when it is */
  object-fit:cover;
  object-position:center center;
  animation:heroFadeIn .7s var(--ease-out) forwards;
}
@keyframes heroFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes heroZoom{ to{ transform:scale(1.03); } }
@keyframes kenBurns{
  from{ transform:scale(1.03) translate3d(0,0,0); }
  to  { transform:scale(1.075) translate3d(-1.2%,-.9%,0); }
}

/* readability veil — warm, keeps the beige tone */
.hero__veil{
  position:absolute; inset:0;
  /* just enough lift for the headline to read — the photo stays visible,
     not fogged over */
  background:
    linear-gradient(100deg,
      rgba(243,236,226,.5) 0%,
      rgba(243,236,226,.32) 26%,
      rgba(243,236,226,.08) 46%,
      rgba(243,236,226,0)   60%),
    radial-gradient(120% 80% at 50% 100%, rgba(60,44,30,.1), transparent 58%);
  pointer-events:none;
}

/* fine film grain for a "shot on film" feel */
.hero__grain{
  position:absolute; inset:-120px;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%  { transform:translate(0,0); }
  20% { transform:translate(-14px,9px); }
  40% { transform:translate(11px,-12px); }
  60% { transform:translate(-9px,-7px); }
  80% { transform:translate(13px,10px); }
  100%{ transform:translate(0,0); }
}

/* ---- content ---- */
.hero__content{
  position:relative;
  z-index:5;
  width:100%;
  max-width:1560px;
  margin:0 auto;
  padding:0 46px;
  padding-top:calc(var(--nav-h) * .5);
}

.hero__eyebrow{
  display:flex;
  align-items:center;
  gap:18px;
  margin:0 0 22px;
  opacity:0;
  animation:riseIn 0.9s var(--ease-out) 0.1s forwards;
}
.hero__rule{
  display:block;
  width:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
  animation:ruleGrow 0.9s var(--ease-out) 0.2s forwards;
}
@keyframes ruleGrow{ to{ width:58px; } }

.hero__eyebrowText{
  font-size:11px;
  letter-spacing:.44em;
  font-weight:400;
  color:var(--gold-deep);
}

.hero__title{
  margin:0 0 26px;
  font-family:var(--f-display);
  font-weight:500;
  line-height:.94;
  letter-spacing:.012em;
  /* capped so the headline never runs into the bottle on wide screens */
  font-size:clamp(3.4rem,6.6vw,6.6rem);
}
.hero__line{
  display:block;
  color:var(--ink);
  opacity:0;
  transform:translateY(38px);
  animation:riseIn 0.95s var(--ease-out) forwards;
}
.hero__line:nth-child(1){ animation-delay:0.3s; }
.hero__line:nth-child(2){ animation-delay:0.45s; }

.hero__line--gold{
  background:linear-gradient(96deg,
    var(--gold-deep) 0%,
    var(--gold-light) 32%,
    var(--gold) 55%,
    var(--gold-light) 78%,
    var(--gold-deep) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:riseIn 0.95s var(--ease-out) 0.45s forwards,
            goldFlow 9s ease-in-out 1.5s infinite;
}
@keyframes goldFlow{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}

.hero__sub{
  margin:0 0 44px;
  max-width:31ch;
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.72;
  font-weight:300;
  color:var(--ink-soft);
  opacity:0;
  animation:riseIn 0.95s var(--ease-out) 0.6s forwards;
}

@keyframes riseIn{
  from{ opacity:0; transform:translateY(34px); }
  to  { opacity:1; transform:translateY(0); }
}


/* ═══════════════ PAGE ENTRANCE ═══════════════
   for pages with no hero to carry their own load-in (category,
   product, shop, wishlist) — every direct section marked .pageIn
   settles in slowly, one after another, the moment the page opens.
   Numbered by hero.js the same way .reveal's children are. */

.pageIn{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1.6s var(--ease-out), transform 1.7s var(--ease-out);
  transition-delay:calc(var(--i,0) * .3s);
}
.pageIn.is-in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion:reduce){
  .pageIn{ opacity:1 !important; transform:none !important; transition:none !important; }
}


/* ═══════════════ BUTTON ═══════════════ */

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:270px;
  padding:22px 46px;
  isolation:isolate;
  overflow:hidden;
  background:var(--ink);
  border:1px solid var(--ink);
  color:#fff;
  opacity:0;
  animation:riseIn 0.95s var(--ease-out) 0.75s forwards;
  transition:border-color 0.28s var(--ease),
             box-shadow .55s var(--ease),
             transform .5s var(--ease);
}

/* gold fill sweeping up from the bottom */
.btn__fill{
  position:absolute; inset:0;
  z-index:-1;
  background:linear-gradient(135deg,
    var(--gold-deep) 0%,
    var(--gold) 40%,
    var(--gold-light) 62%,
    var(--gold) 100%);
  transform:translateY(101%);
  transition:transform 0.31s var(--ease-out);
}

/* light sweeping across on hover */
.btn__shine{
  position:absolute; top:0; bottom:0;
  left:-70%;
  width:55%;
  z-index:-1;
  background:linear-gradient(105deg,
    transparent,
    rgba(255,255,255,.42) 48%,
    transparent);
  transform:skewX(-22deg);
  pointer-events:none;
}

.btn__label{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:11.5px;
  letter-spacing:.3em;
  font-weight:400;
  transition:color 0.23s var(--ease), letter-spacing 0.28s var(--ease);
}
.btn__arrow{
  width:30px; height:12px;
  transition:transform 0.28s var(--ease-out);
}

/* --- hover --- */
.btn:hover{
  border-color:var(--gold-light);
  transform:translateY(-3px);
  box-shadow:0 20px 42px -18px rgba(143,102,51,.75);
}
.btn:hover .btn__fill{ transform:translateY(0); }
.btn:hover .btn__label{ color:#fff; letter-spacing:.34em; }
.btn:hover .btn__arrow{ transform:translateX(7px); }
.btn:hover .btn__shine{ animation:shine 0.5s var(--ease) 0.16s; }

@keyframes shine{
  from{ left:-70%; }
  to  { left:130%; }
}

.btn:active{
  transform:translateY(-1px) scale(.985);
  box-shadow:0 10px 24px -14px rgba(143,102,51,.7);
}
.btn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
}


/* ═══════════════ VERTICAL TAGLINE ═══════════════ */

.hero__vertical{
  position:absolute;
  z-index:5;
  right:max(30px, env(safe-area-inset-right, 0px) + 30px);
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  width:22px;              /* reserve the column so glyphs aren't clipped */
  opacity:0;
  animation:fadeIn 0.65s var(--ease-out) 0.68s forwards;
}
.hero__vline{
  width:1px; height:74px;
  background:linear-gradient(180deg,transparent,rgba(143,102,51,.55),transparent);
}
.hero__vtext{
  writing-mode:vertical-rl;
  font-size:10.5px;
  /* the trailing letter-spacing adds a phantom gap that clipped the last
     glyph against the hero's overflow:hidden — pad it back */
  letter-spacing:.42em;
  padding-bottom:.42em;
  font-weight:400;
  white-space:nowrap;
  color:var(--gold-deep);
}
.hero__vstar{
  font-size:11px;
  color:var(--gold);
  animation:twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.45; transform:scale(.85) rotate(0deg); }
  50%    { opacity:1;   transform:scale(1.15) rotate(90deg); }
}
@keyframes fadeIn{ to{ opacity:1; } }


/* ═══════════════ SCROLL CUE ═══════════════ */

.hero__scroll{
  position:absolute;
  z-index:5;
  left:46px;
  bottom:40px;
  display:flex;
  align-items:center;
  gap:16px;
  opacity:0;
  animation:fadeIn 0.6s var(--ease-out) 0.8s forwards;
}
.hero__scrollText{
  font-size:9.5px;
  letter-spacing:.42em;
  color:var(--ink-soft);
}
.hero__scrollLine{
  position:relative;
  display:block;
  width:78px; height:1px;
  background:rgba(58,50,42,.24);
  overflow:hidden;
}
.hero__scrollLine i{
  position:absolute; inset:0;
  display:block;
  background:var(--gold);
  transform-origin:left;
  animation:scrollRun 2.3s var(--ease) infinite;
}
@keyframes scrollRun{
  0%  { transform:translateX(-100%) scaleX(.6); }
  55% { transform:translateX(0)      scaleX(1); }
  100%{ transform:translateX(100%)  scaleX(.6); }
}


/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

@media (max-width:1400px){
  .hero__content{ padding-left:40px; padding-right:40px; }
  .nav__links{ gap:24px; }
  .nav__links a{ font-size:10.5px; letter-spacing:.17em; }
  .hero__scroll{ left:40px; }
}

@media (max-width:1180px){
  /* the mobile bar takes over here, so this tracks its taller 150px row */
  :root{ --nav-h:158px; }
  .nav{ top:34px; }
  .hero__content{ padding-left:34px; padding-right:34px; }
  .hero__scroll{ left:34px; }
  .hero__vertical{ right:26px; }
}

/* ───────────── phones ───────────── */
@media (max-width:900px){
  /* single-row mobile nav (the links bar was removed) — tracks the taller
     150px row the bigger logo needs, so hero copy still clears it */
  :root{ --nav-h:162px; }
  .nav{ top:28px; }

  .announce__track span{ font-size:9.5px; letter-spacing:.26em; }

  .hero{
    align-items:flex-start;
    min-height:100svh;
  }

  /* Keep the top-left readable for the headline while leaving the bottle
     untouched — much lighter than before, just a lift, not a fog. */
  .hero__veil{
    background:
      linear-gradient(160deg,
        rgba(243,236,226,.55) 0%,
        rgba(243,236,226,.38) 30%,
        rgba(243,236,226,.12) 52%,
        rgba(243,236,226,0)   68%),
      linear-gradient(90deg,
        rgba(243,236,226,.3) 0%,
        rgba(243,236,226,.08) 42%,
        rgba(243,236,226,0)   60%);
  }

  .hero__bg{
    background:#dcc9b8;
    transform:none;              /* no pointer parallax on touch */
  }
  /* the whole portrait photo shows: the hero takes the art's own ratio
     (941x1672) so `cover` fills it exactly with nothing cropped */
  .hero{
    height:auto;
    min-height:0;
    aspect-ratio:941 / 1672;
  }
  .hero__bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    animation:heroFade 0.7s var(--ease-out) forwards !important;
    transform:none !important;
  }
  @keyframes heroFade{ from{ opacity:0; } to{ opacity:1; } }

  /* copy stays hard left, as in the reference */
  .hero__content{
    padding:calc(var(--nav-h) + 26px) 20px 0;
    text-align:left;
  }
  .hero__eyebrow{ margin-bottom:14px; }
  .hero__eyebrowText{ font-size:9.5px; letter-spacing:.34em; }
  .hero__rule{ animation:none; width:34px; }

  .hero__title{
    /* "THAT STAYS" is the widest line — keep it inside the viewport */
    font-size:clamp(1.75rem,8.4vw,2.8rem);
    line-height:1.02;
    margin-bottom:16px;
  }
  .hero__sub{
    max-width:22ch;
    font-size:14.5px;
    line-height:1.62;
    margin-bottom:28px;
  }

  .btn{
    min-width:0;
    width:auto;
    max-width:100%;
    padding:13px 22px;
  }
  .btn__label{
    font-size:9px;
    letter-spacing:.14em;
    gap:9px;
    white-space:nowrap;
  }
  .btn__arrow{ width:20px; height:9px; flex:0 0 auto; }

  /* the right-hand vertical tagline, as in the reference */
  .hero__vertical{
    right:14px;
    top:auto;
    bottom:auto;
    /* sits beside the headline, not over the bottle */
    top:calc(var(--nav-h) + 40px);
    transform:none;
    gap:12px;
    width:auto;
  }
  .hero__vtext{
    writing-mode:horizontal-tb;
    font-size:9px;
    letter-spacing:.3em;
    line-height:1.9;
    text-align:right;
  }
  .hero__vline{ display:none; }

  .hero__scroll{ display:none; }
}

@media (max-width:420px){
  .hero__title{ font-size:2.15rem; }
  .hero__sub{ font-size:13.5px; max-width:20ch; }
  /* still the big logo on the narrowest phones, just short of the 150px the
     wider ones get so it can't crowd the burger and the icon capsule */
  .nav__mobLogo img{ height:124px; }
  .nav.is-stuck .nav__mobLogo img{ height:76px; }
  .hero__vertical{ display:none; }
}

/* --- short landscape phones --- */
@media (max-height:560px) and (orientation:landscape){
  .hero{ min-height:auto; padding-bottom:50px; }
  .hero__content{ padding-top:calc(var(--nav-h) + 18px); }
  .hero__title{ font-size:clamp(2.4rem,7vw,3.6rem); }
  .hero__scroll{ display:none; }
}


/* ════════════════════════════════════════════════
   ACCESSIBILITY
   ════════════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero__line,.hero__sub,.btn,.hero__eyebrow,
  .hero__vertical,.hero__scroll{ opacity:1 !important; transform:none !important; }
  .hero__rule{ width:58px !important; }
  .hero__bg img{ transform:none !important; }
}


/* ════════════════════════════════════════════════
   SHARED — layout, headings, reveal, buttons
   ════════════════════════════════════════════════ */

.wrap{
  width:100%;
  max-width:1560px;
  margin:0 auto;
  padding:0 46px;
}

/* ---- scroll reveal ----
   The SECTION itself never fades: its photograph is painted the moment you
   reach it. Only the content inside settles in, piece after piece. */
.reveal{ opacity:1; transform:none; }

/* every direct content block of a revealed section eases up in sequence —
   a slow, deliberate settle, not a quick fade */
.reveal > .wrap > *,
.reveal > .wrap,
.reveal .shead,
.reveal .stagger,
.reveal [style*="--d"]{
  opacity:0;
  transform:translateY(44px);
  transition:opacity 1.7s var(--ease-out), transform 1.8s var(--ease-out);
}
/* the backgrounds are content-less layers — they must never be hidden */
.reveal .cats__bg, .reveal .cats__veil,
.reveal .brands__bg, .reveal .brands__veil,
.reveal .foot__bg, .reveal .foot__veil,
.reveal .reviews__bg, .reveal .reviews__veil,
.reveal .sale__bg,
.reveal .sale__full, .reveal .sale__card{
  opacity:1 !important;
  transform:none !important;
}

.reveal.is-in > .wrap,
.reveal.is-in > .wrap > *,
.reveal.is-in .shead,
.reveal.is-in .stagger,
.reveal.is-in [style*="--d"]{ opacity:1; transform:none; }

/* stagger: each child waits its turn, so a section builds up slowly,
   one piece settling before the next begins */
.reveal > .wrap > *{ transition-delay:calc(var(--i,0) * .32s); }
.reveal [style*="--d"]{ transition-delay:calc(var(--d,0) * .24s); }

/* ---- section heading ---- */
.shead{ text-align:center; margin-bottom:52px; }
.shead__eyebrow{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin:0 0 14px;
  font-size:10.5px; letter-spacing:.42em; font-weight:400;
  color:var(--gold-deep);
}
.shead__rule{
  display:block; width:64px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(143,102,51,.55),transparent);
}
.shead__title{
  margin:0;
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(2.4rem,5.4vw,4.6rem);
  line-height:1.02;
  letter-spacing:.01em;
  color:var(--ink);
}
.shead__title em{
  font-style:normal;
  background:linear-gradient(96deg,var(--gold-deep),var(--gold-light) 40%,var(--gold) 70%,var(--gold-deep));
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:goldFlow 9s ease-in-out infinite;
}
.shead__star{ margin:14px 0 0; color:var(--gold); font-size:13px; }
.shead__sub{
  margin:14px 0 0;
  font-size:11px; letter-spacing:.34em; font-weight:300;
  color:var(--ink-soft);
}

/* ---- ghost (outlined) button ---- */
.ghost{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:26px;
  padding:15px 34px;
  overflow:hidden;
  border:1px solid rgba(58,50,42,.34);
  background:transparent;
  isolation:isolate;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ghost__fill{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(135deg,var(--gold-deep),var(--gold) 45%,var(--gold-light));
  transform:translateY(101%);
  transition:transform .34s var(--ease-out);
}
.ghost__label{
  display:inline-flex; align-items:center; gap:13px;
  font-size:10.5px; letter-spacing:.3em; color:var(--ink);
  transition:color .25s var(--ease), letter-spacing .3s var(--ease);
}
.ghost__label svg{ width:26px; height:10px; transition:transform .3s var(--ease-out); }
.ghost:hover{ border-color:var(--gold); transform:translateY(-2px); }
.ghost:hover .ghost__fill{ transform:translateY(0); }
.ghost:hover .ghost__label{ color:#fff; letter-spacing:.33em; }
.ghost:hover .ghost__label svg{ transform:translateX(6px); }
.ghost:active{ transform:translateY(0) scale(.985); }

/* ---- button size variants (reuse .btn from the hero) ---- */
.btn--sm{ min-width:0; padding:17px 36px; }
.btn--sm .btn__label{ font-size:10.5px; letter-spacing:.26em; }
.btn--xs{ min-width:0; padding:13px 26px; }
.btn--xs .btn__label{ font-size:9.5px; letter-spacing:.22em; gap:10px; }
.btn--xs .btn__arrow{ width:24px; height:10px; }
.btn--round{ border-radius:999px; padding:17px 34px; }
.btn--round .btn__label svg:first-child{ width:11px; height:13px; }

/* light variant sits on white backgrounds */
.btn--light{ background:transparent; border-color:rgba(58,50,42,.4); color:var(--ink); }
.btn--light .btn__label{ color:var(--ink); }
.btn--light:hover .btn__label{ color:#fff; }


/* ════════════════════════════════════════════════
   2 · BEST SELLERS
   ════════════════════════════════════════════════ */

.best{
  position:relative;
  padding:110px 0 120px;
  background:#fff;
}

.grid--products{
  display:grid;
  grid-template-columns:repeat(3,1fr);   /* 3 + 3 + 2 */
  gap:40px 30px;
}
/* last row holds only 2 cards — centre them under the row above */
@media (min-width:901px){
  .grid--products .card:nth-child(7){ grid-column:2 / 3; justify-self:end; }
  .grid--products .card:nth-child(8){ grid-column:3 / 4; justify-self:start; }
}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* fill the grid row height so every card in the row matches, even when
     one has fewer size chips (and so wraps a shorter block above) */
  height:100%;
  padding:26px 16px 24px;
  text-align:center;
  /* the bottles float on the page — no white plate behind them */
  background:transparent;
  border:1px solid transparent;
  border-radius:4px;
  transition:transform .3s var(--ease-out),
             box-shadow .3s var(--ease),
             border-color .3s var(--ease),
             background .3s var(--ease);
}
.card:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.42);
  border-color:rgba(185,139,82,.22);
  /* warm shadow — never a white glow */
  box-shadow:0 26px 54px -28px rgba(94,68,40,.4);
}
/* the whole card opens its product page — everywhere except its own
   size/wishlist/add-to-cart controls, which stop the click reaching it */
.card.is-clickable{ cursor:pointer; }

/* wrappers used when a whole card links through to its product page —
   plain blocks, no extra spacing or underline of their own */
.card__mediaLink,
.card__link{
  display:block;
  width:100%;
  color:inherit;
}

.card__media{
  position:relative;
  width:100%;
  /* a fixed, non-negotiable box: as a flex child of .card it must not grow or
     shrink, or the photo inside overflows it and rides over the name/price */
  flex:0 0 360px;
  height:360px;
  margin-bottom:18px;
  /* no clipping — the bottle must never be cut */
}

/* Best Sellers only: a plain white plate behind each bottle, and a ribbon
   badge marking the card as a bestseller — pinned above the media box's own
   top edge (negative offset) so it never overlaps the product photo itself. */
.best .card__media{
  background:#fff;
  border-radius:6px;
  margin-top:34px;
  /* a bit bigger than the shared 360px card default, just for this rail */
  flex:0 0 390px;
  height:390px;
}
.best .card__badge{
  position:absolute;
  top:-34px; left:16px;
  z-index:2;
  padding:6px 13px;
  background:#2e7d4f;
  color:#fff;
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.16em;
  border-radius:3px;
  pointer-events:none;
}

/* general-purpose card badges: used on any category grid/card, not just the
   homepage best-sellers rail — pinned inside the media box's own corner
   since these cards don't reserve the extra top margin the rail does */
.card__badge{
  position:absolute;
  top:10px; left:10px;
  z-index:2;
  padding:5px 11px;
  background:#2e7d4f;
  color:#fff;
  font-size:9px;
  font-weight:400;
  letter-spacing:.14em;
  border-radius:3px;
  pointer-events:none;
}
.card__badge--low{
  top:auto; left:10px; right:auto; bottom:10px;
  background:#b3251e;
}
.card__badge--sale{
  top:10px; right:10px; left:auto;
  background:#b3251e;
}
/* Pinned to the box with inset rather than sized by a percentage: a % height
   resolves against the content area, which let a very tall, narrow bottle shot
   (e.g. 207x463) compute past the box and ride up over the name and price.
   Absolute + inset makes the frame physically inescapable, and `contain`
   scales each photo inside it, so every bottle reads at one consistent size
   whatever its own proportions. The 12% inset is the old 76% breathing room. */
.card__media img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  max-width:none; max-height:none;
  /* the breathing room the old 76% cap used to give */
  padding:12%;
  object-fit:contain;
  transition:transform .42s var(--ease-out), filter .35s var(--ease);
}
/* the zoom the brief asked for */
.card:hover .card__media img{
  transform:scale(1.11) translateY(-4px);
  filter:drop-shadow(0 20px 26px rgba(94,68,40,.3));
}

/* Best Sellers: slightly less inset than the shared card default, so the
   bottle reads a bit bigger inside its plate — scoped to .best only, every
   other grid that reuses .card__media keeps the original 12% breathing room */
.best .card__media img{ padding:8%; }

.card__brand{
  margin:0 0 7px;
  font-size:9.5px; letter-spacing:.3em; font-weight:400;
  color:var(--gold-deep);
}
.card__name{
  margin:0 0 5px;
  font-family:var(--f-display);
  font-size:26px; font-weight:500; letter-spacing:.01em;
  color:var(--ink);
}
.card__type{
  margin:0 0 15px;
  font-size:12.5px; font-weight:300; color:var(--ink-soft);
}

.sizes{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-bottom:15px; }
.size{
  padding:6px 15px;
  font-size:10.5px; letter-spacing:.04em;
  color:var(--ink-soft);
  border:1px solid rgba(58,50,42,.2);
  border-radius:999px;
  transition:color .2s var(--ease), background .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.size:hover{ border-color:var(--gold); color:var(--gold-deep); transform:translateY(-1px); }
.size.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }

.card__price{
  /* pushes price + buy row to the bottom, so a card with fewer size chips
     (a shorter block above) still lines up its button with its neighbours */
  margin:auto 0 16px;
  font-size:14px; letter-spacing:.09em; font-weight:400;
  color:var(--ink);
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.card__price .roll{ font-variant-numeric:tabular-nums; }
.card__price--sale .card__priceNow{ color:#b3251e; }
.card__priceWas{
  font-size:.82em;
  color:var(--ink-soft);
  text-decoration:line-through;
  opacity:.65;
}

.card__buy{ display:flex; align-items:center; gap:9px; width:100%; }

.add{
  position:relative;
  flex:1;
  padding:14px 12px;
  overflow:hidden;
  isolation:isolate;
  background:var(--ink);
  color:#fff;
  transition:transform .22s var(--ease), box-shadow .25s var(--ease);
}
.add__fill{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(135deg,var(--gold-deep),var(--gold) 45%,var(--gold-light));
  transform:translateY(101%);
  transition:transform .32s var(--ease-out);
}
.add__label{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:9.5px; letter-spacing:.2em;
  transition:letter-spacing .28s var(--ease);
}
.add__label svg{ width:15px; height:15px; }
.add:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(143,102,51,.7); }
.add:hover .add__fill{ transform:translateY(0); }
.add:hover .add__label{ letter-spacing:.23em; }
.add:active{ transform:translateY(0) scale(.98); }

.wish{
  flex:0 0 auto;
  width:44px; height:44px;
  display:grid; place-items:center;
  color:var(--ink-soft);
  border:1px solid rgba(58,50,42,.2);
  transition:color .22s var(--ease), border-color .22s var(--ease),
             background .22s var(--ease), transform .22s var(--ease);
}
.wish svg{ width:18px; height:18px; transition:transform .25s var(--ease-out); }
.wish:hover{ color:#b4413f; border-color:#b4413f; background:rgba(180,65,63,.06); }
.wish:hover svg{ transform:scale(1.14); }
.wish.is-on{ color:#b4413f; border-color:#b4413f; }
.wish.is-on svg{ fill:#b4413f; }


/* ════════════════════════════════════════════════
   3 · CATEGORIES
   ════════════════════════════════════════════════ */

.cats{
  position:relative;
  padding:104px 0 96px;
  overflow:hidden;
  /* matches the artwork's own tone, so the contain margins are invisible */
  background:#efe7dc;
}
.cats__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  /* covers the section fully — a soft veil sits over it, so cropped
     edges are never the focal point */
  object-fit:cover;
  object-position:center;
}
.cats__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(244,239,231,.94) 0%,
    rgba(244,239,231,.86) 40%,
    rgba(244,239,231,.92) 100%);
}
.cats .wrap{ position:relative; z-index:2; }

/* desktop: a compact, centred grid — not full-bleed squares */
.cats__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  /* a compact, centred grid — noticeably smaller than a full-bleed layout */
  max-width:720px;
  margin:0 auto;
}
.tile--wide{ grid-column:1 / -1; }

.tile{
  position:relative;
  display:block;
  grid-column:span 2;
  aspect-ratio:1 / 1.06;
  overflow:hidden;
  border-radius:3px;
  background:#241c14;
  transition:transform .34s var(--ease-out), box-shadow .34s var(--ease);
}
.tile--wide{ aspect-ratio:2.34 / 1; grid-column:1 / -1; }

.tile__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .55s var(--ease-out), filter .4s var(--ease);
}
.tile__shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(20,14,9,.06) 0%,
    rgba(20,14,9,.30) 46%,
    rgba(20,14,9,.80) 100%);
  transition:background .35s var(--ease);
}
.tile__body{
  position:absolute;
  left:18px; right:18px; bottom:16px;
  display:block;
  color:#fff;
  transition:transform .38s var(--ease-out);
}
.tile__name{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(1.05rem,2.3vw,1.4rem);
  font-weight:500; letter-spacing:.05em;
  line-height:1;
  margin-bottom:6px;
}
.tile__desc{
  display:block;
  font-size:8px; letter-spacing:.18em; font-weight:300;
  line-height:1.55;
  color:rgba(255,255,255,.86);
}
/* the arrow and the SHOP NOW pill share one row */
.tile__row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:11px;
}
.tile__go{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:30px; height:30px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:50%;
  transition:background .28s var(--ease), border-color .28s var(--ease), transform .3s var(--ease-out);
}
.tile__go svg{ width:13px; height:13px; transition:transform .3s var(--ease-out); }

/* the SHOP NOW that appears on approach */
/* slides out from behind the arrow on approach */
.tile__cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  overflow:hidden;
  max-width:0;
  padding:9px 0;
  white-space:nowrap;
  font-size:8px; letter-spacing:.22em;
  color:var(--ink);
  background:linear-gradient(135deg,#fffdfa,#f2e7d8);
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  box-shadow:0 10px 20px -12px rgba(30,20,12,.7);
  transition:max-width .42s var(--ease-out),
             padding .42s var(--ease-out),
             opacity .26s var(--ease);
}
.tile__cta i{
  font-style:normal;
  display:block;
  padding:0 4px;
}

/* --- hover: zoom + blur the photo, reveal the CTA --- */
.tile:hover{
  transform:translateY(-5px);
  box-shadow:0 34px 62px -32px rgba(60,42,26,.7);
}
.tile:hover .tile__img{
  transform:scale(1.1);
  filter:blur(4px) brightness(.82);
}
.tile:hover .tile__shade{
  background:linear-gradient(180deg,
    rgba(20,14,9,.34) 0%,
    rgba(20,14,9,.46) 50%,
    rgba(20,14,9,.78) 100%);
}
.tile:hover .tile__body{ transform:translateY(-6px); }
.tile:hover .tile__go{ background:rgba(255,255,255,.16); border-color:#fff; }
.tile:hover .tile__go svg{ transform:translateX(3px); }
.tile:hover .tile__cta{
  opacity:1;
  max-width:130px;
  padding:9px 16px;
}

.cats__foot{
  display:flex; align-items:center; justify-content:center; gap:20px;
  margin:54px 0 0;
  color:var(--gold); font-size:13px;
}
.cats__foot .shead__rule{ width:150px; }
.cats__tag{
  margin:14px 0 0;
  text-align:center;
  font-size:11px; letter-spacing:.42em; font-weight:300;
  color:var(--ink-soft);
}


/* ════════════════════════════════════════════════
   4 · TRUST STRIP
   ════════════════════════════════════════════════ */

.trust{
  padding:40px 0;
  background:linear-gradient(90deg,#12100c,#221a12 50%,#12100c);
  border-top:1px solid rgba(185,139,82,.24);
  border-bottom:1px solid rgba(185,139,82,.24);
}
.trust__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.trust__item{
  display:flex; align-items:center; gap:15px;
  flex:1 1 0; min-width:0;
  justify-content:center;
}
.trust__ico{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:46px; height:46px;
  border-radius:50%;
  color:var(--gold-light);
  border:1px solid rgba(185,139,82,.36);
  transition:transform .3s var(--ease-out), background .3s var(--ease), border-color .3s var(--ease);
}
.trust__ico svg{ width:24px; height:24px; }
.trust__item:hover .trust__ico{
  transform:translateY(-3px) rotate(-4deg);
  background:rgba(185,139,82,.14);
  border-color:var(--gold);
}
.trust__txt{ display:block; min-width:0; }
.trust__txt b{
  display:block;
  font-size:10.5px; letter-spacing:.24em; font-weight:400;
  color:var(--cream);
  white-space:nowrap;
}
.trust__txt i{
  display:block;
  margin-top:4px;
  font-style:normal;
  font-size:10px; letter-spacing:.12em; font-weight:300;
  color:rgba(232,221,205,.6);
  white-space:nowrap;
}
.trust__sep{
  flex:0 0 1px;
  align-self:stretch;
  background:linear-gradient(180deg,transparent,rgba(185,139,82,.4),transparent);
}


/* ════════════════════════════════════════════════
   5 · BRANDS
   ════════════════════════════════════════════════ */

.brands{
  position:relative;
  padding:0;              /* no gap under the art */
  overflow:hidden;
  background:#efe6da;
}
.brands__bg{
  display:block;
  position:absolute; inset:0;
}
.brands__bg img{
  width:100%; height:100%;
  object-fit:contain;   /* show the art in full, undistorted */
  object-position:center bottom;
}
.brands__veil{
  position:absolute; inset:0;
  /* a light lift for the copy only — no haze over the photograph */
  background:linear-gradient(100deg,
    rgba(243,238,230,.42) 0%,
    rgba(243,238,230,.16) 24%,
    rgba(243,238,230,0)   40%);
}
.brands__inner{
  position:relative; z-index:2;
  /* the art is 1536x1024 (1.5:1); matching that ratio lets `contain` fill
     the box exactly, but capped so a wide, short laptop screen never has
     to grow taller than the fold to show it all */
  aspect-ratio:1536 / 1024;
  max-height:min(76vh,860px);
  min-height:0;
  display:flex;
  align-items:center;
  padding-top:70px;
  padding-bottom:70px;
}
.brands__copy{ max-width:600px; }

.brands__eyebrow{
  display:flex; align-items:center; gap:16px;
  margin:0 0 26px;
  font-size:10.5px; letter-spacing:.4em;
  color:var(--ink-soft);
}
.brands__eyebrow .shead__rule{ width:78px; }

.brands__title{
  margin:0 0 22px;
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(2.6rem,5.6vw,5rem);
  line-height:.98;
  letter-spacing:.005em;
  color:var(--ink);
}
.brands__sub{
  margin:0 0 22px;
  font-size:11px; letter-spacing:.34em; font-weight:400;
  color:var(--ink-soft);
}
.brands__text{
  margin:0 0 34px;
  font-size:15px; line-height:1.75; font-weight:300;
  color:var(--ink-soft);
}
.brands__note{
  position:absolute;
  right:46px; top:104px;
  margin:0;
  text-align:right;
  font-size:10.5px; letter-spacing:.34em; line-height:2;
  color:var(--ink-soft);
}

/* ---- brand rail ----
   sits on its own light band under the photo, as in the reference,
   so the wordmarks are always legible */
.rail{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:14px;
  max-width:1560px;
  margin:0 auto;
  padding:0 46px;
}
.brands__band{
  position:relative;
  z-index:2;
  margin-top:0;           /* flush against the photo above */
  padding:10px 0 4px;
  /* a clean solid band — no white haze over the artwork */
  background:#f6f0e7;
  border-top:1px solid rgba(185,139,82,.2);
}
.rail__track{
  flex:1;
  display:flex;
  align-items:center;
  gap:0;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
}
.rail__track::-webkit-scrollbar{ display:none; }

.brandchip{
  position:relative;
  flex:0 0 25%;              /* exactly 4 visible, per the brief */
  scroll-snap-align:start;
  display:grid;
  place-items:center;
  gap:4px;
  padding:24px 18px;
  text-align:center;
  cursor:pointer;
  transition:transform .3s var(--ease-out);
}
.brandchip::after{
  content:'';
  position:absolute; right:0; top:26%; bottom:26%;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(143,102,51,.34),transparent);
}
.brandchip:last-child::after{ display:none; }
.brandchip img{
  max-width:132px;
  max-height:58px;
  width:auto; height:auto;
  object-fit:contain;
  opacity:.88;
  transition:opacity .25s var(--ease), transform .3s var(--ease-out),
             filter .3s var(--ease);
}
.brandchip:hover{ transform:translateY(-4px); }
.brandchip:hover img{
  opacity:1;
  transform:scale(1.12);
  filter:drop-shadow(0 10px 16px rgba(94,68,40,.28));
}

.rail__nav{
  flex:0 0 auto;
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--ink-soft);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(185,139,82,.3);
  transition:color .22s var(--ease), background .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.rail__nav svg{ width:19px; height:19px; }
.rail__nav:hover{
  color:#fff;
  background:var(--gold);
  border-color:var(--gold);
  transform:scale(1.07);
}
.rail__nav:active{ transform:scale(.96); }

.rail__bar{
  position:relative; z-index:2;
  max-width:1560px;
  margin:26px auto 0;
  padding:0 46px;
}
.rail__bar i{
  display:block;
  height:2px;
  width:24%;
  background:var(--ink);
  transition:width .28s var(--ease), transform .28s var(--ease-out);
}
.rail__bar::before{
  content:'';
  position:absolute; left:46px; right:46px; top:0;
  height:2px;
  background:rgba(58,50,42,.14);
  z-index:-1;
}
.rail__count{
  position:relative; z-index:2;
  max-width:1560px;
  margin:12px auto 0;
  padding:0 46px;
  text-align:right;
  font-size:10.5px; letter-spacing:.2em;
  color:var(--ink-soft);
}


/* ════════════════════════════════════════════════
   6 · SALE BANNER
   ════════════════════════════════════════════════ */

.sale{
  padding:0;              /* sits flush between its neighbours */
  background:#f7f3ec;
}
.sale__full{ width:100%; }   /* edge to edge, ignores the page gutter */
.sale__card{
  position:relative;
  overflow:hidden;
  /* full-bleed, edge to edge, no rounding and no shadow gap */
  border-radius:0;
  aspect-ratio:2160 / 728;
  display:flex;
  align-items:center;
  background:#efe7db;
}
.sale__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  object-position:center;
  transition:transform 8s var(--ease-out);
}
.sale:hover .sale__bg{ transform:scale(1.04); }

.sale__row{
  position:relative; z-index:2;
  width:100%;
  display:grid;
  grid-template-columns:1fr auto 1.25fr auto 1fr;
  align-items:center;
  gap:2.2vw;
  /* everything is sized off the viewport so the row always fits the
     fixed-ratio banner and nothing is ever clipped */
  padding:0 3.4vw;
}
.sale__left{
  margin:0;
  text-align:center;
  font-size:clamp(7px,.78vw,11.5px); letter-spacing:.3em; line-height:2;
  color:var(--ink-soft);
}
.sale__star{ display:block; margin-bottom:8px; color:var(--gold); font-size:15px; }
.sale__div{
  width:1px; height:min(9vw,76px);
  background:linear-gradient(180deg,transparent,rgba(143,102,51,.4),transparent);
}
.sale__mid{ margin:0; text-align:center; }
.sale__mid b{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(1.5rem,4.4vw,4.6rem);
  font-weight:500; line-height:1;
  color:var(--ink);
}
.sale__mid i{
  display:block;
  margin-top:.7vw;
  font-style:normal;
  font-size:clamp(6.5px,.76vw,11px); letter-spacing:.3em; font-weight:300;
  color:var(--ink-soft);
}
.sale__right{ display:grid; justify-items:center; gap:.8vw; }
.sale__note{
  margin:0;
  font-size:clamp(6px,.66vw,9.5px); letter-spacing:.22em;
  color:var(--ink-soft);
}
/* the CTA shrinks with the banner too */
.sale__right .btn--sm{ padding:clamp(7px,1.1vw,17px) clamp(12px,2.4vw,36px); }
.sale__right .btn--sm .btn__label{
  font-size:clamp(6.5px,.72vw,10.5px);
  letter-spacing:.2em;
  gap:clamp(5px,.8vw,14px);
}
.sale__right .btn--sm .btn__arrow{ width:clamp(14px,1.8vw,30px); height:auto; }


/* ════════════════════════════════════════════════
   7 · COLLECTION RAILS
   ════════════════════════════════════════════════ */

.cols{ background:#fff; }
.col{ border-bottom:1px solid rgba(58,50,42,.1); }
.col:last-child{ border-bottom:0; }

.col__inner{
  display:grid;
  grid-template-columns:236px 1fr;
  align-items:center;
  gap:34px;
  padding:44px 46px;
}
.col__aside{ padding-right:14px; }
.col__eyebrow{
  margin:0 0 10px;
  font-size:9.5px; letter-spacing:.3em;
  color:var(--ink-soft);
}
.col__title{
  margin:0 0 14px;
  font-family:var(--f-display);
  font-size:clamp(2rem,3.2vw,2.9rem);
  font-weight:500; line-height:1;
  color:var(--ink);
}
.col__rule{
  display:block;
  width:38px; height:1px;
  margin-bottom:14px;
  background:rgba(58,50,42,.36);
}
.col__sub{
  margin:0 0 20px;
  font-size:12.5px; line-height:1.7; font-weight:300;
  color:var(--ink-soft);
}

.col__rail{ position:relative; min-width:0; }
.col__track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
  padding:4px 2px 6px;
}
.col__track::-webkit-scrollbar{ display:none; }

.mini{
  flex:0 0 calc((100% - 80px) / 5);   /* 5 across on desktop */
  scroll-snap-align:start;
  /* a column so every tile lines its name and price up on the same baseline
     no matter how many lines the name runs to */
  display:flex;
  flex-direction:column;
  text-align:center;
  transition:transform .3s var(--ease-out);
}
.mini__ph{
  /* a fixed, non-negotiable box: as a flex child of .mini it must not grow or
     shrink, or the photo inside stretches past it and collides with the price */
  flex:0 0 var(--ph-h,180px);
  display:block;
  height:var(--ph-h,180px);
  /* clear air under the photo so the price can never crowd it */
  margin-bottom:16px;
  overflow:hidden;
}
/* every product is scaled by the SAME rule inside that identical box, so a tall
   bottle and a wide watch read at one consistent size across the rail.
   height is set against the box's own px height (not a % of an auto-height
   parent, which browsers resolve to "auto" and let the photo overflow). */
.mini__ph img{
  display:block;
  width:100%;
  height:var(--ph-h,150px);
  object-fit:contain;
  transition:transform .4s var(--ease-out), filter .32s var(--ease);
}
.mini b{
  display:block;
  font-size:8.5px; letter-spacing:.24em; font-weight:400;
  color:var(--gold-deep);
  margin-bottom:5px;
}
.mini em{
  display:block;
  font-style:normal;
  font-size:12px; font-weight:300;
  color:var(--ink);
  margin-bottom:6px;
  /* push the price to the bottom of the tile: names of 1 or 2 lines both end
     with the price on the same line across the whole rail */
  flex:1 1 auto;
}
.mini i{
  display:block;
  font-style:normal;
  font-size:12px; letter-spacing:.06em; font-weight:400;
  color:var(--ink);
  margin-top:auto;
}
.mini:hover{ transform:translateY(-5px); }
.mini:hover .mini__ph img{
  transform:scale(1.12);
  filter:drop-shadow(0 16px 22px rgba(94,68,40,.3));
}

/* watches, homepage collection rail: same shared stone-podium backdrop used
   on the dedicated watches page/cards (shop.css, product.css), pushed down
   the same way so the watch reads as resting on the slab — see the longer
   note above .watches-page's rule in shop.css for how these numbers were
   picked. .mini__ph isn't square like the other card boxes, but a two-value
   background-size (112% 112%) scales the same on both axes regardless. */
.mini--watch .mini__ph{
  background:#e9e0d2 url('assets/bg/watches.webp') center 40%/112% 112% no-repeat;
  border-radius:8px;
}
.mini--watch .mini__ph img{
  padding:8%;
  box-sizing:border-box;
  object-position:center 70%;
}

/* perfumes, homepage collection rail: same idea, second stone-scene
   backdrop (oud chips instead of a watch) — see the longer note above
   .perfumes-page's rule in shop.css. No push-down needed; a plain
   cover-fit backdrop already lines up with these bottle+box photos. */
.mini--perfume .mini__ph{
  background:#efe6d6 url('assets/bg/perfumes.webp') center/cover no-repeat;
  border-radius:8px;
}
.mini--perfume .mini__ph img{
  padding:8%;
  box-sizing:border-box;
}

/* one quiet cue that the row scrolls — a small gold ring with a chevron
   that nudges itself, sitting just past the right edge of the rail */
.col__hint{
  position:absolute;
  right:-6px;
  top:50%;
  transform:translateY(-50%);
  width:30px; height:30px;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--gold-deep);
  background:rgba(255,253,249,.9);
  border:1px solid rgba(185,139,82,.4);
  box-shadow:0 8px 18px -10px rgba(94,68,40,.4);
  animation:hintNudge 2.2s ease-in-out infinite;
}
.col__hint svg{ width:13px; height:13px; }
.col__hint,
.col__hint:hover{ cursor:pointer; }
.col__hint.is-done{
  opacity:.35;
  animation:none;
  transform:translateY(-50%) rotate(180deg);
}
@keyframes hintNudge{
  0%,100%{ transform:translateY(-50%) translateX(0); }
  50%{ transform:translateY(-50%) translateX(4px); }
}


/* ════════════════════════════════════════════════
   7.5 · REVIEWS
   ════════════════════════════════════════════════ */

.reviews{
  position:relative;
  padding:96px 0 84px;
  overflow:hidden;
  background:#efe6d9;
}
.reviews__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
.reviews__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(240,232,220,.34) 0%,
    rgba(240,232,220,.14) 30%,
    rgba(240,232,220,.5) 100%);
}
.reviews .wrap{ position:relative; z-index:2; }

/* ---- the W mark, centred above the eyebrow ---- */
.reviews__mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:34px;
}
.reviews__markW{
  font-family:var(--f-display);
  font-size:56px; font-weight:700; line-height:.8;
  background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 62%,var(--gold-deep) 66%,var(--gold-light) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.reviews__markName{
  margin:2px 0 0;
  font-family:var(--f-display);
  font-size:19px; font-weight:600; letter-spacing:.32em;
  color:var(--ink);
}
.reviews__markSub{
  margin:2px 0 0;
  font-size:8.5px; letter-spacing:.4em; font-weight:400;
  color:var(--ink-soft);
}
.reviews__markStar{
  margin-top:6px;
  font-size:10px;
  color:var(--gold);
}

.reviews .shead{ margin-bottom:44px; }

/* ---- review rail ---- */
.revrail{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
}
.revrail__track{
  flex:1;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 48px) / 3);   /* 3 across on desktop */
  gap:24px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
  padding:4px 2px 10px;
}
.revrail__track::-webkit-scrollbar{ display:none; }

.revcard{
  scroll-snap-align:start;
  padding:38px 32px 32px;
  background:rgba(255,253,249,.62);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:6px;
  box-shadow:0 24px 46px -28px rgba(94,68,40,.35);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease);
}
.revcard:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 56px -28px rgba(94,68,40,.45);
}
.revcard__stars{
  margin-bottom:22px;
  font-size:15px;
  letter-spacing:.16em;
  color:var(--gold);
}
.revcard__quote{
  margin:0 0 26px;
  min-height:96px;
  font-family:var(--f-display);
  font-size:16px; font-weight:400; line-height:1.55;
  color:var(--ink);
}
.revcard__rule{
  display:block;
  width:38px; height:1px;
  margin-bottom:20px;
  background:rgba(143,102,51,.4);
}
.revcard__who{ display:flex; align-items:center; gap:13px; }
.revcard__avatar{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:42px; height:42px;
  border-radius:50%;
  font-family:var(--f-display);
  font-size:16px; font-weight:600;
  color:var(--gold-deep);
  background:linear-gradient(160deg,rgba(185,139,82,.22),rgba(185,139,82,.1));
}
.revcard__name{
  display:block;
  font-size:11.5px; letter-spacing:.14em; font-weight:500;
  color:var(--ink);
}
.revcard__name i{
  display:block;
  margin-top:3px;
  font-style:normal;
  font-size:9.5px; letter-spacing:.12em; font-weight:300;
  color:var(--ink-soft);
}

.revrail__nav{
  flex:0 0 auto;
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--ink-soft);
  background:rgba(255,255,255,.86);
  border:1px solid rgba(58,50,42,.16);
  box-shadow:0 10px 22px -14px rgba(94,68,40,.4);
  transition:color .2s var(--ease), background .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.revrail__nav svg{ width:19px; height:19px; }
.revrail__nav:hover{ color:#fff; background:var(--ink); border-color:var(--ink); transform:scale(1.08); }
.revrail__nav:active{ transform:scale(.95); }

/* ---- dot pagination ---- */
.revdots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:30px;
}
.revdots i{
  display:block;
  width:8px; height:8px;
  border-radius:50%;
  background:transparent;
  border:1px solid rgba(58,50,42,.32);
  cursor:pointer;
  transition:background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.revdots i:hover{ transform:scale(1.2); }
.revdots i.is-on{
  background:var(--gold-deep);
  border-color:var(--gold-deep);
}

.reviews__foot{
  display:flex; align-items:center; justify-content:center; gap:20px;
  margin:52px 0 0;
  color:var(--gold); font-size:13px;
}
.reviews__foot .shead__rule{ width:150px; }
.reviews__tag{
  margin:14px 0 0;
  text-align:center;
  font-size:11px; letter-spacing:.42em; font-weight:300;
  color:var(--ink-soft);
}


/* ════════════════════════════════════════════════
   8 · STORY / VIDEO
   ════════════════════════════════════════════════ */

.story{
  position:relative;
  padding:88px 0 72px;
  overflow:hidden;
  /* a clean solid surface — the photo now lives only behind the (small)
     video card, so every line of copy sits on flat, readable ground */
  background:#f0e8dd;
}
.story__bg,
.story__veil{ display:none; }
.story .wrap{ position:relative; z-index:2; }

.story__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:42px;
}
.story__tabs{
  display:flex; align-items:center; gap:14px;
  font-size:10.5px; letter-spacing:.26em;
  color:var(--ink-soft);
}
.story__tabs a{ transition:color .22s var(--ease); }
.story__tabs a:hover{ color:var(--gold-deep); }
.story__tabs span{ color:rgba(58,50,42,.34); }
.story__note{
  margin:0;
  justify-self:end;
  text-align:right;
  font-size:10px; letter-spacing:.3em; line-height:2.1;
  color:var(--ink-soft);
}

.story__main{
  display:grid;
  /* the video card is deliberately small now — most of the row is copy */
  grid-template-columns:1.3fr .7fr;
  align-items:center;
  gap:54px;
  margin-bottom:62px;
}
.story__eyebrow{
  margin:0 0 16px;
  font-size:10.5px; letter-spacing:.34em;
  color:var(--ink-soft);
}
.story__title{
  margin:0 0 20px;
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(2.2rem,4.4vw,3.8rem);
  line-height:1;
  color:var(--ink);
}
.story__title em{
  font-style:normal;
  background:linear-gradient(96deg,var(--gold-deep),var(--gold-light) 42%,var(--gold) 72%,var(--gold-deep));
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:goldFlow 9s ease-in-out infinite;
}
.story__rule{
  display:block;
  width:64px; height:1px;
  margin-bottom:20px;
  background:rgba(143,102,51,.5);
}
.story__text{
  margin:0 0 30px;
  max-width:40ch;
  font-size:11px; letter-spacing:.16em; line-height:2.1; font-weight:300;
  color:var(--ink-soft);
}

/* ---- player: small, framed card — not a full-width hero ----
   the poster is also painted as a CSS background, so the card is never
   an empty black box while the <video> itself is still loading */
.story__player{
  position:relative;
  width:100%;
  max-width:300px;
  margin-left:auto;
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:4 / 5;
  background:#1a140e url('assets/bg/video.webp') center/cover no-repeat;
  box-shadow:0 24px 48px -26px rgba(60,42,26,.55);
}
.story__player video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* the video runs on its own, so the only control is sound */
.story__sound{
  position:absolute;
  right:18px; bottom:18px;
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:50%;
  color:#fff;
  background:rgba(28,20,14,.46);
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .24s var(--ease-out), background .22s var(--ease),
             border-color .22s var(--ease);
}
.story__sound svg{ width:20px; height:20px; }
.story__sound .story__soundOn{ display:none; }
.story__player.is-loud .story__sound .story__soundOn{ display:block; }
.story__player.is-loud .story__sound .story__soundOff{ display:none; }
.story__sound:hover{
  transform:scale(1.08);
  background:rgba(185,139,82,.8);
  border-color:var(--gold-light);
}

.story__badge{
  position:absolute;
  right:22px; top:24px;
  font-size:9.5px; letter-spacing:.26em; line-height:2;
  text-align:right;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}

/* ---- feature row ---- */
.story__feats{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:10px;
}
.feat{
  flex:1 1 0;
  min-width:0;
  display:grid;
  justify-items:center;
  gap:6px;
  text-align:center;
  padding:4px 6px;
  transition:transform .28s var(--ease-out);
}
.feat:hover{ transform:translateY(-4px); }
.feat__ico{
  display:grid; place-items:center;
  width:26px; height:26px;
  color:var(--gold-deep);
  font-size:13px;
  transition:color .25s var(--ease), transform .3s var(--ease-out);
}
.feat__ico svg{ width:18px; height:18px; }
.feat:hover .feat__ico{ color:var(--gold); transform:scale(1.12); }
.feat b{
  font-size:8.5px; letter-spacing:.14em; font-weight:400;
  line-height:1.55;
  color:var(--ink);
}
.feat__rule{
  display:block;
  width:18px; height:1px;
  background:rgba(143,102,51,.5);
}
.feat i{
  font-style:normal;
  font-size:7.5px; letter-spacing:.1em; line-height:1.7; font-weight:300;
  color:var(--ink-soft);
}
.feat__sep{
  flex:0 0 1px;
  background:linear-gradient(180deg,transparent,rgba(143,102,51,.3),transparent);
}

.story__foot{
  display:flex; align-items:center; justify-content:center; gap:20px;
  margin:56px 0 0;
  color:var(--gold); font-size:13px;
}
.story__foot .shead__rule{ width:180px; }
.story__tag{
  margin:14px 0 0;
  text-align:center;
  font-size:11px; letter-spacing:.42em; font-weight:300;
  color:var(--ink-soft);
}


/* ════════════════════════════════════════════════
   9 · FOOTER
   ════════════════════════════════════════════════ */

.foot{
  position:relative;
  padding:86px 0 0;
  overflow:hidden;
  background:#f2eae0;
  color:var(--ink);
}
.foot__bg{ display:block; position:absolute; inset:0; }
.foot__bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center bottom;
}
.foot__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(244,238,230,.90) 0%,
    rgba(244,238,230,.84) 50%,
    rgba(244,238,230,.93) 100%);
}
.foot .wrap{ position:relative; z-index:2; }

.foot__inner{
  display:grid;
  grid-template-columns:1.3fr .8fr 1fr 1.4fr;
  gap:38px;
  padding-bottom:52px;
}
.foot__logo{ height:120px; width:auto; margin-bottom:14px; }
.foot__tag{
  margin:0 0 14px;
  font-size:10.5px; letter-spacing:.34em;
  color:var(--gold-deep);
}
.foot__text{
  margin:0 0 20px;
  font-size:12.5px; line-height:1.8; font-weight:300;
  color:var(--ink-soft);
}
.foot__social{ display:flex; gap:11px; }
.foot__social a{
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:50%;
  color:#fff;
  transition:transform .22s var(--ease), filter .2s var(--ease);
}
.foot__social svg{ width:18px; height:18px; }
.foot__social a:hover{ transform:translateY(-3px); filter:brightness(1.06); }

/* each network shown in its real brand colour, so the marks read as genuine */
.foot__social a.is-wa{ background:#25D366; }
.foot__social a.is-fb{ background:#1877F2; }
.foot__social a.is-ig{
  background:radial-gradient(circle at 28% 108%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.foot__col{ display:flex; flex-direction:column; }
.foot__col h4,
.foot__news h4{
  margin:0 0 18px;
  font-size:10.5px; letter-spacing:.28em; font-weight:500;
  color:var(--ink);
}
.foot__col a{
  padding:7px 0;
  font-size:13px; font-weight:300;
  color:var(--ink-soft);
  transition:color .2s var(--ease), padding-left .24s var(--ease);
}
.foot__col a:hover{ color:var(--gold-deep); padding-left:6px; }

.foot__news p{
  margin:0 0 18px;
  font-size:12.5px; line-height:1.8; font-weight:300;
  color:var(--ink-soft);
}
.news{ display:flex; margin-bottom:24px; }
.news input{
  flex:1; min-width:0;
  padding:15px 17px;
  font:inherit;
  font-size:13px; font-weight:300;
  color:var(--ink);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(58,50,42,.2);
  border-right:0;
  outline:none;
  transition:border-color .22s var(--ease), background .22s var(--ease);
}
.news input::placeholder{ color:rgba(58,50,42,.5); }
.news input:focus{ border-color:var(--gold); background:#fff; }
.news button{
  flex:0 0 auto;
  width:60px;
  display:grid; place-items:center;
  color:#fff;
  background:var(--ink);
  border:1px solid var(--ink);
  transition:background .24s var(--ease), border-color .24s var(--ease);
}
.news button svg{ width:26px; height:11px; transition:transform .26s var(--ease-out); }
.news button:hover{ background:var(--gold-deep); border-color:var(--gold-deep); }
.news button:hover svg{ transform:translateX(4px); }

.foot__perks{ display:flex; gap:22px; }
.foot__perks span{
  flex:1 1 0;
  display:grid;
  gap:5px;
  font-size:11px;
  color:var(--ink-soft);
}
.foot__perks svg{ width:22px; height:22px; color:var(--ink); }
.foot__perks b{ font-size:11.5px; font-weight:400; color:var(--ink); }
.foot__perks i{ font-style:normal; font-size:10px; font-weight:300; }

.foot__brandsTitle{
  display:flex; align-items:center; justify-content:center; gap:20px;
  margin:0 0 26px;
  font-size:10.5px; letter-spacing:.34em;
  color:var(--ink-soft);
}
.foot__brandsTitle .shead__rule{ width:min(360px,26vw); }

.foot__brands{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-bottom:40px;
}
.foot__brands a{
  flex:1 1 0;
  display:grid;
  place-items:center;
  min-width:0;
}
.foot__brands img{
  max-width:84px;
  max-height:36px;
  width:auto; height:auto;
  object-fit:contain;
  opacity:.82;
  transition:opacity .22s var(--ease), transform .26s var(--ease-out),
             filter .26s var(--ease);
}
.foot__brands a:hover img{
  opacity:1;
  transform:scale(1.1);
  filter:drop-shadow(0 8px 14px rgba(94,68,40,.26));
}
.foot__brands i{
  flex:0 0 1px;
  height:22px;
  background:rgba(143,102,51,.28);
}

.foot__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:22px;
  padding-bottom:26px;
  border-top:1px solid rgba(58,50,42,.14);
}
.foot__bottom p{
  margin:0;
  font-size:11.5px; font-weight:300;
  color:var(--ink-soft);
}
.foot__legal{
  display:flex; align-items:center; gap:12px;
  font-size:11.5px; font-weight:300;
  color:var(--ink-soft);
}
.foot__legal a{ transition:color .2s var(--ease); }
.foot__legal a:hover{ color:var(--gold-deep); }
.foot__legal span{ color:rgba(58,50,42,.3); }
.foot__pay{ display:flex; align-items:center; gap:8px; }
.foot__pay .pay{
  display:grid; place-items:center;
  width:44px; height:28px;
  padding:4px 6px;
  background:#fff;
  border:1px solid rgba(58,50,42,.14);
  border-radius:4px;
  box-shadow:0 2px 6px -3px rgba(60,42,26,.3);
  transition:transform .22s var(--ease-out), box-shadow .22s var(--ease);
}
.foot__pay .pay svg{ width:100%; height:auto; max-height:18px; }
.foot__pay .pay:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 16px -8px rgba(60,42,26,.45);
}

/* ---- "powered by" credit strip ----
   The line sits inside its own glass capsule so it reads as a deliberate
   signature plaque rather than a plain footer caption; "Powered by" is
   solid white for legibility against the dark footer, "Kreem Aly" keeps
   the gold-gradient treatment as the accent. */
.madeby{
  position:relative;
  z-index:2;
  padding:22px 0;
  text-align:center;
  background:#14100c;
}
.madeby p{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 22px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px -14px rgba(0,0,0,.6);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-family:'Cormorant Garamond', serif;
  font-size:12.5px;
  letter-spacing:.2em;
  font-weight:400;
  font-style:normal;
  text-transform:uppercase;
}
.madeby__label{
  color:#fff;
}
.madeby__star{
  color:var(--gold);
  font-size:9px;
  font-style:normal;
}
.madeby a.madeby__name{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:'Cormorant Garamond', serif;
  font-style:normal;
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.2em;
  background:linear-gradient(120deg, var(--gold-light), #fff5e0 45%, var(--gold-light));
  -webkit-background-clip:text;
  background-clip:text;
  color:var(--gold-light);
  -webkit-text-fill-color:var(--gold-light);
  transition:letter-spacing .25s var(--ease), -webkit-text-fill-color .25s var(--ease);
}
.madeby a.madeby__name:hover{
  letter-spacing:.28em;
  -webkit-text-fill-color:#fff5e0;
}


/* ════════════════════════════════════════════════
   RESPONSIVE — sections
   ════════════════════════════════════════════════ */

@media (max-width:1180px){
  .wrap{ padding:0 34px; }
  .rail, .rail__bar, .rail__count{ padding-left:34px; padding-right:34px; }
  .brands__note{ right:34px; }

  .grid--products{ grid-template-columns:repeat(3,1fr); gap:26px 16px; }
  .mini{ flex:0 0 calc((100% - 60px) / 4); }
  .brandchip{ flex:0 0 25%; }
  .brandchip img{ max-width:110px; max-height:50px; }

  .story__main{ grid-template-columns:1fr; gap:34px; }
  .story__text{ max-width:52ch; }

  .foot__inner{ grid-template-columns:1.2fr .9fr 1fr; gap:34px; }
  .foot__news{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .wrap{ padding:0 20px; }
  .rail, .rail__bar, .rail__count{ padding-left:20px; padding-right:20px; }

  /* ---- best sellers: 2 across, bigger cards ---- */
  .best{ padding:74px 0 80px; }
  .shead{ margin-bottom:36px; }
  .grid--products{ grid-template-columns:repeat(2,1fr); gap:26px 14px; }
  .card{ padding:10px 6px 14px; }
  .card__media{ flex:0 0 170px; height:170px; margin-bottom:10px; }
  /* best sellers only: a bit bigger than the shared card default above */
  .best .card__media{ flex:0 0 200px; height:200px; }
  .card__name{ font-size:15px; line-height:1.25; }
  .card__type{ font-size:10px; margin-bottom:8px; }
  .card__brand{ font-size:8px; letter-spacing:.14em; margin-bottom:5px; }
  .sizes{ gap:5px; margin-bottom:10px; }
  .size{ padding:4px 9px; font-size:8.5px; border-radius:999px; }
  .card__price{ font-size:12px; letter-spacing:.02em; margin-bottom:10px; }
  .card__buy{ flex-direction:column; gap:6px; }
  .add{ width:100%; padding:9px 6px; }
  .add__label{ font-size:8px; letter-spacing:.06em; gap:4px; }
  .add__label svg{ width:10px; height:10px; }
  .wish{ width:100%; height:30px; }
  .wish svg{ width:14px; height:14px; }

  /* ---- categories: 2 across, watches full width ---- */
  .cats{ padding:70px 0 66px; }
  .cats__grid{ grid-template-columns:1fr 1fr; gap:12px; max-width:none; }
  .tile{ grid-column:auto; aspect-ratio:1 / 1.32; }
  .tile--wide{ grid-column:1 / -1; aspect-ratio:1.6 / 1; }
  .tile__body{ left:18px; right:18px; bottom:18px; }
  .tile__name{ font-size:1.32rem; margin-bottom:6px; }
  .tile__desc{ font-size:9px; letter-spacing:.18em; }
  .tile__row{ gap:12px; margin-top:13px; }
  .tile__go{ width:38px; height:38px; }
  .tile__go svg{ width:16px; height:16px; }
  .tile__cta{ padding:11px 22px; font-size:9.5px; letter-spacing:.24em; }
  .cats__foot .shead__rule{ width:70px; }

  /* ---- trust: 2x2 ---- */
  .trust{ padding:26px 0; }
  .trust__inner{ flex-wrap:wrap; gap:20px 10px; }
  .trust__item{ flex:1 1 44%; justify-content:flex-start; gap:11px; }
  .trust__sep{ display:none; }
  .trust__ico{ width:38px; height:38px; }
  .trust__ico svg{ width:20px; height:20px; }
  .trust__txt b{ font-size:9.5px; letter-spacing:.16em; white-space:normal; }
  .trust__txt i{ font-size:9px; white-space:normal; }

  /* ---- brands ---- */
  .brands{ padding-bottom:40px; }
  .brands__inner{
    min-height:0;
    padding-top:70px;
    padding-bottom:44px;
    align-items:flex-start;
  }
  /* the portrait art shows in full and the copy sits above it; the
     section is as tall as the art at this width, so the logo band meets
     its bottom edge with no gap (938x1677 -> height = width * 1.788) */
  .brands__inner{ min-height:178.8vw; }
  .brands__bg img{ object-position:center top; }
  .brands__veil{
    background:linear-gradient(180deg,
      rgba(243,238,230,.6) 0%,
      rgba(243,238,230,.4) 26%,
      rgba(243,238,230,.12) 46%,
      rgba(243,238,230,0) 62%);
  }
  .brands__title{ font-size:clamp(2rem,9vw,3rem); }
  .brands__text{ font-size:13.5px; }
  .brands__note{ display:none; }
  /* four logos visible, the rest by scroll — same as desktop */
  .brandchip{ flex:0 0 25%; padding:14px 6px; }
  .brandchip img{ max-width:64px; max-height:36px; }
  .rail__nav{ width:40px; height:40px; }
  .rail__nav svg{ width:16px; height:16px; }

  /* ---- sale ---- */
  /* the banner keeps its 3-up shape on phones; stacking it would make the
     content taller than the fixed-ratio card and get clipped */
  .sale__row{ gap:1.6vw; padding:0 2.6vw; }
  .sale__left{ letter-spacing:.14em; line-height:1.7; }
  .sale__mid i{ letter-spacing:.16em; }
  .sale__right .btn--sm .btn__label{ letter-spacing:.12em; }

  /* ---- collections: aside on top, 5 visible ---- */
  .col__inner{
    grid-template-columns:1fr;
    gap:18px;
    padding:32px 20px;
  }
  .col__aside{ padding-right:0; }
  .col__title{ font-size:1.9rem; }
  .col__sub{ font-size:11.5px; margin-bottom:16px; }
  /* the copy runs on one line; the HTML carries a space before each <br>
     so the words never jam together when the break is hidden */
  .col__sub br{ display:none; }
  .mini{ flex:0 0 calc((100% - 40px) / 2.3); }
  /* one variable drives the box height and the photo height together */
  .mini{ --ph-h:124px; }
  .mini__ph{ margin-bottom:12px; }
  .mini b{ font-size:7.5px; letter-spacing:.16em; }
  .mini em{ font-size:10.5px; }
  .mini i{ font-size:10.5px; }
  /* smaller still on phones, same single hint */
  .col__hint{ width:24px; height:24px; right:-4px; }
  .col__hint svg{ width:11px; height:11px; }

  /* ---- reviews ---- */
  .reviews{ padding:64px 0 56px; }
  .reviews__mark{ margin-bottom:24px; }
  .reviews__markW{ font-size:42px; }
  .reviews__markName{ font-size:15px; letter-spacing:.26em; }
  .reviews__markSub{ font-size:7.5px; letter-spacing:.32em; }
  .reviews .shead{ margin-bottom:30px; }

  .revrail{ gap:8px; }
  .revrail__track{
    grid-auto-columns:82%;   /* one card at a time, next peeking at the edge */
    gap:14px;
  }
  .revcard{ padding:28px 22px 24px; }
  .revcard__stars{ font-size:13px; margin-bottom:16px; }
  .revcard__quote{ font-size:14px; min-height:0; margin-bottom:18px; }
  .revcard__avatar{ width:36px; height:36px; font-size:14px; }
  .revcard__name{ font-size:10.5px; }
  .revcard__name i{ font-size:9px; }
  .revrail__nav{ width:36px; height:36px; }
  .revrail__nav svg{ width:15px; height:15px; }
  .revdots{ margin-top:22px; }
  .reviews__foot{ margin-top:38px; }
  .reviews__foot .shead__rule{ width:70px; }

  /* ---- story ---- */
  .story{ padding:66px 0 60px; }
  .story__top{
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-bottom:30px;
  }
  .story__tabs{ font-size:9.5px; letter-spacing:.18em; gap:9px; }
  .story__note{ text-align:center; font-size:9px; line-height:1.9; }
  .story__note br{ display:none; }
  .story__main{ margin-bottom:34px; }
  .story__title{ font-size:clamp(1.9rem,8.6vw,2.7rem); }
  .story__text{ font-size:10px; letter-spacing:.12em; line-height:1.95; }
  /* full-width and clearly visible on phones */
  .story__player{
    width:100%;
    max-width:none;
    margin:0 auto;
    aspect-ratio:16 / 10;
  }
  .story__badge{ right:12px; top:12px; font-size:7px; letter-spacing:.16em; }

  /* all four stay in one row across the width */
  .story__feats{ flex-wrap:nowrap; gap:4px; }
  .feat{ flex:1 1 0; padding:2px 1px; gap:4px; }
  .feat__sep{ display:none; }
  .feat__ico{ width:20px; height:20px; font-size:11px; }
  .feat__ico svg{ width:15px; height:15px; }
  .feat b{ font-size:6.5px; letter-spacing:.04em; line-height:1.4; }
  .feat__rule{ width:12px; }
  .feat i{ font-size:5.5px; letter-spacing:.02em; line-height:1.5; }
  .story__foot{ margin-top:36px; }
  .story__foot .shead__rule{ width:70px; }

  /* ---- footer ---- */
  .foot{ padding-top:60px; }
  .foot__veil{
    background:linear-gradient(180deg,
      rgba(244,238,230,.93) 0%,
      rgba(244,238,230,.90) 50%,
      rgba(244,238,230,.95) 100%);
  }
  .foot__inner{
    grid-template-columns:1fr 1fr;
    gap:30px 22px;
    padding-bottom:36px;
  }
  .foot__brand{ grid-column:1 / -1; text-align:left; }
  .foot__logo{ height:104px; }
  .foot__social{ justify-content:flex-start; }
  .foot__news{ grid-column:1 / -1; }

  .foot__brandsTitle{ gap:12px; font-size:9.5px; }
  .foot__brandsTitle .shead__rule{ width:24vw; }
  .foot__brands{
    flex-wrap:wrap;
    justify-content:center;
    gap:14px 18px;
    padding-bottom:30px;
  }
  .foot__brands a{ flex:0 0 auto; }
  .foot__brands img{ max-width:56px; max-height:26px; }
  .foot__brands i{ display:none; }

  .foot__bottom{
    flex-direction:column;
    gap:14px;
    text-align:center;
    padding-bottom:22px;
  }
}

@media (max-width:420px){
  .grid--products{ gap:18px 10px; }
  .card__media{ flex:0 0 150px; height:150px; }
  .best .card__media{ flex:0 0 175px; height:175px; }
  .card__name{ font-size:14px; }
  .tile__name{ font-size:1.14rem; }
  .mini{ flex:0 0 calc((100% - 30px) / 2.2); }
  .sale__mid b{ font-size:2.4rem; }
  .foot__logo{ height:88px; }
}


/* ════════════════════════════════════════════════
   RESPONSIVE — drawer / cart / search
   ════════════════════════════════════════════════ */

@media (max-width:900px){
  /* ---- mobile drawer ---- */
  .drawer__panel{ width:min(360px,88vw); padding:20px 0 18px; }
  .drawer__head{ padding:0 20px 16px; }
  .drawer__logo{ width:100px; }
  .drawer__links{ padding:0 10px; }
  .drawer__links a{ padding:13px 10px; font-size:12px; gap:13px; }
  .drawer__linkIco{ width:20px; height:20px; }
  .drawer__linkIco svg{ width:17px; height:17px; }
  .drawer__quick{ margin:14px 20px 0; padding-top:14px; }
  .drawer__foot{ margin-top:18px; padding:18px 20px 4px; }

  /* ---- cart drawer ---- */
  .cartd__panel{ width:100vw; }
  .cartd__head{ padding:20px 18px 14px; }
  .cartd__head h2{ font-size:1.15rem; }
  .cartd__ship{ margin:0 18px 14px; padding:12px 14px; }
  .cartd__items{ padding:0 18px; gap:14px; }
  .cartd__item{ grid-template-columns:64px 1fr auto; gap:10px; padding-bottom:14px; }
  .cartd__itemImg{ width:64px; height:64px; }
  .cartd__foot{ padding:16px 18px 24px; }
  .cartd__trust{ flex-wrap:wrap; }
  .cartd__trust span{ flex:1 1 28%; }

  /* ---- search modal: near full-screen ---- */
  .searchm{ padding:0; align-items:stretch; }
  .searchm__panel{
    max-width:none;
    width:100%;
    max-height:none;
    height:100%;
    border-radius:0;
  }
  .searchm__head{ padding:22px 18px 0; }
  .searchm__title{ font-size:1.3rem; }
  .searchm__bar{ margin:16px 18px 0; padding:12px 14px; }
  .searchm__tabs{ margin:16px 18px 0; gap:16px; overflow-x:auto; scrollbar-width:none; }
  .searchm__tabs::-webkit-scrollbar{ display:none; }
  .searchm__tabs button{ flex:0 0 auto; white-space:nowrap; font-size:9.5px; }
  .searchm__body{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
  }
  .searchm__side{
    padding:18px 18px 0;
    border-right:0;
    border-bottom:1px solid rgba(58,50,42,.1);
    display:flex;
    gap:26px;
    overflow-x:auto;
    flex:0 0 auto;
  }
  .searchm__sideBlock{ margin-bottom:18px; flex:0 0 auto; min-width:150px; }
  .searchm__results{ padding:18px; }
  .searchm__row{ grid-template-columns:80px 1fr auto; row-gap:8px; padding:16px 8px; }
  .searchm__rowImg{ width:80px; height:80px; }
  .searchm__rowInfo b{ font-size:16px; }
  .searchm__rowInfo i{ font-size:13px; }
  .searchm__rowWish{ grid-row:1; grid-column:3; }
  .searchm__rowPrice{ grid-column:2 / 3; font-size:16px; }
  .searchm__rowAdd{ grid-column:2 / 3; justify-self:start; }
  .searchm__foot{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:18px;
    border-radius:0;
  }
  .searchm__foot .ghost{ align-self:center; }
}


/* reduced motion: no reveal offsets */
@media (prefers-reduced-motion:reduce){
  .reveal,
  .reveal [style*="--d"],
  .reveal .stagger{ opacity:1 !important; transform:none !important; }
}