/* ==========================================================================
   STOREPEAK — Premium Skincare Ecommerce
   Design tokens, base, components, sections
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ivory:      #FBF7F1;
  --cream:      #F6EDE3;
  --blush:      #F1DECF;
  --peach:      #E9C9B2;
  --sand:       #DDBBA2;
  --rose:       #C6866C;
  --rose-deep:  #A96A50;
  --rosegold:   #B7825F;
  --taupe:      #43332A;
  --taupe-soft: #7C6A5D;
  --taupe-faint:#A6968A;
  --line:       rgba(103,79,64,.14);
  --white:      #FFFDFB;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Figtree", "Segoe UI", sans-serif;

  --fs-hero: clamp(2.6rem, 5.4vw, 4.4rem);
  --fs-h2:   clamp(1.9rem, 3.4vw, 2.75rem);
  --fs-h3:   1.25rem;
  --fs-body: 1rem;
  --fs-sm:   .875rem;
  --fs-xs:   .78rem;

  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-soft: 0 18px 40px -18px rgba(105,72,52,.22);
  --shadow-card: 0 10px 30px -14px rgba(105,72,52,.16);
  --shadow-lift: 0 26px 50px -20px rgba(105,72,52,.30);

  --space-section: clamp(4.5rem, 9vw, 7.5rem);
  --container: 1180px;

  --ease: cubic-bezier(.22,.8,.32,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--taupe);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button,input{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }

.container{
  width:min(var(--container), calc(100% - 3rem));
  margin-inline:auto;
}
.section{ padding-block:var(--space-section); }
.section--cream{ background:var(--cream); }
.section--blush{ background:linear-gradient(180deg,var(--cream) 0%, var(--blush) 100%); }

/* Section headings */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--rose-deep);
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--rose-deep);
}
.section-head{ max-width:640px; margin-bottom:3.25rem; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow::after{
  content:""; width:26px; height:1px; background:var(--rose-deep);
}
.section-head h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--fs-h2);
  line-height:1.15;
  letter-spacing:-.01em;
  margin-top:.9rem;
}
.section-head h2 em{
  font-style:italic;
  color:var(--rose-deep);
}
.section-head p{
  margin-top:1rem;
  color:var(--taupe-soft);
  font-size:1.02rem;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.95rem 2rem;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.03em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, color .35s, border-color .35s;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn--primary{
  background:linear-gradient(120deg, var(--rose) 0%, var(--rose-deep) 100%);
  color:var(--white);
  box-shadow:0 12px 26px -12px rgba(169,106,80,.55);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(169,106,80,.6); }
.btn--ghost{
  border:1px solid var(--rose-deep);
  color:var(--rose-deep);
  background:transparent;
}
.btn--ghost:hover{ background:var(--rose-deep); color:var(--white); transform:translateY(-2px); }
.btn--light{
  background:var(--white);
  color:var(--rose-deep);
  box-shadow:var(--shadow-card);
}
.btn--light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.12s; }
.reveal[data-delay="2"]{ transition-delay:.24s; }
.reveal[data-delay="3"]{ transition-delay:.36s; }

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.announce{
  background:linear-gradient(90deg, var(--rose-deep), var(--rosegold), var(--rose-deep));
  color:#FDF6F0;
  font-size:var(--fs-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  padding:.55rem 1rem;
  position:relative;
  z-index:60;
}
.announce__track{ display:grid; }
.announce__msg{
  grid-area:1/1;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.announce__msg.is-active{ opacity:1; transform:none; }

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(251,247,241,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .4s var(--ease), border-color .4s;
}
.header.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -20px rgba(105,72,52,.25);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding-block:1.05rem;
}
.logo{
  display:flex;
  align-items:center;
  gap:.6rem;
}
.logo__mark{ width:30px; height:30px; color:var(--rose-deep); }
.logo__word{
  font-family:var(--font-display);
  font-size:1.45rem;
  font-weight:600;
  letter-spacing:.02em;
}
.logo__word span{ color:var(--rose-deep); font-style:italic; font-weight:500; }
.logo__tag{
  display:block;
  font-family:var(--font-body);
  font-size:.58rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--taupe-faint);
  margin-top:-2px;
}

.nav__list{ display:flex; gap:2rem; }
.nav__link{
  position:relative;
  font-size:.9rem;
  font-weight:500;
  color:var(--taupe-soft);
  padding-block:.4rem;
  transition:color .3s;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1.5px;
  background:var(--rose-deep);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__link:hover, .nav__link.is-active{ color:var(--taupe); }
.nav__link:hover::after, .nav__link.is-active::after{ transform:scaleX(1); }

.header__icons{ display:flex; align-items:center; gap:.35rem; }
.icon-btn{
  position:relative;
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--taupe);
  transition:background .3s, color .3s, transform .3s var(--ease);
}
.icon-btn:hover{ background:var(--blush); color:var(--rose-deep); transform:translateY(-1px); }
.icon-btn svg{ width:19px; height:19px; }
.cart-badge{
  position:absolute;
  top:4px; right:2px;
  min-width:17px; height:17px;
  padding-inline:4px;
  display:grid; place-items:center;
  background:var(--rose-deep);
  color:#fff;
  border-radius:var(--radius-pill);
  font-size:.62rem;
  font-weight:700;
  transition:transform .3s var(--ease);
}
.cart-badge.is-bump{ transform:scale(1.35); }

