/* ==========================================================================
   YOURBEAUTY — Design System
   Premium skincare. Minimal, editorial, science-backed.
   ========================================================================== */

:root{
  /* Colour */
  --cream:#F7F3EE;
  --white:#FFFFFF;
  --sand:#DCC8B2;
  --clay:#C9A98B;
  --ink:#1E1E1E;
  --muted:#666666;
  --line:rgba(30,30,30,.10);
  --line-soft:rgba(30,30,30,.06);
  --shadow-sm:0 1px 2px rgba(30,30,30,.04), 0 6px 20px rgba(30,30,30,.05);
  --shadow-md:0 2px 6px rgba(30,30,30,.05), 0 20px 50px rgba(30,30,30,.08);
  --shadow-lg:0 30px 80px rgba(30,30,30,.14);

  /* Type */
  --serif:'Cormorant Garamond', 'Times New Roman', serif;
  --sans:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Space */
  --gutter:clamp(1.25rem, 5vw, 5rem);
  --maxw:1400px;

  /* Radius */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.25s; --t:.45s; --t-slow:.8s;
}

/* --- Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
ul{list-style:none; margin:0; padding:0}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:1.08}
p{margin:0}
:focus-visible{outline:2px solid var(--clay); outline-offset:3px; border-radius:4px}
.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}
.skip{position:absolute;left:1rem;top:-100px;z-index:200;background:var(--ink);color:#fff;padding:.75rem 1.25rem;border-radius:var(--r-pill);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;transition:top .3s}
.skip:focus{top:1rem}

/* --- Type scale --------------------------------------------------------- */
.d1{font-family:var(--serif); font-size:clamp(3rem,8.5vw,7rem); line-height:.98; letter-spacing:-.025em; font-weight:300}
.d2{font-family:var(--serif); font-size:clamp(2.25rem,5vw,4.25rem); line-height:1.04; letter-spacing:-.02em; font-weight:300}
.d3{font-family:var(--serif); font-size:clamp(1.75rem,3vw,2.75rem); line-height:1.12; font-weight:400}
.d4{font-family:var(--serif); font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.2; font-weight:400}
.eyebrow{font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; font-weight:400; color:var(--muted)}
.lead{font-size:clamp(1rem,1.3vw,1.15rem); color:var(--muted); line-height:1.7; font-weight:300}
.small{font-size:.82rem; color:var(--muted)}
.mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.5rem}.mt4{margin-top:2rem}.mt5{margin-top:3rem}

/* --- Layout ------------------------------------------------------------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.wrap-narrow{max-width:900px; margin:0 auto; padding-inline:var(--gutter)}
section{position:relative}
.sec{padding-block:clamp(4rem,9vw,8.5rem)}
.sec-sm{padding-block:clamp(3rem,6vw,5.5rem)}
.bg-cream{background:var(--cream)}
.sec-head{max-width:640px; margin-bottom:clamp(2.25rem,4vw,3.75rem)}
.sec-head .eyebrow{display:block; margin-bottom:1rem}
.sec-head p{margin-top:1rem}
.sec-head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2.25rem,4vw,3.75rem)}
.sec-head-row .sec-head{margin-bottom:0}

/* --- Buttons ------------------------------------------------------------ */
.btn{
  --bg:var(--ink); --fg:var(--white); --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.05rem 2.2rem; background:var(--bg); color:var(--fg);
  border:1px solid var(--bd); border-radius:var(--r-pill);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:400;
  position:relative; overflow:hidden; isolation:isolate; text-align:center;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn::after{content:''; position:absolute; inset:0; z-index:-1; background:var(--clay); transform:translateY(101%); transition:transform var(--t) var(--ease-out)}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--clay); color:var(--white)}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:translateY(0)}
.btn--ghost{--bg:transparent; --fg:var(--ink); --bd:rgba(30,30,30,.28)}
.btn--light{--bg:var(--white); --fg:var(--ink); --bd:var(--white)}
.btn--outline-light{--bg:transparent; --fg:var(--white); --bd:rgba(255,255,255,.55)}
.btn--block{display:flex; width:100%}
.btn--sm{padding:.8rem 1.5rem; font-size:.68rem}
.link-u{display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; padding-bottom:.35rem; border-bottom:1px solid rgba(30,30,30,.25); transition:border-color var(--t-fast), gap var(--t-fast), color var(--t-fast)}
.link-u:hover{border-color:var(--clay); gap:.85rem; color:var(--clay)}

