/* ==========================================================================
   AAVERO LUXE — Design system
   Ivory & gold. Light serif display, quiet geometric sans.
   Every colour and type value below is a token; nothing is hard-coded downstream.
   ========================================================================== */

:root{
  /* --- Surface: ivory, warmed --- */
  --ivory:      #FBF8F2;   /* page canvas */
  --bone:       #F4EDE1;   /* recessed surface, alternating bands */
  --linen:      #E9DECB;   /* card edges, quiet fills */
  --shell:      #FFFDF9;   /* raised card surface */

  /* --- Gold: the only accent that ever raises its voice --- */
  --gold:       #C08A2E;
  --gold-lt:    #E6C97E;
  --gold-pale:  #F0E0BC;
  --gold-deep:  #8F6518;

  /* --- Ink: warm near-black, never pure --- */
  --ink:        #2A2723;
  --ink-2:      #6B645A;
  --ink-3:      #9C9488;

  /* --- Blush: lifted from the daisy wax in the product shots.
         Used in homeopathic doses only — wishlist heart, sale flag. --- */
  --blush:      #D4A29A;

  --flame:      #F2B23E;

  /* --- Type --- */
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --body:    "Jost", "Helvetica Neue", system-ui, -apple-system, sans-serif;

  --fs-hero:   clamp(2.75rem, 7.2vw, 6.5rem);
  --fs-d1:     clamp(2.1rem, 4.6vw, 3.9rem);
  --fs-d2:     clamp(1.7rem, 3.2vw, 2.7rem);
  --fs-d3:     clamp(1.35rem, 2.2vw, 1.85rem);
  --fs-body:   clamp(0.975rem, 1.05vw, 1.0625rem);
  --fs-sm:     0.875rem;
  --fs-eyebrow:0.6875rem;

  /* --- Rhythm --- */
  --gutter:   clamp(1.25rem, 4vw, 3.5rem);
  --section:  clamp(4.5rem, 10vw, 9rem);
  --maxw:     1480px;
  --readw:    62ch;

  --radius:   2px;      /* almost none — the softness comes from the photography */
  --radius-lg:4px;

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur:      .6s;

  --hair:     1px solid rgba(192,138,46,.22);
  --hair-soft:1px solid rgba(42,39,35,.09);

  --shadow-lift: 0 24px 60px -28px rgba(42,39,35,.28);
  --shadow-card: 0 2px 24px -14px rgba(42,39,35,.22);

  --header-h: 92px;
}

/* ==========================================================================
   1. Reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--fs-body);
  font-weight:300;
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,video{max-width:100%;display:block;height:auto}
:where(svg[class=""]){width:20px;height:20px;flex:0 0 auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--gold-pale);color:var(--ink)}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:var(--radius);
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--ink);color:var(--ivory);padding:.85rem 1.4rem;
}
.skip-link:focus{left:1rem;top:1rem}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   2. Type
   ========================================================================== */
.display,h1,h2,h3{
  font-family:var(--display);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.012em;
  color:var(--ink);
}
h1{font-size:var(--fs-d1)}
h2{font-size:var(--fs-d2)}
h3{font-size:var(--fs-d3);line-height:1.2}
.display em,h1 em,h2 em{font-style:italic;color:var(--gold-deep)}

.eyebrow{
  font-family:var(--body);
  font-size:var(--fs-eyebrow);
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-flex;align-items:center;gap:.75rem;
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:var(--gold);opacity:.7;
}
.eyebrow--center::after{
  content:"";width:26px;height:1px;background:var(--gold);opacity:.7;
}
.lede{
  font-size:clamp(1rem,1.35vw,1.15rem);
  color:var(--ink-2);
  max-width:var(--readw);
  line-height:1.75;
}
.meta{
  font-size:var(--fs-eyebrow);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.price{font-family:var(--display);font-size:1.3rem;letter-spacing:.01em;color:var(--ink)}
.price del{color:var(--ink-3);font-size:.8em;margin-right:.5rem}
.price ins{text-decoration:none;color:var(--gold-deep)}

/* ==========================================================================
   3. Layout
   ========================================================================== */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:1080px}
.section{padding-block:var(--section);position:relative}
.section--bone{background:var(--bone)}
.section--tight{padding-block:calc(var(--section) * .6)}
.rule{height:1px;background:linear-gradient(90deg,transparent,rgba(192,138,46,.35),transparent);border:0;margin:0}

.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.5rem);
}
.sec-head__text{max-width:44ch}
.sec-head h2{margin-top:.9rem}
.sec-head--center{flex-direction:column;align-items:center;text-align:center}
.sec-head--center .sec-head__text{max-width:52ch}

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.btn{
  --btn-bg:var(--ink); --btn-fg:var(--ivory); --btn-bd:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.7rem;padding:1.05rem 2.2rem;
  font-size:.75rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--btn-fg);background:var(--btn-bg);
  border:1px solid var(--btn-bd);border-radius:var(--radius);
  overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
  will-change:transform;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,var(--gold-deep),var(--gold) 45%,var(--gold-lt));
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:#fff;border-color:var(--gold)}
.btn:active{transform:scale(.985)}

