/* ============================================================
   CLOUDY — demo store design system (real brand: light + Cloudy blue)
   Concept redesign by Slice of the Pie. Uses Cloudy's real colorways.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root{
  --cloud:#FBFCFD; --sky-panel:#EAF2F8; --card:#FFFFFF;
  --ink:#16283B; --ink-soft:#4A5D70; --muted:#7C8A98;
  --blue:#2E6CA6; --blue-dk:#245688; --blue-lt:#BFDDF0; --blue-wash:#DCEBF6;
  --boreal:#33564A; --menthe:#A8D5BA; --argile:#C7B7A0; --rouge:#C1443A;
  --line:#DCE6EE; --line-soft:#EDF3F8;
  --ok:#2f8f5b; --star:#f5a623;
  --shadow-sm:0 1px 2px rgba(22,40,59,.06),0 2px 8px rgba(22,40,59,.05);
  --shadow-md:0 6px 24px rgba(22,40,59,.10);
  --shadow-lg:0 20px 60px rgba(22,40,59,.16);
  --r:14px; --r-lg:22px; --maxw:1200px;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Poppins',var(--sans);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cloud);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;margin:0;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(2.2rem,5.5vw,4rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{margin:0 0 1rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue)}
.center{text-align:center}
.muted{color:var(--muted)}

/* ---------- Slice ribbon (connects store to the pitch) ---------- */
.slice-ribbon{background:linear-gradient(90deg,#2B2016,#3a2c1d);color:#F7F1E7;
  font-family:var(--sans);font-size:.82rem;font-weight:500;position:relative;z-index:60}
.slice-ribbon .wrap{display:flex;align-items:center;gap:14px;justify-content:center;
  flex-wrap:wrap;padding-top:9px;padding-bottom:9px;text-align:center}
.slice-ribbon strong{color:#FC832B;font-weight:700}
.slice-ribbon a{border-bottom:1px solid rgba(252,131,43,.5);padding-bottom:1px;white-space:nowrap}
.slice-ribbon a:hover{color:#FC832B}
.slice-ribbon .dot{opacity:.4}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(251,252,253,.86);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:24px;height:70px}
.hdr__logo{height:34px;width:auto}
.nav{display:flex;gap:26px;margin-left:8px;font-weight:500;font-size:.94rem}
.nav a{color:var(--ink-soft);position:relative;padding:6px 0}
.nav a:hover{color:var(--blue)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--blue);transition:width .25s}
.nav a:hover::after{width:100%}
.hdr__right{margin-left:auto;display:flex;align-items:center;gap:16px}
.lang{font-size:.82rem;font-weight:600;color:var(--muted);letter-spacing:.04em}
.lang b{color:var(--ink)}
.icon-btn{position:relative;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.9rem;
  color:var(--ink);cursor:pointer}
.cart-count{background:var(--blue);color:#fff;border-radius:20px;font-size:.72rem;font-weight:700;
  min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 6px}

/* announcement / free-ship bar */
.ship-bar{background:var(--boreal);color:#eaf5ee;text-align:center;font-size:.8rem;
  font-weight:500;padding:7px 12px;letter-spacing:.02em}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.98rem;border:none;border-radius:100px;
  padding:15px 30px;transition:transform .18s,box-shadow .2s,background .2s;text-align:center}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(46,108,166,.28)}
.btn--primary:hover{background:var(--blue-dk);box-shadow:0 12px 30px rgba(46,108,166,.36);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#0f1d2c;transform:translateY(-2px)}
.btn--block{width:100%}
.btn--lg{padding:17px 34px;font-size:1.05rem}

/* ---------- Stars / rating ---------- */
.stars{--pct:100%;display:inline-block;font-size:1rem;line-height:1;position:relative;
  font-family:Arial;color:var(--line)}
.stars::before{content:"★★★★★"}
.stars i{position:absolute;left:0;top:0;overflow:hidden;width:var(--pct);color:var(--star)}
.stars i::before{content:"★★★★★"}
.rating-row{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-soft)}