/* --- Media -------------------------------------------------------------- */
.media{position:relative; overflow:hidden; border-radius:var(--r-lg); background:linear-gradient(140deg,#EFE7DD 0%,#DCC8B2 55%,#C9A98B 100%)}
.media::after{content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); border-radius:inherit; pointer-events:none}
.media img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out), opacity .6s var(--ease)}
.media--tall{aspect-ratio:3/4}
.media--sq{aspect-ratio:1/1}
.media--wide{aspect-ratio:16/10}
.hover-zoom:hover .media img{transform:scale(1.045)}

/* --- Announcement bar --------------------------------------------------- */
.announce{background:var(--ink); color:var(--white); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; text-align:center; padding:.7rem 3rem; position:relative}
.announce__track{display:grid}
.announce__item{grid-area:1/1; opacity:0; transition:opacity .6s var(--ease); pointer-events:none}
.announce__item.is-on{opacity:1; pointer-events:auto}
.announce__close{position:absolute; right:1rem; top:50%; transform:translateY(-50%); opacity:.6; padding:.25rem; line-height:1}
.announce__close:hover{opacity:1}

/* --- Header ------------------------------------------------------------- */
.hdr{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.72); backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid transparent; transition:border-color var(--t), background var(--t)}
.hdr.is-stuck{border-color:var(--line-soft); background:rgba(255,255,255,.94)}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:2rem; height:74px; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.logo{font-family:var(--serif); font-size:1.5rem; letter-spacing:.02em; line-height:1; white-space:nowrap}
.logo span{font-style:italic; color:var(--clay)}
.nav{display:flex; gap:2.2rem; align-items:center}
.nav a{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; position:relative; padding-block:.4rem}
.nav a::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--clay); transform:scaleX(0); transform-origin:right; transition:transform var(--t) var(--ease-out)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.hdr__actions{display:flex; align-items:center; gap:.5rem}
.icon-btn{position:relative; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; transition:background var(--t-fast)}
.icon-btn:hover{background:var(--cream)}
.icon-btn svg{width:19px; height:19px; stroke:var(--ink); stroke-width:1.3; fill:none}
.cart-count{position:absolute; top:1px; right:0; min-width:17px; height:17px; padding:0 4px; background:var(--ink); color:var(--white); border-radius:var(--r-pill); font-size:.6rem; display:grid; place-items:center; line-height:1}
.burger{display:none}

/* --- Hero --------------------------------------------------------------- */
.hero{position:relative; min-height:clamp(560px,92vh,940px); display:flex; align-items:flex-end; overflow:hidden; background:#E7DACB}
.hero__bg{position:absolute; inset:0}
.hero__bg img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:heroIn 2.4s var(--ease-out) forwards}
@keyframes heroIn{to{transform:scale(1)}}
.hero__veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,30,30,.34) 0%, rgba(30,30,30,.06) 38%, rgba(30,30,30,.58) 100%)}
.hero__in{position:relative; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) clamp(3rem,7vw,6rem); color:var(--white)}
.hero__copy{max-width:760px}
.hero .eyebrow{color:rgba(255,255,255,.82)}
.hero__sub{color:rgba(255,255,255,.9); max-width:480px; margin-top:1.4rem; font-size:1.05rem; font-weight:300}
.hero__cta{display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.4rem}
.hero__meta{display:flex; gap:2.5rem; flex-wrap:wrap; margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.2)}
.hero__meta div{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85)}
.scroll-hint{position:absolute; right:var(--gutter); bottom:clamp(3rem,7vw,6rem); writing-mode:vertical-rl; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.7); display:flex; align-items:center; gap:.8rem}
.scroll-hint::after{content:''; width:1px; height:56px; background:linear-gradient(rgba(255,255,255,.7), transparent); animation:pulseLine 2.4s infinite var(--ease)}
@keyframes pulseLine{0%,100%{opacity:.35; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}

/* --- Marquee ------------------------------------------------------------ */
.marquee{overflow:hidden; border-block:1px solid var(--line-soft); padding-block:1.15rem; background:var(--white)}
.marquee__track{display:flex; width:max-content; animation:slide 36s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:3.5rem; white-space:nowrap; padding-right:3.5rem}
.marquee__track span::after{content:''; width:4px; height:4px; border-radius:50%; background:var(--sand)}
@keyframes slide{to{transform:translateX(-50%)}}

/* --- Category grid ------------------------------------------------------ */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.75rem)}
.cat{display:block; position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--cream)}
.cat .media{border-radius:0; aspect-ratio:4/5}
.cat__body{position:absolute; left:0; right:0; bottom:0; padding:1.5rem 1.6rem; color:var(--white); background:linear-gradient(0deg, rgba(30,30,30,.66), transparent)}
.cat__body h3{font-size:1.5rem}
.cat__body em{font-style:normal; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; opacity:.85; display:block; margin-top:.35rem}
.cat__arrow{position:absolute; top:1.1rem; right:1.1rem; z-index:2; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.9); display:grid; place-items:center; opacity:0; transform:translateY(-6px); transition:all var(--t) var(--ease-out)}
.cat:hover .cat__arrow{opacity:1; transform:translateY(0)}
.cat__arrow svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.4;fill:none}