.btn--gold{--btn-bg:var(--gold);--btn-bd:var(--gold);--btn-fg:#fff}
.btn--gold::after{background:var(--ink)}
.btn--gold:hover{border-color:var(--ink)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:rgba(42,39,35,.28)}
.btn--ghost:hover{color:#fff}

.btn svg{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;stroke-width:1.3;fill:none}
.btn--block{width:100%}
.btn--sm{padding:.8rem 1.5rem;font-size:.7rem}

/* Text link with a gold rule that draws in */
.link-u{
  position:relative;display:inline-block;
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:.35rem;color:var(--ink);
}
.link-u::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.link-u:hover::after,.link-u:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* ==========================================================================
   5. Curtain (page load) + Flame spine (scroll progress) — SIGNATURE
   ========================================================================== */
.curtain{
  position:fixed;inset:0;z-index:9998;background:var(--ivory);
  display:grid;place-items:center;
  transition:opacity .8s var(--ease-out),visibility .8s;
}
.curtain__mark{width:132px;opacity:0;animation:markIn 1.5s var(--ease-out) forwards}
.curtain__flame{
  width:2px;height:0;margin:1.4rem auto 0;
  background:linear-gradient(180deg,transparent,var(--gold));
  animation:wickDraw 1.2s .35s var(--ease-out) forwards;
}
@keyframes markIn{0%{opacity:0;transform:scale(.94)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes wickDraw{to{height:52px}}
body.loaded .curtain{opacity:0;visibility:hidden;pointer-events:none}

/* The spine: a hairline down the left margin with a light node that follows scroll.
   This is the element the site is meant to be remembered by. */
.spine{
  position:fixed;left:calc(var(--gutter) * .42);top:0;bottom:0;width:1px;
  background:rgba(192,138,46,.16);z-index:40;pointer-events:none;
}
.spine__fill{
  position:absolute;top:0;left:0;width:100%;height:0;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  transform-origin:top;
}
.spine__node{
  position:absolute;left:50%;top:0;width:9px;height:9px;margin-left:-4px;margin-top:-4px;
  border-radius:50%;
  background:radial-gradient(circle,var(--flame) 0%,var(--gold) 45%,transparent 72%);
  box-shadow:0 0 14px 3px rgba(242,178,62,.45);
  animation:flicker 2.6s infinite ease-in-out;
}
@keyframes flicker{
  0%,100%{opacity:1;transform:scale(1)}
  35%{opacity:.72;transform:scale(.88)}
  62%{opacity:1;transform:scale(1.08)}
}
@media (max-width:900px){.spine{display:none}}

/* ==========================================================================
   6. Header
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease);
}
.site-header::before{
  content:"";position:absolute;inset:0;
  background:rgba(251,248,242,.86);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  opacity:0;transition:opacity .5s var(--ease);
}
.site-header.is-stuck::before{opacity:1}
.site-header.is-stuck{box-shadow:0 1px 0 rgba(192,138,46,.18)}
.site-header.is-hidden{transform:translateY(-100%)}

.header-bar{
  position:relative;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(1.25rem,3.5vw,3.25rem);
  height:var(--header-h);
  transition:height .5s var(--ease);
}
.site-header.is-stuck .header-bar{height:66px}

.brand{display:flex;align-items:center;justify-content:flex-start;gap:.7rem;justify-self:start}
.brand img{height:66px;width:auto;transition:height .5s var(--ease)}
.site-header.is-stuck .brand img{height:48px}
.brand__text{
  font-family:var(--display);font-size:1.5rem;letter-spacing:.04em;line-height:1;
}
.brand__sub{
  display:block;font-family:var(--body);font-size:.5rem;letter-spacing:.44em;
  text-transform:uppercase;color:var(--gold-deep);margin-top:.28rem;
}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem)}
.nav--main{justify-content:flex-start;flex-wrap:nowrap}
.nav a{
  position:relative;font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink);padding:.4rem 0;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out);
}
.nav a:hover::after,.nav .current-menu-item > a::after{transform:scaleX(1);transform-origin:left}

.tools{display:flex;align-items:center;gap:clamp(.6rem,1.4vw,1.15rem);justify-self:end}
.tool{
  position:relative;display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;transition:background .35s var(--ease);
}
.tool:hover{background:rgba(192,138,46,.1)}
.tool svg{width:19px;height:19px;stroke:var(--ink);stroke-width:1.15;fill:none}
.tool__count{
  position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;border-radius:9px;
  background:var(--gold);color:#fff;font-size:.58rem;letter-spacing:.02em;
  transform:scale(0);transition:transform .4s var(--ease-out);
}
.tool__count.is-on{transform:scale(1)}
.tool__count--wish{background:var(--blush)}
.tool--burst::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--gold);opacity:0;
}
.tool.is-bursting::before{animation:burst .6s var(--ease-out)}
@keyframes burst{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}

.burger{display:none;width:40px;height:40px;place-items:center}
.burger span{display:block;width:20px;height:1px;background:var(--ink);transition:.4s var(--ease)}
.burger span+span{margin-top:5px}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Announcement rail */
.announce{
  background:var(--ink);color:var(--gold-pale);overflow:hidden;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
}
.announce__track{display:flex;gap:4rem;padding:.65rem 0 .65rem 4rem;white-space:nowrap;animation:slide 46s linear infinite}
.announce:hover .announce__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.announce__track span{display:inline-flex;align-items:center;gap:1rem}
.announce__track span::after{content:"◆";color:var(--gold);font-size:.5rem}

/* Mega menu — Gestalt: common region + proximity.
   Collections are grouped into visually enclosed panels so the eye parses them as sets. */
.has-mega{position:relative}
.mega{
  position:fixed;left:0;right:0;top:var(--header-h);
  background:var(--shell);border-top:var(--hair);border-bottom:var(--hair);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
  box-shadow:var(--shadow-lift);
}
.has-mega:hover .mega,.mega:hover,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;
  padding-block:2.8rem;
}
.mega__col h4{
  font-family:var(--body);font-size:var(--fs-eyebrow);letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:1.1rem;
  padding-bottom:.7rem;border-bottom:var(--hair);
}
.mega__col li a{
  display:block;font-family:var(--display);font-size:1.05rem;letter-spacing:0;
  text-transform:none;padding:.42rem 0;color:var(--ink-2);
  transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.mega__col li a::after{display:none}
.mega__col li a:hover{color:var(--gold-deep);padding-left:.5rem}
.mega__feature{
  position:relative;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:4/5;
}
.mega__feature img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.mega__feature:hover img{transform:scale(1.06)}
.mega__feature figcaption{
  position:absolute;inset:auto 0 0 0;padding:1.2rem;
  background:linear-gradient(180deg,transparent,rgba(42,39,35,.72));
  color:var(--ivory);font-family:var(--display);font-size:1.15rem;
}

/* Mobile drawer nav */
.mobile-nav{
  position:fixed;inset:0;z-index:950;background:var(--ivory);
  padding:calc(var(--header-h) + 2rem) var(--gutter) 3rem;
  transform:translateX(100%);transition:transform .6s var(--ease-out);
  overflow-y:auto;display:flex;flex-direction:column;
}
.mobile-nav.is-open{transform:translateX(0)}
.mobile-nav a{
  display:block;font-family:var(--display);font-size:2rem;font-weight:300;
  padding:.7rem 0;border-bottom:var(--hair-soft);
  opacity:0;transform:translateY(14px);
}
.mobile-nav.is-open a{animation:mnIn .5s var(--ease-out) forwards}
@keyframes mnIn{to{opacity:1;transform:none}}
.mobile-nav__foot{margin-top:auto;padding-top:2rem;font-size:var(--fs-sm);color:var(--ink-2)}

/* ==========================================================================
   7. Hero — SIGNATURE: tagline set on a circular path, echoing the logo ring
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  padding-top:var(--header-h);overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);
  animation:kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{transform:scale(1.12) translate3d(0,0,0)}
  to{transform:scale(1.2) translate3d(-1.5%,-1.5%,0)}
}
.hero__veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(251,248,242,.97) 0%,rgba(251,248,242,.92) 26%,rgba(251,248,242,.62) 46%,rgba(251,248,242,.12) 72%),
    linear-gradient(180deg,rgba(251,248,242,.6),transparent 26%,rgba(251,248,242,.45));
}
.hero__inner{position:relative;z-index:2;padding-block:clamp(4rem,10vh,8rem)}
.hero__content{max-width:min(660px,92%)}
.hero h1{font-size:var(--fs-hero);margin:1.3rem 0 1.6rem}
.hero__lede{max-width:46ch;margin-bottom:2.4rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

.hero__scroll{
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);
}
.hero__scroll i{display:block;width:1px;height:46px;background:linear-gradient(180deg,var(--gold),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{
  content:"";position:absolute;top:0;left:0;width:100%;height:14px;background:var(--gold);
  animation:drip 2.2s infinite var(--ease);
}
@keyframes drip{0%{transform:translateY(-100%)}100%{transform:translateY(340%)}}

@media (max-width:900px){
  .hero__veil{background:linear-gradient(180deg,rgba(251,248,242,.9) 0%,rgba(251,248,242,.6) 45%,rgba(251,248,242,.95) 100%)}
}

/* ==========================================================================
   8. Product card — SIGNATURE: a warm light blooms from the wick on hover
   Gestalt: similarity (identical card frames read as one family),
            common region (hairline box), proximity (name/scent/price cluster).
   ========================================================================== */
.grid-products{
  display:grid;gap:clamp(1.1rem,2.2vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
}
.grid-products--4{grid-template-columns:repeat(4,1fr)}
.grid-products--3{grid-template-columns:repeat(3,1fr)}

.card{
  position:relative;display:flex;flex-direction:column;background:var(--shell);
  border:1px solid rgba(192,138,46,.16);border-radius:var(--radius);
  overflow:hidden;isolation:isolate;
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .6s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:rgba(192,138,46,.42)}

.card__media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--bone)}
.card__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-out),opacity .7s var(--ease);
}
.card__media img.is-alt{opacity:0}
.card:hover .card__media img.is-main{opacity:0;transform:scale(1.05)}
.card:hover .card__media img.is-alt{opacity:1;transform:scale(1.05)}

/* the bloom */
.card__glow{
  position:absolute;left:50%;top:42%;width:80%;aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.4);
  background:radial-gradient(circle,rgba(242,178,62,.42) 0%,rgba(242,178,62,.16) 34%,transparent 68%);
  opacity:0;pointer-events:none;mix-blend-mode:screen;
  transition:opacity .7s var(--ease),transform .9s var(--ease-out);
}
.card:hover .card__glow{opacity:1;transform:translate(-50%,-50%) scale(1)}