/* ---------- Trust row ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:22px 40px}
.trust__item{display:flex;gap:12px;align-items:center;justify-content:center;text-align:left}
.trust__item svg{flex:none;color:var(--blue)}
.trust__item b{display:block;font-family:var(--display);font-size:.95rem;color:var(--ink)}
.trust__item span{font-size:.8rem;color:var(--muted)}

/* ---------- Product cards / collection grid ---------- */
.grid{display:grid;gap:26px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;position:relative;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.pcard__media{position:relative;aspect-ratio:4/5;background:var(--sky-panel);overflow:hidden}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:opacity .4s,transform .6s}
.pcard__media img.alt{position:absolute;inset:0;opacity:0}
.pcard:hover .pcard__media img.alt{opacity:1}
.pcard:hover .pcard__media img.main{transform:scale(1.04)}
.pcard__badge{position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:100px;z-index:2}
.pcard__badge.sale{background:var(--rouge)}
.pcard__quick{position:absolute;left:12px;right:12px;bottom:12px;transform:translateY(120%);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);opacity:0}
.pcard:hover .pcard__quick{transform:translateY(0);opacity:1}
.pcard__body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard__cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.pcard__name{font-family:var(--display);font-size:1.05rem;font-weight:600}
.pcard__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:8px}
.pcard__price{font-weight:700;font-size:1.05rem}
.swatches{display:flex;gap:6px}
.sw{width:16px;height:16px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px var(--line)}

/* ---------- Sections ---------- */
.section{padding:clamp(56px,8vw,110px) 0}
.section--tight{padding:clamp(40px,5vw,64px) 0}
.section-head{display:flex;flex-direction:column;gap:10px;margin-bottom:40px}
.section-head.center{align-items:center;text-align:center}
.section-head p{max-width:56ch;color:var(--ink-soft)}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:#c3d2e0;padding:60px 0 30px;margin-top:0}
.foot a{color:#c3d2e0}.foot a:hover{color:#fff}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:34px}
.foot h4{color:#fff;font-size:1rem;margin-bottom:14px}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:.9rem}
.foot__news input{width:100%;padding:13px 15px;border-radius:100px;border:1px solid #2c4763;
  background:#0f1d2c;color:#fff;font-family:var(--sans);margin-bottom:10px}
.foot__bar{border-top:1px solid #2c4763;margin-top:40px;padding-top:20px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem;color:#8ea3b8}

/* ============================================================
   PDP-specific: pack/kit toggle, progress bar, sticky ATB
   ============================================================ */
.progress{background:var(--sky-panel);border-radius:100px;height:10px;overflow:hidden;position:relative}
.progress__fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--menthe));width:0;
  border-radius:100px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.ship-note{font-size:.86rem;color:var(--ink-soft);margin:8px 0 0}
.ship-note b{color:var(--boreal)}

.kit{display:grid;gap:12px}
.kit__opt{border:1.6px solid var(--line);border-radius:var(--r);padding:16px 18px;cursor:pointer;
  display:grid;grid-template-columns:22px 1fr auto;gap:14px;align-items:center;transition:border-color .2s,background .2s,box-shadow .2s;position:relative;background:var(--card)}
.kit__opt:hover{border-color:var(--blue-lt)}
.kit__opt.sel{border-color:var(--blue);background:var(--blue-wash);box-shadow:0 0 0 3px rgba(46,108,166,.12)}
.kit__radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);position:relative}
.kit__opt.sel .kit__radio{border-color:var(--blue)}
.kit__opt.sel .kit__radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--blue)}
.kit__label b{font-family:var(--display);font-size:1rem}
.kit__label span{display:block;font-size:.82rem;color:var(--muted)}
.kit__best{position:absolute;top:-11px;right:14px;background:var(--boreal);color:#fff;font-size:.64rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:100px}
.kit__price{text-align:right}
.kit__price b{font-family:var(--display);font-size:1.1rem}
.kit__price s{display:block;font-size:.8rem;color:var(--muted)}
.kit__price em{display:block;font-size:.74rem;color:var(--boreal);font-weight:700;font-style:normal}

.size-row{display:flex;gap:9px;flex-wrap:wrap}
.size{min-width:48px;text-align:center;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;
  cursor:pointer;font-weight:600;font-size:.92rem;transition:.15s;background:#fff}
.size:hover{border-color:var(--blue)}
.size.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.size.oos{opacity:.35;text-decoration:line-through;cursor:not-allowed}

.sticky-atb{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(22,40,59,.12);
  transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1);z-index:55}
.sticky-atb.show{transform:none}
.sticky-atb .wrap{display:flex;align-items:center;gap:16px;padding:12px clamp(18px,4vw,40px)}
.sticky-atb__info{display:flex;flex-direction:column;line-height:1.2}
.sticky-atb__info b{font-family:var(--display)}
.sticky-atb__info span{font-size:.82rem;color:var(--muted)}
.sticky-atb .btn{margin-left:auto}

.counter{font-variant-numeric:tabular-nums}

/* comparison */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.vs__col{padding:26px}
.vs__col--cloudy{background:var(--blue-wash)}
.vs__col h4{margin-bottom:14px;display:flex;align-items:center;gap:8px}
.vs__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;font-size:.92rem}
.vs__col li{display:flex;gap:10px;align-items:flex-start}
.vs__col li svg{flex:none;margin-top:2px}