/* --- Product cards ------------------------------------------------------ */
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,2rem)}
.prod-grid--3{grid-template-columns:repeat(3,1fr)}
/* Card uses a 2-row grid so the wishlist + quick-view overlays can sit on the
   image without needing extra wrapper markup. */
.card{position:relative; display:grid; grid-template-rows:auto 1fr}
.card__media{grid-row:1; grid-column:1; position:relative; border-radius:var(--r-md); overflow:hidden; background:var(--cream); aspect-ratio:4/5; display:block}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out)}
.card:hover .card__media img{transform:scale(1.05)}
.card__tag{position:absolute; top:.85rem; left:.85rem; z-index:2; background:var(--white); color:var(--ink); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; padding:.4rem .75rem; border-radius:var(--r-pill)}
.card__tag--dark{background:var(--ink); color:var(--white)}
.card__wish{grid-row:1; grid-column:1; justify-self:end; align-self:start; margin:.75rem; z-index:3; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.9); display:grid; place-items:center; transition:transform var(--t-fast)}
.card__wish svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.4;fill:none}
.card__wish:hover{transform:scale(1.1)}
.card__wish.is-on svg{fill:var(--clay); stroke:var(--clay)}
.card__quick{grid-row:1; grid-column:1; align-self:end; justify-self:stretch; margin:.75rem; z-index:3; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-radius:var(--r-pill); padding:.8rem; text-align:center; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; opacity:0; transform:translateY(10px); transition:all var(--t) var(--ease-out)}
.card:hover .card__quick,.card__quick:focus-visible{opacity:1; transform:translateY(0)}
.card__body{grid-row:2; grid-column:1; padding-top:1.1rem; display:flex; flex-direction:column}
.card__title{font-family:var(--serif); font-size:1.3rem; line-height:1.2}
.card__benefit{font-size:.84rem; color:var(--muted); margin-top:.3rem}
.card__foot{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:auto; padding-top:.9rem}
.card__price{font-size:.95rem; letter-spacing:.02em}
.card__price del{color:var(--muted); margin-right:.5rem; font-size:.85rem}
.stars{display:inline-flex; align-items:center; gap:.35rem; margin-top:.55rem; font-size:.74rem; color:var(--muted)}
.stars i{color:var(--clay); font-style:normal; letter-spacing:.1em; font-size:.8rem}
.card__add{width:100%; margin-top:.9rem; padding:.85rem; border:1px solid var(--line); border-radius:var(--r-pill); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; transition:all var(--t-fast) var(--ease)}
.card__add:hover{background:var(--ink); color:var(--white); border-color:var(--ink)}
.card__add.is-added{background:var(--clay); border-color:var(--clay); color:var(--white)}

/* --- Value props -------------------------------------------------------- */
.vals{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.75rem,1.6vw,1.5rem)}
.val{text-align:center; padding:2rem 1rem; border-radius:var(--r-md); background:var(--white); transition:transform var(--t) var(--ease-out), box-shadow var(--t)}
.val:hover{transform:translateY(-5px); box-shadow:var(--shadow-sm)}
.val__ic{width:46px; height:46px; margin:0 auto 1.1rem; display:grid; place-items:center; border-radius:50%; background:var(--cream)}
.val__ic svg{width:22px; height:22px; stroke:var(--clay); stroke-width:1.2; fill:none}
.val h3{font-size:1rem; font-family:var(--sans); font-weight:400; letter-spacing:.03em}
.val p{font-size:.76rem; color:var(--muted); margin-top:.4rem; line-height:1.55}