.card__flags{position:absolute;top:.85rem;left:.85rem;z-index:3;display:flex;flex-direction:column;gap:.4rem}
.flag{
  padding:.3rem .7rem;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--ivory);color:var(--ink);border:1px solid rgba(192,138,46,.3);
}
.flag--new{background:var(--gold);color:#fff;border-color:var(--gold)}
.flag--sale{background:var(--blush);color:#fff;border-color:var(--blush)}

.card__wish{
  position:absolute;top:.7rem;right:.7rem;z-index:3;
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,253,249,.9);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(-6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s;
}
.card:hover .card__wish,.card__wish:focus-visible,.card__wish.is-active{opacity:1;transform:none}
.card__wish svg{width:17px;height:17px;stroke:var(--ink);stroke-width:1.2;fill:none;transition:.3s}
.card__wish.is-active svg{fill:var(--blush);stroke:var(--blush)}
.card__wish.is-active{animation:pop .45s var(--ease-out)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}

.card__quick{
  position:absolute;left:.85rem;right:.85rem;bottom:.85rem;z-index:3;
  opacity:0;transform:translateY(12px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
}
.card:hover .card__quick,.card:focus-within .card__quick{opacity:1;transform:none}
@media (hover:none){.card__quick,.card__wish{opacity:1;transform:none;position:static;margin:.75rem .85rem 0}}

.card__body{padding:1.15rem 1.15rem 1.35rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.card__scent{font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.card__name{font-family:var(--display);font-size:1.3rem;line-height:1.15}
.card__name a{transition:color .3s}
.card__name a:hover{color:var(--gold-deep)}
.card__foot{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:.5rem}
.card__rating{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--ink-3)}
.card__rating svg{width:12px;height:12px;fill:var(--gold);stroke:none}

/* ==========================================================================
   9. Horizontal rail — Gestalt: continuity. The row visibly runs off-canvas,
      which tells the eye there is more without any "scroll" instruction.
   ========================================================================== */
.rail{
  display:flex;gap:clamp(1rem,2vw,1.75rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1.5rem;padding-right:var(--gutter);
  scrollbar-width:thin;scrollbar-color:var(--gold) var(--linen);
}
.rail::-webkit-scrollbar{height:2px}
.rail::-webkit-scrollbar-track{background:var(--linen)}
.rail::-webkit-scrollbar-thumb{background:var(--gold)}
.rail > *{flex:0 0 clamp(230px,26vw,300px);scroll-snap-align:start}
.rail-nav{display:flex;gap:.6rem}
.rail-nav button{
  width:44px;height:44px;border:1px solid rgba(192,138,46,.3);border-radius:50%;
  display:grid;place-items:center;transition:.35s var(--ease);
}
.rail-nav button:hover{background:var(--gold);border-color:var(--gold)}
.rail-nav button:hover svg{stroke:#fff}
.rail-nav svg{width:15px;height:15px;stroke:var(--ink);stroke-width:1.2;fill:none;transition:.35s}
.rail-nav button[disabled]{opacity:.3;pointer-events:none}

/* ==========================================================================
   10. Collections mosaic — figure/ground: product floats on ivory, never fights it
   ========================================================================== */
.mosaic{display:grid;gap:clamp(.9rem,1.8vw,1.5rem);grid-template-columns:repeat(6,1fr)}
.mosaic__cell{
  position:relative;overflow:hidden;border-radius:var(--radius);
  min-height:260px;display:flex;align-items:flex-end;
  background:var(--bone);
}
.mosaic__cell:nth-child(1){grid-column:span 4;aspect-ratio:16/10}
.mosaic__cell:nth-child(2){grid-column:span 2;aspect-ratio:4/5}
.mosaic__cell:nth-child(3){grid-column:span 2;aspect-ratio:4/5}
.mosaic__cell:nth-child(4){grid-column:span 2;aspect-ratio:4/5}
.mosaic__cell:nth-child(5){grid-column:span 2;aspect-ratio:4/5}
.mosaic__cell img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.3s var(--ease-out),filter .7s var(--ease);
}
.mosaic__cell:hover img{transform:scale(1.07)}
.mosaic__cell::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(42,39,35,.30) 55%,rgba(42,39,35,.78));
  transition:opacity .6s var(--ease);
}
.mosaic__label{position:relative;z-index:2;padding:clamp(1.3rem,2.4vw,2.2rem);color:var(--ivory)}
.mosaic__label h3{color:var(--ivory);margin-bottom:.35rem}
.mosaic__label .meta{color:rgba(251,248,242,.72)}
.mosaic__label .link-u{color:var(--ivory);margin-top:.9rem}
.mosaic__label .link-u::after{background:var(--gold-lt)}
@media (max-width:900px){
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .mosaic__cell:nth-child(1){grid-column:span 2}
  .mosaic__cell:nth-child(n+2){grid-column:span 1}
}
@media (max-width:560px){
  .mosaic{grid-template-columns:1fr}
  .mosaic__cell{grid-column:span 1 !important;aspect-ratio:4/3 !important}
}

/* ==========================================================================
   11. Scent Finder — three taps to a recommendation. Conversion device.
   ========================================================================== */
.finder{
  background:var(--ink);color:var(--ivory);border-radius:var(--radius-lg);
  padding:clamp(2rem,5vw,4rem);position:relative;overflow:hidden;
}
.finder::before{
  content:"";position:absolute;top:-30%;right:-10%;width:60%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(242,178,62,.16),transparent 66%);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}
.finder h2,.finder h3{color:var(--ivory)}
.finder .eyebrow{color:var(--gold-lt)}
.finder .eyebrow::before{background:var(--gold-lt)}
.finder__steps{display:grid;gap:2rem;grid-template-columns:repeat(3,1fr);margin-top:2.5rem;position:relative}
.finder__step > span{
  display:block;font-size:var(--fs-eyebrow);letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-lt);margin-bottom:1rem;
}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  padding:.6rem 1.1rem;border:1px solid rgba(230,201,126,.34);border-radius:100px;
  font-size:.74rem;letter-spacing:.08em;color:rgba(251,248,242,.82);
  transition:.35s var(--ease);
}
.chip:hover{border-color:var(--gold-lt);color:var(--ivory)}
.chip.is-on{background:var(--gold);border-color:var(--gold);color:#fff}
.finder__result{
  margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(230,201,126,.22);
  opacity:0;max-height:0;overflow:hidden;
  transition:opacity .6s var(--ease),max-height .7s var(--ease-out);
}
.finder__pair{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
[hidden]{display:none !important}
.finder__result.is-on{opacity:1;max-height:800px}
.finder__result img{width:100%;border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover}
@media (max-width:820px){
  .finder__steps{grid-template-columns:1fr}
  .finder__pair{grid-template-columns:1fr}
}

/* ==========================================================================
   12. Occasions — Gestalt: similarity + proximity. Identical tiles, tight set.
   ========================================================================== */
.occasions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:rgba(192,138,46,.2)}
.occasion{
  background:var(--ivory);padding:clamp(1.6rem,3vw,2.4rem) 1.2rem;
  text-align:center;transition:background .5s var(--ease);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
}
.occasion:hover{background:var(--bone)}
.occasion__icon{width:34px;height:34px;stroke:var(--gold);stroke-width:1;fill:none;transition:transform .6s var(--ease-out)}
.occasion:hover .occasion__icon{transform:translateY(-4px) scale(1.08)}
.occasion h3{font-size:1.05rem}
.occasion .meta{font-size:.6rem}

/* ==========================================================================
   13. Story split
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.split--flip .split__media{order:2}
.split__media{position:relative}
.split__media img{border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover;width:100%}
.split__media::after{
  content:"";position:absolute;inset:14px -14px -14px 14px;
  border:var(--hair);border-radius:var(--radius);z-index:-1;
}
.split__body h2{margin:1rem 0 1.4rem}
.split__body .lede + .btn{margin-top:2rem}
.stats{display:flex;gap:clamp(1.5rem,4vw,3rem);margin-top:2.5rem;flex-wrap:wrap}
.stat b{display:block;font-family:var(--display);font-size:2.4rem;font-weight:300;color:var(--gold-deep);line-height:1}
.stat span{font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
}

/* ==========================================================================
   14. Testimonials
   ========================================================================== */
.quote{
  text-align:center;max-width:44ch;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;
}
.quote blockquote{font-family:var(--display);font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.35;font-weight:300}
.quote__stars{display:flex;gap:.3rem}
.quote__stars svg{width:15px;height:15px;fill:var(--gold)}
.quote__by{font-size:var(--fs-eyebrow);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.quote-dots{display:flex;gap:.55rem;justify-content:center;margin-top:2.5rem}
.quote-dots button{width:7px;height:7px;border-radius:50%;background:var(--linen);transition:.35s}
.quote-dots button.is-on{background:var(--gold);width:22px;border-radius:4px}

/* ==========================================================================
   15. Newsletter + trust
   ========================================================================== */
.subscribe{display:flex;gap:.6rem;max-width:460px;margin-top:1.8rem;flex-wrap:wrap}
.subscribe input{
  flex:1 1 220px;padding:1.05rem 1.2rem;background:transparent;
  border:1px solid rgba(42,39,35,.2);border-radius:var(--radius);
  font-size:.9rem;transition:border-color .35s;
}
.subscribe input:focus{border-color:var(--gold);outline:none}
.subscribe input::placeholder{color:var(--ink-3)}

.trust{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);justify-content:center;align-items:center}
.trust__item{display:flex;align-items:center;gap:.7rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.trust__item svg{width:22px;height:22px;stroke:var(--gold);stroke-width:1;fill:none}

.pay-row{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.pay-row span{
  padding:.45rem .8rem;border:var(--hair-soft);border-radius:var(--radius);
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  background:var(--shell);
}

/* ==========================================================================
   16. Footer
   ========================================================================== */
.site-footer{background:var(--ink);color:rgba(251,248,242,.76);padding-top:clamp(3.5rem,7vw,6rem)}
.site-footer h4{
  font-family:var(--body);font-size:var(--fs-eyebrow);letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-lt);margin-bottom:1.3rem;
}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:clamp(2rem,4vw,3.5rem)}
.site-footer a{transition:color .3s}
.site-footer a:hover{color:var(--gold-lt)}
.site-footer li{padding:.32rem 0;font-size:.9rem}
.footer-brand img{width:120px;margin-bottom:1.2rem}
.footer-tag{font-family:var(--display);font-size:1.25rem;color:var(--ivory);line-height:1.4;max-width:28ch}
.footer-contact li{display:flex;gap:.7rem;align-items:flex-start}
.footer-contact svg{width:15px;height:15px;stroke:var(--gold-lt);stroke-width:1.2;fill:none;flex:0 0 auto;margin-top:.4rem}
.footer-bottom{
  margin-top:clamp(2.5rem,5vw,4rem);padding-block:1.6rem;
  border-top:1px solid rgba(230,201,126,.16);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.72rem;letter-spacing:.06em;color:rgba(251,248,242,.5);
}
.socials{display:flex;gap:.7rem}
.socials a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(230,201,126,.24);transition:.35s var(--ease);
}
.socials a:hover{background:var(--gold);border-color:var(--gold)}
.socials svg{width:16px;height:16px;stroke:var(--gold-lt);stroke-width:1.2;fill:none;transition:.35s}
.socials a:hover svg{stroke:#fff}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ==========================================================================
   17. Drawers (cart / wishlist) + modals
   ========================================================================== */
.scrim{
  position:fixed;inset:0;z-index:960;background:rgba(42,39,35,.42);
  backdrop-filter:blur(3px);opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility .5s;
}
.scrim.is-on{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:970;
  width:min(430px,100%);background:var(--ivory);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .6s var(--ease-out);
  box-shadow:-20px 0 60px -30px rgba(42,39,35,.4);
}
.drawer.is-open{transform:none}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.6rem var(--gutter);border-bottom:var(--hair);
}
.drawer__head h3{font-size:1.35rem}
.drawer__close{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;transition:background .3s}
.drawer__close:hover{background:var(--linen)}
.drawer__close svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.3}
.drawer__body{flex:1;overflow-y:auto;padding:1.2rem var(--gutter)}
.drawer__foot{padding:1.4rem var(--gutter);border-top:var(--hair);background:var(--shell)}