.nav-toggle{ display:none; }

/* Mobile nav */
@media (max-width: 920px){
  .nav{
    position:fixed;
    inset:0;
    top:0;
    background:var(--ivory);
    display:grid;
    place-items:center;
    opacity:0;
    pointer-events:none;
    transition:opacity .4s var(--ease);
    z-index:55;
  }
  .nav.is-open{ opacity:1; pointer-events:auto; }
  .nav__list{
    flex-direction:column;
    align-items:center;
    gap:1.6rem;
  }
  .nav__link{ font-size:1.4rem; font-family:var(--font-display); }
  .nav-toggle{
    display:grid;
    place-items:center;
    width:42px; height:42px;
    z-index:56;
  }
  .nav-toggle span{
    position:relative;
    width:22px; height:2px;
    background:var(--taupe);
    border-radius:2px;
    transition:background .3s;
  }
  .nav-toggle span::before,
  .nav-toggle span::after{
    content:"";
    position:absolute;
    left:0;
    width:22px; height:2px;
    background:var(--taupe);
    border-radius:2px;
    transition:transform .35s var(--ease), top .35s var(--ease);
  }
  .nav-toggle span::before{ top:-7px; }
  .nav-toggle span::after{ top:7px; }
  .nav-toggle.is-open span{ background:transparent; }
  .nav-toggle.is-open span::before{ top:0; transform:rotate(45deg); }
  .nav-toggle.is-open span::after{ top:0; transform:rotate(-45deg); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  background:
    radial-gradient(1000px 620px at 82% 10%, rgba(233,201,178,.65), transparent 65%),
    linear-gradient(160deg, var(--ivory) 30%, var(--cream) 100%);
  overflow:hidden;
}
.hero__inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:3rem;
  padding-block:clamp(3.5rem, 7vw, 6rem);
  min-height:min(88vh, 760px);
}
.hero__title{
  font-family:var(--font-display);
  font-weight:450;
  font-size:var(--fs-hero);
  line-height:1.06;
  letter-spacing:-.015em;
  margin-top:1.1rem;
}
.hero__title em{
  font-style:italic;
  font-weight:500;
  color:var(--rose-deep);
}
.hero__text{
  max-width:46ch;
  margin-top:1.4rem;
  color:var(--taupe-soft);
  font-size:1.06rem;
}
.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2.2rem;
}
.hero__proof{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-top:2.6rem;
}
.hero__faces{ display:flex; }
.hero__face{
  width:38px; height:38px;
  border-radius:50%;
  border:2px solid var(--ivory);
  margin-left:-10px;
}
.hero__face:first-child{ margin-left:0; }
.hero__face--1{ background:linear-gradient(135deg,#E9BFA6,#C98D6F); }
.hero__face--2{ background:linear-gradient(135deg,#D8A88E,#A9714F); }
.hero__face--3{ background:linear-gradient(135deg,#F0D3BE,#D3A183); }
.hero__face--4{
  background:var(--rose-deep);
  color:#fff;
  display:grid; place-items:center;
  font-size:.6rem; font-weight:700;
}
.hero__proof-text{ font-size:var(--fs-sm); color:var(--taupe-soft); }
.hero__proof-text strong{ color:var(--taupe); }
.hero__stars{ color:var(--rosegold); letter-spacing:2px; font-size:.8rem; }

/* Hero visual — the glow arc pedestal */
.hero__visual{
  position:relative;
  height:clamp(420px, 46vw, 560px);
}
.glow-arc{
  position:absolute;
  inset:0;
  margin:auto;
  width:min(88%, 470px);
  aspect-ratio:1;
  border-radius:50%;
  border:1.5px solid rgba(183,130,95,.55);
}
.glow-arc::before{
  content:"";
  position:absolute;
  inset:26px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(255,244,234,.95), rgba(241,222,207,.35) 62%, transparent 75%);
}
.glow-arc::after{
  content:"";
  position:absolute;
  inset:-9px;
  border-radius:50%;
  border:1px dashed rgba(183,130,95,.28);
  animation:spin 60s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.pedestal{
  position:absolute;
  left:50%; bottom:9%;
  transform:translateX(-50%);
  width:min(62%, 300px);
  height:56px;
  border-radius:14px 14px 22px 22px;
  background:linear-gradient(180deg,#F3E4D6 0%, #E2C8B2 60%, #D2B096 100%);
  box-shadow:0 30px 40px -18px rgba(105,72,52,.35), inset 0 2px 3px rgba(255,255,255,.7);
}
.pedestal::before{
  content:"";
  position:absolute;
  inset:6px 10px auto;
  height:8px;
  border-radius:8px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
}

/* CSS product vessels */
.vessel{ position:absolute; filter:drop-shadow(0 20px 22px rgba(105,72,52,.28)); }

/* jar */
.vessel--jar{
  left:50%; bottom:calc(9% + 46px);
  transform:translateX(-78%);
  width:132px; height:118px;
}
.vessel--jar .jar-lid{
  height:34px;
  border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg,#E4B694 0%, #C08A63 55%, #A96F49 100%);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.55);
}
.vessel--jar .jar-body{
  height:84px;
  margin-top:2px;
  border-radius:8px 8px 22px 22px;
  background:linear-gradient(180deg,#FFF9F3 0%, #F4E3D3 70%, #E8CFBB 100%);
  display:grid;
  place-items:center;
  box-shadow:inset 0 -6px 10px rgba(105,72,52,.10), inset 0 3px 4px rgba(255,255,255,.9);
}

/* dropper bottle */
.vessel--dropper{
  left:50%; bottom:calc(9% + 46px);
  transform:translateX(14%);
  width:86px; height:196px;
  z-index:2;
}
.vessel--dropper .drop-top{
  width:26px; height:30px;
  margin-inline:auto;
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,#F7EBDF, #D9BFA8);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.6);
}
.vessel--dropper .drop-neck{
  width:38px; height:22px;
  margin:-2px auto 0;
  border-radius:4px;
  background:linear-gradient(180deg,#D9A47F, #B87F58);
}
.vessel--dropper .drop-body{
  height:142px;
  margin-top:2px;
  border-radius:12px 12px 26px 26px;
  background:linear-gradient(160deg, rgba(255,246,238,.92) 0%, rgba(238,196,168,.9) 55%, rgba(214,159,124,.95) 100%);
  display:grid;
  place-items:center;
  box-shadow:inset 0 4px 6px rgba(255,255,255,.75), inset 0 -8px 12px rgba(150,96,64,.22);
}

/* mini tube behind */
.vessel--tube{
  left:50%; bottom:calc(9% + 46px);
  transform:translateX(-158%) rotate(-4deg);
  width:54px; height:136px;
  z-index:0;
  opacity:.92;
}
.vessel--tube .tube-cap{
  width:34px; height:20px;
  margin-inline:auto;
  border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,#E9C1A0,#C68F66);
}
.vessel--tube .tube-body{
  height:112px;
  margin-top:2px;
  border-radius:10px 10px 16px 16px;
  background:linear-gradient(180deg,#FAF0E6,#EBD3BF);
  box-shadow:inset 0 3px 4px rgba(255,255,255,.8), inset 0 -6px 8px rgba(105,72,52,.12);
}

.vessel__label{
  width:72%;
  text-align:center;
  font-size:.44rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#8A6046;
  border-top:1px solid rgba(138,96,70,.4);
  border-bottom:1px solid rgba(138,96,70,.4);
  padding-block:.45rem;
}
.vessel__label strong{
  display:block;
  font-family:var(--font-display);
  font-size:.72rem;
  letter-spacing:.12em;
  font-weight:600;
  margin-bottom:.15rem;
}
.vessel--dropper .vessel__label{ color:#FFF6EE; border-color:rgba(255,246,238,.55); }

/* petals */
.petal{
  position:absolute;
  width:46px; height:46px;
  background:radial-gradient(circle at 30% 30%, #F7D9C6, #E8B394);
  border-radius:72% 28% 68% 32% / 60% 40% 60% 40%;
  opacity:.85;
  animation:float 9s ease-in-out infinite;
}
.petal--1{ top:8%; right:12%; }
.petal--2{ top:38%; left:2%; width:32px; height:32px; animation-delay:-3s; }
.petal--3{ bottom:12%; right:4%; width:38px; height:38px; animation-delay:-6s; }
.petal--4{ top:2%; left:26%; width:24px; height:24px; opacity:.6; animation-delay:-1.5s; }
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-16px) rotate(9deg); }
}

.hero__chip{
  position:absolute;
  display:flex;
  align-items:center;
  gap:.6rem;
  background:rgba(255,253,251,.92);
  backdrop-filter:blur(6px);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:.55rem 1rem .55rem .6rem;
  box-shadow:var(--shadow-card);
  font-size:.76rem;
  font-weight:600;
  z-index:3;
}
.hero__chip svg{ width:26px; height:26px; color:var(--rose-deep); background:var(--blush); border-radius:50%; padding:5px; }
.hero__chip--1{ top:16%; left:0; animation:float 11s ease-in-out infinite; }
.hero__chip--2{ bottom:20%; right:0; animation:float 10s ease-in-out infinite; animation-delay:-4s; }

/* ==========================================================================
   Trust badges row
   ========================================================================== */
.trustrow{
  border-block:1px solid var(--line);
  background:var(--white);
}
.trustrow__inner{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:1rem;
  padding-block:1.6rem;
}
.trustrow__item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--taupe-soft);
  text-align:center;
}
.trustrow__item svg{ width:20px; height:20px; color:var(--rose-deep); flex-shrink:0; }

/* ==========================================================================
   Benefits
   ========================================================================== */
.benefits__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.4rem;
}
.benefit{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:2rem 1.6rem;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.benefit:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lift);
  border-color:transparent;
}
.benefit__icon{
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:16px;
  background:linear-gradient(140deg, var(--blush), var(--cream));
  color:var(--rose-deep);
  margin-bottom:1.2rem;
}
.benefit__icon svg{ width:24px; height:24px; }
.benefit h3{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:600;
  margin-bottom:.5rem;
}
.benefit p{ font-size:var(--fs-sm); color:var(--taupe-soft); }

/* ==========================================================================
   Products
   ========================================================================== */
.products__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:3rem;
}
.products__head .section-head{ margin-bottom:0; }
.products__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.6rem;
}
.product{
  background:var(--white);
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  display:flex;
  flex-direction:column;
}
.product:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lift); }
.product__media{
  position:relative;
  height:250px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.product__media::after{
  content:"";
  position:absolute;
  left:50%; bottom:26px;
  transform:translateX(-50%);
  width:120px; height:16px;
  border-radius:50%;
  background:rgba(105,72,52,.16);
  filter:blur(6px);
}
.product__badge{
  position:absolute;
  top:14px; left:14px;
  z-index:2;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--rose-deep);
  color:#fff;
  padding:.35rem .8rem;
  border-radius:var(--radius-pill);
}
.product__badge--new{ background:var(--taupe); }
.product__quick{
  position:absolute;
  right:14px; top:14px;
  z-index:2;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--white);
  display:grid; place-items:center;
  color:var(--taupe);
  box-shadow:var(--shadow-card);
  opacity:0;
  transform:translateY(-6px);
  transition:all .35s var(--ease);
}
.product__quick svg{ width:17px; height:17px; }
.product:hover .product__quick{ opacity:1; transform:none; }
.product__quick:hover{ color:var(--rose-deep); }