/* --- Before / After ----------------------------------------------------- */
.ba{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; cursor:ew-resize; user-select:none; background:var(--sand); touch-action:none}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba__after{clip-path:inset(0 0 0 50%)}
.ba__handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--white); box-shadow:0 0 22px rgba(0,0,0,.28)}
.ba__knob{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:var(--white); display:grid; place-items:center; box-shadow:var(--shadow-md)}
.ba__knob svg{width:22px;height:22px;stroke:var(--ink);stroke-width:1.4;fill:none}
.ba__lbl{position:absolute; bottom:1.1rem; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--white); background:rgba(30,30,30,.5); backdrop-filter:blur(6px); padding:.45rem .95rem; border-radius:var(--r-pill)}
.ba__lbl--l{left:1.1rem} .ba__lbl--r{right:1.1rem}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.stat-row{display:flex; gap:clamp(1.5rem,4vw,3.5rem); margin-top:2.5rem; flex-wrap:wrap}
.stat b{display:block; font-family:var(--serif); font-size:clamp(2.25rem,4vw,3.25rem); font-weight:300; line-height:1}
.stat span{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; margin-top:.4rem; max-width:160px}

/* --- Reviews ------------------------------------------------------------ */
.rev-rail{display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; scrollbar-width:none}
.rev-rail::-webkit-scrollbar{display:none}
.rev{flex:0 0 clamp(280px,30vw,400px); scroll-snap-align:start; background:var(--white); border-radius:var(--r-lg); padding:2.25rem; display:flex; flex-direction:column; border:1px solid var(--line-soft)}
.rev > i{color:var(--clay); font-style:normal; letter-spacing:.2em; font-size:.85rem}
.rev blockquote{font-family:var(--serif); font-size:1.3rem; line-height:1.45; margin:1.1rem 0 1.75rem; font-weight:400}
.rev__who{display:flex; align-items:center; gap:.9rem; margin-top:auto}
.rev__who img{width:46px; height:46px; border-radius:50%; object-fit:cover; background:var(--sand); flex:none}
.rev__who b{font-weight:400; font-size:.9rem; display:block}
.rev__who span{font-size:.72rem; color:var(--muted)}
.verified{display:inline-flex; align-items:center; gap:.3rem; font-size:.62rem; color:var(--clay); letter-spacing:.08em; text-transform:uppercase}

/* --- Ingredients -------------------------------------------------------- */
.ing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.ing{background:var(--white); padding:clamp(1.75rem,3vw,2.75rem); transition:background var(--t) var(--ease)}
.ing:hover{background:var(--cream)}
.ing__ic{width:44px; height:44px; margin-bottom:1.3rem; display:grid; place-items:center}
.ing__ic svg{width:38px; height:38px; stroke:var(--clay); stroke-width:1; fill:none}
.ing h3{font-size:1.45rem; margin-bottom:.15rem}
.ing__latin{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--clay); display:block; margin-bottom:.9rem}
.ing p{font-size:.87rem; color:var(--muted); line-height:1.65}
.ing__in{margin-top:1.1rem; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); opacity:.5}

/* --- Routine builder ---------------------------------------------------- */
.tabs{display:inline-flex; gap:.35rem; padding:.35rem; background:var(--white); border-radius:var(--r-pill); border:1px solid var(--line)}
.tab{padding:.7rem 1.6rem; border-radius:var(--r-pill); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; transition:all var(--t-fast) var(--ease)}
.tab.is-on{background:var(--ink); color:var(--white)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.75rem); margin-top:clamp(2rem,4vw,3.25rem)}
.step{position:relative}
.step .media{aspect-ratio:1/1; border-radius:var(--r-md)}
.step__n{position:absolute; top:.9rem; left:.9rem; z-index:2; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.94); display:grid; place-items:center; font-family:var(--serif); font-size:1rem}
.step h4{margin-top:1.1rem; font-size:1.2rem}
.step p{font-size:.83rem; color:var(--muted); margin-top:.35rem}
.step__time{font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--clay); margin-top:.6rem; display:block}
.fade-swap{animation:fadeUp .55s var(--ease-out) both}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* --- Quiz CTA ----------------------------------------------------------- */
.quiz{position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--ink); color:var(--white); padding:clamp(2.5rem,7vw,6rem); display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center}
.quiz > *{position:relative; z-index:1}
.quiz .lead{color:rgba(255,255,255,.72)}
.quiz .eyebrow{color:var(--sand)}
.quiz__orb{position:absolute; z-index:0; width:520px; height:520px; right:-140px; top:-160px; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(201,169,139,.55), transparent 62%); filter:blur(20px); animation:float 12s ease-in-out infinite}
@keyframes float{50%{transform:translate(-24px,26px) scale(1.06)}}
.quiz__chips{display:flex; flex-wrap:wrap; gap:.6rem}
.chip{border:1px solid rgba(255,255,255,.25); border-radius:var(--r-pill); padding:.6rem 1.2rem; font-size:.72rem; letter-spacing:.08em; transition:all var(--t-fast)}
.chip:hover{background:var(--white); color:var(--ink); border-color:var(--white)}