.line-item{display:grid;grid-template-columns:78px 1fr auto;gap:1rem;padding:1rem 0;border-bottom:var(--hair-soft)}
.line-item img{width:78px;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.line-item__name{font-family:var(--display);font-size:1.1rem;line-height:1.2}
.line-item__meta{font-size:.72rem;color:var(--ink-3);margin-top:.2rem}
.qty{display:inline-flex;align-items:center;border:var(--hair-soft);border-radius:var(--radius);margin-top:.6rem}
.qty button{width:30px;height:30px;display:grid;place-items:center;color:var(--ink-2);transition:color .3s}
.qty button:hover{color:var(--gold-deep)}
.qty input{width:34px;text-align:center;border:0;background:transparent;font-size:.85rem}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.totals{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem;font-size:.9rem}
.totals strong{font-family:var(--display);font-size:1.45rem;font-weight:400}
.drawer__note{font-size:.7rem;color:var(--ink-3);margin-top:.9rem;text-align:center;letter-spacing:.06em}

/* free-shipping progress — nudges basket size */
.ship-bar{margin-bottom:1.2rem}
.ship-bar__track{height:2px;background:var(--linen);overflow:hidden}
.ship-bar__fill{height:100%;background:linear-gradient(90deg,var(--gold-lt),var(--gold));width:0;transition:width .8s var(--ease-out)}
.ship-bar p{font-size:.72rem;color:var(--ink-2);margin-bottom:.55rem;letter-spacing:.04em}

.empty{text-align:center;padding:4rem 1rem;color:var(--ink-2)}
.empty svg{width:44px;height:44px;stroke:var(--gold);stroke-width:.9;fill:none;margin:0 auto 1.2rem}

/* Quick view */
.modal{
  position:fixed;inset:0;z-index:975;display:grid;place-items:center;
  padding:var(--gutter);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.modal.is-open{opacity:1;visibility:visible}
.modal__panel{
  background:var(--ivory);width:min(900px,100%);max-height:88vh;overflow:auto;
  display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius);
  transform:translateY(18px) scale(.985);transition:transform .55s var(--ease-out);
  position:relative;
}
.modal.is-open .modal__panel{transform:none}
.modal__panel img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.modal__content{padding:clamp(1.6rem,3.5vw,2.8rem)}
.modal__close{position:absolute;top:1rem;right:1rem;z-index:2;width:38px;height:38px;border-radius:50%;background:var(--ivory);display:grid;place-items:center}
@media (max-width:760px){.modal__panel{grid-template-columns:1fr}}

/* Search overlay */
.search-overlay{
  position:fixed;inset:0;z-index:980;background:rgba(251,248,242,.97);
  backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
  padding-top:16vh;
}
.search-overlay.is-open{opacity:1;visibility:visible}
.search-overlay input{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--gold);
  font-family:var(--display);font-size:clamp(1.6rem,4vw,3rem);font-weight:300;
  padding:.6rem 0;outline:none;
}
.search-suggest{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.6rem}
.search-suggest a{
  padding:.5rem 1rem;border:var(--hair);border-radius:100px;
  font-size:.72rem;letter-spacing:.1em;color:var(--ink-2);transition:.35s;
}
.search-suggest a:hover{background:var(--gold);border-color:var(--gold);color:#fff}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:2rem;z-index:990;transform:translate(-50%,120%);
  background:var(--ink);color:var(--ivory);padding:.95rem 1.6rem;border-radius:var(--radius);
  font-size:.8rem;letter-spacing:.08em;display:flex;align-items:center;gap:.8rem;
  transition:transform .55s var(--ease-out);box-shadow:var(--shadow-lift);
}
.toast.is-on{transform:translate(-50%,0)}
.toast svg{width:16px;height:16px;stroke:var(--gold-lt);stroke-width:1.4;fill:none}