/* review with photo */
.rev{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:12px}
.rev__ph{aspect-ratio:1;border-radius:12px;object-fit:cover;background:var(--sky-panel)}
.rev__top{display:flex;justify-content:space-between;align-items:center}
.rev__who{font-weight:600;font-size:.92rem}
.rev__v{font-size:.72rem;color:var(--ok);font-weight:600;display:flex;align-items:center;gap:4px}

/* cart drawer/page bits */
.line-item{display:grid;grid-template-columns:88px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-soft);align-items:center}
.line-item img{width:88px;aspect-ratio:4/5;object-fit:cover;border-radius:10px;background:var(--sky-panel)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:100px;overflow:hidden}
.qty button{border:none;background:#fff;width:34px;height:34px;font-size:1.1rem;cursor:pointer;color:var(--ink)}
.qty span{min-width:34px;text-align:center;font-weight:600}
.upsell{display:flex;gap:14px;align-items:center;border:1px dashed var(--blue-lt);background:var(--blue-wash);
  border-radius:var(--r);padding:14px;margin-top:8px}
.upsell img{width:56px;height:56px;object-fit:cover;border-radius:10px}

/* toast */
.toast{position:fixed;top:84px;right:20px;background:var(--ink);color:#fff;padding:14px 18px;border-radius:12px;
  box-shadow:var(--shadow-lg);transform:translateX(130%);transition:transform .4s cubic-bezier(.2,.7,.2,1);z-index:70;
  display:flex;gap:10px;align-items:center;font-weight:500;max-width:320px}
.toast.show{transform:none}

/* pills */
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--sky-panel);border:1px solid var(--line);
  border-radius:100px;padding:7px 14px;font-size:.82rem;font-weight:600;color:var(--ink-soft)}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
  .trust .wrap{grid-template-columns:1fr 1fr;gap:18px 10px}
  .nav{display:none}
}
@media (max-width:680px){
  .grid--4,.grid--3,.grid--2{grid-template-columns:1fr 1fr;gap:14px}
  .vs{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .hdr .wrap{gap:12px}
  .pcard__body{padding:12px 13px 16px}
  h1{font-size:clamp(2rem,9vw,2.6rem)}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .pcard,.btn,.pcard__media img,.pcard__quick,.sticky-atb,.toast,.progress__fill{transition:none!important}
  .parallax{transform:none!important}
  .float{animation:none!important}
}
.parallax{will-change:transform}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.float{animation:floaty 7s ease-in-out infinite}

/* ============================================================
   PREMIUM MOTION LAYER ($50k pass) — all reduced-motion safe
   ============================================================ */
/* scroll progress */
.scrollprog{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--blue),var(--menthe),var(--boreal));transition:width .1s linear}