/* --- Instagram ---------------------------------------------------------- */
.ig-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:.5rem}
.ig{position:relative; overflow:hidden; border-radius:var(--r-sm); aspect-ratio:1/1; background:var(--cream); display:block}
.ig img{width:100%;height:100%;object-fit:cover; transition:transform .9s var(--ease-out)}
.ig:hover img{transform:scale(1.08)}
.ig__ov{position:absolute; inset:0; background:rgba(30,30,30,.35); display:grid; place-items:center; opacity:0; transition:opacity var(--t)}
.ig:hover .ig__ov{opacity:1}
.ig__ov svg{width:22px;height:22px;stroke:#fff;stroke-width:1.3;fill:none}

/* --- Newsletter --------------------------------------------------------- */
.news{text-align:center}
.news form{display:flex; gap:.6rem; max-width:520px; margin:2rem auto 0; flex-wrap:wrap}
.field{flex:1; min-width:220px; padding:1.05rem 1.4rem; background:var(--white); border:1px solid var(--line); border-radius:var(--r-pill); font-size:.9rem; font-weight:300; transition:border-color var(--t-fast), box-shadow var(--t-fast)}
.field:focus{outline:none; border-color:var(--clay); box-shadow:0 0 0 4px rgba(201,169,139,.14)}

/* --- Footer ------------------------------------------------------------- */
.ftr{background:var(--ink); color:rgba(255,255,255,.72); padding-block:clamp(3.5rem,7vw,6rem) 2rem}
.ftr__top{display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:clamp(2rem,4vw,3.5rem)}
.ftr .logo{color:var(--white); font-size:1.9rem}
.ftr h4{color:var(--white); font-family:var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:400; margin-bottom:1.25rem}
.ftr li{margin-bottom:.7rem}
.ftr a{font-size:.87rem; transition:color var(--t-fast)}
.ftr a:hover{color:var(--white)}
.ftr__note{max-width:310px; font-size:.87rem; margin-top:1.2rem; line-height:1.7}
.socials{display:flex; gap:.6rem; margin-top:1.75rem}
.socials a{width:38px; height:38px; border:1px solid rgba(255,255,255,.18); border-radius:50%; display:grid; place-items:center; transition:all var(--t-fast)}
.socials a:hover{background:var(--white); border-color:var(--white)}
.socials svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.3;fill:none}
.socials a:hover svg{stroke:var(--ink)}
.ftr__bot{display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; align-items:center; margin-top:clamp(3rem,6vw,5rem); padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.12); font-size:.76rem}
.pays{display:flex; gap:.5rem; flex-wrap:wrap}
.pays span{border:1px solid rgba(255,255,255,.18); border-radius:5px; padding:.3rem .6rem; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase}