/* product mini vessel art */
.pv{
  position:relative;
  z-index:1;
  transition:transform .5s var(--ease);
}
.product:hover .pv{ transform:translateY(-6px) scale(1.03); }
.pv__label{
  position:absolute;
  left:50%; transform:translateX(-50%);
  text-align:center;
  font-size:.4rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:#8A6046;
  width:70%;
  border-block:1px solid rgba(138,96,70,.35);
  padding-block:.3rem;
}
.pv__label strong{
  display:block;
  font-family:var(--font-display);
  font-size:.6rem;
  letter-spacing:.1em;
  margin-bottom:.1rem;
}

.pv--jar{ width:120px; height:104px; }
.pv--jar .a{ height:30px; border-radius:9px 9px 3px 3px; background:linear-gradient(180deg,#E4B694,#A96F49); }
.pv--jar .b{ height:72px; margin-top:2px; border-radius:7px 7px 20px 20px; background:linear-gradient(180deg,#FFF9F3,#E8CFBB); }
.pv--jar .pv__label{ top:52px; }

.pv--dropper{ width:70px; height:168px; }
.pv--dropper .a{ width:22px; height:26px; margin-inline:auto; border-radius:7px 7px 2px 2px; background:linear-gradient(180deg,#F7EBDF,#D9BFA8); }
.pv--dropper .n{ width:32px; height:18px; margin:-2px auto 0; border-radius:4px; background:linear-gradient(180deg,#D9A47F,#B87F58); }
.pv--dropper .b{ height:122px; margin-top:2px; border-radius:10px 10px 22px 22px; background:linear-gradient(160deg,rgba(255,246,238,.92),rgba(214,159,124,.95)); }
.pv--dropper .pv__label{ top:86px; color:#FFF6EE; border-color:rgba(255,246,238,.5); }

.pv--pump{ width:74px; height:176px; }
.pv--pump .a{ width:16px; height:24px; margin-left:29px; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,#C89A76,#A97A54); position:relative; }
.pv--pump .a::before{ content:""; position:absolute; top:0; left:12px; width:22px; height:9px; border-radius:3px; background:linear-gradient(180deg,#C89A76,#B08258); }
.pv--pump .b{ height:146px; margin-top:4px; border-radius:10px 10px 18px 18px; background:linear-gradient(170deg,#F8ECE0,#E3C3A8); }
.pv--pump .pv__label{ top:96px; }

.pv--tube{ width:62px; height:150px; }
.pv--tube .a{ width:38px; height:22px; margin-inline:auto; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#E9C1A0,#C68F66); }
.pv--tube .b{ height:122px; margin-top:2px; border-radius:9px 9px 15px 15px; background:linear-gradient(180deg,#FAF0E6,#EBD3BF); }
.pv--tube .pv__label{ top:78px; }

.pv--mask{ width:118px; height:96px; }
.pv--mask .a{ height:26px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,#6B4A36,#4E3324); }
.pv--mask .b{ height:66px; margin-top:2px; border-radius:6px 6px 18px 18px; background:linear-gradient(180deg,#8A6046,#6B452F); }
.pv--mask .pv__label{ top:46px; color:#F6E3D2; border-color:rgba(246,227,210,.4); }

.pv--spf{ width:66px; height:158px; }
.pv--spf .a{ width:44px; height:18px; margin-inline:auto; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#F3E0CE,#D9BB9E); }
.pv--spf .b{ height:134px; margin-top:2px; border-radius:9px 9px 14px 14px; background:linear-gradient(170deg,#FFFDF9,#F0DEC9); }
.pv--spf .pv__label{ top:80px; }

/* media backgrounds vary per card */
.product__media--1{ background:linear-gradient(150deg,#F6EAE0,#EFD6C2); }
.product__media--2{ background:linear-gradient(150deg,#F3E3D8,#E7C4AC); }
.product__media--3{ background:linear-gradient(150deg,#F8F0E7,#EBD8C6); }
.product__media--4{ background:linear-gradient(150deg,#F5E7D8,#EFCFAF); }
.product__media--5{ background:linear-gradient(150deg,#EFDECF,#DDBBA0); }
.product__media--6{ background:linear-gradient(150deg,#FAF3EA,#F0DFC8); }

.product__body{
  padding:1.5rem 1.5rem 1.6rem;
  display:flex;
  flex-direction:column;
  gap:.45rem;
  flex:1;
}
.product__rating{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.74rem;
  color:var(--taupe-faint);
}
.product__stars{ color:var(--rosegold); letter-spacing:2px; font-size:.72rem; }
.product__name{
  font-family:var(--font-display);
  font-size:1.22rem;
  font-weight:600;
}
.product__desc{ font-size:var(--fs-sm); color:var(--taupe-soft); }
.product__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:1rem;
}
.product__price{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:600;
}
.product__price s{
  font-size:.85rem;
  color:var(--taupe-faint);
  margin-right:.4rem;
  font-weight:400;
}
.add-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.6rem 1.2rem;
  border-radius:var(--radius-pill);
  border:1px solid var(--rose-deep);
  color:var(--rose-deep);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.04em;
  transition:all .3s var(--ease);
}
.add-btn svg{ width:14px; height:14px; }
.add-btn:hover{ background:var(--rose-deep); color:#fff; }
.add-btn.is-added{ background:var(--rose-deep); color:#fff; }

/* ==========================================================================
   Results / before-after
   ========================================================================== */
.results__grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:4rem;
  align-items:center;
}
.results__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:2.2rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}
.results__stat strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.9rem;
  font-weight:600;
  color:var(--rose-deep);
}
.results__stat span{ font-size:.78rem; color:var(--taupe-soft); }
.results__cta{ margin-top:2.4rem; }

.ba{
  position:relative;
  height:440px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  user-select:none;
  touch-action:none;
  cursor:ew-resize;
}
.ba__side{ position:absolute; inset:0; }
.ba__side--before{
  background:
    radial-gradient(120px 90px at 30% 35%, rgba(150,96,70,.28), transparent 70%),
    radial-gradient(90px 70px at 62% 60%, rgba(150,96,70,.22), transparent 70%),
    radial-gradient(60px 50px at 45% 78%, rgba(150,96,70,.2), transparent 70%),
    linear-gradient(140deg,#E3BFA4,#C99873);
}
.ba__side--after{
  background:
    radial-gradient(240px 200px at 45% 40%, rgba(255,244,232,.75), transparent 75%),
    linear-gradient(140deg,#F5DDC8,#E5B996);
  clip-path:inset(0 0 0 var(--ba-x, 50%));
}
.ba__tag{
  position:absolute;
  top:18px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:.4rem .95rem;
  border-radius:var(--radius-pill);
  background:rgba(67,51,42,.5);
  color:#FFF6EE;
  backdrop-filter:blur(4px);
}
.ba__tag--before{ left:18px; }
.ba__tag--after{ right:18px; background:rgba(255,253,251,.85); color:var(--rose-deep); }
.ba__handle{
  position:absolute;
  top:0; bottom:0;
  left:var(--ba-x, 50%);
  width:2px;
  background:#FFFDFB;
  box-shadow:0 0 0 1px rgba(105,72,52,.15);
}
.ba__handle::after{
  content:"⟨ ⟩";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:46px; height:46px;
  border-radius:50%;
  background:#FFFDFB;
  color:var(--rose-deep);
  display:grid; place-items:center;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:-1px;
  box-shadow:var(--shadow-card);
}
.ba__hint{
  position:absolute;
  bottom:16px; left:50%;
  transform:translateX(-50%);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#FFF6EE;
  background:rgba(67,51,42,.45);
  padding:.35rem .9rem;
  border-radius:var(--radius-pill);
  backdrop-filter:blur(4px);
  pointer-events:none;
}

/* ==========================================================================
   Ingredients
   ========================================================================== */
.ingredients__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
}
.ingredient{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1.9rem 1.7rem;
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ingredient:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.ingredient::before{
  content:"";
  position:absolute;
  top:-30px; right:-30px;
  width:110px; height:110px;
  border-radius:72% 28% 68% 32% / 60% 40% 60% 40%;
  background:linear-gradient(140deg, var(--blush), var(--peach));
  opacity:.55;
  transition:transform .5s var(--ease);
}
.ingredient:hover::before{ transform:scale(1.18) rotate(10deg); }
.ingredient__pct{
  position:relative;
  font-family:var(--font-display);
  font-size:.86rem;
  font-weight:600;
  color:var(--rose-deep);
  letter-spacing:.06em;
}
.ingredient h3{
  position:relative;
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:600;
  margin:.4rem 0 .55rem;
}
.ingredient p{ position:relative; font-size:var(--fs-sm); color:var(--taupe-soft); }
.ingredient__for{
  position:relative;
  display:inline-block;
  margin-top:1rem;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rose-deep);
  background:var(--cream);
  padding:.35rem .85rem;
  border-radius:var(--radius-pill);
}

/* ==========================================================================
   Routine
   ========================================================================== */
.routine__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.4rem;
  counter-reset:step;
}
.step{
  position:relative;
  background:var(--white);
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  padding:2.1rem 1.6rem 1.9rem;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.step:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.step::before{
  counter-increment:step;
  content:"0" counter(step);
  font-family:var(--font-display);
  font-size:2.4rem;
  font-weight:500;
  font-style:italic;
  color:var(--peach);
  line-height:1;
  display:block;
  margin-bottom:1rem;
}
.step h3{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:600;
  margin-bottom:.5rem;
}
.step p{ font-size:var(--fs-sm); color:var(--taupe-soft); }
.step a{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-top:1.1rem;
  font-size:.8rem;
  font-weight:600;
  color:var(--rose-deep);
}
.step a svg{ width:13px; height:13px; transition:transform .3s var(--ease); }
.step a:hover svg{ transform:translateX(3px); }

/* ==========================================================================
   Promise / why StorePeak
   ========================================================================== */
.promise{
  background:
    radial-gradient(700px 420px at 12% 20%, rgba(233,201,178,.5), transparent 70%),
    linear-gradient(160deg, var(--cream), var(--blush));
}
.promise__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}
.promise__list{ display:grid; gap:1.1rem; margin-top:2rem; }
.promise__item{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  background:rgba(255,253,251,.7);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:1.1rem 1.3rem;
  backdrop-filter:blur(4px);
}
.promise__item svg{
  width:22px; height:22px;
  flex-shrink:0;
  color:var(--rose-deep);
  margin-top:2px;
}
.promise__item strong{ display:block; font-weight:600; }
.promise__item span{ font-size:var(--fs-sm); color:var(--taupe-soft); }

.promise__visual{
  position:relative;
  display:grid;
  place-items:center;
  min-height:420px;
}
.promise__ring{
  width:min(100%, 380px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #FFF7EF, #F0D9C4 70%, #E2C0A4);
  box-shadow:var(--shadow-soft), inset 0 6px 20px rgba(255,255,255,.8);
  display:grid;
  place-items:center;
  text-align:center;
  padding:3rem;
}
.promise__ring::before{
  content:"";
  position:absolute;
  width:min(112%, 430px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px dashed rgba(169,106,80,.4);
  animation:spin 70s linear infinite;
}
.promise__ring-num{
  font-family:var(--font-display);
  font-size:3.4rem;
  font-weight:550;
  color:var(--rose-deep);
  line-height:1;
}
.promise__ring-label{
  margin-top:.6rem;
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--taupe-soft);
}

/* ==========================================================================
   Stats strip
   ========================================================================== */
.stats{
  background:var(--taupe);
  color:#F4E9DF;
}
.stats__inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  padding-block:3.2rem;
}
.stat{ text-align:center; }
.stat strong{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.8rem, 3vw, 2.5rem);
  font-weight:550;
  color:#EFC7AC;
}
.stat span{
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.75;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testi__viewport{ overflow:hidden; }
.testi__track{
  display:flex;
  transition:transform .6s var(--ease);
}
.testi__slide{
  flex:0 0 33.3333%;
  padding:.5rem .7rem;
}
.review{
  height:100%;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1.9rem 1.7rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.review__stars{ color:var(--rosegold); letter-spacing:3px; font-size:.85rem; }
.review__text{ font-size:.95rem; color:var(--taupe-soft); flex:1; }
.review__meta{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
}
.review__avatar{
  width:42px; height:42px;
  border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display);
  font-weight:600;
  color:#fff;
  font-size:.9rem;
}
.review__avatar--1{ background:linear-gradient(135deg,#D8A88E,#A9714F); }
.review__avatar--2{ background:linear-gradient(135deg,#C68F6C,#8F5E3E); }
.review__avatar--3{ background:linear-gradient(135deg,#E3B79A,#BC8560); }
.review__avatar--4{ background:linear-gradient(135deg,#B9846B,#8A5A41); }
.review__avatar--5{ background:linear-gradient(135deg,#E9C4A8,#C29470); }
.review__name{ font-weight:600; font-size:.92rem; }
.review__name span{
  display:block;
  font-weight:400;
  font-size:.74rem;
  color:var(--taupe-faint);
}
.review__verified{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-size:.68rem;
  font-weight:600;
  color:var(--rose-deep);
}
.review__verified svg{ width:13px; height:13px; }

.testi__nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.4rem;
  margin-top:2.4rem;
}
.testi__arrow{
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--white);
  display:grid; place-items:center;
  color:var(--taupe);
  transition:all .3s var(--ease);
}
.testi__arrow:hover{ background:var(--rose-deep); border-color:var(--rose-deep); color:#fff; }
.testi__arrow svg{ width:17px; height:17px; }
.testi__dots{ display:flex; gap:.5rem; }
.testi__dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--peach);
  transition:all .3s var(--ease);
}
.testi__dot.is-active{ width:26px; border-radius:var(--radius-pill); background:var(--rose-deep); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ max-width:760px; margin-inline:auto; }
.faq__item{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  margin-bottom:.9rem;
  overflow:hidden;
  transition:box-shadow .3s var(--ease);
}
.faq__item.is-open{ box-shadow:var(--shadow-card); }
.faq__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  text-align:left;
  padding:1.25rem 1.5rem;
  font-weight:600;
  font-size:1rem;
}
.faq__q svg{
  width:18px; height:18px;
  flex-shrink:0;
  color:var(--rose-deep);
  transition:transform .35s var(--ease);
}
.faq__item.is-open .faq__q svg{ transform:rotate(45deg); }
.faq__a{
  max-height:0;
  overflow:hidden;
  transition:max-height .45s var(--ease);
}
.faq__a p{
  padding:0 1.5rem 1.4rem;
  font-size:var(--fs-sm);
  color:var(--taupe-soft);
}

/* ==========================================================================
   Newsletter
   ========================================================================== */
.newsletter{
  background:
    radial-gradient(600px 380px at 85% 30%, rgba(233,201,178,.55), transparent 70%),
    linear-gradient(140deg, var(--blush), var(--cream));
}
.newsletter__card{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:3rem;
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:clamp(2.2rem, 5vw, 4rem);
  box-shadow:var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
.newsletter__card::after{
  content:"";
  position:absolute;
  right:-70px; bottom:-70px;
  width:240px; height:240px;
  border-radius:72% 28% 68% 32% / 60% 40% 60% 40%;
  background:linear-gradient(140deg, var(--blush), var(--peach));
  opacity:.5;
}
.newsletter h2{
  font-family:var(--font-display);
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  font-weight:500;
  line-height:1.15;
}
.newsletter h2 em{ font-style:italic; color:var(--rose-deep); }
.newsletter p{ margin-top:.9rem; color:var(--taupe-soft); max-width:44ch; }
.newsletter__form{
  position:relative;
  z-index:1;
  display:flex;
  gap:.6rem;
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:.4rem .4rem .4rem 1.4rem;
}
.newsletter__form input{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  outline:none;
  font-size:.95rem;
}
.newsletter__form input::placeholder{ color:var(--taupe-faint); }
.newsletter__note{
  margin-top:.9rem;
  font-size:.75rem;
  color:var(--taupe-faint);
}
.newsletter__success{
  display:none;
  align-items:center;
  gap:.6rem;
  color:var(--rose-deep);
  font-weight:600;
  background:var(--cream);
  border-radius:var(--radius-pill);
  padding:1rem 1.5rem;
}
.newsletter__success svg{ width:20px; height:20px; }
.newsletter__wrap.is-done .newsletter__form,
.newsletter__wrap.is-done .newsletter__note{ display:none; }
.newsletter__wrap.is-done .newsletter__success{ display:inline-flex; }

/* ==========================================================================
   Instagram
   ========================================================================== */
.insta__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1rem;
}
.insta__tile{
  position:relative;
  aspect-ratio:1;
  border-radius:var(--radius-md);
  overflow:hidden;
  display:grid;
  place-items:center;
}
.insta__tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(67,51,42,0);
  transition:background .35s;
}
.insta__tile svg{
  position:relative;
  z-index:1;
  width:26px; height:26px;
  color:#FFF6EE;
  opacity:0;
  transform:scale(.7);
  transition:all .35s var(--ease);
}
.insta__tile:hover::after{ background:rgba(67,51,42,.35); }
.insta__tile:hover svg{ opacity:1; transform:scale(1); }
.insta__tile--1{ background:linear-gradient(140deg,#F2D9C4,#DCAE88); }
.insta__tile--2{ background:radial-gradient(circle at 35% 30%, #FBEFE3, #E2BB98); }
.insta__tile--3{ background:linear-gradient(200deg,#EFD3BC,#C99873); }
.insta__tile--4{ background:radial-gradient(circle at 70% 65%, #F7E6D4, #D9AF8B); }
.insta__tile--5{ background:linear-gradient(160deg,#F6E3D0,#E0B18B); }
.insta__tile--6{ background:radial-gradient(circle at 50% 40%, #FAF0E4, #E7C3A0); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  background:var(--taupe);
  color:#D9CBBF;
}
.footer__top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:3rem;
  padding-block:4.5rem 3rem;
}
.footer__brand .logo__word{ color:#F4E9DF; }
.footer__brand .logo__mark{ color:#EFC7AC; }
.footer__brand .logo__tag{ color:#9E8B7C; }
.footer__brand p{
  margin-top:1.2rem;
  font-size:var(--fs-sm);
  max-width:34ch;
  color:#B8A697;
}
.footer__social{ display:flex; gap:.7rem; margin-top:1.6rem; }
.footer__social a{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(244,233,223,.2);
  display:grid; place-items:center;
  color:#E8D9CB;
  transition:all .3s var(--ease);
}
.footer__social a:hover{ background:#EFC7AC; border-color:#EFC7AC; color:var(--taupe); transform:translateY(-2px); }
.footer__social svg{ width:16px; height:16px; }
.footer h4{
  font-family:var(--font-display);
  font-size:1.02rem;
  font-weight:600;
  color:#F4E9DF;
  margin-bottom:1.3rem;
}
.footer__links li{ margin-bottom:.7rem; }
.footer__links a{
  font-size:var(--fs-sm);
  color:#B8A697;
  transition:color .3s, padding-left .3s var(--ease);
}
.footer__links a:hover{ color:#EFC7AC; padding-left:5px; }
.footer__contact li{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  margin-bottom:.9rem;
  font-size:var(--fs-sm);
  color:#B8A697;
}
.footer__contact svg{ width:16px; height:16px; flex-shrink:0; margin-top:3px; color:#EFC7AC; }
.footer__trustline{
  display:flex;
  flex-wrap:wrap;
  gap:1.6rem;
  padding-block:1.4rem;
  border-block:1px solid rgba(244,233,223,.12);
  font-size:.78rem;
  color:#B8A697;
}
.footer__trustline span{ display:inline-flex; align-items:center; gap:.5rem; }
.footer__trustline svg{ width:15px; height:15px; color:#EFC7AC; }
.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  padding-block:1.6rem;
  font-size:.78rem;
  color:#9E8B7C;
}
.payments{ display:flex; gap:.55rem; }
.payments span{
  display:grid;
  place-items:center;
  width:52px; height:32px;
  border-radius:6px;
  background:rgba(244,233,223,.08);
  border:1px solid rgba(244,233,223,.14);
}
.payments svg{ width:34px; height:16px; }

/* Toast */
.toast{
  position:fixed;
  bottom:24px; left:50%;
  transform:translate(-50%, 20px);
  background:var(--taupe);
  color:#F4E9DF;
  padding:.85rem 1.5rem;
  border-radius:var(--radius-pill);
  font-size:.88rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  box-shadow:var(--shadow-lift);
  opacity:0;
  pointer-events:none;
  transition:all .4s var(--ease);
  z-index:80;
}
.toast.is-show{ opacity:1; transform:translate(-50%, 0); }
.toast svg{ width:17px; height:17px; color:#EFC7AC; }

/* Back to top */
.to-top{
  position:fixed;
  right:22px; bottom:22px;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--rose-deep);
  color:#fff;
  display:grid; place-items:center;
  box-shadow:var(--shadow-lift);
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:all .4s var(--ease);
  z-index:70;
}
.to-top.is-show{ opacity:1; pointer-events:auto; transform:none; }
.to-top svg{ width:18px; height:18px; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--rose-deep);
  outline-offset:3px;
  border-radius:4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px){
  .products__grid, .ingredients__grid{ grid-template-columns:repeat(2,1fr); }
  .benefits__grid, .routine__grid{ grid-template-columns:repeat(2,1fr); }
  .trustrow__inner{ grid-template-columns:repeat(3,1fr); row-gap:1.4rem; }
  .testi__slide{ flex-basis:50%; }
  .insta__grid{ grid-template-columns:repeat(3,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 920px){
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__text{ margin-inline:auto; }
  .hero__cta, .hero__proof{ justify-content:center; }
  .hero__visual{ order:-1; height:clamp(360px, 60vw, 460px); }
  .results__grid, .promise__grid, .newsletter__card{ grid-template-columns:1fr; }
  .stats__inner{ grid-template-columns:repeat(2,1fr); }
  .products__head{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 640px){
  .products__grid, .ingredients__grid, .benefits__grid, .routine__grid{ grid-template-columns:1fr; }
  .trustrow__inner{ grid-template-columns:repeat(2,1fr); }
  .testi__slide{ flex-basis:100%; }
  .insta__grid{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr; gap:2.4rem; }
  .newsletter__form{ flex-direction:column; border-radius:var(--radius-lg); padding:.6rem; }
  .newsletter__form input{ padding:.7rem 1rem; }
  .ba{ height:340px; }
  .hero__chip--1{ left:-6px; }
  .hero__chip--2{ right:-6px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}


/* ==========================================================================
   WORDPRESS / ELEMENTOR ADAPTATION LAYER — StorePeak
   Keeps the original design system intact inside Elementor containers.
   ========================================================================== */

/* Neutralise Elementor container defaults so the StorePeak classes rule */
.e-con.sp-con{
  --display:block;
  --padding-block-start:0;--padding-block-end:0;
  --padding-inline-start:0;--padding-inline-end:0;
  --gap:0;--row-gap:0;--column-gap:0;
  --margin-block-start:0;--margin-block-end:0;
  min-height:0;
}
.elementor-widget:not(:last-child){ margin-block-end:0; }
.elementor p:last-child{ margin-bottom:0; }

/* Reveal-on-scroll: container-level delays (data-attrs are kept on inner markup) */
.sp-d1{ transition-delay:.12s; }
.sp-d2{ transition-delay:.24s; }
.sp-d3{ transition-delay:.36s; }
/* Never hide content if JS fails to load */
body:not(.sp-js) .reveal{ opacity:1 !important; transform:none !important; }

/* Section-head variants */
.sp-mb0.section-head{ margin-bottom:0; }

/* Announcement rotator: stack widget wrappers in the same grid cell */
.e-con.announce__track > .elementor-widget{ grid-area:1/1; }

/* WordPress menu mapping (Appearance > Menus) */
.nav__list{ margin:0; padding:0; }
.nav__list li{ list-style:none; margin:0; }
.nav .current-menu-item > .nav__link,
.nav .current_page_item > .nav__link{ color:var(--taupe); }
.nav .current-menu-item > .nav__link::after,
.nav .current_page_item > .nav__link::after{ transform:scaleX(1); }

/* Sticky header under the WP admin bar */
.admin-bar .header{ top:32px; }
@media (max-width:782px){ .admin-bar .header{ top:46px; } }

/* Astra / theme resets inside StorePeak sections */
.sp-con h1,.sp-con h2,.sp-con h3,.sp-con h4{ margin:0; }
.sp-con ul{ margin:0; padding:0; }
.footer .elementor-widget ul{ list-style:none; }