/* aurora / mesh hero background */
.aurora{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;filter:blur(0)}
.aurora b{position:absolute;border-radius:50%;filter:blur(52px);opacity:.55;mix-blend-mode:multiply}
.aurora b:nth-child(1){width:46vw;height:46vw;background:#8fc4ec;top:-14%;left:-6%;animation:blob 18s ease-in-out infinite}
.aurora b:nth-child(2){width:38vw;height:38vw;background:#bfe3d0;top:8%;right:-8%;animation:blob 22s ease-in-out infinite reverse}
.aurora b:nth-child(3){width:34vw;height:34vw;background:#dfeaf3;bottom:-16%;left:26%;animation:blob 26s ease-in-out infinite}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6%,4%) scale(1.08)}66%{transform:translate(-5%,3%) scale(.95)}}

/* animated gradient word */
.gtext{background:linear-gradient(100deg,var(--blue),#4aa6d8,var(--boreal),var(--blue));
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hue 7s ease infinite}
@keyframes hue{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* headline word rise-in */
.rise{display:inline-block;opacity:0;transform:translateY(120%);}
.rise.in{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rise.w1{transition-delay:.05s}.rise.w2{transition-delay:.14s}.rise.w3{transition-delay:.23s}.rise.w4{transition-delay:.32s}

/* button shimmer */
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-120%}100%{left:130%}}

/* ken burns */
.kb{overflow:hidden}
.kb>img{animation:kenb 16s ease-in-out infinite alternate;will-change:transform}
@keyframes kenb{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.12) translate(-2%,-2%)}}

/* marquee */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--ink);color:#eaf2f8}
.marquee__t{display:inline-block;padding:14px 0;animation:mq 24s linear infinite;font-family:var(--display);font-weight:600;
  font-size:1.05rem;letter-spacing:.02em}
.marquee__t span{padding:0 26px;opacity:.92}
.marquee__t span b{color:var(--menthe)}
@keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Instagram reels wall */
.reels{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.reel{position:relative;aspect-ratio:9/14;border-radius:16px;overflow:hidden;background:var(--sky-panel);
  box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;display:block}
.reel:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lg)}
.reel img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.reel:hover img{transform:scale(1.09)}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,40,59,.05),rgba(22,40,59,.5))}
.reel__play{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.reel__play span{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .3s}
.reel:hover .reel__play span{transform:scale(1.12)}
.reel__tag{position:absolute;left:10px;bottom:10px;z-index:2;color:#fff;font-size:.78rem;font-weight:600;
  display:flex;align-items:center;gap:6px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.ig-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.ig-handle{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:1.15rem}
.ig-handle svg{color:#E1306C}

/* Brand ambassador band */
.amb{position:relative;border-radius:var(--r-lg);overflow:hidden;padding:clamp(34px,5vw,64px);
  background:linear-gradient(135deg,#16283B,#245688 55%,#33564A);color:#eaf2f8;text-align:center;isolation:isolate}
.amb .aurora b{opacity:.35}
.amb h2{color:#fff}
.amb p{color:#cfe0ee;max-width:52ch;margin:12px auto 26px}
.amb .btn--primary{background:#fff;color:var(--ink)}
.amb .btn--primary:hover{background:#eaf2f8}
.amb__perks{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:22px;font-size:.86rem;color:#bcd2e6}
.amb__perks span{display:inline-flex;align-items:center;gap:7px}

@media(max-width:960px){.reels{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.reels{grid-template-columns:repeat(2,1fr)}}

@media(prefers-reduced-motion:reduce){
  .aurora b,.gtext,.shine::after,.kb>img,.marquee__t{animation:none!important}
  .rise{opacity:1!important;transform:none!important;transition:none!important}
  .gtext{color:var(--blue)}
}