/* ==========================================================================
   18. Reveal animations (IntersectionObserver adds .in)
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="scale"]{transform:scale(.96)}
[data-reveal-delay="1"]{transition-delay:.09s}
[data-reveal-delay="2"]{transition-delay:.18s}
[data-reveal-delay="3"]{transition-delay:.27s}
[data-reveal-delay="4"]{transition-delay:.36s}
[data-reveal-delay="5"]{transition-delay:.45s}
[data-reveal-delay="6"]{transition-delay:.54s}

/* line-by-line headline reveal */
.split-line{display:block;overflow:hidden}
.split-line > span{display:block;transform:translateY(105%);transition:transform 1s var(--ease-out)}
.in .split-line > span,.split-line.in > span{transform:none}

/* ==========================================================================
   19. WooCommerce
   ========================================================================== */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-info,.woocommerce-error{
  background:var(--bone);border-left:2px solid var(--gold);
  padding:1rem 1.3rem;font-size:.85rem;list-style:none;margin-bottom:1.5rem;
}
.woocommerce-error{border-left-color:var(--blush)}

.shop-hero{padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,5rem));padding-bottom:clamp(2rem,4vw,3rem);text-align:center}
.breadcrumb{font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.breadcrumb a:hover{color:var(--gold-deep)}

.shop-layout{display:grid;grid-template-columns:246px 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:960px){.shop-layout{grid-template-columns:1fr}.shop-filters{display:none}.shop-filters.is-open{display:block}}

.filter-group{border-bottom:var(--hair-soft);padding-block:1.2rem}
.filter-group > button{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
}
.filter-group > button svg{width:12px;height:12px;stroke:var(--gold);stroke-width:1.4;fill:none;transition:transform .4s}
.filter-group > button svg .v{transition:opacity .35s var(--ease),transform .35s var(--ease);transform-origin:center}
.filter-group.is-open > button svg .v{opacity:0;transform:scaleY(0)}
.filter-group__body{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out)}
.filter-group.is-open .filter-group__body{max-height:420px}
.filter-group li{padding-top:.7rem}
.filter-check{display:flex;align-items:center;gap:.65rem;font-size:.85rem;color:var(--ink-2);cursor:pointer}
.filter-check input{appearance:none;width:15px;height:15px;border:1px solid rgba(42,39,35,.24);border-radius:1px;transition:.3s;flex:0 0 auto}
.filter-check input:checked{background:var(--gold);border-color:var(--gold)}
.filter-check span:last-child{margin-left:auto;font-size:.72rem;color:var(--ink-3)}

.shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.8rem;padding-bottom:1.1rem;border-bottom:var(--hair-soft)}
.shop-toolbar select{
  appearance:none;border:var(--hair-soft);background:transparent;padding:.6rem 2.2rem .6rem 1rem;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;border-radius:var(--radius);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C08A2E' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:14px;
}

.woocommerce-pagination ul{display:flex;gap:.4rem;justify-content:center;margin-top:3rem}
.woocommerce-pagination a,.woocommerce-pagination span{
  width:42px;height:42px;display:grid;place-items:center;
  border:var(--hair-soft);border-radius:var(--radius);font-size:.85rem;transition:.35s;
}
.woocommerce-pagination .current{background:var(--gold);border-color:var(--gold);color:#fff}

/* single product */
.pdp{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;padding-top:calc(var(--header-h) + 2.5rem)}
@media (max-width:900px){.pdp{grid-template-columns:1fr}}
.pdp__gallery{display:grid;grid-template-columns:76px 1fr;gap:1rem;position:sticky;top:calc(var(--header-h) + 1.5rem)}
@media (max-width:900px){.pdp__gallery{position:static;grid-template-columns:1fr}}
.pdp__thumbs{display:flex;flex-direction:column;gap:.6rem}
@media (max-width:900px){.pdp__thumbs{flex-direction:row;order:2;overflow-x:auto}}
.pdp__thumbs button{border:1px solid transparent;border-radius:var(--radius);overflow:hidden;transition:.35s;flex:0 0 66px}
.pdp__thumbs button.is-on{border-color:var(--gold)}
.pdp__thumbs img{aspect-ratio:4/5;object-fit:cover;width:100%}
.pdp__stage{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--bone);aspect-ratio:4/5;cursor:zoom-in}
.pdp__stage img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out),opacity .5s}
.pdp__stage.is-zoom img{transform:scale(1.7)}

.pdp__title{font-size:var(--fs-d2);margin:.7rem 0 .5rem}
.pdp__price{font-family:var(--display);font-size:2rem;color:var(--gold-deep);margin:1.1rem 0}
.pdp__spec{display:grid;gap:.85rem;margin:1.8rem 0;padding:1.4rem 0;border-block:var(--hair-soft)}
.pdp__spec div{display:grid;grid-template-columns:120px 1fr;gap:1rem;font-size:.88rem}
.pdp__spec dt{font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding-top:.2rem}
.swatches{display:flex;gap:.55rem;flex-wrap:wrap}
.swatch{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(42,39,35,.14);
  position:relative;transition:.35s var(--ease);
}
.swatch.is-on{box-shadow:0 0 0 1px var(--ivory),0 0 0 2px var(--gold)}
.pdp__actions{display:flex;gap:.7rem;margin-top:1.8rem;flex-wrap:wrap}
.pdp__actions .btn{flex:1 1 200px}
.pdp__wish{
  width:56px;flex:0 0 56px;border:1px solid rgba(42,39,35,.2);border-radius:var(--radius);
  display:grid;place-items:center;transition:.35s;
}
.pdp__wish:hover{border-color:var(--blush)}
.pdp__wish svg{width:19px;height:19px;stroke:var(--ink);stroke-width:1.2;fill:none;transition:.3s}
.pdp__wish.is-active svg{fill:var(--blush);stroke:var(--blush)}
.pdp__assure{display:grid;gap:.75rem;margin-top:1.8rem}
.pdp__assure div{display:flex;gap:.75rem;align-items:center;font-size:.8rem;color:var(--ink-2)}
.pdp__assure svg{width:17px;height:17px;stroke:var(--gold);stroke-width:1.1;fill:none;flex:0 0 auto}

.accordion{border-top:var(--hair-soft)}
.acc-item{border-bottom:var(--hair-soft)}
.acc-item > button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.15rem 0;text-align:left;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
.acc-item > button svg{width:13px;height:13px;stroke:var(--gold);stroke-width:1.4;fill:none;transition:transform .4s}
.acc-item > button svg .v{transition:opacity .35s var(--ease),transform .35s var(--ease);transform-origin:center}
.acc-item.is-open > button svg .v{opacity:0;transform:scaleY(0)}
.acc-item__body{max-height:0;overflow:hidden;transition:max-height .55s var(--ease-out)}
.acc-item.is-open .acc-item__body{max-height:600px}
.acc-item__body > div{padding-bottom:1.3rem;font-size:.92rem;color:var(--ink-2)}

/* sticky mobile buy bar — the single biggest mobile conversion lever */
.buy-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:880;
  background:rgba(251,248,242,.96);backdrop-filter:blur(12px);
  border-top:var(--hair);padding:.8rem var(--gutter);
  display:none;align-items:center;gap:1rem;
  transform:translateY(100%);transition:transform .5s var(--ease-out);
  padding-bottom:calc(.8rem + env(safe-area-inset-bottom));
}
.buy-bar.is-on{transform:none}
@media (max-width:900px){.buy-bar{display:flex}}
.buy-bar__info{flex:1;min-width:0}
.buy-bar__info b{display:block;font-family:var(--display);font-size:1rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buy-bar__info span{font-size:.8rem;color:var(--gold-deep)}

/* cart / checkout / account */
.woo-page{padding-top:calc(var(--header-h) + clamp(2rem,5vw,4rem));padding-bottom:var(--section)}
.cart-grid{display:grid;grid-template-columns:1fr 380px;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.cart-grid{grid-template-columns:1fr}}
.panel{background:var(--shell);border:var(--hair);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2rem)}
.panel--sticky{position:sticky;top:calc(var(--header-h) + 1.5rem)}