/* --- Cart drawer -------------------------------------------------------- */
.scrim{position:fixed; inset:0; background:rgba(30,30,30,.4); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity var(--t); z-index:90}
.scrim.is-on{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(440px,100%); background:var(--white); z-index:100; transform:translateX(100%); transition:transform var(--t-slow) var(--ease-out); display:flex; flex-direction:column}
.drawer.is-on{transform:none}
.drawer__hd{display:flex; align-items:center; justify-content:space-between; padding:1.5rem 1.75rem; border-bottom:1px solid var(--line-soft)}
.drawer__hd h3{font-size:1.35rem}
.drawer__body{flex:1; overflow-y:auto; padding:0 1.75rem}
.drawer__ft{padding:1.5rem 1.75rem; border-top:1px solid var(--line-soft); background:var(--cream)}
.ship-bar{padding:1.1rem 1.75rem; background:var(--cream); border-bottom:1px solid var(--line-soft)}
.ship-bar p{font-size:.74rem; letter-spacing:.06em; margin-bottom:.65rem}
.ship-bar b{font-weight:400; color:var(--clay)}
.bar{display:block; height:3px; background:rgba(30,30,30,.1); border-radius:var(--r-pill); overflow:hidden}
.bar i{display:block; height:100%; background:var(--clay); border-radius:inherit; transition:width var(--t-slow) var(--ease-out)}
.line{display:flex; gap:1rem; padding-block:1.15rem; border-bottom:1px solid var(--line-soft)}
.line__img{width:76px; height:95px; border-radius:var(--r-sm); object-fit:cover; background:var(--cream); flex:none}
.line h4{font-size:1rem}
.line small{color:var(--muted); font-size:.75rem; display:block; margin-top:.2rem}
.line__x{margin-left:auto; align-self:flex-start; color:var(--muted); font-size:.75rem; text-decoration:underline}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-pill); margin-top:.6rem}
.qty button{width:30px; height:30px; display:grid; place-items:center; font-size:.9rem; color:var(--muted)}
.qty button:hover{color:var(--ink)}
.qty span{min-width:26px; text-align:center; font-size:.82rem}
.tot{display:flex; justify-content:space-between; margin-bottom:1.1rem; font-size:.95rem}
.empty{text-align:center; padding:4rem 1rem; color:var(--muted)}
.upsell{padding:1.1rem 0; border-top:1px dashed var(--line); display:flex; gap:1rem; align-items:center}
.upsell img{width:56px;height:56px;border-radius:var(--r-sm);object-fit:cover;background:var(--cream);flex:none}
.upsell b{font-weight:400; font-size:.9rem; font-family:var(--serif)}
.upsell button{margin-left:auto; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--line); border-radius:var(--r-pill); padding:.55rem 1rem; flex:none}
.upsell button:hover{background:var(--ink); color:#fff}

/* --- Modal / popup ------------------------------------------------------ */
.modal{position:fixed; z-index:110; left:50%; top:50%; transform:translate(-50%,-46%) scale(.97); width:min(880px,calc(100% - 2rem)); max-height:88vh; overflow-y:auto; background:var(--white); border-radius:var(--r-lg); opacity:0; pointer-events:none; transition:opacity var(--t), transform var(--t) var(--ease-out); box-shadow:var(--shadow-lg)}
.modal.is-on{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1)}
.modal__x{position:absolute; top:1rem; right:1rem; z-index:3; width:38px; height:38px; border-radius:50%; background:var(--white); display:grid; place-items:center; box-shadow:var(--shadow-sm)}
.modal__grid{display:grid; grid-template-columns:1fr 1fr}
.modal__grid .media{border-radius:var(--r-lg) 0 0 var(--r-lg); height:100%; min-height:440px}
.modal__pane{padding:clamp(1.75rem,3vw,2.75rem)}
.popup{width:min(560px,calc(100% - 2rem))}
.popup__in{padding:clamp(2rem,4vw,3rem); text-align:center}

/* --- Accordion ---------------------------------------------------------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{width:100%; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.4rem 0; text-align:left; font-size:.95rem; letter-spacing:.02em}
.acc__btn svg{flex:none; width:16px; height:16px; stroke:var(--ink); stroke-width:1.3; fill:none; transition:transform var(--t) var(--ease)}
.acc__item.is-on .acc__btn svg{transform:rotate(45deg)}
.acc__pane{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t) var(--ease-out)}
.acc__item.is-on .acc__pane{grid-template-rows:1fr}
.acc__pane > div{overflow:hidden}
.acc__pane p,.acc__pane ul{font-size:.89rem; color:var(--muted); line-height:1.75; padding-bottom:1.5rem}
.acc__pane li{position:relative; padding-left:1.1rem; margin-bottom:.4rem}
.acc__pane li::before{content:''; position:absolute; left:0; top:.62em; width:4px; height:4px; border-radius:50%; background:var(--clay)}

/* --- Toast -------------------------------------------------------------- */
.toast{position:fixed; left:50%; bottom:2rem; transform:translate(-50%,180%); background:var(--ink); color:var(--white); padding:.95rem 1.75rem; border-radius:var(--r-pill); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; z-index:120; transition:transform var(--t) var(--ease-out); box-shadow:var(--shadow-md)}
.toast.is-on{transform:translate(-50%,0)}