.form-row{display:grid;gap:.45rem;margin-bottom:1.1rem}
.form-row label{font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.form-row input,.form-row select,.form-row textarea{
  padding:.9rem 1rem;border:1px solid rgba(42,39,35,.18);border-radius:var(--radius);
  background:var(--ivory);transition:border-color .35s;font-size:.92rem;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--gold);outline:none}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.form-2{grid-template-columns:1fr}}

.steps{display:flex;gap:1rem;align-items:center;margin-bottom:2.5rem;flex-wrap:wrap}
.steps__i{display:flex;align-items:center;gap:.6rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.steps__i b{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:var(--hair-soft);font-size:.7rem;font-weight:400}
.steps__i.is-on{color:var(--ink)}
.steps__i.is-on b{background:var(--gold);border-color:var(--gold);color:#fff}
.steps__sep{flex:1;height:1px;background:var(--linen);min-width:20px}

.pay-option{
  display:flex;align-items:center;gap:1rem;padding:1.1rem;
  border:1px solid rgba(42,39,35,.14);border-radius:var(--radius);margin-bottom:.7rem;
  cursor:pointer;transition:.35s var(--ease);
}
.pay-option:hover{border-color:var(--gold-lt)}
.pay-option.is-on{border-color:var(--gold);background:rgba(240,224,188,.24)}
.pay-option input{appearance:none;width:16px;height:16px;border:1px solid rgba(42,39,35,.3);border-radius:50%;position:relative;flex:0 0 auto}
.pay-option input:checked{border-color:var(--gold)}
.pay-option input:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gold)}
.pay-option b{font-weight:400;font-size:.92rem}
.pay-option small{display:block;color:var(--ink-3);font-size:.75rem}

.account-layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:820px){.account-layout{grid-template-columns:1fr}}
.woocommerce-MyAccount-navigation li{border-bottom:var(--hair-soft)}
.woocommerce-MyAccount-navigation a{display:block;padding:.95rem 0;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);transition:.3s}
.woocommerce-MyAccount-navigation a:hover,.woocommerce-MyAccount-navigation .is-active a{color:var(--gold-deep);padding-left:.5rem}

/* recommendation strip */
.reco{background:var(--bone)}
.reco .card{background:var(--ivory)}

/* ==========================================================================
   20. Motion + accessibility guards
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .split-line > span{transform:none !important}
  .curtain{display:none}
}

@media (max-width:1100px){
  :root{--header-h:74px}
  .nav--main{display:none}
  .burger{display:grid;justify-self:end}
  /* brand | tools | burger — the nav is removed from flow above */
  .header-bar{grid-template-columns:auto 1fr auto;gap:.5rem}
  .brand img{height:46px}
  .site-header.is-stuck .brand img{height:38px}
  .grid-products--4,.grid-products--3{grid-template-columns:repeat(2,1fr)}
  .mega{display:none}
}
@media (max-width:420px){
  .tools{gap:.1rem}
  .tool{width:36px;height:36px}
  .brand img{height:40px}
}
@media (max-width:520px){
  .grid-products{grid-template-columns:repeat(2,1fr);gap:.85rem}
  .card__body{padding:.85rem .85rem 1.1rem}
  .card__name{font-size:1.05rem}
  .btn{padding:.95rem 1.6rem}
}

/* ==========================================================================
   21. WooCommerce native form elements, brought into the palette
   ========================================================================== */
[data-filters-toggle]{display:none}
@media (max-width:960px){
  [data-filters-toggle]{display:inline-flex}
  .shop-filters{margin-bottom:2rem;border-bottom:var(--hair-soft);padding-bottom:1.5rem}
}

/* Woo's add-to-cart form inside our .pdp__actions row */
.pdp form.cart{display:flex;gap:.7rem;flex-wrap:wrap;flex:1 1 260px;margin:0}
.pdp form.cart .quantity{display:inline-flex;align-items:center;border:1px solid rgba(42,39,35,.2);border-radius:var(--radius)}
.pdp form.cart .quantity input{
  width:64px;height:100%;min-height:52px;text-align:center;border:0;background:transparent;
  font-size:.95rem;-moz-appearance:textfield;
}
.pdp form.cart .quantity input::-webkit-outer-spin-button,
.pdp form.cart .quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp form.cart button[type="submit"],
.single_add_to_cart_button{
  flex:1 1 200px;position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:1.05rem 2.2rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:var(--gold);border:1px solid var(--gold);border-radius:var(--radius);
  white-space:nowrap;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:background .45s var(--ease),border-color .45s var(--ease);
}
.pdp form.cart button[type="submit"]:hover,
.single_add_to_cart_button:hover{background:var(--ink);border-color:var(--ink)}