/* --- PDP ---------------------------------------------------------------- */
.crumbs{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-block:1.5rem}
.crumbs a:hover{color:var(--ink)}
.pdp{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:start}
.gal{display:grid; grid-template-columns:78px 1fr; gap:1rem; position:sticky; top:100px}
.thumbs{display:flex; flex-direction:column; gap:.6rem}
.thumb{border-radius:var(--r-sm); overflow:hidden; aspect-ratio:3/4; background:var(--cream); border:1px solid transparent; opacity:.6; transition:all var(--t-fast); position:relative}
.thumb.is-on{opacity:1; border-color:var(--ink)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb--vid::after{content:'▶'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:.7rem; background:rgba(30,30,30,.3)}
.stage{border-radius:var(--r-lg); overflow:hidden; background:var(--cream); aspect-ratio:3/4; position:relative}
.stage img{width:100%;height:100%;object-fit:cover; animation:fadeUp .5s var(--ease-out) both}
.pdp__info{padding-top:.5rem}
.price-row{display:flex; align-items:baseline; gap:.85rem; margin-top:1.25rem}
.price-row b{font-size:1.55rem; font-weight:400; font-family:var(--serif)}
.price-row del{color:var(--muted); font-size:1rem}
.price-row .save{font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--clay); border:1px solid var(--clay); border-radius:var(--r-pill); padding:.25rem .7rem}
.opt{border:1px solid var(--line); border-radius:var(--r-md); padding:1.15rem 1.25rem; display:flex; gap:.9rem; align-items:flex-start; cursor:pointer; transition:all var(--t-fast); margin-bottom:.7rem}
.opt.is-on{border-color:var(--ink); background:var(--cream)}
.opt input{margin-top:.35rem; accent-color:var(--ink)}
.opt b{font-weight:400; font-size:.92rem; display:flex; justify-content:space-between; gap:1rem}
.opt small{color:var(--muted); font-size:.78rem; display:block; margin-top:.2rem}
.opt .badge{font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; background:var(--clay); color:#fff; padding:.2rem .6rem; border-radius:var(--r-pill)}
.swatches{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.9rem}
.sw{border:1px solid var(--line); border-radius:var(--r-pill); padding:.6rem 1.15rem; font-size:.76rem; transition:all var(--t-fast)}
.sw.is-on{border-color:var(--ink); background:var(--ink); color:#fff}
.trust{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.75rem; padding-block:1.5rem; border-block:1px solid var(--line-soft); text-align:center}
.trust div{font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.trust svg{width:20px;height:20px;stroke:var(--clay);stroke-width:1.2;fill:none;margin:0 auto .5rem}
.sticky-atc{position:fixed; left:0; right:0; bottom:0; z-index:80; background:rgba(255,255,255,.95); backdrop-filter:blur(16px); border-top:1px solid var(--line-soft); padding:.9rem var(--gutter); display:flex; align-items:center; gap:1.5rem; transform:translateY(110%); transition:transform var(--t) var(--ease-out)}
.sticky-atc.is-on{transform:none}
.sticky-atc__p{display:flex; align-items:center; gap:.9rem; flex:1; min-width:0}
.sticky-atc img{width:48px;height:56px;border-radius:var(--r-sm);object-fit:cover;background:var(--cream);flex:none}
.sticky-atc b{font-family:var(--serif); font-weight:400; font-size:1.05rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fbt{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:1.5rem; border:1px solid var(--line); border-radius:var(--r-lg)}
.fbt__i{width:88px}
.fbt__i .media{aspect-ratio:1/1; border-radius:var(--r-sm)}
.fbt__i span{font-size:.7rem; display:block; margin-top:.5rem; line-height:1.3}
.fbt__plus{font-size:1.1rem; color:var(--muted)}
.fbt__end{margin-left:auto; text-align:right}
.bars{display:grid; gap:.5rem; margin-top:1.25rem}
.bar-row{display:grid; grid-template-columns:52px 1fr 42px; gap:.75rem; align-items:center; font-size:.75rem; color:var(--muted)}
.review-item{padding-block:1.75rem; border-bottom:1px solid var(--line-soft)}
.review-item h4{font-family:var(--sans); font-weight:400; font-size:.95rem; margin-bottom:.4rem}
.review-item p{font-size:.9rem; color:var(--muted); margin-top:.5rem; line-height:1.7}

/* --- PLP ---------------------------------------------------------------- */
.plp{display:grid; grid-template-columns:250px 1fr; gap:clamp(2rem,4vw,4rem); align-items:start}
.filters{position:sticky; top:100px}
.f-group{border-bottom:1px solid var(--line); padding-block:1.25rem}
.f-group:first-child{border-top:1px solid var(--line)}
.f-group > button{width:100%; display:flex; justify-content:space-between; align-items:center; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase}
.f-group__body{display:grid; grid-template-rows:1fr; transition:grid-template-rows var(--t) var(--ease-out)}
.f-group.is-off .f-group__body{grid-template-rows:0fr}
.f-group__body > div{overflow:hidden}
.f-list{padding-top:1rem}
.f-list label{display:flex; align-items:center; gap:.65rem; font-size:.87rem; color:var(--muted); padding-block:.4rem; cursor:pointer; transition:color var(--t-fast)}
.f-list label:hover{color:var(--ink)}
.f-list input{accent-color:var(--ink); width:15px; height:15px}
.f-list label span{margin-left:auto; font-size:.72rem; opacity:.6}
.plp__bar{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; padding-bottom:1.25rem; border-bottom:1px solid var(--line-soft)}
.sel{border:1px solid var(--line); border-radius:var(--r-pill); padding:.65rem 1.1rem; font-size:.76rem; background:var(--white); cursor:pointer}
.pills{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem}
.pill{display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line); border-radius:var(--r-pill); padding:.4rem .9rem; font-size:.74rem; background:var(--cream)}
.pill button{color:var(--muted); font-size:.85rem; line-height:1}
.plp__hero{background:var(--cream); padding-block:clamp(2.5rem,5vw,4.5rem); text-align:center}
.f-toggle{display:none}
.filters > .icon-btn{display:none}

/* --- Reveal on scroll --------------------------------------------------- */
[data-rv]{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
[data-rv].is-in{opacity:1; transform:none}

/* --- Responsive --------------------------------------------------------- */
@media (max-width:1100px){
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .vals{grid-template-columns:repeat(3,1fr)}
  .ig-grid{grid-template-columns:repeat(4,1fr)}
  .ftr__top{grid-template-columns:1fr 1fr 1fr}
  .pdp{grid-template-columns:1fr}
  .gal{position:static}
  .plp{grid-template-columns:1fr}
  .filters{position:fixed; inset:0 0 0 auto; width:min(340px,88%); background:#fff; z-index:95; padding:5rem 1.5rem 2rem; overflow-y:auto; transform:translateX(100%); transition:transform var(--t-slow) var(--ease-out)}
  .filters.is-on{transform:none}
  .f-toggle{display:inline-flex}
  .filters > .icon-btn{display:grid}
}
@media (max-width:900px){
  .nav{position:fixed; inset:0 0 0 auto; width:min(340px,86%); background:var(--white); flex-direction:column; align-items:flex-start; justify-content:center; gap:1.5rem; padding:2rem var(--gutter); transform:translateX(100%); transition:transform var(--t-slow) var(--ease-out); z-index:95}
  .nav.is-on{transform:none}
  .nav a{font-size:1.15rem; font-family:var(--serif); letter-spacing:.02em; text-transform:none}
  .burger{display:grid}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .ing-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .quiz{grid-template-columns:1fr}
  .modal__grid{grid-template-columns:1fr}
  .modal__grid .media{border-radius:var(--r-lg) var(--r-lg) 0 0; min-height:260px}
  .scroll-hint{display:none}
  .gal{grid-template-columns:1fr}
  .thumbs{flex-direction:row; order:2}
  .thumb{width:70px; flex:none}
}
@media (max-width:680px){
  .prod-grid,.prod-grid--3{grid-template-columns:repeat(2,1fr)}
  .vals{grid-template-columns:repeat(2,1fr)}
  .ig-grid{grid-template-columns:repeat(3,1fr)}
  .ftr__top{grid-template-columns:1fr 1fr}
  .ftr__top > div:first-child{grid-column:1/-1}
  .rev{flex-basis:84%}
  .hero__cta .btn{flex:1}
  .trust{grid-template-columns:1fr; gap:1.25rem}
  .fbt__end{margin-left:0; text-align:left; width:100%}
  .sticky-atc .sticky-atc__p small{display:none}
}
@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-rv]{opacity:1; transform:none}
}