/* Variation selects */
.variations{width:100%;margin-bottom:1rem}
.variations th{text-align:left;font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding:.6rem 1rem .6rem 0;vertical-align:middle}
.variations select{
  appearance:none;width:100%;padding:.8rem 2.2rem .8rem 1rem;
  border:1px solid rgba(42,39,35,.18);border-radius:var(--radius);background:var(--ivory);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C08A2E' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:14px;
}
.reset_variations{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.woocommerce-variation-price{margin-bottom:1rem;font-family:var(--display);font-size:1.5rem;color:var(--gold-deep)}

/* Checkout fields, which Woo renders with its own class names */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper{display:grid;gap:0}
.form-row,
.woocommerce form .form-row{display:grid;gap:.45rem;margin-bottom:1.1rem}
.woocommerce form .form-row label{font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.woocommerce form .form-row .required{color:var(--blush);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single{
  padding:.9rem 1rem;border:1px solid rgba(42,39,35,.18);border-radius:var(--radius);
  background:var(--ivory);font-size:.92rem;height:auto;transition:border-color .35s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{border-color:var(--gold);outline:none}
.form-row-first,.form-row-last{display:inline-grid;width:calc(50% - .5rem)}
.form-row-first{margin-right:1rem}
@media (max-width:560px){.form-row-first,.form-row-last{width:100%;margin-right:0}}

/* Payment methods list */
.wc_payment_methods{list-style:none;margin:0 0 1.4rem;padding:0}
.wc_payment_method{
  display:block;padding:1.1rem;border:1px solid rgba(42,39,35,.14);
  border-radius:var(--radius);margin-bottom:.7rem;transition:.35s var(--ease);
}
.wc_payment_method:hover{border-color:var(--gold-lt)}
.wc_payment_method input[type="radio"]{
  appearance:none;width:16px;height:16px;border:1px solid rgba(42,39,35,.3);
  border-radius:50%;position:relative;margin-right:.8rem;vertical-align:middle;
}
.wc_payment_method input[type="radio"]:checked{border-color:var(--gold)}
.wc_payment_method input[type="radio"]:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gold)}
.wc_payment_method label{font-size:.92rem;cursor:pointer}
.payment_box{margin-top:.8rem;padding:.9rem 1rem;background:var(--bone);font-size:.85rem;color:var(--ink-2);border-radius:var(--radius)}
.payment_box p{margin:0}
#place_order,
.woocommerce-form-login button,
.woocommerce-form-register button,
.woocommerce-Button{
  width:100%;padding:1.15rem 2rem;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:var(--gold);border:1px solid var(--gold);border-radius:var(--radius);
  cursor:pointer;transition:background .45s var(--ease),border-color .45s var(--ease);
}
#place_order:hover,.woocommerce-Button:hover{background:var(--ink);border-color:var(--ink)}
.woocommerce-privacy-policy-text{font-size:.78rem;color:var(--ink-3);margin-bottom:1rem}
.woocommerce-terms-and-conditions-wrapper{margin-bottom:1rem;font-size:.82rem}

/* Order received */
.woocommerce-order{max-width:760px;margin-inline:auto}
.woocommerce-thankyou-order-details{
  display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  list-style:none;padding:1.6rem;margin:2rem 0;background:var(--bone);border-radius:var(--radius);
}
.woocommerce-thankyou-order-details li{font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.woocommerce-thankyou-order-details li strong{
  display:block;margin-top:.4rem;font-family:var(--display);font-size:1.15rem;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);
}

/* Account forms + order tables */
.woocommerce-form-login,.woocommerce-form-register{
  max-width:440px;background:var(--shell);border:var(--hair);
  border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.4rem);
}
.woocommerce-orders-table,.shop_table{font-size:.9rem}
.woocommerce-orders-table th,.shop_table th{
  text-align:left;padding:.9rem 0;border-bottom:var(--hair);
  font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;
}
.woocommerce-orders-table td,.shop_table td{padding:1rem 0;border-bottom:var(--hair-soft)}
.woocommerce-button{padding:.6rem 1.1rem;font-size:.68rem;width:auto;display:inline-block}

/* Related products heading, which Woo prints as an h2 */
.related > h2,.upsells > h2{
  font-family:var(--display);font-weight:300;font-size:var(--fs-d2);
  margin-bottom:2rem;
}


/* Account dashboard tiles */
.tile-icon{width:28px;height:28px;stroke:var(--gold);stroke-width:1;fill:none;margin-bottom:.9rem}

/* ==========================================================================
   22. WordPress admin bar
   The header is position:fixed at top:0, which slides it under the 32px admin
   bar when signed in — hiding the announcement rail and covering "Howdy".
   Every fixed layer has to step down by the same amount.
   ========================================================================== */
body.admin-bar .site-header,
body.admin-bar .spine,
body.admin-bar .drawer,
body.admin-bar .mobile-nav,
body.admin-bar .search-overlay,
body.admin-bar .scrim{top:32px}

body.admin-bar .mega{top:calc(var(--header-h) + 32px)}
body.admin-bar .hero{min-height:calc(100svh - 32px)}
body.admin-bar .curtain{top:32px}

/* WordPress switches the bar to 46px and keeps it fixed below 782px. */
@media screen and (max-width:782px){
  body.admin-bar .site-header,
  body.admin-bar .spine,
  body.admin-bar .drawer,
  body.admin-bar .mobile-nav,
  body.admin-bar .search-overlay,
  body.admin-bar .scrim{top:46px}
  body.admin-bar .mega{top:calc(var(--header-h) + 46px)}
  body.admin-bar .hero{min-height:calc(100svh - 46px)}
  body.admin-bar .curtain{top:46px}
}

/* The footer wordmark is already gold on transparent — the old filter was
   bleaching it to off-white against the ink background. */
.footer-brand img{filter:none}

/* Footer grid adapts to how many menu columns actually exist. */
.footer-grid--2{grid-template-columns:1.6fr 1.4fr}
.footer-grid--3{grid-template-columns:1.6fr 1fr 1.4fr}
.footer-grid--4{grid-template-columns:1.6fr 1fr 1fr 1.4fr}
@media (max-width:900px){
  .footer-grid--2,.footer-grid--3,.footer-grid--4{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .footer-grid--2,.footer-grid--3,.footer-grid--4{grid-template-columns:1fr}
}

/* ==========================================================================
   23. Editor content
   Anything typed into WordPress — the story page, policies, journal posts —
   lands in .entry. Without this it inherits nothing and reads as raw text.
   ========================================================================== */
.entry{font-size:1.02rem;line-height:1.8;color:var(--ink-2)}
.entry > * + *{margin-top:1.15rem}
.entry h2,.entry h3,.entry h4{color:var(--ink);margin-top:2.4rem;margin-bottom:.9rem}
.entry h2{font-size:var(--fs-d3)}
.entry h3{font-size:1.35rem}
.entry h4{
  font-family:var(--body);font-size:var(--fs-eyebrow);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);
}
.entry p{margin:0}
.entry a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.entry a:hover{color:var(--ink)}
.entry strong{font-weight:500;color:var(--ink)}
.entry em{font-style:italic}
.entry ul,.entry ol{padding-left:1.3rem;display:grid;gap:.5rem}
.entry ul{list-style:none;padding-left:0}
.entry ul li{position:relative;padding-left:1.4rem}
.entry ul li::before{
  content:"";position:absolute;left:.25rem;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--gold);
}
.entry ol{list-style:decimal}
.entry ol li::marker{color:var(--gold-deep)}
.entry blockquote{
  margin-inline:0;padding:.4rem 0 .4rem 1.6rem;border-left:2px solid var(--gold);
  font-family:var(--display);font-size:1.35rem;line-height:1.4;color:var(--ink);
}
.entry blockquote p{margin:0}
.entry img,.entry figure{border-radius:var(--radius)}
.entry figcaption{font-size:.8rem;color:var(--ink-3);margin-top:.6rem;text-align:center}
.entry hr{border:0;height:1px;background:linear-gradient(90deg,transparent,rgba(192,138,46,.4),transparent);margin-block:2.6rem}
.entry table{margin-block:1.6rem;font-size:.92rem}
.entry th{
  text-align:left;padding:.8rem 1rem .8rem 0;border-bottom:var(--hair);
  font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;
}
.entry td{padding:.85rem 1rem .85rem 0;border-bottom:var(--hair-soft)}
.entry code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--bone);padding:.15em .4em;border-radius:2px;
}
.entry > :first-child{margin-top:0}