/** Shopify CDN: Minification failed

Line 1025:19 Unexpected "="
Line 1026:2 Expected identifier but found "5"
Line 1221:1 Unexpected ";"
Line 1226:21 Unexpected ";"
Line 1229:8 Expected ":"
Line 1230:10 Expected ":"
Line 1231:4 Expected ":"
Line 1232:10 Expected ":"
Line 1235:9 Unexpected "startRoutine("
Line 1236:9 Expected ":"
... and 61 more hidden warnings

**/
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
  --white:#FFFFFF;--off:#F2FAF8;
  --teal:#2A6E80;--teal-d:#1F5262;--teal-p:#E0F2F7;
  --orange:#C8622A;--orange-p:#FDF0E8;
  --magenta:#A0267A;--magenta-p:#FAE8F4;
  --purple:#6A2898;--purple-p:#EFE6FA;
  --lime:#7AAA20;--lime-p:#F0F7E0;
  --ink:#1A1A1A;--ink-soft:#4A4A4A;--mist:#8AABB0;--line:#D0E8EC;
  --t:0.55s cubic-bezier(.77,0,.18,1);--t-fast:0.3s cubic-bezier(.77,0,.18,1);
  /* map old rose vars to new palette for compatibility */
  --rose:#A0267A;--rose-d:#2A6E80;--rose-p:#E0F2F7;
}
body{padding-top:0;font-family:'Satoshi',sans-serif;background:var(--off);color:var(--ink);overflow-x:hidden;cursor:auto;-webkit-font-smoothing:antialiased;}
a,button,[role="button"],[onclick]{cursor:pointer;}

/* PAGE TRANSITION */
.page-fade{position:fixed;inset:0;background:var(--white);z-index:99998;pointer-events:none;opacity:0;transition:opacity .5s ease;}
.page-fade.in{opacity:1;}

/* CURSOR */
#cur{position:fixed;z-index:99999;pointer-events:none;top:0;left:0;}
.cur-dot{position:absolute;top:0;left:0;width:6px;height:6px;background:var(--teal);border-radius:50%;transform:translate(-50%,-50%);transition:width .2s,height .2s,opacity .2s;will-change:transform;}
.cur-ring{position:absolute;top:0;left:0;width:40px;height:40px;border:1px solid rgba(42,110,128,.45);border-radius:50%;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s;will-change:transform;}
body.c-hover .cur-dot{opacity:0;}
body.c-hover .cur-ring{width:56px;height:56px;border-color:var(--teal);}

/* SCROLLBAR */
::-webkit-scrollbar{width:2px}
::-webkit-scrollbar-thumb{background:var(--teal)}
::selection{background:var(--teal-p);color:var(--ink)}

/* ── ANNOUNCEMENT BAR ── */
.announce{background:var(--teal);color:rgba(255,255,255,.8);height:36px;overflow:hidden;display:flex;align-items:center;position:fixed;top:0;left:0;right:0;z-index:10000;}
.announce-track{
  display:flex;white-space:nowrap;
  animation:tick 20s linear infinite;
}
.announce-item{
  font-size:11px;font-weight:300;letter-spacing:.25em;text-transform:uppercase;
  padding:0 48px;flex-shrink:0;display:flex;align-items:center;gap:16px;
}
.announce-rose{color:var(--lime);}

/* ── HAMBURGER ── */
.hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  background:none;border:none;padding:4px;
}
.hamburger span{
  display:block;width:22px;height:1.5px;background:var(--nv-ico, #1A1A1A);
  transition:transform .4s ease, opacity .3s ease, background .2s ease;transform-origin:center;
}
.hamburger:hover span{ background:var(--nv-ham-hv, #A0267A) !important; }
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ── MOBILE MENU DRAWER ── */
.mobile-menu{
  position:fixed;top:0;left:0;bottom:0;width:100vw;
  background:var(--white);z-index:9998;
  transform:translateX(-100%);transition:transform .5s cubic-bezier(.77,0,.18,1);
  padding:56px 40px 48px;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:0;
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu a{
  font-family:'Satoshi',sans-serif;font-size:28px;font-weight:400;
  color:var(--ink);text-decoration:none;padding:16px 0;
  border-bottom:1px solid var(--nv-mob-div, #E8E8E8) !important;display:block;
  transition:color var(--t-fast),padding-left var(--t-fast);
}
.mobile-menu a:hover{color:var(--nv-mob-hov, #A0267A) !important;padding-left:12px;}
.mobile-overlay{
  position:fixed;inset:0;background:rgba(26,26,26,.4);z-index:9997;
  opacity:0;pointer-events:none;transition:opacity .4s ease;
  backdrop-filter:blur(4px);
}
.mobile-overlay.open{opacity:1;pointer-events:all;}


/* ── MULTI-PAGE STYLES ── */
/* PAGE SYSTEM */
/* .page hidden-see below */
.page.active{display:block;}
.page-fade{position:fixed;inset:0;background:var(--white);z-index:99998;pointer-events:none;opacity:0;transition:opacity .4s ease;}
.page-fade.in{opacity:1;}

/* CURSOR */
#cur{position:fixed;z-index:99999;pointer-events:none;}
.cur-dot{position:absolute;top:0;left:0;width:6px;height:6px;background:var(--teal);border-radius:50%;transform:translate(-50%,-50%);transition:width .2s,height .2s;will-change:transform;}
.cur-ring{position:absolute;top:0;left:0;width:40px;height:40px;border:1px solid rgba(42,110,128,.4);border-radius:50%;transform:translate(-50%,-50%);transition:width .3s,height .3s;will-change:transform;}
body.c-hover .cur-dot{opacity:0;}
body.c-hover .cur-ring{width:56px;height:56px;border-color:var(--teal);}
::-webkit-scrollbar{width:2px}
::-webkit-scrollbar-thumb{background:var(--teal)}
::selection{background:var(--teal-p);color:var(--ink)}

/* ANNOUNCE */
.announce{background:var(--teal);color:rgba(255,255,255,.8);height:36px;overflow:hidden;display:flex;align-items:center;position:fixed;top:0;left:0;right:0;z-index:10000;}
.announce-track{display:flex;white-space:nowrap;animation:tick 22s linear infinite;}
.announce-item{font-size:11px;font-weight:300;letter-spacing:.25em;text-transform:uppercase;padding:0 48px;flex-shrink:0;display:flex;align-items:center;gap:16px;}
.announce-hi{color:var(--lime);}

/* NAV */
.nav-wrap{position:sticky;top:0;z-index:999;background:var(--white);border-bottom:1px solid var(--line);transition:box-shadow .4s;}
.nav-wrap.scrolled{box-shadow:0 2px 20px rgba(42,110,128,.08);}
nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 56px;max-width:1600px;margin:0 auto;}
.nav-logo{font-family:'Satoshi',sans-serif;font-size:21px;font-weight:400;letter-spacing:.15em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:2px;cursor:pointer;}
.nav-logo .dot{width:15px;height:15px;border-radius:50%;background:var(--nv-dot,#A0267A);display:inline-block;margin:0 2px;transition:transform .4s;}
.nav-logo:hover .dot{transform:scale(1.35) rotate(90deg);}
.nav-links{display:flex;align-items:center;gap:36px;list-style:none;flex:1;justify-content:center;}
.nav-links a{font-size:11px;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;position:relative;cursor:pointer;transition:color .3s;}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:1px;background:var(--nv-acc,#A0267A);transform:scaleX(0);transform-origin:left;transition:transform .3s;}
.nav-links a:hover,.nav-links a.active-link{color:var(--ink);}
.nav-links a:hover::after,.nav-links a.active-link::after{transform:scaleX(1);}
.nav-r{display:flex;align-items:center;gap:18px;}
.nav-icon{background:none;border:none;cursor:pointer;padding:4px;}
.nav-icon svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.5;display:block;transition:stroke .3s;}
.nav-icon:hover svg{stroke:var(--nv-acc,#A0267A);}

/* CART DRAWER */
.cart-overlay{position:fixed;inset:0;background:rgba(26,26,26,.4);z-index:10001;opacity:0;pointer-events:none;transition:opacity .4s;backdrop-filter:blur(4px);}
.cart-overlay.open{opacity:1;pointer-events:all;}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;background:var(--cart-drawer-bg,#f7f3ef);z-index:10002;transform:translateX(100%);transition:transform .5s cubic-bezier(.77,0,.18,1);display:flex;flex-direction:column;border-left:1px solid var(--cart-border-clr,var(--line));}
.cart-drawer.open{transform:translateX(0);}
.cart-header{padding:28px 32px;border-bottom:1px solid var(--cart-border-clr,var(--line));display:flex;align-items:center;justify-content:space-between;background:var(--cart-header-bg,var(--white));}
.cart-title{font-family:'Satoshi',sans-serif;font-size:22px;font-weight:400;color:var(--cart-title-clr,var(--ink));}
.cart-close{background:none;border:none;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:background .3s;}
.cart-close:hover{background:var(--teal-p);}
.cart-close svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.5;}
.cart-body{flex:1;overflow-y:auto;padding:24px 32px;}
.cart-item{display:grid;grid-template-columns:80px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);}
.cart-item-img{width:80px;height:80px;background:var(--teal-p);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.ci-orb{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 38% 38%,rgba(42,110,128,.4),transparent);border:1px solid rgba(42,110,128,.3);}
.cart-item-info{display:flex;flex-direction:column;justify-content:space-between;}
.cart-item-brand{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--teal);}
.cart-item-name{font-size:12px;font-weight:300;color:var(--ink);line-height:1.4;}
.cart-item-bottom{display:flex;align-items:center;justify-content:space-between;}
.cart-item-price{font-size:13px;font-weight:400;color:var(--cart-price-clr,var(--ink));}
.cart-qty{display:flex;align-items:center;gap:10px;}
.cart-qty button{width:26px;height:26px;border:1px solid var(--line);background:none;cursor:pointer;font-size:14px;color:var(--ink-soft);transition:border-color .3s,background .3s;}
.cart-qty button:hover{border-color:var(--teal);background:var(--teal-p);}
.cart-qty span{font-size:12px;font-weight:300;min-width:16px;text-align:center;}
.cart-footer{padding:24px 32px;border-top:1px solid var(--cart-border-clr,var(--line));}
.cart-subtotal{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.cart-subtotal span{font-size:11px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.cart-subtotal strong{font-family:'Satoshi',sans-serif;font-size:22px;font-weight:400;}
.cart-checkout{width:100%;padding:16px;background:var(--cart-btn-bg,var(--ink));color:var(--cart-btn-tx,var(--white));border:none;font-family:'Satoshi',sans-serif;font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:background .3s;}
.cart-checkout:hover{background:var(--cart-btn-hv,var(--teal));}

/* SHARED */
.section-label{font-size:9px;font-weight:300;letter-spacing:.4em;text-transform:uppercase;color:var(--teal);margin-bottom:18px;display:flex;align-items:center;gap:12px;}
.section-label span{width:20px;height:1px;background:var(--teal);display:block;}
.section-h2{font-family:'Satoshi',sans-serif;font-size:clamp(28px,4vw,52px);font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.1;margin-bottom:14px;}
.section-h2 em{font-style:italic;color:var(--orange);}
.btn-fill{display:inline-flex;align-items:center;gap:12px;padding:15px 36px;background:var(--teal);color:var(--white);font-family:'Satoshi',sans-serif;font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;border:none;cursor:pointer;position:relative;overflow:hidden;transition:gap .3s;}
.btn-fill::before{content:'';position:absolute;inset:0;background:var(--orange);transform:translateX(-101%);transition:transform var(--t);}
.btn-fill span,.btn-fill svg{position:relative;z-index:1;}
.btn-fill:hover::before{transform:translateX(0);}
.btn-fill svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;}
.btn-outline{display:inline-flex;align-items:center;gap:10px;padding:13px 32px;background:none;border:1.5px solid var(--teal);color:var(--teal);font-family:'Satoshi',sans-serif;font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .3s,color .3s,gap .3s;}
.btn-outline:hover{background:var(--teal);color:var(--white);gap:14px;}
.btn-outline svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5;}

/* PRODUCT CARD */
.pcard{position:relative;overflow:hidden;background:var(--white);cursor:pointer;border:1px solid var(--line);}
.pcard-img{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.pcard-img-1,.pcard-img-2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .5s,transform .6s;}
.pcard-img-2{opacity:0;transform:scale(1.04);}
.pcard:hover .pcard-img-1{opacity:0;transform:scale(1.04);}
.pcard:hover .pcard-img-2{opacity:1;transform:scale(1);}
.pcard-orb{border-radius:50%;background:radial-gradient(circle at 38% 38%,rgba(42,110,128,.35),rgba(224,242,247,.1));border:1px solid rgba(42,110,128,.3);transition:transform .6s;}
.pcard-orb-2{border-radius:50%;}
.pcard-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;}
.pcard-cta{width:100%;padding:12px;background:var(--teal);color:var(--white);border:none;font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transform:translateY(10px);opacity:0;transition:transform var(--t),opacity var(--t);}
.pcard:hover .pcard-cta{transform:translateY(0);opacity:1;}
.pcard-badge{position:absolute;top:14px;right:14px;font-size:9px;letter-spacing:.15em;text-transform:uppercase;padding:4px 11px;z-index:2;}
.badge-new{background:var(--ink);color:var(--white);}
.badge-sale{background:var(--teal);color:var(--white);}
.badge-low{background:var(--orange-p);color:var(--orange);border:1px solid rgba(200,98,42,.3);}
.pcard-info{padding:18px 20px 22px;border-top:1px solid var(--line);}
.pcard-brand{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--teal);margin-bottom:4px;}
.pcard-name{font-size:13px;font-weight:300;color:var(--ink);line-height:1.45;margin-bottom:8px;}
.pcard-price{font-size:13px;font-weight:400;color:var(--ink);}
.pcard-price s{color:var(--mist);font-size:11px;margin-right:5px;}
.pcard-price .sale{color:var(--orange);}

/* FOOTER */
footer{padding:72px 56px 32px;border-top:1px solid var(--line);background:var(--white);}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:56px;max-width:1440px;margin:0 auto 56px;}
.ft-logo{font-family:'Satoshi',sans-serif;font-size:22px;font-weight:400;letter-spacing:.1em;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:4px;}
.ft-logo .dot{width:16px;height:16px;border-radius:50%;background:var(--nv-dot,#A0267A);display:inline-block;margin:0 2px;}
.ft-desc{font-size:13px;font-weight:400;color:var(--ink-soft);line-height:1.85;max-width:240px;margin-bottom:24px;}
.ft-social{display:flex;gap:10px;}
.soc{width:34px;height:34px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:border-color .3s,background .3s;cursor:pointer;}
.soc:hover{border-color:var(--teal);background:var(--teal-p);}
.soc svg{width:13px;height:13px;stroke:var(--mist);fill:none;stroke-width:1.5;transition:stroke .3s;}
.soc:hover svg{stroke:var(--teal);}
.ft-h{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--teal);font-weight:400;margin-bottom:20px;}
.ft-links{list-style:none;display:flex;flex-direction:column;gap:10px;}
.ft-links a{font-size:13px;font-weight:400;color:var(--ink-soft);text-decoration:none;transition:color .3s;cursor:pointer;}
.ft-links a:hover{color:var(--ink);}
.ft-bottom{max-width:1440px;margin:0 auto;display:flex;justify-content:space-between;padding-top:24px;border-top:1px solid var(--line);}
.ft-copy{font-size:10px;font-weight:400;color:var(--ink-soft);}
.ft-pays{display:flex;gap:8px;align-items:center;}
.ft-pay{height:24px;padding:3px 8px;border:1px solid var(--line);font-size:9px;font-weight:500;color:var(--ink-soft);border-radius:3px;background:var(--white);}

/* SR ANIMATIONS */
.sr{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1);}
.sr.on{opacity:1;transform:translateY(0);}
.d1{transition-delay:.1s}.d2{transition-delay:.22s}.d3{transition-delay:.34s}.d4{transition-delay:.48s}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════
   PAGE: HOME (brief summary)
══════════════════════════════════ */
.hero{height:calc(100vh - 100px);min-height:620px;display:grid;grid-template-columns:1fr 1fr;background:var(--white);}
.hero-l{padding:0 64px;display:flex;flex-direction:column;justify-content:center;}
.hero-eyebrow{font-size:10px;font-weight:300;letter-spacing:.4em;text-transform:uppercase;color:var(--mist);margin-bottom:28px;display:flex;align-items:center;gap:14px;opacity:0;animation:slideRight .9s .1s forwards;}
.hero-eyebrow span{width:28px;height:1px;background:var(--teal);}
.hero-h1{font-family:'Satoshi',sans-serif;font-size:clamp(54px,7vw,100px);font-weight:700;line-height:.96;letter-spacing:-.03em;color:var(--ink);margin-bottom:28px;}
.hero-h1 em{font-style:italic;color:var(--orange);}
.hero-sub{font-size:14px;font-weight:300;color:var(--ink-soft);line-height:1.9;max-width:380px;margin-bottom:44px;opacity:0;animation:slideRight .9s .55s forwards;}
.hero-btns{display:flex;align-items:center;gap:24px;}
.hero-r{background:var(--teal-p);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.hero-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.hring{position:absolute;border-radius:50%;border:1px solid rgba(42,110,128,.2);animation:hrpulse 6s ease-in-out infinite;}
.hring:nth-child(1){width:75%;height:75%;}
.hring:nth-child(2){width:55%;height:55%;border-color:rgba(42,110,128,.3);animation-delay:-2s;}
.hring:nth-child(3){width:35%;height:35%;border-color:rgba(42,110,128,.4);animation-delay:-4s;}
.hring:nth-child(4){width:16%;height:16%;background:var(--teal);border:none;animation:hrfill 6s ease-in-out infinite;}
@keyframes hrpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes hrfill{0%,100%{transform:scale(1)}50%{transform:scale(.85)}}
.hero-tags{position:absolute;inset:0;}
.htag{position:absolute;background:var(--white);padding:12px 18px;border:1px solid var(--line);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);}
.htag b{display:block;font-family:'Satoshi',sans-serif;font-size:20px;font-weight:400;color:var(--ink);letter-spacing:0;text-transform:none;margin-bottom:2px;}
.htag:nth-child(1){top:20%;left:8%;animation:floatA 7s ease-in-out infinite;}
.htag:nth-child(2){bottom:22%;right:8%;animation:floatA 9s ease-in-out infinite reverse;}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ══════════════════════════════════
   PAGE: COLECCIÓN
══════════════════════════════════ */
.collection-hero{background:var(--ink);padding:80px 56px;position:relative;overflow:hidden;}
.collection-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 100% 50%,rgba(42,110,128,.15),transparent);}
.collection-hero-inner{max-width:1440px;margin:0 auto;position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;}
.collection-hero h1{font-family:'Satoshi',sans-serif;font-size:clamp(36px,5vw,72px);font-weight:400;color:var(--white);letter-spacing:-.025em;line-height:1.05;}
.collection-hero h1 em{font-style:italic;color:var(--orange);}
.collection-hero p{font-size:13px;font-weight:300;color:rgba(255,255,255,.5);margin-top:12px;}
.collection-hero-count{font-family:'Satoshi',sans-serif;font-size:72px;font-weight:700;color:rgba(255,255,255,.06);white-space:nowrap;}

/* Filters */
.collection-filters{padding:28px 56px;border-bottom:1px solid var(--line);background:var(--white);display:flex;align-items:center;gap:12px;overflow-x:auto;}
.filter-pill{padding:8px 20px;border:1px solid var(--line);background:var(--white);font-size:10px;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;white-space:nowrap;transition:all .25s;}
.filter-pill:hover,.filter-pill.active{background:var(--teal);color:var(--white);border-color:var(--teal);}
.collection-sort{margin-left:auto;font-size:11px;font-weight:300;color:var(--mist);display:flex;align-items:center;gap:8px;white-space:nowrap;}
.collection-sort select{border:1px solid var(--line);padding:6px 12px;font-family:'Satoshi',sans-serif;font-size:11px;color:var(--ink);background:var(--white);cursor:pointer;outline:none;}

/* Grid */
.collection-grid-wrap{padding:48px 56px 100px;max-width:1440px;margin:0 auto;}
.collection-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;}
.collection-meta span{font-size:12px;font-weight:300;color:var(--mist);}
.collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;}

/* ══════════════════════════════════
   PAGE: PRODUCTO INDIVIDUAL
══════════════════════════════════ */
.product-breadcrumb{padding:20px 56px;font-size:11px;color:var(--mist);display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);background:var(--white);}
.product-breadcrumb a{color:var(--mist);text-decoration:none;cursor:pointer;transition:color .25s;}
.product-breadcrumb a:hover{color:var(--teal);}
.product-breadcrumb svg{width:12px;height:12px;stroke:var(--line);fill:none;stroke-width:1.5;}

.product-layout{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:80vh;background:var(--white);}
.product-gallery{position:sticky;top:100px;height:calc(100vh - 100px);display:grid;grid-template-columns:80px 1fr;gap:3px;padding:32px 32px 32px 56px;align-self:start;}
.gallery-thumbs{display:flex;flex-direction:column;gap:6px;}
.gallery-thumb{width:72px;height:72px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .25s;flex-shrink:0;}
.gallery-thumb.active,.gallery-thumb:hover{border-color:var(--teal);}
.gallery-main{background:var(--teal-p);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.gallery-main-orb{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 38% 38%,rgba(42,110,128,.35),rgba(224,242,247,.1));border:1px solid rgba(42,110,128,.2);animation:orbFloat 5s ease-in-out infinite;}
@keyframes orbFloat{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.04) rotate(2deg)}}
.gallery-badge{position:absolute;top:20px;left:20px;background:var(--teal);color:var(--white);font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:5px 12px;}

.product-info{padding:48px 56px 48px 40px;display:flex;flex-direction:column;gap:0;}
.product-brand{font-size:10px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--teal);margin-bottom:10px;}
.product-name{font-family:'Satoshi',sans-serif;font-size:clamp(26px,3vw,40px);font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.2;margin-bottom:14px;}
.product-ratings{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.prod-stars{display:flex;gap:3px;}
.prod-star{width:14px;height:14px;fill:var(--orange);}
.prod-rating-count{font-size:12px;font-weight:300;color:var(--mist);}
.product-price-wrap{display:flex;align-items:baseline;gap:14px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px;}
.product-price{font-family:'Satoshi',sans-serif;font-size:36px;font-weight:400;color:var(--ink);}
.product-price-old{font-size:16px;font-weight:300;color:var(--mist);text-decoration:line-through;}
.product-price-save{font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);background:var(--orange-p);padding:3px 10px;}
.product-desc{font-size:14px;font-weight:300;color:var(--ink-soft);line-height:1.9;margin-bottom:28px;}
.product-ingredients{margin-bottom:28px;}
.product-ing-title{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;font-weight:400;}
.ingredient-tags{display:flex;flex-wrap:wrap;gap:8px;}
.ing-tag{padding:5px 14px;border:1px solid var(--line);font-size:11px;font-weight:300;color:var(--ink-soft);border-radius:20px;background:var(--white);}
.ing-tag.hero-ing{border-color:var(--teal);color:var(--teal);background:var(--teal-p);}
.product-qty{display:flex;align-items:center;gap:16px;margin-bottom:24px;}
.product-qty label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-weight:300;}
.qty-ctrl{display:flex;align-items:center;border:1px solid var(--line);}
.qty-btn{width:40px;height:40px;background:none;border:none;cursor:pointer;font-size:18px;color:var(--ink-soft);transition:background .25s,color .25s;}
.qty-btn:hover{background:var(--teal-p);color:var(--teal);}
.qty-val{width:48px;text-align:center;font-size:14px;font-weight:300;}
.product-atc{width:100%;padding:18px;background:var(--teal);color:var(--white);border:none;font-family:'Satoshi',sans-serif;font-size:12px;font-weight:400;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;transition:background .3s;margin-bottom:12px;}
.product-atc:hover{background:var(--orange);}
.product-wishlist{width:100%;padding:14px;background:none;border:1.5px solid var(--line);color:var(--ink-soft);font-family:'Satoshi',sans-serif;font-size:11px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,color .3s;display:flex;align-items:center;justify-content:center;gap:10px;}
.product-wishlist:hover{border-color:var(--teal);color:var(--teal);}
.product-wishlist svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;}

/* Product tabs */
.product-tabs{padding:80px 56px;background:var(--white);border-top:1px solid var(--line);}
.product-tabs-inner{max-width:1200px;margin:0 auto;}
.tabs-nav{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:48px;}
.tab-btn{padding:14px 28px;font-size:11px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .25s,border-color .25s;margin-bottom:-1px;}
.tab-btn.active{color:var(--teal);border-color:var(--teal);}
.tab-panel{display:none;animation:fadeUp .4s ease;}
.tab-panel.active{display:block;}

/* Product reviews */
.prod-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.prod-rev-card{background:var(--off);padding:28px;border:1px solid var(--line);}
.prod-rev-stars{display:flex;gap:3px;margin-bottom:14px;}
.prod-rev-text{font-size:13px;font-weight:300;color:var(--ink-soft);line-height:1.8;margin-bottom:16px;}
.prod-rev-author{font-size:12px;font-weight:400;color:var(--ink);}
.prod-rev-date{font-size:10px;color:var(--mist);margin-top:2px;}

/* Related products */
.related-section{padding:80px 56px;background:var(--off);}
.related-inner{max-width:1440px;margin:0 auto;}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:40px;}

/* Sticky ATC bar */
.sticky-atc-bar{position:fixed;bottom:0;left:0;right:0;z-index:900;background:var(--white);border-top:1px solid var(--line);padding:14px 56px;display:flex;align-items:center;justify-content:space-between;transform:translateY(100%);transition:transform .5s cubic-bezier(.77,0,.18,1);box-shadow:0 -6px 24px rgba(42,110,128,.08);}
.sticky-atc-bar.visible{transform:translateY(0);}
.sticky-prod{display:flex;align-items:center;gap:14px;}
.sticky-img{width:44px;height:44px;background:var(--teal-p);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.sticky-img-orb{width:20px;height:20px;border-radius:50%;background:rgba(42,110,128,.3);}
.sticky-name{font-size:13px;font-weight:300;color:var(--ink);}
.sticky-price{font-size:12px;color:var(--teal);}
.sticky-btn-bar{padding:12px 36px;background:var(--teal);color:var(--white);border:none;font-family:'Satoshi',sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:background .3s;}
.sticky-btn-bar:hover{background:var(--orange);}

/* ══════════════════════════════════
   PAGE: MARCAS
══════════════════════════════════ */
.brands-hero{padding:100px 56px 80px;background:var(--white);border-bottom:1px solid var(--line);}
.brands-hero-inner{max-width:800px;}
.brands-grid-section{padding:80px 56px;max-width:1440px;margin:0 auto;}
.brand-card{border:1px solid var(--line);background:var(--white);padding:48px 36px;display:flex;flex-direction:column;gap:20px;cursor:pointer;transition:border-color .3s,box-shadow .3s,transform .3s;position:relative;overflow:hidden;}
.brand-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--t);}
.brand-card:nth-child(1)::before,.brand-card:nth-child(5)::before,.brand-card:nth-child(9)::before{background:var(--teal);}
.brand-card:nth-child(2)::before,.brand-card:nth-child(6)::before{background:var(--orange);}
.brand-card:nth-child(3)::before,.brand-card:nth-child(7)::before{background:var(--magenta);}
.brand-card:nth-child(4)::before,.brand-card:nth-child(8)::before{background:var(--lime);}
.brand-card:hover{border-color:rgba(42,110,128,.3);box-shadow:0 12px 40px rgba(42,110,128,.1);transform:translateY(-4px);}
.brand-card:hover::before{transform:scaleX(1);}
.brand-logo-area{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Satoshi',sans-serif;font-size:22px;font-weight:400;color:var(--white);}
.brand-name{font-family:'Satoshi',sans-serif;font-size:22px;font-weight:400;color:var(--ink);}
.brand-origin{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--mist);}
.brand-desc{font-size:13px;font-weight:300;color:var(--ink-soft);line-height:1.75;}
.brand-count{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);}
.brand-arrow{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin-top:auto;transition:color .3s,gap .3s;}
.brand-card:hover .brand-arrow{color:var(--teal);gap:12px;}
.brand-arrow svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5;}
.brands-main-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;}

/* ══════════════════════════════════
   PAGE: NOSOTROS
══════════════════════════════════ */
.about-hero{min-height:70vh;display:grid;grid-template-columns:1fr 1fr;background:var(--white);}
.about-hero-l{padding:80px 56px;display:flex;flex-direction:column;justify-content:center;}
.about-hero-r{background:var(--ink);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.about-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(42,110,128,.15),transparent);}
.about-giant{font-family:'Satoshi',sans-serif;font-size:clamp(80px,15vw,200px);font-weight:700;color:rgba(42,110,128,.07);position:absolute;letter-spacing:-.04em;user-select:none;}
.about-visual-inner{position:relative;z-index:1;text-align:center;}
.about-orb{width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 38% 38%,rgba(42,110,128,.3),rgba(224,242,247,.1));border:1px solid rgba(42,110,128,.2);margin:0 auto 24px;animation:orbFloat 6s ease-in-out infinite;}
.about-stat{font-family:'Satoshi',sans-serif;font-size:48px;font-weight:700;color:var(--white);}
.about-stat-label{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.4);}

.about-mission{padding:100px 56px;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:start;}
.about-values{padding:80px 56px;background:var(--ink);}
.about-values-inner{max-width:1440px;margin:0 auto;}
.about-values h2{font-family:'Satoshi',sans-serif;font-size:clamp(28px,4vw,52px);font-weight:400;color:var(--white);letter-spacing:-.02em;margin-bottom:56px;}
.about-values h2 em{font-style:italic;color:var(--orange);}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.06);}
.value-item{background:var(--ink);padding:40px 32px;}
.value-num{font-family:'Satoshi',sans-serif;font-size:48px;font-weight:700;color:rgba(42,110,128,.25);margin-bottom:16px;}
.value-title{font-size:14px;font-weight:400;color:var(--white);margin-bottom:10px;letter-spacing:.04em;}
.value-desc{font-size:12px;font-weight:300;color:rgba(255,255,255,.4);line-height:1.8;}

.about-team{padding:100px 56px;max-width:1440px;margin:0 auto;}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:56px;}
.team-card{background:var(--white);border:1px solid var(--line);overflow:hidden;}
.team-img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;}
.team-info{padding:24px 28px;}
.team-name{font-family:'Satoshi',sans-serif;font-size:20px;font-weight:400;color:var(--ink);margin-bottom:4px;}
.team-role{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--teal);margin-bottom:10px;}
.team-bio{font-size:12px;font-weight:300;color:var(--ink-soft);line-height:1.7;}

/* ══════════════════════════════════
   PAGE: CUENTA / PERFIL
══════════════════════════════════ */
.account-layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 100px);background:var(--off);}
.account-sidebar{background:var(--white);border-right:1px solid var(--line);padding:40px 32px;}
.account-avatar{width:72px;height:72px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;font-family:'Satoshi',sans-serif;font-size:28px;font-weight:400;color:var(--white);margin-bottom:16px;}
.account-name{font-family:'Satoshi',sans-serif;font-size:20px;font-weight:400;color:var(--ink);margin-bottom:4px;}
.account-email{font-size:12px;font-weight:300;color:var(--mist);margin-bottom:32px;}
.account-nav{display:flex;flex-direction:column;gap:2px;}
.account-nav-item{padding:12px 16px;font-size:12px;font-weight:300;letter-spacing:.1em;color:var(--ink-soft);cursor:pointer;border:1px solid transparent;transition:all .25s;display:flex;align-items:center;gap:12px;text-decoration:none;}
.account-nav-item svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0;}
.account-nav-item:hover,.account-nav-item.active{background:var(--teal-p);border-color:rgba(42,110,128,.2);color:var(--teal);}
.account-main{padding:48px 56px;}
.account-section-title{font-family:'Satoshi',sans-serif;font-size:28px;font-weight:500;color:var(--ink);margin-bottom:32px;letter-spacing:-.01em;}
.account-section-title em{font-style:italic;color:var(--orange);}

/* Orders */
.order-card{background:var(--white);border:1px solid var(--line);margin-bottom:16px;overflow:hidden;}
.order-header{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);}
.order-id{font-size:13px;font-weight:400;color:var(--ink);}
.order-date{font-size:11px;font-weight:300;color:var(--mist);}
.order-status{font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:4px 12px;}
.status-delivered{background:var(--lime-p);color:var(--lime);}
.status-shipped{background:var(--teal-p);color:var(--teal);}
.order-items{padding:20px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.order-item{display:flex;align-items:center;gap:12px;}
.order-item-img{width:48px;height:48px;background:var(--off);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.order-item-orb{width:22px;height:22px;border-radius:50%;background:rgba(42,110,128,.25);}
.order-item-name{font-size:11px;font-weight:300;color:var(--ink);line-height:1.4;}
.order-item-brand{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);}
.order-footer{padding:16px 24px;background:var(--off);display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);}
.order-total{font-size:14px;font-weight:400;color:var(--ink);}
.order-total span{font-family:'Satoshi',sans-serif;font-size:18px;}

/* Profile quiz card */
.quiz-profile-card{background:var(--teal);padding:32px;margin-bottom:24px;position:relative;overflow:hidden;}
.quiz-profile-card-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 100% 0%,rgba(122,170,32,.2),transparent);pointer-events:none;}
.qpc-label{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:12px;}
.qpc-title{font-family:'Satoshi',sans-serif;font-size:22px;font-weight:400;color:var(--white);margin-bottom:20px;}
.qpc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.qpc-tag{padding:5px 14px;border:1px solid rgba(255,255,255,.2);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.7);}
.qpc-cta{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}


/* ── HERO TEXT ANIMATIONS ── */
.line-wrap{overflow:hidden;display:block;}
.line-inner{display:block;transform:translateY(0);opacity:1;transition:transform .9s cubic-bezier(.77,0,.18,1),opacity .6s ease;}
.line-inner.on{transform:translateY(0);opacity:1;}
/* ── RINGS ── */
.ring{position:absolute;border-radius:50%;border:1px solid rgba(42,110,128,.18);animation:ringPulse 6s ease-in-out infinite;}
.ring:nth-child(1){width:88%;height:88%;}
.ring:nth-child(2){width:68%;height:68%;border-color:rgba(42,110,128,.22);animation-delay:-2s;}
.ring:nth-child(3){width:48%;height:48%;border-color:rgba(42,110,128,.28);animation-delay:-4s;}
.ring:nth-child(4){width:28%;height:28%;background:var(--teal);border:none;animation:ringFill 6s ease-in-out infinite;}
@keyframes ringPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes ringFill{0%,100%{transform:scale(1)}50%{transform:scale(.88)}}
/* ── NAV GAP FIX ── */
/* hero margin handled */

/* ── ANNOUNCEMENT BAR ── */
.ann-bar{position:fixed;top:0;left:0;right:0;height:36px;background:var(--teal);z-index:10000;overflow:hidden;display:flex;align-items:center;}
.ann-track{display:flex;align-items:center;gap:32px;white-space:nowrap;animation:annScroll 22s linear infinite;padding-left:100%;}
.ann-item{font-size:10px;font-weight:500;letter-spacing:.2em;color:#fff;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.ann-item svg{stroke:#a8d8e0;flex-shrink:0;}
.ann-sep{color:rgba(255,255,255,.4);font-size:10px;}
@keyframes annScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* single-page: no page system needed */


#nav{
  position:fixed !important;top:36px;left:0 !important;right:0 !important;
  z-index:9999 !important;width:100% !important;height:64px !important;
  display:flex !important;flex-direction:row !important;
  align-items:center !important;justify-content:space-between !important;
  padding:0 64px !important;box-sizing:border-box !important;
  background:var(--nv-bg, #ffffff) !important;
  border-bottom:1px solid var(--nv-brd, #D0E8EC) !important;
  transition:box-shadow 0.4s ease !important;
}
#nav.scrolled{box-shadow:0 2px 20px rgba(26,26,26,.06) !important;}
#nav .nav-logo{
  font-family:'Satoshi',sans-serif !important;font-weight:400 !important;
  font-size:21px !important;letter-spacing:.15em !important;
  color:var(--nv-logo, #1A1A1A) !important;text-decoration:none !important;
  display:flex !important;flex-direction:row !important;
  align-items:center !important;gap:2px !important;flex-shrink:0 !important;
}
#nav .nav-logo .dot{
  width:15px !important;height:15px !important;border-radius:50% !important;
  background:var(--nv-dot, #A0267A) !important;display:inline-block !important;
  margin:0 2px !important;flex-shrink:0 !important;
  transition:transform .4s ease !important;
}
#nav .nav-logo:hover .dot{transform:scale(1.35) rotate(90deg) !important;}
#nav .nav-links{
  display:flex !important;flex-direction:row !important;
  align-items:center !important;justify-content:center !important;
  gap:38px !important;list-style:none !important;
  margin:0 !important;padding:0 !important;flex:1 !important;
}
#nav .nav-links li{display:block !important;list-style:none !important;margin:0 !important;padding:0 !important;}
#nav .nav-links a{
  font-family:'Satoshi',sans-serif !important;font-size:11px !important;
  font-weight:400 !important;letter-spacing:.18em !important;
  text-transform:uppercase !important;color:var(--nv-lnk, #1A1A1A) !important;
  text-decoration:none !important;white-space:nowrap !important;
  position:relative !important;display:inline-block !important;
  transition:color 0.3s ease !important;
}
#nav .nav-links a::after{
  content:'' !important;position:absolute !important;
  bottom:-4px !important;left:0 !important;right:0 !important;
  height:1px !important;background:var(--nv-acc, #A0267A) !important;
  transform:scaleX(0) !important;transform-origin:left !important;
  transition:transform 0.3s ease !important;
}
#nav .nav-links a:hover,#nav .nav-links a.active-link{color:var(--nv-hov, #1A1A1A) !important;}
#nav .nav-links a:hover::after,#nav .nav-links a.active-link::after{transform:scaleX(1) !important;}
#nav .nav-r{
  display:flex !important;flex-direction:row !important;
  align-items:center !important;gap:18px !important;flex-shrink:0 !important;
}
#nav .nav-icon svg{
  width:18px !important;height:18px !important;stroke:var(--nv-ico, #1A1A1A) !important;
  fill:none !important;stroke-width:1.5 !important;display:block !important;
  cursor:pointer !important;transition:stroke 0.3s ease !important;
}
#nav .nav-icon:hover svg{stroke:var(--nv-acc, #A0267A) !important;}
/* Mobile FABs use nav CSS vars */
.cart-fab{background:var(--nv-fab-bg, #1A1A1A) !important;}
.cart-fab:hover{background:var(--nv-fab-hv, #333333) !important;}
.search-fab{background:var(--nv-sfab-bg, #ffffff) !important;}
.search-fab:hover{background:var(--nv-sfab-hv, #F2FAF8) !important;transform:scale(1.08) !important;}
.search-fab svg{stroke:var(--nv-sfab-ic, #1A1A1A) !important;}
.search-fab svg{stroke:var(--nv-ico, #1A1A1A) !important;}
.cart-fab-count,.cart-badge{background:var(--nv-bbg, #1A1A1A) !important;color:var(--nv-btx, #ffffff) !important;}
#cartCount{background:var(--nv-bbg, #1A1A1A) !important;color:var(--nv-btx, #ffffff) !important;}
.mobile-menu{background:var(--nv-mbg, #ffffff) !important;}
.mobile-menu a{color:var(--nv-mlnk, #1A1A1A) !important;}
@media(max-width:768px){
  #nav .nav-links{display:none !important;}
  #nav{padding:0 20px !important;top:32px;height:56px !important;}
}


/* ── HERO ── */
.hero{height:100vh;min-height:700px;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;background:var(--white);margin-top:100px;}
.hero-l{padding:100px 56px 0;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;}
.hero-eyebrow{font-size:10px;font-weight:300;letter-spacing:.45em;text-transform:uppercase;color:var(--mist);margin-bottom:32px;display:flex;align-items:center;gap:16px;opacity:0;animation:slideRight .9s .1s forwards;}
.hero-eyebrow span{display:inline-block;width:32px;height:1px;background:var(--teal);}
.hero-h1{font-family:'Satoshi',sans-serif;font-size:clamp(62px,7.5vw,108px);font-weight:700;line-height:.98;letter-spacing:-.03em;color:var(--ink);margin-bottom:32px;}
.hero-h1 em{font-style:italic;color:var(--orange);text-shadow:0 2px 40px rgba(200,98,42,.18);}
.hero-h1 .accent-line{display:block;font-size:clamp(14px,1.4vw,20px);font-family:'Satoshi',sans-serif;font-weight:300;letter-spacing:.35em;text-transform:uppercase;color:var(--teal);margin-top:12px;font-style:normal;}
.hero-h1 .lw{overflow:hidden;display:block;}
.hero-h1 .li{display:block;transform:translateY(100%);animation:lineUp .8s forwards;}
.hero-h1 .li:nth-child(1){animation-delay:.2s;}
.hero-h1 .li:nth-child(2){animation-delay:.35s;}
.hero-h1 .li:nth-child(3){animation-delay:.5s;}
.hero-sub{font-size:14px;font-weight:300;line-height:1.9;color:var(--ink-soft);max-width:380px;margin-bottom:52px;opacity:0;animation:slideRight .9s .55s forwards;}
.hero-actions{display:flex;align-items:center;gap:32px;opacity:0;animation:slideRight .9s .7s forwards;}
.btn{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:gap var(--t-fast);}
.btn-fill{background:var(--ink);color:var(--white);padding:16px 36px;position:relative;overflow:hidden;}
.btn-fill::before{content:'';position:absolute;inset:0;background:var(--orange);transform:translateX(-101%);transition:transform var(--t);}
.btn-fill span{position:relative;z-index:1;transition:color var(--t-fast);}
.btn-fill:hover::before{transform:translateX(0);}
.btn-fill:hover{gap:18px;}
.btn-line{color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:3px;transition:color var(--t-fast),border-color var(--t-fast);}
.btn-line:hover{color:var(--ink);border-color:var(--ink);}
.btn-line svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform var(--t-fast);}
.btn-line:hover svg{transform:translateX(4px);}
.hero-r{position:relative;height:100%;overflow:hidden;background:var(--teal-p);}
.hero-r-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(42,110,128,.25);animation:pulse 6s ease-in-out infinite;}
.ring:nth-child(1){width:70%;height:70%;}
.ring:nth-child(2){width:52%;height:52%;border-color:rgba(42,110,128,.35);animation-delay:-2s;}
.ring:nth-child(3){width:34%;height:34%;border-color:rgba(42,110,128,.5);animation-delay:-4s;}
.ring:nth-child(4){width:18%;height:18%;background:var(--teal);border:none;animation:pulseFill 6s ease-in-out infinite;animation-delay:-1s;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.06);opacity:1}}
@keyframes pulseFill{0%,100%{transform:scale(1)}50%{transform:scale(.88)}}
.hero-tag{position:absolute;background:var(--white);padding:14px 20px;border:1px solid var(--line);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;animation:floatTag 8s ease-in-out infinite;}
.hero-tag b{display:block;font-family:'Satoshi',sans-serif;font-size:18px;font-weight:400;color:var(--ink);letter-spacing:0;text-transform:none;margin-bottom:2px;}
.hero-tag:nth-child(5){top:18%;left:8%;animation-delay:-3s;}
.hero-tag:nth-child(6){bottom:22%;right:6%;animation-delay:-5s;}
.hero-tag:nth-child(7){top:55%;left:4%;animation-delay:-1.5s;font-size:9px;padding:10px 16px;}
@keyframes floatTag{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-vtext{position:absolute;right:24px;top:50%;transform:translateY(-50%) rotate(90deg);font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--mist);white-space:nowrap;}
.hero-scroll{position:absolute;bottom:40px;left:56px;z-index:3;display:flex;align-items:center;gap:12px;opacity:0;animation:fadeIn .8s 1.2s forwards;}
.hero-scroll span{font-size:9px;letter-spacing:.35em;text-transform:uppercase;color:var(--mist);}
.scroll-track{width:48px;height:1px;background:var(--line);position:relative;overflow:hidden;}
.scroll-fill{position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--teal);animation:scrollFill 2.5s ease-in-out infinite;}
@keyframes scrollFill{0%{left:-100%}100%{left:100%}}

/* ── TICKER ── */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;overflow:hidden;background:var(--white);}
.ticker-track{display:flex;animation:tick 25s linear infinite;white-space:nowrap;}
.ticker-item{font-size:10px;font-weight:300;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);padding:0 40px;flex-shrink:0;display:flex;align-items:center;gap:16px;}
.ticker-rose{color:var(--teal);font-weight:400;}
.ticker-sep{width:4px;height:4px;border-radius:50%;background:var(--teal);opacity:.5;}

/* ── STATEMENT ── */
.section-statement{padding:160px 56px;display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:end;max-width:1440px;margin:0 auto;}
.stmt-label{font-size:10px;font-weight:300;letter-spacing:.35em;text-transform:uppercase;color:var(--mist);padding-top:8px;border-top:1px solid var(--line);}
.stmt-text{font-family:'Satoshi',sans-serif;font-size:clamp(32px,4vw,58px);font-weight:400;line-height:1.25;letter-spacing:-.02em;color:var(--ink);}
.stmt-text em{font-style:italic;color:var(--orange);}
.stmt-text .char{display:inline-block;opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s;}
.stmt-text.visible .char{opacity:1;transform:translateY(0);}

/* ── PRODUCTS ── */
.section-products{padding:0 56px 120px;max-width:1440px;margin:0 auto;}
.prod-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:56px;padding-bottom:24px;border-bottom:1px solid var(--line);}
.prod-header h2{font-family:'Satoshi',sans-serif;font-size:clamp(24px,3vw,40px);font-weight:400;letter-spacing:-.015em;}
.prod-header h2 em{font-style:italic;color:var(--orange);}
.link-arrow{font-size:10px;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);text-decoration:none;display:flex;align-items:center;gap:10px;transition:color var(--t-fast),gap var(--t-fast);}
.link-arrow:hover{color:var(--ink);gap:16px;}
.link-arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;}
.prod-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:auto auto;gap:3px;}

/* PRODUCT CARD */
.pcard{position:relative;overflow:hidden;background:var(--off);cursor:pointer;}
.prod-grid .pcard:nth-child(1){grid-row:span 2;}
.pcard-img{width:100%;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.prod-grid .pcard:nth-child(1) .pcard-img{aspect-ratio:2/3;height:100%;min-height:520px;}

/* DUAL IMAGE HOVER */
.pcard-img-1,.pcard-img-2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .5s ease,transform .6s ease;}
.pcard-img-2{opacity:0;transform:scale(1.04);}
.pcard:hover .pcard-img-1{opacity:0;transform:scale(1.04);}
.pcard:hover .pcard-img-2{opacity:1;transform:scale(1);}

.pcard-orb{width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 38% 38%,rgba(232,180,184,.5),rgba(232,180,184,.1));border:1px solid rgba(42,110,128,.3);transition:transform .6s ease;position:relative;}
.pcard-orb::before{content:'';position:absolute;inset:25%;border-radius:50%;border:1px solid rgba(42,110,128,.25);}
.pcard-orb::after{content:'';position:absolute;inset:48%;border-radius:50%;background:rgba(42,110,128,.35);}
.pcard-orb-2{width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 60% 60%,rgba(212,150,155,.6),rgba(42,110,128,.12));border:1px solid rgba(42,110,128,.4);}

.pcard-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:20px;}
.pcard-cta{display:flex;align-items:center;justify-content:center;gap:10px;font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--white);background:var(--teal);padding:13px 20px;transform:translateY(12px);opacity:0;transition:transform var(--t),opacity var(--t);white-space:nowrap;border:none;cursor:pointer;width:100%;}
.pcard:hover .pcard-cta{transform:translateY(0);opacity:1;}

/* ANIMATED BADGES */
.pcard-badge{position:absolute;top:16px;right:16px;font-size:9px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;padding:5px 12px;z-index:2;animation:badgePop .5s .2s both;}
.badge-sale{background:var(--teal);color:var(--white);}
.badge-new{background:var(--ink);color:var(--white);}
.badge-low{background:var(--orange-p);color:var(--orange);border:1px solid rgba(200,98,42,.3);animation:badgePulse 2s ease-in-out infinite;}
@keyframes badgePop{from{transform:scale(0) rotate(-10deg);opacity:0}60%{transform:scale(1.15) rotate(2deg)}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.pcard-info{padding:20px 22px 24px;border-top:1px solid var(--line);}
.pcard-brand{font-size:9px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--teal);margin-bottom:5px;}
.pcard-link{display:block;text-decoration:none;color:inherit;}.pcard-name{font-weight:300;font-size:13px;color:var(--ink);line-height:1.5;margin-bottom:8px;}
.pcard-price{font-size:13px;font-weight:400;color:var(--ink);}
.pcard-price s{color:var(--mist);font-size:11px;margin-right:6px;}
.pcard-price .sale{color:var(--orange);}

/* ── SPLIT RITUAL ── */
.section-split{display:grid;grid-template-columns:1fr 1fr;min-height:600px;overflow:hidden;}
.split-visual{background:var(--ink);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:600px;}
.split-visual-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(42,110,128,.12),transparent);animation:bgShift 8s ease-in-out infinite;}
@keyframes bgShift{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.1) rotate(3deg)}}
.split-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.sring{position:absolute;border-radius:50%;border:1px solid rgba(42,110,128,.12);animation:srpulse 7s ease-in-out infinite;}
.sring:nth-child(1){width:80%;height:80%;}
.sring:nth-child(2){width:58%;height:58%;border-color:rgba(42,110,128,.25);animation-delay:-2.5s;}
.sring:nth-child(3){width:38%;height:38%;border-color:rgba(42,110,128,.35);animation-delay:-5s;}
.sring:nth-child(4){width:18%;height:18%;background:rgba(42,110,128,.12);border:none;animation-delay:-1s;}
@keyframes srpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.split-num{font-family:'Satoshi',sans-serif;font-size:clamp(100px,18vw,240px);font-weight:400;color:rgba(232,180,184,.06);position:absolute;letter-spacing:-.04em;user-select:none;}
.split-text-wrap{position:relative;z-index:2;text-align:center;padding:56px;}
.split-eyebrow{font-size:9px;font-weight:300;letter-spacing:.4em;text-transform:uppercase;color:rgba(122,170,32,.7);margin-bottom:20px;}
.split-title{font-family:'Satoshi',sans-serif;font-size:clamp(28px,4vw,52px);font-weight:400;color:var(--white);line-height:1.2;letter-spacing:-.02em;margin-bottom:20px;}
.split-title em{font-style:italic;color:var(--lime);}
.split-sub{font-size:13px;font-weight:300;color:rgba(255,255,255,.45);line-height:1.8;}
.split-content{background:var(--rose-p);padding:80px 72px;display:flex;flex-direction:column;justify-content:center;}
.ritual-steps-v{display:flex;flex-direction:column;}
.rstep{display:grid;grid-template-columns:60px 1fr;gap:24px;align-items:start;padding:24px 0;border-bottom:1px solid rgba(42,110,128,.2);opacity:0;transform:translateX(20px);transition:opacity .7s,transform .7s;}
.rstep.visible{opacity:1;transform:translateX(0);}
.rstep:last-child{border-bottom:none;}
.rnum{font-family:'Satoshi',sans-serif;font-size:32px;font-weight:400;color:rgba(42,110,128,.35);line-height:1;transition:color var(--t);}
.rstep:hover .rnum{color:var(--teal);}
.rname{font-size:13px;font-weight:400;letter-spacing:.05em;color:var(--ink);margin-bottom:6px;}
.rdesc{font-size:12px;font-weight:300;color:var(--ink-soft);line-height:1.7;}

/* ── BEFORE/AFTER SLIDER ── */
.section-ba{padding:120px 56px;max-width:1440px;margin:0 auto;}
.ba-header{text-align:center;max-width:500px;margin:0 auto 64px;}
.ba-wrap{position:relative;width:100%;max-width:900px;margin:0 auto;overflow:hidden;border-radius:2px;user-select:none;}
.ba-wrap img,.ba-placeholder{display:block;width:100%;height:500px;object-fit:cover;}
.ba-before{position:relative;width:100%;height:500px;background:linear-gradient(135deg,#F5E8E9,#FDF0F1);display:flex;align-items:center;justify-content:center;}
.ba-after{position:absolute;top:0;left:0;height:100%;overflow:hidden;transition:none;}
.ba-after-inner{height:500px;background:linear-gradient(135deg,#E8F5E9,#F1FDF2);display:flex;align-items:center;justify-content:center;width:900px;}
.ba-label{position:absolute;top:20px;font-size:10px;font-weight:400;letter-spacing:.25em;text-transform:uppercase;padding:6px 14px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);}
.ba-label.before{left:20px;color:var(--teal);}
.ba-label.after{right:20px;color:var(--lime);}
.ba-handle{position:absolute;top:0;bottom:0;width:2px;background:var(--white);cursor:ew-resize;transform:translateX(-50%);left:50%;}
.ba-handle-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--white);box-shadow:0 4px 20px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;gap:3px;}
.ba-handle-btn svg{width:14px;height:14px;stroke:var(--ink-soft);fill:none;stroke-width:2;}
.ba-orb-before,.ba-orb-after{width:100px;height:100px;border-radius:50%;border:1px solid rgba(42,110,128,.3);}
.ba-orb-before{background:radial-gradient(circle at 38% 38%,rgba(200,98,42,.3),rgba(253,240,235,.2));}
.ba-orb-after{background:radial-gradient(circle at 38% 38%,rgba(139,195,150,.4),rgba(240,253,241,.2));border-color:rgba(139,195,150,.3);}
.ba-text-before,.ba-text-after{position:absolute;bottom:24px;font-family:'Satoshi',sans-serif;font-size:24px;font-weight:400;font-style:italic;}
.ba-text-before{left:50%;transform:translateX(-50%);color:rgba(212,150,155,.6);}
.ba-text-after{left:50%;transform:translateX(-50%);color:rgba(100,180,110,.7);}

/* ── REVIEWS ── */
.section-reviews{padding:120px 56px;background:var(--off);overflow:hidden;}
.reviews-header{text-align:center;max-width:500px;margin:0 auto 72px;}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1200px;margin:0 auto;}
.review-card{background:var(--white);padding:36px 32px;border:1px solid var(--line);position:relative;transition:transform var(--t-fast),box-shadow var(--t-fast);}
.review-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(42,110,128,.12);}
.review-card::before{content:'"';font-family:'Satoshi',sans-serif;font-size:80px;color:var(--teal-p);line-height:1;position:absolute;top:16px;left:28px;font-weight:400;}
.stars{display:flex;gap:4px;margin-bottom:20px;}
.star{width:14px;height:14px;fill:var(--orange);opacity:0;transform:scale(0);transition:opacity .3s,transform .3s;}
.star.on{opacity:1;transform:scale(1);}
.review-text{font-size:14px;font-weight:300;line-height:1.85;color:var(--ink-soft);margin-bottom:24px;position:relative;z-index:1;}
.review-author{display:flex;align-items:center;gap:14px;}
.review-avatar{width:40px;height:40px;border-radius:50%;background:var(--teal-p);border:2px solid var(--teal);display:flex;align-items:center;justify-content:center;font-family:'Satoshi',sans-serif;font-size:16px;font-weight:400;color:var(--teal);flex-shrink:0;}
.review-name{font-size:13px;font-weight:400;color:var(--ink);}
.review-product{font-size:11px;color:var(--teal);letter-spacing:.1em;}

/* ── BRANDS ── */
.section-brands{padding:80px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;}
.brands-label{text-align:center;font-size:9px;font-weight:300;letter-spacing:.4em;text-transform:uppercase;color:var(--mist);margin-bottom:52px;}
.brands-wrap{position:relative;overflow:hidden;}
.brands-wrap::before{content:'';position:absolute;left:0;top:0;bottom:0;width:120px;background:linear-gradient(to right,var(--white),transparent);z-index:2;}
.brands-wrap::after{content:'';position:absolute;right:0;top:0;bottom:0;width:120px;background:linear-gradient(to left,var(--white),transparent);z-index:2;}
.brands-track{display:flex;animation:tick 30s linear infinite;}
.brand-item{flex-shrink:0;padding:0 52px;font-family:'Satoshi',sans-serif;font-size:17px;font-weight:400;letter-spacing:.04em;color:var(--ink);opacity:.18;white-space:nowrap;cursor:pointer;transition:opacity var(--t-fast),letter-spacing var(--t-fast);display:flex;align-items:center;gap:16px;}
.brand-item:hover{opacity:.75;letter-spacing:.08em;}
.brand-item .bsep{width:3px;height:3px;border-radius:50%;background:var(--teal);opacity:.5;}

/* ── STORY ── */
.section-story{padding:160px 56px;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:120px;align-items:center;}
.story-visual{position:relative;height:640px;}
.story-main{position:absolute;inset:0;background:var(--off);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.story-main-inner{position:relative;width:200px;height:200px;}
.story-orb{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 38% 38%,rgba(42,110,128,.3),rgba(224,242,247,.2));border:1px solid rgba(42,110,128,.3);animation:storyOrb 6s ease-in-out infinite;}
.story-orb::before{content:'';position:absolute;inset:22%;border-radius:50%;border:1px solid rgba(42,110,128,.2);animation:storyOrb 6s ease-in-out infinite reverse;}
.story-orb::after{content:'';position:absolute;inset:44%;border-radius:50%;background:rgba(42,110,128,.25);}
@keyframes storyOrb{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.08) rotate(5deg)}}
.story-float{position:absolute;background:var(--white);border:1px solid var(--line);padding:16px 22px;animation:floatTag 9s ease-in-out infinite;}
.story-float.a{bottom:-20px;right:-24px;animation-delay:-4s;}
.story-float.b{top:-16px;left:-20px;animation-delay:-7s;}
.story-float p{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin-bottom:4px;}
.story-float h4{font-family:'Satoshi',sans-serif;font-size:20px;font-weight:400;color:var(--ink);}
.story-float h4 em{font-style:italic;color:var(--teal);}
.story-corner{position:absolute;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);}
.story-corner.tl{top:20px;left:20px;}
.story-corner.br{bottom:20px;right:20px;}
.story-label{font-size:9px;font-weight:300;letter-spacing:.4em;text-transform:uppercase;color:var(--teal);margin-bottom:24px;}
.story-q{font-family:'Satoshi',sans-serif;font-size:clamp(22px,3vw,38px);font-weight:400;line-height:1.35;color:var(--ink);letter-spacing:-.02em;margin-bottom:32px;}
.story-q em{font-style:italic;color:var(--orange);}
.story-body{font-size:14px;font-weight:300;line-height:1.9;color:var(--ink-soft);margin-bottom:18px;}

/* ── NEWSLETTER ── */
.section-nl{padding:120px 56px;text-align:center;position:relative;overflow:hidden;}
.nl-bg{position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 50% 100%,rgba(42,110,128,.08),transparent);pointer-events:none;}
.nl-giant{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Satoshi',sans-serif;font-size:clamp(80px,20vw,240px);font-weight:400;color:rgba(42,110,128,.04);letter-spacing:-.04em;white-space:nowrap;user-select:none;pointer-events:none;}
.nl-inner{max-width:520px;margin:0 auto;position:relative;z-index:1;}
.nl-label{font-size:9px;font-weight:300;letter-spacing:.4em;text-transform:uppercase;color:rgba(122,170,32,.7);margin-bottom:20px;}
.nl-title{font-family:'Satoshi',sans-serif;font-size:clamp(28px,4vw,48px);font-weight:400;color:var(--white);letter-spacing:-.02em;line-height:1.2;margin-bottom:14px;}
.nl-title em{font-style:italic;color:var(--lime);}
.nl-sub{font-size:13px;font-weight:300;color:rgba(255,255,255,.4);line-height:1.8;margin-bottom:44px;}
.nl-form{display:flex;max-width:420px;margin:0 auto;}
.nl-input{flex:1;padding:16px 22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-right:none;color:var(--white);font-family:'Satoshi',sans-serif;font-size:13px;font-weight:300;outline:none;transition:border-color var(--t-fast);}
.nl-input::placeholder{color:rgba(255,255,255,.25);}
.nl-input:focus{border-color:rgba(42,110,128,.5);}
.nl-btn{padding:16px 28px;background:var(--teal);color:var(--white);border:1px solid var(--teal);font-family:'Satoshi',sans-serif;font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:background var(--t-fast);white-space:nowrap;}
.nl-btn:hover{background:var(--teal-d);border-color:var(--teal-d);color:var(--white);}
.nl-success{font-size:14px;font-weight:400;color:var(--white);padding:16px 0;}

/* ── FOOTER ── */
footer{padding:80px 56px 36px;border-top:1px solid var(--line);}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;max-width:1440px;margin:0 auto 60px;}
.ft-logo{font-family:'Satoshi',sans-serif;font-size:24px;font-weight:400;letter-spacing:.1em;color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:4px;}
.ft-logo .dot{width:18px;height:18px;border-radius:50%;background:var(--nv-dot,#A0267A);display:inline-block;margin:0 2px;}
.ft-desc{font-size:13px;font-weight:400;color:var(--ink-soft);line-height:1.85;margin-bottom:28px;max-width:260px;}
.ft-social{display:flex;gap:12px;}
.soc{width:36px;height:36px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:border-color var(--t-fast),background var(--t-fast);text-decoration:none;}
.soc:hover{border-color:var(--rose);background:var(--teal-p);}
.soc svg{width:14px;height:14px;stroke:var(--mist);fill:none;stroke-width:1.5;transition:stroke var(--t-fast);}
.soc:hover svg{stroke:var(--teal);}
.ft-h{font-size:9px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--teal);margin-bottom:22px;}
.ft-links{list-style:none;display:flex;flex-direction:column;gap:11px;}
.ft-links a{font-size:13px;font-weight:400;color:var(--ink-soft);text-decoration:none;transition:color var(--t-fast);}
.ft-links a:hover{color:var(--ink);}
.ft-bottom{max-width:1440px;margin:0 auto;display:flex;justify-content:space-between;padding-top:28px;border-top:1px solid var(--line);}
.ft-copy{font-size:10px;font-weight:400;color:var(--ink-soft);letter-spacing:.08em;}

/* ── CART DRAWER ── */
.cart-overlay{position:fixed;inset:0;background:rgba(26,26,26,.4);z-index:10001;opacity:0;pointer-events:none;transition:opacity .4s ease;backdrop-filter:blur(4px);}
.cart-overlay.open{opacity:1;pointer-events:all;}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;background:var(--cart-drawer-bg,#f7f3ef);z-index:10002;transform:translateX(100%);transition:transform .5s cubic-bezier(.77,0,.18,1);display:flex;flex-direction:column;border-left:1px solid var(--cart-border-clr,var(--line));}
.cart-drawer.open{transform:translateX(0);}
.cart-header{padding:28px 32px;border-bottom:1px solid var(--cart-border-clr,var(--line));display:flex;align-items:center;justify-content:space-between;background:var(--cart-header-bg,var(--white));}
.cart-title{font-family:'Satoshi',sans-serif;font-size:22px;font-weight:400;letter-spacing:-.01em;color:var(--cart-title-clr,var(--ink));}
.cart-close{background:none;border:none;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:background var(--t-fast);}
.cart-close:hover{background:var(--teal-p);}
.cart-close svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.5;}
.cart-body{flex:1;overflow-y:auto;padding:24px 32px;}
.cart-item{display:grid;grid-template-columns:80px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);}
.cart-item:last-child{border-bottom:none;}
.cart-item-img{width:80px;height:80px;background:var(--rose-p);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cart-item-orb{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 38% 38%,rgba(232,180,184,.5),transparent);border:1px solid rgba(42,110,128,.3);}
.cart-item-info{display:flex;flex-direction:column;justify-content:space-between;}
.cart-item-brand{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--teal);}
.cart-item-name{font-size:13px;font-weight:300;color:var(--ink);line-height:1.4;}
.cart-item-bottom{display:flex;align-items:center;justify-content:space-between;}
.cart-item-price{font-size:13px;font-weight:400;color:var(--ink);}
.cart-qty{display:flex;align-items:center;gap:12px;}
.cart-qty button{width:26px;height:26px;border:1px solid var(--line);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink-soft);transition:border-color var(--t-fast),background var(--t-fast);}
.cart-qty button:hover{border-color:var(--rose);background:var(--teal-p);}
.cart-qty span{font-size:13px;font-weight:300;min-width:16px;text-align:center;}
.cart-empty{text-align:center;padding:60px 0;}
.cart-empty p{font-family:'Satoshi',sans-serif;font-size:20px;font-weight:400;color:var(--mist);margin-bottom:8px;}
.cart-empty span{font-size:12px;color:var(--mist);}
.cart-footer{padding:24px 32px;border-top:1px solid var(--cart-border-clr,var(--line));}
.cart-subtotal{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.cart-subtotal span{font-size:12px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.cart-subtotal strong{font-family:'Satoshi',sans-serif;font-size:22px;font-weight:400;}
.cart-checkout{width:100%;padding:16px;background:var(--cart-btn-bg,var(--ink));color:var(--cart-btn-tx,var(--white));border:none;font-family:'Satoshi',sans-serif;font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:background var(--t-fast);position:relative;overflow:hidden;}
.cart-checkout::before{content:'';position:absolute;inset:0;background:var(--cart-btn-hv,var(--teal-d));transform:translateX(-101%);transition:transform var(--t);}
.cart-checkout span{position:relative;z-index:1;}
.cart-checkout:hover::before{transform:translateX(0);}

/* ── STICKY ADD TO CART ── */
.sticky-atc{
  position:fixed;bottom:0;left:0;right:0;z-index:900;
  background:var(--white);border-top:1px solid var(--line);
  padding:16px 56px;
  display:flex;align-items:center;justify-content:space-between;
  transform:translateY(100%);transition:transform .5s cubic-bezier(.77,0,.18,1);
  box-shadow:0 -8px 32px rgba(26,26,26,.08);
}
.sticky-atc.visible{transform:translateY(0);}
.sticky-product{display:flex;align-items:center;gap:16px;}
.sticky-img{width:48px;height:48px;background:var(--rose-p);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.sticky-img-orb{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 38% 38%,rgba(232,180,184,.5),transparent);border:1px solid rgba(42,110,128,.3);}
.sticky-info{}
.sticky-name{font-size:13px;font-weight:300;color:var(--ink);}
.sticky-price{font-size:12px;color:var(--teal);}
.sticky-btn{padding:14px 40px;background:var(--ink);color:var(--white);border:none;font-family:'Satoshi',sans-serif;font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:background var(--t-fast);}
.sticky-btn:hover{background:var(--teal-d);}


/* ── WHY HORI ── */
.section-why{padding:100px 56px;background:var(--white);border-bottom:1px solid var(--line);}
.why-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;max-width:1440px;margin:0 auto;}
.why-item{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:36px 28px;border:1px solid var(--line);background:var(--off);transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);}
.why-item:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(42,110,128,.1);border-color:var(--teal);}
.why-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.why-icon svg{width:24px;height:24px;}
.why-title{font-family:'Satoshi',sans-serif;font-size:18px;font-weight:400;color:var(--ink);letter-spacing:-.01em;}
.why-desc{font-size:13px;font-weight:300;color:var(--ink-soft);line-height:1.85;}

/* ── ROUTINE BUILDER ── */
.section-routine{padding:100px 56px;background:var(--white);position:relative;overflow:hidden;}
.routine-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 50% 40% at 50% 100%,rgba(42,110,128,.04),transparent);}
.routine-inner{max-width:960px;margin:0 auto;position:relative;z-index:1;}

/* Slideshow shell */
.rslide-shell{position:relative;overflow:hidden;}
.rslide{display:none;animation:rslidein .45s cubic-bezier(.4,0,.2,1) forwards;}
.rslide.active{display:block;}
@keyframes rslidein{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)}}
@keyframes rslideout{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-32px)}}

/* Header slide */
.rs-header{text-align:center;padding:60px 40px;}
.rs-eyebrow{font-size:9px;font-weight:300;letter-spacing:.4em;text-transform:uppercase;color:var(--teal);margin-bottom:18px;display:flex;align-items:center;justify-content:center;gap:12px;}
.rs-eyebrow span{width:20px;height:1px;background:var(--teal);display:block;}
.rs-title{font-family:'Satoshi',sans-serif;font-size:clamp(28px,4vw,52px);font-weight:400;color:var(--ink);letter-spacing:-.025em;line-height:1.15;margin-bottom:12px;}
.rs-title em{font-style:italic;color:var(--orange);}
.rs-sub{font-size:14px;font-weight:300;color:var(--ink-soft);line-height:1.8;max-width:480px;margin:0 auto 48px;}

/* Routine type selector */
.rs-types{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:720px;margin:0 auto 48px;}
.rs-type{
  border:1.5px solid var(--line);background:var(--off);
  padding:32px 24px;cursor:pointer;text-align:center;
  transition:border-color .3s,background .3s,transform .3s,box-shadow .3s;
  position:relative;overflow:hidden;
}
.rs-type::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--t);}
.rs-type:nth-child(1)::before{background:var(--teal);}
.rs-type:nth-child(2)::before{background:var(--orange);}
.rs-type:nth-child(3)::before{background:var(--magenta);}
.rs-type:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(42,110,128,.1);}
.rs-type:hover::before{transform:scaleX(1);}
.rs-type.selected{border-color:var(--teal);background:var(--teal-p);}
.rs-type.selected::before{transform:scaleX(1);}
.rs-type-icon{font-size:32px;margin-bottom:14px;display:block;}
.rs-type-name{font-family:'Satoshi',sans-serif;font-size:20px;font-weight:400;color:var(--ink);margin-bottom:6px;}
.rs-type-steps{font-size:11px;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:10px;}
.rs-type-desc{font-size:12px;font-weight:300;color:var(--mist);line-height:1.6;}
.rs-type-check{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);transition:opacity .2s,transform .3s cubic-bezier(.34,1.56,.64,1);}
.rs-type.selected .rs-type-check{opacity:1;transform:scale(1);}
.rs-type-check svg{width:12px;height:12px;stroke:white;fill:none;stroke-width:2.5;}

/* Progress bar */
.rs-progress{margin-bottom:40px;}
.rs-progress-top{display:flex;justify-content:space-between;margin-bottom:10px;}
.rs-progress-label{font-size:10px;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);}
.rs-progress-label em{color:var(--teal);font-style:normal;font-weight:400;}
.rs-bar-track{height:2px;background:var(--line);border-radius:2px;overflow:hidden;}
.rs-bar-fill{height:100%;background:linear-gradient(to right,var(--teal),var(--lime));border-radius:2px;transition:width .6s cubic-bezier(.77,0,.18,1);}

/* Step dots */
.rs-dots{display:flex;gap:8px;justify-content:center;margin-bottom:40px;flex-wrap:wrap;}
.rs-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s;}
.rs-dot.done{background:var(--teal);}
.rs-dot.active{background:var(--orange);transform:scale(1.3);}

/* Step slide */
.rs-step-title{font-family:'Satoshi',sans-serif;font-size:clamp(22px,3vw,36px);font-weight:400;color:var(--ink);letter-spacing:-.02em;margin-bottom:6px;}
.rs-step-title em{font-style:italic;color:var(--teal);}
.rs-step-hint{font-size:13px;font-weight:300;color:var(--mist);margin-bottom:36px;}

/* Product options for each step */
.rs-products{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:40px;}
.rs-prod{
  border:1.5px solid var(--line);background:var(--off);
  cursor:pointer;text-align:left;overflow:hidden;
  transition:border-color .3s,box-shadow .3s,transform .3s;
  position:relative;
}
.rs-prod:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:0 10px 28px rgba(42,110,128,.1);}
.rs-prod.selected{border-color:var(--teal);background:var(--teal-p);}
.rs-prod-img{aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative;}
.rs-prod-orb{width:54px;height:54px;border-radius:50%;transition:transform .4s;}
.rs-prod:hover .rs-prod-orb{transform:scale(1.1);}
.rs-prod-check{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);transition:opacity .2s,transform .3s cubic-bezier(.34,1.56,.64,1);}
.rs-prod.selected .rs-prod-check{opacity:1;transform:scale(1);}
.rs-prod-check svg{width:11px;height:11px;stroke:white;fill:none;stroke-width:2.5;}
.rs-prod-info{padding:14px 16px 18px;}
.rs-prod-brand{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--teal);margin-bottom:4px;}
.rs-prod-name{font-size:12px;font-weight:300;color:var(--ink);line-height:1.45;margin-bottom:6px;}
.rs-prod-price{font-size:13px;font-weight:400;color:var(--ink);}
.rs-skip{font-size:10px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);background:none;border:none;cursor:pointer;transition:color .25s;text-decoration:underline;text-underline-offset:3px;}
.rs-skip:hover{color:var(--ink);}

/* Navigation */
.rs-nav{display:flex;align-items:center;justify-content:space-between;margin-top:32px;}
.rs-btn-back{font-size:11px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;transition:color .25s,gap .25s;}
.rs-btn-back:hover{color:var(--ink);gap:12px;}
.rs-btn-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;}
.rs-btn-next{padding:14px 40px;background:var(--teal);color:var(--white);border:none;font-family:'Satoshi',sans-serif;font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:10px;position:relative;overflow:hidden;transition:background .3s;}
.rs-btn-next::before{content:'';position:absolute;inset:0;background:var(--orange);transform:translateX(-101%);transition:transform .4s cubic-bezier(.77,0,.18,1);}
.rs-btn-next:hover::before{transform:translateX(0);}
.rs-btn-next span{position:relative;z-index:1;}
.rs-btn-next svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;position:relative;z-index:1;}
.rs-btn-next:disabled{opacity:.35;pointer-events:none;}

/* Summary / results */
.rs-summary-title{font-family:'Satoshi',sans-serif;font-size:clamp(24px,3vw,40px);font-weight:400;color:var(--ink);letter-spacing:-.02em;margin-bottom:8px;}
.rs-summary-title em{font-style:italic;color:var(--orange);}
.rs-summary-sub{font-size:14px;font-weight:300;color:var(--ink-soft);line-height:1.8;margin-bottom:40px;}
.rs-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:40px;}
.rs-sum-item{border:1px solid var(--line);background:var(--off);overflow:hidden;}
.rs-sum-img{aspect-ratio:1;display:flex;align-items:center;justify-content:center;}
.rs-sum-info{padding:12px 14px;}
.rs-sum-step{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:3px;}
.rs-sum-name{font-size:11px;font-weight:300;color:var(--ink);line-height:1.4;margin-bottom:4px;}
.rs-sum-price{font-size:12px;font-weight:400;color:var(--ink);}
.rs-sum-empty{display:flex;align-items:center;justify-content:center;height:100%;min-height:80px;font-size:11px;color:var(--mist);font-style:italic;}

.rs-cart-bar{background:var(--ink);padding:20px 32px;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.rs-cart-info{color:var(--white);}
.rs-cart-count{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:4px;}
.rs-cart-total{font-family:'Satoshi',sans-serif;font-size:24px;font-weight:400;}
.rs-cart-btn{padding:14px 40px;background:var(--teal);color:var(--white);border:none;font-family:'Satoshi',sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:background .3s;white-space:nowrap;}
.rs-cart-btn:hover{background:var(--orange);}
.rs-restart{font-size:10px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;transition:color .25s;}
.rs-restart:hover{color:var(--teal);}
.rs-restart svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5;}

/* ── INSTAGRAM ── */
.section-ig{padding:100px 0 0;background:var(--white);}
.ig-header{text-align:center;padding:0 56px;margin-bottom:48px;}
.ig-handle{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:300;color:var(--teal);text-decoration:none;letter-spacing:.05em;border-bottom:1px solid var(--teal);padding-bottom:3px;transition:color var(--t-fast),gap var(--t-fast);}
.ig-handle:hover{color:var(--magenta);border-color:var(--magenta);gap:16px;}
.ig-handle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;}
.ig-item{aspect-ratio:1;overflow:hidden;position:relative;cursor:pointer;}
.ig-item-bg{width:100%;height:100%;transition:transform .6s ease;}
.ig-item:hover .ig-item-bg{transform:scale(1.06);}
.ig-overlay{position:absolute;inset:0;background:rgba(42,110,128,0);display:flex;align-items:center;justify-content:center;transition:background var(--t-fast);}
.ig-item:hover .ig-overlay{background:rgba(42,110,128,.4);}
.ig-overlay svg{width:28px;height:28px;stroke:white;fill:none;stroke-width:1.5;opacity:0;transform:scale(.7);transition:opacity var(--t-fast),transform var(--t-fast);}
.ig-item:hover .ig-overlay svg{opacity:1;transform:scale(1);}

/* ── FOOTER TRUST ── */
.ft-trust{max-width:1440px;margin:0 auto 48px;padding-bottom:48px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:32px;}
.ft-trust-badges{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.ft-badge{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:300;color:var(--ink-soft);letter-spacing:.05em;}
.ft-badge svg{width:22px;height:22px;stroke:var(--teal);fill:none;stroke-width:1.5;flex-shrink:0;}
.ft-payments{display:flex;align-items:center;gap:12px;}
.ft-pay{height:28px;padding:4px 10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;letter-spacing:.05em;color:var(--ink-soft);border-radius:4px;background:var(--white);}



/* ══════════════════════════════════════
   ROUTINE BUILDER — SLIDESHOW
══════════════════════════════════════ */
const ROUTINE_DATA = {
  5: [
    {
      step:'Paso 1', name:'Limpieza', icon:'🫧',
      hint:'Elimina impurezas sin dañar tu barrera cutánea',
      products:[
        {brand:'COSRX',name:'Low pH Good Morning Gel Cleanser',price:280,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Anua',name:'Heartleaf Pore Control Cleansing Oil',price:340,bg:'#FDF0E8',orb:'rgba(200,98,42,.3)'},
        {brand:'Beauty of Joseon',name:'Green Plum Refreshing Cleanser',price:295,bg:'#F0F7E0',orb:'rgba(122,170,32,.3)'},
      ]
    },
    {
      step:'Paso 2', name:'Tónico', icon:'🌿',
      hint:'Equilibra el pH y prepara tu piel para absorber activos',
      products:[
        {brand:'Anua',name:'Heartleaf 77% Soothing Toner',price:460,bg:'#FAE8F4',orb:'rgba(160,38,122,.3)'},
        {brand:'Klairs',name:'Supple Preparation Unscented Toner',price:395,bg:'#EFE6FA',orb:'rgba(106,40,152,.3)'},
        {brand:'Some By Mi',name:'AHA·BHA·PHA 30 Days Miracle Toner',price:310,bg:'#FDF0E8',orb:'rgba(200,98,42,.3)'},
      ]
    },
    {
      step:'Paso 3', name:'Esencia', icon:'✨',
      hint:'El corazón del K-Beauty — hidratación profunda y renovación',
      products:[
        {brand:'COSRX',name:'Advanced Snail 96 Mucin Power Essence',price:420,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Missha',name:'Time Revolution First Treatment Essence',price:520,bg:'#F0F7E0',orb:'rgba(122,170,32,.3)'},
        {brand:'Isntree',name:'Hyaluronic Acid Toner',price:350,bg:'#FAE8F4',orb:'rgba(160,38,122,.3)'},
      ]
    },
    {
      step:'Paso 4', name:'Sérum', icon:'💎',
      hint:'Activos concentrados para tu preocupación principal',
      products:[
        {brand:'Beauty of Joseon',name:'Glow Serum: Propolis + Niacinamide',price:480,bg:'#FDF0E8',orb:'rgba(200,98,42,.3)'},
        {brand:'Some By Mi',name:'Snail Truecica Miracle Repair Serum',price:410,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Numbuzin',name:'No.3 Poreless Soft Serum',price:445,bg:'#EFE6FA',orb:'rgba(106,40,152,.3)'},
      ]
    },
    {
      step:'Paso 5', name:'SPF Coreano', icon:'☀️',
      hint:'El paso más importante. Siempre al final de tu rutina AM',
      products:[
        {brand:'Beauty of Joseon',name:'Relief Sun: Rice + Probiotics SPF50',price:510,bg:'#F0F7E0',orb:'rgba(122,170,32,.3)'},
        {brand:'Isntree',name:'Hyaluronic Acid Watery Sun Gel SPF50',price:350,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Round Lab',name:'Birch Juice Moisturizing Sun Cream',price:390,bg:'#FAE8F4',orb:'rgba(160,38,122,.3)'},
      ]
    },
  ],
  7: [
    {
      step:'Paso 1', name:'Limpieza con aceite', icon:'🫧',
      hint:'Primera limpieza: disuelve maquillaje, SPF y sebo',
      products:[
        {brand:'Anua',name:'Heartleaf Pore Control Cleansing Oil',price:340,bg:'#FDF0E8',orb:'rgba(200,98,42,.3)'},
        {brand:'COSRX',name:'Salicylic Acid Daily Gentle Cleanser',price:290,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Beauty of Joseon',name:'Radiance Cleansing Balm',price:365,bg:'#F0F7E0',orb:'rgba(122,170,32,.3)'},
      ]
    },
    {
      step:'Paso 2', name:'Limpieza con espuma', icon:'💦',
      hint:'Segunda limpieza: elimina residuos sin alterar el pH',
      products:[
        {brand:'COSRX',name:'Low pH Good Morning Gel Cleanser',price:280,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Anua',name:'Heartleaf Pore Control Foam Cleanser',price:310,bg:'#FAE8F4',orb:'rgba(160,38,122,.3)'},
        {brand:'Some By Mi',name:'Yuja Niacin Brightening Foam',price:295,bg:'#FDF0E8',orb:'rgba(200,98,42,.3)'},
      ]
    },
    {
      step:'Paso 3', name:'Tónico', icon:'🌿',
      hint:'Equilibra el pH y prepara tu piel para los activos',
      products:[
        {brand:'Anua',name:'Heartleaf 77% Soothing Toner',price:460,bg:'#FAE8F4',orb:'rgba(160,38,122,.3)'},
        {brand:'Klairs',name:'Supple Preparation Unscented Toner',price:395,bg:'#EFE6FA',orb:'rgba(106,40,152,.3)'},
        {brand:'Some By Mi',name:'AHA·BHA·PHA 30 Days Miracle Toner',price:310,bg:'#FDF0E8',orb:'rgba(200,98,42,.3)'},
      ]
    },
    {
      step:'Paso 4', name:'Esencia', icon:'✨',
      hint:'El corazón del K-Beauty — hidratación profunda y renovación celular',
      products:[
        {brand:'COSRX',name:'Advanced Snail 96 Mucin Power Essence',price:420,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Missha',name:'Time Revolution First Treatment Essence',price:520,bg:'#F0F7E0',orb:'rgba(122,170,32,.3)'},
        {brand:'Isntree',name:'Hyaluronic Acid Toner',price:350,bg:'#FAE8F4',orb:'rgba(160,38,122,.3)'},
      ]
    },
    {
      step:'Paso 5', name:'Sérum activo', icon:'💎',
      hint:'Activos concentrados para tu mayor preocupación',
      products:[
        {brand:'Beauty of Joseon',name:'Glow Serum: Propolis + Niacinamide',price:480,bg:'#FDF0E8',orb:'rgba(200,98,42,.3)'},
        {brand:'Some By Mi',name:'Snail Truecica Miracle Repair Serum',price:410,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Numbuzin',name:'No.3 Poreless Soft Serum',price:445,bg:'#EFE6FA',orb:'rgba(106,40,152,.3)'},
      ]
    },
    {
      step:'Paso 6', name:'Hidratante', icon:'🌸',
      hint:'Sella toda la hidratación y fortalece tu barrera cutánea',
      products:[
        {brand:'Laneige',name:'Water Sleeping Mask',price:480,bg:'#EFE6FA',orb:'rgba(106,40,152,.3)'},
        {brand:'COSRX',name:'Ultimate Nourishing Rice Overnight Spa Mask',price:350,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Klairs',name:'Midnight Blue Calming Cream',price:420,bg:'#F0F7E0',orb:'rgba(122,170,32,.3)'},
      ]
    },
    {
      step:'Paso 7', name:'SPF Coreano', icon:'☀️',
      hint:'Siempre el último paso en AM. El más importante de tu rutina',
      products:[
        {brand:'Beauty of Joseon',name:'Relief Sun: Rice + Probiotics SPF50',price:510,bg:'#F0F7E0',orb:'rgba(122,170,32,.3)'},
        {brand:'Isntree',name:'Hyaluronic Acid Watery Sun Gel SPF50',price:350,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Round Lab',name:'Birch Juice Moisturizing Sun Cream',price:390,bg:'#FAE8F4',orb:'rgba(160,38,122,.3)'},
      ]
    },
  ],
  9: [
    {
      step:'Paso 1', name:'Limpieza con aceite', icon:'🫧',
      hint:'Primera limpieza: disuelve maquillaje, SPF y sebo',
      products:[
        {brand:'Anua',name:'Heartleaf Pore Control Cleansing Oil',price:340,bg:'#FDF0E8',orb:'rgba(200,98,42,.3)'},
        {brand:'COSRX',name:'Salicylic Acid Daily Gentle Cleanser',price:290,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Beauty of Joseon',name:'Radiance Cleansing Balm',price:365,bg:'#F0F7E0',orb:'rgba(122,170,32,.3)'},
      ]
    },
    {
      step:'Paso 2', name:'Limpieza con espuma', icon:'💦',
      hint:'Segunda limpieza: piel limpia sin resecarla',
      products:[
        {brand:'COSRX',name:'Low pH Good Morning Gel Cleanser',price:280,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Anua',name:'Heartleaf Pore Control Foam Cleanser',price:310,bg:'#FAE8F4',orb:'rgba(160,38,122,.3)'},
        {brand:'Some By Mi',name:'Yuja Niacin Brightening Foam',price:295,bg:'#FDF0E8',orb:'rgba(200,98,42,.3)'},
      ]
    },
    {
      step:'Paso 3', name:'Exfoliante', icon:'🌀',
      hint:'2-3 veces por semana para renovar y afinar la textura',
      products:[
        {brand:'Some By Mi',name:'AHA·BHA·PHA 30 Days Miracle Toner',price:310,bg:'#FDF0E8',orb:'rgba(200,98,42,.3)'},
        {brand:'COSRX',name:'One Step Green Hero Calming Pad',price:380,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Neogen',name:'Bio-Peel Gauze Peeling Wine',price:420,bg:'#FAE8F4',orb:'rgba(160,38,122,.3)'},
      ]
    },
    {
      step:'Paso 4', name:'Tónico', icon:'🌿',
      hint:'Equilibra el pH y da la primera capa de hidratación',
      products:[
        {brand:'Anua',name:'Heartleaf 77% Soothing Toner',price:460,bg:'#FAE8F4',orb:'rgba(160,38,122,.3)'},
        {brand:'Klairs',name:'Supple Preparation Unscented Toner',price:395,bg:'#EFE6FA',orb:'rgba(106,40,152,.3)'},
        {brand:'Isntree',name:'Hyaluronic Acid Toner',price:350,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
      ]
    },
    {
      step:'Paso 5', name:'Esencia', icon:'✨',
      hint:'El corazón del ritual coreano — renovación celular',
      products:[
        {brand:'COSRX',name:'Advanced Snail 96 Mucin Power Essence',price:420,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Missha',name:'Time Revolution First Treatment Essence',price:520,bg:'#F0F7E0',orb:'rgba(122,170,32,.3)'},
        {brand:'SK-II',name:'Facial Treatment Essence',price:890,bg:'#FAE8F4',orb:'rgba(160,38,122,.3)'},
      ]
    },
    {
      step:'Paso 6', name:'Ampoule / Booster', icon:'⚗️',
      hint:'Concentrado potente para resultados acelerados',
      products:[
        {brand:'Some By Mi',name:'Snail Truecica Miracle Repair Serum',price:410,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Beauty of Joseon',name:'Revive Eye Serum: Ginseng + Retinal',price:480,bg:'#FDF0E8',orb:'rgba(200,98,42,.3)'},
        {brand:'Numbuzin',name:'No.5 Vitamin Niacin Concentrated Serum',price:465,bg:'#EFE6FA',orb:'rgba(106,40,152,.3)'},
      ]
    },
    {
      step:'Paso 7', name:'Sérum activo', icon:'💎',
      hint:'Activos específicos para tu preocupación principal',
      products:[
        {brand:'Beauty of Joseon',name:'Glow Serum: Propolis + Niacinamide',price:480,bg:'#FDF0E8',orb:'rgba(200,98,42,.3)'},
        {brand:'Numbuzin',name:'No.3 Poreless Soft Serum',price:445,bg:'#EFE6FA',orb:'rgba(106,40,152,.3)'},
        {brand:'Isntree',name:'Onion Newpair Ampoule',price:390,bg:'#F0F7E0',orb:'rgba(122,170,32,.3)'},
      ]
    },
    {
      step:'Paso 8', name:'Hidratante & crema', icon:'🌸',
      hint:'Sella y nutre. El abrazo final que protege tu barrera',
      products:[
        {brand:'Laneige',name:'Water Sleeping Mask',price:480,bg:'#EFE6FA',orb:'rgba(106,40,152,.3)'},
        {brand:'Klairs',name:'Midnight Blue Calming Cream',price:420,bg:'#F0F7E0',orb:'rgba(122,170,32,.3)'},
        {brand:'COSRX',name:'Ultimate Nourishing Rice Overnight Spa Mask',price:350,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
      ]
    },
    {
      step:'Paso 9', name:'SPF Coreano', icon:'☀️',
      hint:'Siempre el último. Sin SPF, todos los pasos anteriores son en vano',
      products:[
        {brand:'Beauty of Joseon',name:'Relief Sun: Rice + Probiotics SPF50',price:510,bg:'#F0F7E0',orb:'rgba(122,170,32,.3)'},
        {brand:'Isntree',name:'Hyaluronic Acid Watery Sun Gel SPF50',price:350,bg:'#E0F2F7',orb:'rgba(42,110,128,.3)'},
        {brand:'Round Lab',name:'Birch Juice Moisturizing Sun Cream',price:390,bg:'#FAE8F4',orb:'rgba(160,38,122,.3)'},
      ]
    },
  ]
};

let rsType = null;
let rsCurrentStep = 0;
let rsSteps = [];
let rsSelections = {};

function selectRoutineType(n, el) {
  rsType = n;
  document.querySelectorAll('.rs-type').forEach(t => t.classList.remove('selected'));
  el.classList.add('selected');
  document.getElementById('rsBtnStart').disabled = false;
}

function startRoutine() {
  rsSteps = ROUTINE_DATA[rsType];
  rsSelections = {};
  rsCurrentStep = 0;
  buildStepSlides();
  goToSlide('rsStep0');
}

function buildStepSlides() {
  const container = document.getElementById('rsStepsContainer');
  container.innerHTML = '';
  rsSteps.forEach((step, i) => {
    const slide = document.createElement('div');
    slide.className = 'rslide';
    slide.id = 'rsStep' + i;
    slide.innerHTML = `
      <div class="rs-progress">
        <div class="rs-progress-top">
          <span class="rs-progress-label"><em>${step.step} de ${rsSteps.length}</em> — ${step.name}</span>
          <span class="rs-progress-label"><em>${Math.round(((i+1)/rsSteps.length)*100)}%</em></span>
        </div>
        <div class="rs-bar-track"><div class="rs-bar-fill" style="width:${Math.round(((i+1)/rsSteps.length)*100)}%"></div></div>
      </div>
      <div class="rs-dots">${rsSteps.map((_,j) => `<div class="rs-dot ${j<i?'done':j===i?'active':''}" id="rsDot${i}_${j}"></div>`).join('')}</div>
      <p class="rs-step-title">${step.icon} <em>${step.name}</em></p>
      <p class="rs-step-hint">${step.hint} — elige el que más te convenga</p>
      <div class="rs-products">
        ${step.products.map((p, pi) => `
          <button class="rs-prod" onclick="selectProduct(${i},${pi},this)">
            <div class="rs-prod-img" style="background:${p.bg}">
              <div class="rs-prod-orb" style="background:radial-gradient(circle at 38% 38%,${p.orb},transparent);border:1px solid ${p.orb}"></div>
              <div class="rs-prod-check"><svg viewBox="0 0 12 12"><path d="M2 6l3 3 5-5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
            </div>
            <div class="rs-prod-info">
              <div class="rs-prod-brand">${p.brand}</div>
              <div class="rs-prod-name">${p.name}</div>
              <div class="rs-prod-price">$${p.price} MXN</div>
            </div>
          </button>
        `).join('')}
      </div>
      <div class="rs-nav">
        <button class="rs-btn-back" onclick="rsPrev(${i})">
          <svg viewBox="0 0 24 24"><path d="M19 12H5M12 19l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round"/></svg>
          Atrás
        </button>
        <div style="display:flex;align-items:center;gap:20px">
          <button class="rs-skip" onclick="rsSkip(${i})">Omitir este paso</button>
          <button class="rs-btn-next" id="rsNext${i}" disabled onclick="rsNext(${i})">
            <span>${i === rsSteps.length-1 ? 'Ver mi rutina' : 'Siguiente paso'}</span>
            <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </button>
        </div>
      </div>
    `;
    container.appendChild(slide);
  });
}

function selectProduct(stepIdx, prodIdx, btn) {
  btn.closest('.rs-products').querySelectorAll('.rs-prod').forEach(b => b.classList.remove('selected'));
  btn.classList.add('selected');
  rsSelections[stepIdx] = rsSteps[stepIdx].products[prodIdx];
  rsSelections[stepIdx]._step = rsSteps[stepIdx].step;
  rsSelections[stepIdx]._name = rsSteps[stepIdx].name;
  document.getElementById('rsNext' + stepIdx).disabled = false;
}

function rsNext(i) {
  if (i === rsSteps.length - 1) { showRoutineSummary(); return; }
  goToSlide('rsStep' + (i + 1));
}

function rsPrev(i) {
  if (i === 0) { goToSlide('rs0'); return; }
  goToSlide('rsStep' + (i - 1));
}

function rsSkip(i) {
  delete rsSelections[i];
  document.getElementById('rsNext' + i).disabled = false;
  rsNext(i);
}

function goToSlide(id) {
  document.querySelectorAll('.rslide').forEach(s => s.classList.remove('active'));
  document.getElementById(id).classList.add('active');
  document.getElementById('rutina').scrollIntoView({behavior:'smooth', block:'start'});
}

function showRoutineSummary() {
  const selected = Object.values(rsSelections);
  const total = selected.reduce((s, p) => s + (p.price||0), 0);

  document.getElementById('rsSumTitle').innerHTML = `Tu rutina de <em>${rsType} pasos</em> está lista`;
  document.getElementById('rsSumSub').textContent = `Seleccionaste ${selected.length} productos. Agrégalos todos al carrito con un click.`;
  document.getElementById('rsSumCount').textContent = selected.length;
  document.getElementById('rsSumCartCount').textContent = `${selected.length} productos`;
  document.getElementById('rsSumTotal').textContent = `$${total.toLocaleString()} MXN`;

  const grid = document.getElementById('rsSumGrid');
  grid.innerHTML = rsSteps.map((step, i) => {
    const p = rsSelections[i];
    if (!p) return `
      <div class="rs-sum-item">
        <div class="rs-sum-img" style="background:var(--off)"><div class="rs-sum-empty">Omitido</div></div>
        <div class="rs-sum-info">
          <div class="rs-sum-step">${step.step}</div>
          <div class="rs-sum-name" style="color:var(--mist)">${step.name}</div>
        </div>
      </div>`;
    return `
      <div class="rs-sum-item">
        <div class="rs-sum-img" style="background:${p.bg}">
          <div style="width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 38% 38%,${p.orb},transparent);border:1px solid ${p.orb}"></div>
        </div>
        <div class="rs-sum-info">
          <div class="rs-sum-step">${p._step} · ${p._name}</div>
          <div class="rs-sum-name">${p.brand} — ${p.name}</div>
          <div class="rs-sum-price">$${p.price} MXN</div>
        </div>
      </div>`;
  }).join('');

  goToSlide('rsSummary');
}

function addAllToCart() {
  openCart();
}

function resetRoutine() {
  rsType = null; rsSelections = {}; rsCurrentStep = 0;
  document.querySelectorAll('.rs-type').forEach(t => t.classList.remove('selected'));
  document.getElementById('rsBtnStart').disabled = true;
  goToSlide('rs0');
}

/* ── SKIN QUIZ ── */
.section-quiz{
  padding:120px 56px;
  background:var(--off);
  position:relative;overflow:hidden;
}
.quiz-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 40% 50% at 10% 50%, rgba(42,110,128,.07), transparent),
    radial-gradient(ellipse 35% 45% at 90% 50%, rgba(200,98,42,.05), transparent);
}
.quiz-inner{max-width:780px;margin:0 auto;position:relative;z-index:1;}

/* Header */
.quiz-header{text-align:center;margin-bottom:56px;}
.quiz-eyebrow{font-size:9px;font-weight:300;letter-spacing:.4em;text-transform:uppercase;color:var(--teal);margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:12px;}
.quiz-eyebrow span{width:24px;height:1px;background:var(--teal);display:block;}
.quiz-title{font-family:'Satoshi',sans-serif;font-size:clamp(28px,4vw,52px);font-weight:400;color:var(--ink);letter-spacing:-.02em;line-height:1.15;margin-bottom:12px;}
.quiz-title em{font-style:italic;color:var(--orange);}
.quiz-sub{font-size:14px;font-weight:300;color:var(--ink-soft);line-height:1.8;}

/* Progress bar */
.quiz-progress{margin-bottom:48px;}
.quiz-progress-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.quiz-step-label{font-size:10px;font-weight:300;letter-spacing:.25em;text-transform:uppercase;color:var(--mist);}
.quiz-step-label span{color:var(--teal);font-weight:400;}
.quiz-bar-track{height:2px;background:var(--line);border-radius:2px;overflow:hidden;}
.quiz-bar-fill{height:100%;background:linear-gradient(to right,var(--teal),var(--lime));border-radius:2px;transition:width .6s cubic-bezier(.77,0,.18,1);}

/* Steps */
.quiz-step{display:none;animation:quizFadeIn .5s ease forwards;}
.quiz-step.active{display:block;}
@keyframes quizFadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.quiz-question{font-family:'Satoshi',sans-serif;font-size:clamp(20px,2.5vw,30px);font-weight:400;color:var(--ink);letter-spacing:-.01em;margin-bottom:36px;line-height:1.3;}
.quiz-question em{font-style:italic;color:var(--teal);}

/* Options grid */
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:40px;}
.quiz-opt{
  padding:20px 24px;
  border:1.5px solid var(--line);
  background:var(--white);
  cursor:pointer;
  transition:border-color .25s,background .25s,transform .2s,box-shadow .25s;
  display:flex;align-items:center;gap:16px;
  text-align:left;
  position:relative;overflow:hidden;
}
.quiz-opt::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(42,110,128,.06),rgba(122,170,32,.04));
  opacity:0;transition:opacity .25s;
}
.quiz-opt:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 8px 24px rgba(42,110,128,.1);}
.quiz-opt:hover::before{opacity:1;}
.quiz-opt.selected{border-color:var(--teal);background:var(--teal-p);box-shadow:0 8px 24px rgba(42,110,128,.12);}
.quiz-opt.selected::before{opacity:1;}
.quiz-opt-icon{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:20px;
  background:var(--off);
  transition:background .25s,transform .25s;
}
.quiz-opt.selected .quiz-opt-icon{transform:scale(1.1);}
.quiz-opt-text{}
.quiz-opt-name{font-size:14px;font-weight:400;color:var(--ink);margin-bottom:3px;transition:color .25s;}
.quiz-opt.selected .quiz-opt-name{color:var(--teal);}
.quiz-opt-desc{font-size:11px;font-weight:300;color:var(--mist);line-height:1.5;}
.quiz-check{
  position:absolute;top:12px;right:12px;
  width:20px;height:20px;border-radius:50%;
  background:var(--teal);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0);transition:opacity .2s,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.quiz-opt.selected .quiz-check{opacity:1;transform:scale(1);}
.quiz-check svg{width:11px;height:11px;stroke:white;fill:none;stroke-width:2.5;}

/* Nav buttons */
.quiz-nav{display:flex;align-items:center;justify-content:space-between;}
.quiz-btn-back{
  font-size:11px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist);background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:8px;transition:color .25s,gap .25s;
}
.quiz-btn-back:hover{color:var(--ink);gap:12px;}
.quiz-btn-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;}
.quiz-btn-next{
  padding:14px 40px;background:var(--teal);color:var(--white);
  border:none;font-family:'Satoshi',sans-serif;font-size:11px;
  font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;position:relative;overflow:hidden;
  transition:background .3s;display:flex;align-items:center;gap:10px;
}
.quiz-btn-next::before{content:'';position:absolute;inset:0;background:var(--orange);transform:translateX(-101%);transition:transform .4s cubic-bezier(.77,0,.18,1);}
.quiz-btn-next:hover::before{transform:translateX(0);}
.quiz-btn-next span{position:relative;z-index:1;}
.quiz-btn-next svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;position:relative;z-index:1;}
.quiz-btn-next:disabled{opacity:.4;pointer-events:none;}

/* Results */
.quiz-results{display:none;animation:quizFadeIn .6s ease forwards;}
.quiz-results.active{display:block;}
.quiz-result-header{text-align:center;margin-bottom:48px;}
.quiz-result-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--teal);color:var(--white);
  padding:10px 24px;font-size:10px;letter-spacing:.25em;
  text-transform:uppercase;font-weight:400;margin-bottom:24px;
}
.quiz-result-title{font-family:'Satoshi',sans-serif;font-size:clamp(24px,3vw,40px);font-weight:400;color:var(--ink);letter-spacing:-.02em;margin-bottom:12px;}
.quiz-result-title em{font-style:italic;color:var(--orange);}
.quiz-result-sub{font-size:14px;font-weight:300;color:var(--ink-soft);line-height:1.8;max-width:500px;margin:0 auto;}

.quiz-result-routine{margin-bottom:48px;}
.quiz-routine-label{font-size:10px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--teal);margin-bottom:24px;border-top:1px solid var(--line);padding-top:24px;}
.quiz-products{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.quiz-product{background:var(--white);border:1px solid var(--line);overflow:hidden;transition:transform .3s,box-shadow .3s;}
.quiz-product:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(42,110,128,.1);}
.quiz-product-img{aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative;}
.quiz-product-step{position:absolute;top:10px;left:10px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;background:var(--teal);color:var(--white);padding:4px 10px;}
.quiz-product-info{padding:16px;}
.quiz-product-brand{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--teal);margin-bottom:4px;}
.quiz-product-name{font-size:12px;font-weight:300;color:var(--ink);line-height:1.4;margin-bottom:8px;}
.quiz-product-price{font-size:13px;font-weight:400;color:var(--ink);}
.quiz-product-cta{width:100%;padding:11px;background:var(--ink);color:var(--white);border:none;font-size:9px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .25s;}
.quiz-product-cta:hover{background:var(--teal);}

.quiz-restart{
  text-align:center;
  font-size:11px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist);background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:8px;margin:0 auto;
  transition:color .25s;
}
.quiz-restart:hover{color:var(--teal);}

/* ── Quiz results: see-all link ── */
.quiz-see-all{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;color:var(--teal);
  border-bottom:1px solid currentColor;padding-bottom:2px;
  transition:gap .3s,color .2s;
}
.quiz-see-all:hover{gap:14px;color:var(--ink);}

/* ── ANIMATIONS ── */
@keyframes slideRight{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
@keyframes lineUp{to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.js-ready .sr{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.4,0,.2,1),transform .9s cubic-bezier(.4,0,.2,1);}
.sr.on,.js-ready .sr.on{opacity:1 !important;transform:translateY(0) !important;}
.js-ready .sr-l{opacity:0;transform:translateX(-40px);transition:opacity .9s cubic-bezier(.4,0,.2,1),transform .9s cubic-bezier(.4,0,.2,1);}
.sr-l.on,.js-ready .sr-l.on{opacity:1 !important;transform:translateX(0) !important;}
.d1{transition-delay:.1s}.d2{transition-delay:.22s}.d3{transition-delay:.34s}.d4{transition-delay:.48s}.d5{transition-delay:.62s}
.hero-scroll-line{width:1px;height:32px;background:var(--teal);opacity:.5;}
.hero-scroll span{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--mist);}

/* fix for fixed nav+announce covering content */
.page.active{padding-top:100px;}
.page#page-home.active{padding-top:0;} /* home hero handles its own offset */

/* ── BUTTON: btn-primary (hero CTA) ── */
.btn-primary{display:inline-flex;align-items:center;gap:12px;padding:15px 36px;background:#1A1A1A;color:#fff;font-family:'Satoshi',sans-serif;font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;border:none;cursor:pointer;position:relative;overflow:hidden;transition:gap .3s;}
.btn-primary::before{content:'';position:absolute;inset:0;background:var(--slide-btn-hover,#C8622A);transform:translateX(-101%);transition:transform .4s cubic-bezier(.4,0,.2,1);}
.btn-primary span,.btn-primary svg{position:relative;z-index:1;}
.btn-primary:hover::before{transform:translateX(0);}
.btn-primary svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;}
/* ── BUTTON: btn-secondary (outline) ── */
.btn-secondary{display:inline-flex;align-items:center;gap:10px;padding:13px 32px;background:none;border:1.5px solid var(--teal);color:var(--teal);font-family:'Satoshi',sans-serif;font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .3s,color .3s;}
.btn-secondary:hover{background:var(--teal);color:var(--white);}

/* ═══════════════════════════════════════════════
   RESPONSIVE — HORI Korean Skincare
   Breakpoints: 768px (tablet) · 480px (mobile)
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── GLOBAL ── */
  html { font-size: 15px; }
  section, .section-statement, .section-products,
  .section-quiz, .section-reviews, .section-why,
  .section-story, .section-nl, .section-ba, .ba-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ── ANNOUNCEMENT ── */
  .announce { height: 32px; }

  /* ── NAV ── */
  #nav { top: 32px; padding: 0 20px !important; height: 56px !important; }
  #nav .nav-links { display: none !important; }
  .nav-search { display: none !important; }

  .mobile-menu { top: 56px; padding-top: 40px; }

  /* ── HERO ── */
  .hero {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100svh !important;
    margin-top: 88px !important;
    padding-bottom: 48px;
  }
  /* Carousel hero: no padding-bottom (slides handle their own spacing) */
  .hero.hero-has-carousel {
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
  .hero-l {
    padding: 48px 24px 0 !important;
    align-items: flex-start;
  }
  .hero-r { display: none !important; }
  .hero-h1 { font-size: clamp(40px, 12vw, 64px) !important; line-height: .93 !important; }
  .hero-sub { max-width: 100% !important; font-size: 14px; }
  .hero-actions { flex-direction: column !important; gap: 16px !important; align-items: flex-start !important; }
  .hero-tags { display: none !important; }
  .hero-scroll { display: none !important; }

  /* ── TICKER ── */
  .ticker-item { font-size: 9px; letter-spacing: .2em; }

  /* ── STATEMENT ── */
  .section-statement {
    grid-template-columns: 1fr !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    gap: 24px !important;
  }
  .stmt-label { display: none; }
  .stmt-text { font-size: clamp(28px, 8vw, 42px) !important; }

  /* ── PRODUCTS ── */
  .section-products { padding-top: 64px !important; padding-bottom: 64px !important; }
  .prod-header { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .prod-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
  }
  .pcard:first-child {
    grid-column: span 1 !important;
    aspect-ratio: auto !important;
  }
  .pcard-img { height: 200px !important; }

  /* ── STICKY ATC: hidden on mobile (replaced by spFab) ── */
  .sticky-atc { display: none !important; }

  /* ── SKIN QUIZ ── */
  .section-quiz { padding-top: 80px !important; padding-bottom: 80px !important; }
  .quiz-inner { padding: 0 !important; }
  .quiz-header { margin-bottom: 40px; }
  .quiz-title { font-size: clamp(28px, 8vw, 40px) !important; }
  .quiz-options { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .quiz-opt { padding: 16px 12px !important; }
  .quiz-opt-icon { font-size: 20px !important; }
  .quiz-progress { margin-bottom: 32px; }
  .quiz-btn-next, .quiz-btn-back { padding: 13px 24px !important; font-size: 10px !important; }

  /* ── RESULTS ── */
  .results-inner { padding: 0 !important; }
  .result-cta-banner { padding: 40px 24px !important; flex-direction: column !important; gap: 20px !important; }
  .result-cta-text { font-size: clamp(20px, 6vw, 28px) !important; }

  /* ── ROUTINE BUILDER ── */
  .rs-wrap { padding: 80px 20px !important; }
  .rs-header { margin-bottom: 40px; }
  .rs-title { font-size: clamp(26px, 7vw, 36px) !important; }
  .rs-types {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .rs-type { padding: 20px 16px !important; }
  .rs-steps { gap: 8px !important; }
  .rs-step-img { width: 60px !important; height: 60px !important; }
  .rs-sum-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* ── RITUAL (7 pasos) ── */
  .section-split {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  /* Visual panel becomes the header on mobile */
  .split-visual {
    order: 1 !important;
    min-height: auto !important;
    padding: 48px 24px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .split-visual-bg { display: none !important; }
  .split-rings { display: none !important; }
  .split-num {
    font-size: 88px !important;
    opacity: .15 !important;
    position: static !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    font-family: 'Satoshi', sans-serif !important;
    color: rgba(255,255,255,.5) !important;
  }
  .split-eyebrow {
    font-size: 9px !important;
    letter-spacing: .3em !important;
    color: rgba(255,255,255,.5) !important;
    margin-bottom: 12px !important;
  }
  .split-text-wrap {
    position: static !important;
    padding: 0 !important;
    text-align: left !important;
    background: none !important;
    width: 100% !important;
  }
  .split-title {
    font-size: clamp(26px, 7vw, 36px) !important;
    color: var(--white) !important;
    line-height: 1.05 !important;
  }
  .split-title em { color: var(--lime) !important; }
  .split-sub {
    font-size: 13px !important;
    color: rgba(255,255,255,.65) !important;
    max-width: 100% !important;
    margin-top: 12px !important;
  }
  /* Steps panel below */
  .split-content {
    order: 2 !important;
    padding: 32px 20px !important;
    background: var(--teal-p) !important;
  }
  .rstep {
    padding: 16px 0 !important;
    grid-template-columns: 44px 1fr !important;
    gap: 16px !important;
  }
  .rnum { font-size: 28px !important; color: var(--teal) !important; opacity: .4 !important; }
  .rname { font-size: 13px !important; }
  .rdesc { font-size: 12px !important; }
  .rname { font-size: 13px !important; }

  /* ── BEFORE/AFTER ── */
  .section-ba, .ba-section { padding: 80px 20px !important; }
  .ba-header { margin-bottom: 32px; }
  .ba-title { font-size: clamp(26px, 7vw, 36px) !important; }
  .ba-wrap { height: 380px !important; }
  .ba-label { font-size: 8px !important; padding: 5px 10px !important; }

  /* ── REVIEWS ── */
  .section-reviews { padding-top: 80px !important; padding-bottom: 80px !important; }
  .reviews-header { width: 100% !important; margin-bottom: 40px; }
  .reviews-title { font-size: clamp(26px, 7vw, 36px) !important; }
  .review-track { gap: 12px !important; }
  .review-card { min-width: 280px !important; padding: 28px 20px !important; }

  /* ── BRANDS MARQUEE ── */
  .brands-item { padding: 0 24px !important; }
  .brands-name { font-size: 12px !important; }

  /* ── WHY HORI ── */
  .section-why { padding-top: 80px !important; padding-bottom: 80px !important; }
  .why-title { font-size: clamp(26px, 7vw, 36px) !important; }
  .why-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .why-item { padding: 28px 20px !important; }
  .why-title { font-size: 13px !important; }

  /* ── STORY ── */
  .section-story {
    grid-template-columns: 1fr !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    gap: 40px !important;
  }
  .story-visual { order: 2; height: 300px !important; min-height: unset !important; }
  .story-text { order: 1; }
  .story-main { height: 100% !important; position: absolute !important; inset: 0 !important; }
  .story-float { display: none !important; }
  .story-q { font-size: clamp(18px, 5vw, 22px) !important; }

  /* ── INSTAGRAM ── */
  .section-ig { padding: 80px 20px !important; }
  .ig-title { font-size: clamp(24px, 7vw, 32px) !important; }
  .ig-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── NEWSLETTER ── */
  .section-nl { padding-top: 80px !important; padding-bottom: 80px !important; overflow: hidden; }
  .nl-giant { font-size: clamp(56px, 18vw, 100px) !important; letter-spacing: -.02em !important; }
  .nl-inner { padding: 0 !important; }
  .nl-title { font-size: clamp(26px, 7vw, 36px) !important; }
  .nl-sub { font-size: 13px; }
  .nl-form { width: 100% !important; flex-direction: column !important; gap: 10px !important; }
  .nl-input { width: 100% !important; }
  .nl-btn { width: 100% !important; justify-content: center !important; }

  /* ── FOOTER ── */
  footer { padding: 56px 20px 32px !important; }
  .ft {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px 24px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .ft > div:first-child { grid-column: span 2 !important; }
  .ft-logo { font-size: 28px !important; }
  .ft-desc { font-size: 11px; }
  .ft-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
  .ft-copy { font-size: 9px !important; }

  /* ── BUTTONS ── */
  .btn-fill, .btn-primary {
    padding: 13px 28px !important;
    font-size: 10px !important;
  }
  .btn-outline, .btn-secondary {
    padding: 11px 24px !important;
    font-size: 10px !important;
  }
}

/* ── EXTRA SMALL (< 480px) ── */
@media (max-width: 480px) {

  /* ── HERO ── */
  .hero-h1 { font-size: clamp(34px, 10vw, 52px) !important; }

  /* ── PRODUCTS ── */
  .prod-grid { grid-template-columns: 1fr !important; }
  .pcard-img { height: 240px !important; }

  /* ── QUIZ ── */
  .quiz-options { grid-template-columns: 1fr !important; }

  /* ── WHY ── */
  .why-inner { grid-template-columns: 1fr !important; }

  /* ── ROUTINE TYPES ── */
  .rs-types { grid-template-columns: 1fr !important; }

  /* ── FOOTER ── */
  .ft { grid-template-columns: 1fr !important; }
  /* ft first-child already reset in 480px */


/* ═══════════════════════════════════════════════
   NEW SECTION MOBILE FIXES
   ═══════════════════════════════════════════════ */

/* ── Why HORI new layout ── */
@media (max-width: 768px) {
  .why-layout-cards .why-inner,
  .why-layout-numbered .why-inner { grid-template-columns: 1fr 1fr !important; }
  .why-layout-row .why-inner { grid-template-columns: 1fr !important; }
  .why-item { padding: 28px 20px !important; }
  .nval-header { padding: 48px 24px 32px !important; }
  .nval-grid { grid-template-columns: 1fr 1fr !important; }
  .nval-item { padding: 28px 20px !important; }
  .nmis-header { padding: 48px 24px 32px !important; }
  .nmis-items { grid-template-columns: 1fr 1fr !important; }
  .nteam-header { padding: 48px 24px 32px !important; }
  .nteam-grid { grid-template-columns: 1fr !important; }
  .ncta { padding: 72px 24px !important; }
  .nhero { grid-template-columns: 1fr !important; }
  .nhero-left { padding: 56px 24px !important; }
  .nhero-right { min-height: 220px !important; }
  .nhist-grid { grid-template-columns: 1fr !important; }
  .nhist-left, .nhist-right { padding: 48px 24px !important; }
  .hsearch-hero { padding: 110px 24px 40px !important; }
  .mg-section { padding: 48px 0 !important; }
  .mg-header { padding: 0 24px; margin-bottom: 40px !important; }
  .brands-main-grid--cols-4,
  .brands-main-grid--cols-5,
  .brands-main-grid--cols-6 { grid-template-columns: repeat(2, 1fr) !important; }
  .mwhy { display: block !important; }
  .mwhy-left, .mwhy--editorial .mwhy-left { padding: 48px 24px 32px !important; border-right: none !important; border-bottom: 1px solid rgba(0,0,0,.08) !important; }
  .mwhy--editorial .mwhy-items { grid-template-columns: 1fr !important; }
  .mwhy--grid-4 .mwhy-items,
  .mwhy--numbered .mwhy-items { grid-template-columns: 1fr 1fr !important; }
  /* footer new */
  .footer-section .ft-body { padding: 48px 24px 40px !important; }
  .ft-layout-standard .ft-grid,
  .ft-layout-symmetric .ft-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  /* collection */
  .col-body { padding: 0 0 48px !important; }
  .col-filters { padding: 12px 16px !important; }
  .col-meta { padding: 12px 16px !important; }
}

@media (max-width: 480px) {
  .nval-grid { grid-template-columns: 1fr !important; }
  .nmis-items { grid-template-columns: 1fr !important; }
  .why-layout-cards .why-inner,
  .why-layout-numbered .why-inner { grid-template-columns: 1fr !important; }
  .brands-main-grid--cols-3,
  .brands-main-grid--cols-4,
  .brands-main-grid--cols-5,
  .brands-main-grid--cols-6 { grid-template-columns: 1fr 1fr !important; }
  .hsearch-grid--cols-3,
  .hsearch-grid--cols-4 { grid-template-columns: 1fr 1fr !important; }
  .ft-layout-standard .ft-grid,
  .ft-layout-symmetric .ft-grid { grid-template-columns: 1fr !important; }
}

  /* ── INSTAGRAM ── */
  .ig-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── STORY STATS ── */
  .story-stats { flex-direction: column !important; gap: 16px !important; }
}


/* ═══════════════════════════════════════════
   FIXES MOBILE v2
   ═══════════════════════════════════════════ */

/* ── NAV: hamburger solo mobile, account siempre visible ── */
.nav-hamburger { display: none; }
.hamburger { display: none; }
.nav-account { display: flex; }

/* ── RS BANNERS: layout correcto ── */
.rs-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: 28px;
}
.rs-quiz-banner {
  background: var(--teal-p);
  border: 1.5px solid rgba(42,110,128,.25);
}
.rs-hint-banner {
  border: 1px dashed rgba(42,110,128,.35);
  background: transparent;
}

/* ── REVIEWS SCROLL HINT ── */
.reviews-scroll-hint { display: none; }

@media (max-width: 768px) {

  /* ── NAV ── */
  .hamburger { display: flex !important; }
  .nav-account { display: none !important; }
  .nav-search { display: none !important; }

  /* ── RS BANNERS mobile ── */
  .rs-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px 16px !important;
    gap: 12px !important;
  }
  .rs-banner .rs-banner-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .rs-banner > button {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* ── REVIEWS: horizontal scroll ── */
  .reviews-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding-bottom: 16px !important;
    scrollbar-width: none !important;
  }
  .reviews-grid::-webkit-scrollbar { display: none !important; }
  .review-card {
    flex: 0 0 80vw !important;
    min-width: 280px !important;
    max-width: 320px !important;
    scroll-snap-align: start !important;
    padding: 24px 20px !important;
  }
  .reviews-header { width: 100% !important; margin-bottom: 32px !important; text-align: center; }

  /* ── SCROLL HINT on reviews ── */
  .reviews-scroll-hint {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mist);
    margin-top: 16px;
  }

}

/* ── CART FAB (mobile only) ── */
.cart-fab {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 20px;
  width: 52px;
  height: 52px;
  background: #1A1A1A;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9990;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transition: background .25s, transform .25s, box-shadow .25s;
}
.cart-fab svg { width: 22px; height: 22px; stroke: var(--white); }
.cart-fab:hover { background: #333333; transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.cart-fab-count {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: #A0267A;
  color: #ffffff;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 500;
  display: none;
  align-items: center;
  justify-content: center;
}

/* ── MOBILE MENU ACCOUNT LINK ── */
.mm-divider {
  width: 100%;
  height: 1px;
  background: var(--nv-mob-div, #E8E8E8);
  margin: 16px 0;
}
.mm-account {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 11px !important;
  letter-spacing: .25em !important;
  color: var(--ink-soft) !important;
  text-transform: uppercase;
}
.mm-account svg { flex-shrink: 0; stroke: var(--teal); }
.mm-account:hover { color: var(--teal) !important; }

@media (max-width: 768px) {
  /* ── CART FAB show on mobile ── */
  .cart-fab { display: flex !important; }
  /* ── CART BTN hide in nav on mobile ── */
  #cartBtn { display: none !important; }
}

/* ═══════════════════════════════════════════
   STICKY PRODUCT FAB + MODAL (mobile only)
   ═══════════════════════════════════════════ */

/* Hidden on desktop */
.spfab, .sp-modal, .sp-modal-overlay { display: none; }

@media (max-width: 768px) {

  /* Hide desktop sticky bar */
  .sticky-atc { display: none !important; }

  /* ── Product FAB ── */
  .spfab {
    display: flex !important;
    position: fixed;
    bottom: 92px;
    right: 20px;
    width: 52px;
    height: 52px;
    background: var(--ink);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9989;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(26,26,26,.3);
    transition: background .25s, transform .2s;
  }
  .spfab svg {
    width: 22px; height: 22px;
    stroke: var(--white);
  }
  .spfab:hover { background: #333; transform: scale(1.06); }
  /* hide FAB when modal is open */
  .spfab.hidden { display: none !important; }

  /* ── Modal overlay ── */
  .sp-modal-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(26,26,26,.45);
    z-index: 9991;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s;
  }
  .sp-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Bottom sheet modal ── */
  .sp-modal {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    border-radius: 20px 20px 0 0;
    padding: 24px 24px 40px;
    z-index: 9992;
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(.77,0,.18,1);
    gap: 16px;
  }
  .sp-modal.open { transform: translateY(0); }

  .sp-modal-handle {
    width: 40px; height: 4px;
    background: var(--line);
    border-radius: 2px;
    margin: 0 auto 8px;
    flex-shrink: 0;
  }

  .sp-modal-close {
    position: absolute;
    top: 20px; right: 20px;
    width: 32px; height: 32px;
    background: var(--off);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sp-modal-close svg { width: 14px; height: 14px; stroke: var(--ink); }

  .sp-modal-img {
    width: 100%;
    height: 180px;
    background: var(--teal-p);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }
  .sp-modal-orb {
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 38%, rgba(42,110,128,.35), transparent);
    border: 1px solid rgba(42,110,128,.2);
  }

  .sp-modal-info { display: flex; flex-direction: column; gap: 4px; }
  .sp-modal-brand {
    font-size: 9px;
    font-weight: 300;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--mist);
  }
  .sp-modal-name {
    font-family: 'Satoshi', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.3;
  }
  .sp-modal-price {
    font-size: 16px;
    font-weight: 400;
    color: var(--teal);
    margin-top: 4px;
  }
  .sp-modal-desc {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-top: 4px;
  }

  .sp-modal-btn {
    width: 100%;
    padding: 16px;
    background: var(--teal);
    color: var(--white);
    border: none;
    font-family: 'Satoshi', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .25em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    transition: background .25s;
    margin-top: 4px;
  }
  .sp-modal-btn:hover { background: var(--teal-d); }
}

@media (max-width: 768px) {
  /* ── CART DRAWER: bottom sheet on mobile ── */
  .cart-drawer {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 60vh !important;
    max-height: 60vh !important;
    border-radius: 20px 20px 0 0 !important;
    transform: translateY(100%) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-top: 28px !important;
    position: fixed !important;
    background: var(--cart-bg, var(--white)) !important;
  }
  .cart-drawer.open {
    transform: translateY(0) !important;
  }
  .cart-drawer::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--line);
    border-radius: 2px;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
  }
  .cart-header {
    padding: 0 20px 14px !important;
    border-bottom: 1px solid var(--line) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .cart-title { font-size: 11px !important; letter-spacing: .25em !important; }
  .cart-close { width: 32px !important; height: 32px !important; }
  .cart-body {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 20px !important;
    min-height: 0 !important;
  }
  .cart-item {
    grid-template-columns: 60px 1fr !important;
    gap: 12px !important;
    padding: 14px 0 !important;
  }
  .cart-item-img { width: 60px !important; height: 60px !important; }
  .cart-item-brand { font-size: 8px !important; letter-spacing: .25em !important; }
  .cart-item-name { font-size: 12px !important; line-height: 1.4 !important; }
  .cart-item-price { font-size: 13px !important; }
  .cart-qty button { width: 28px !important; height: 28px !important; font-size: 16px !important; }
  .cart-qty span { font-size: 13px !important; }
  .cart-footer {
    flex-shrink: 0 !important;
    padding: 14px 20px 36px !important;
    border-top: 1px solid var(--line) !important;
    background: var(--cart-bg, var(--white)) !important;
  }
  .cart-subtotal { font-size: 11px !important; margin-bottom: 14px !important; }
  .cart-subtotal strong { font-family: 'Satoshi', sans-serif !important; font-size: 22px !important; font-weight: 400 !important; }
  .cart-checkout { width: 100% !important; padding: 16px !important; font-size: 11px !important; letter-spacing: .2em !important; background: var(--btn-checkout-bg, var(--teal)) !important; }
  .cart-checkout:hover { background: var(--btn-checkout-hover, var(--teal-d)) !important; }
}
.hero-tag-item{opacity:1;transform:none;transition:opacity .6s,transform .6s;}
.js-ready .hero-tag-item{opacity:0;transform:translateY(20px);}
.js-ready .hero-tag-item.on{opacity:1;transform:translateY(0);}

/* ── SEARCH FAB (mobile) ── */
.search-fab{display:none;position:fixed;bottom:88px;right:20px;width:52px;height:52px;background:var(--white);border:none;border-radius:50%;cursor:pointer;z-index:9990;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.12);transition:background .25s,transform .25s;}
.search-fab svg{width:20px;height:20px;stroke:#1A1A1A;}
.search-fab:hover{transform:scale(1.08);}
@media(max-width:768px){
  .nav-search{display:none !important;}
  .search-fab{display:flex !important;}
  .cart-fab{display:flex !important;}
  #cartBtn{display:none !important;}
}

/* ── ROUTINE + QUIZ MOBILE ── */
@media(max-width:768px){
  .rs-products{grid-template-columns:repeat(2,1fr) !important;gap:10px !important;}
  .rs-nav{flex-direction:column !important;align-items:stretch !important;gap:12px !important;}
  .rs-nav > div{flex-direction:column !important;gap:10px !important;width:100% !important;}
  .rs-btn-next{width:100% !important;justify-content:center !important;padding:14px 20px !important;}
  .rs-btn-back{justify-content:center !important;}
  .rs-skip{text-align:center !important;}
  .rs-step-title{font-size:22px !important;}
  .rs-prod-info{padding:10px 12px 14px !important;}
  .rs-prod-brand{font-size:8px !important;}
  .rs-prod-name{font-size:11px !important;}
  .rs-prod-price{font-size:11px !important;}
  .quiz-options{grid-template-columns:1fr !important;}
  .quiz-btn-next{width:100% !important;justify-content:center !important;}
  .rs-type-grid{grid-template-columns:1fr !important;}
  .rs-type{padding:20px !important;}
}
@media(max-width:480px){
  .rs-products{grid-template-columns:1fr !important;}
}

/* ── ROUTINE SUMMARY CART BAR MOBILE ── */
@media(max-width:768px){
  .rs-cart-bar{flex-direction:column !important;align-items:stretch !important;gap:16px !important;padding:20px !important;}
  .rs-cart-btn{width:100% !important;padding:16px 20px !important;justify-content:center !important;font-size:11px !important;}
  .rs-cart-total{font-size:20px !important;}
  .rs-summary-grid{grid-template-columns:repeat(2,1fr) !important;}
}

/* ═══════════════════════════════════════════════════════════
   HORI — Rediseño editorial K-Beauty
   Inspirado en skincare premium contemporáneo
   Paleta: #C8622A · #A0267A · #6A2898 · #2A6E80 · #7AAA20
   ═══════════════════════════════════════════════════════════ */

/* ── BASE: tipografía más tight y refinada ── */
body {
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.01em;
}

h1, h2, h3 {
  letter-spacing: -.03em;
  font-weight: 700;
}

/* ── ANNOUNCEMENT: barra delgada y elegante ── */
.announce {
  background: #1A1A1A !important;
  height: 36px;
}
.announce-item {
  font-size: 9px !important;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(255,255,255,0.7) !important;
}
.announce-hi {
  color: #A0267A !important;
}

/* Override base hero margin */
.hero, #hero {
  margin-top: var(--header-h, 100px) !important;
}

/* ── NAV: limpio y minimalista ── */
#nav {
  border-bottom: 1px solid var(--nv-brd, #f0f0f0) !important;
  /* background handled by CSS var above */
}
/* nav link styles consolidated in the #nav block above */

/* ── HERO: muy limpio, tipografía protagonista ── */
.hero {
  height: 100vh !important;
  min-height: 600px !important;
  max-height: 100vh !important;
  margin-top: var(--header-h, 100px) !important;
  box-sizing: border-box !important;
}
.hero-l {
  padding: 0 56px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
}
.hero-eyebrow {
  font-size: 9px !important;
  letter-spacing: .35em !important;
  text-transform: uppercase !important;
  color: var(--slide-eye-clr, #A0267A);
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.hero-eyebrow span {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--slide-eye-clr, #A0267A) !important;
}
/* hero__slide uses .hero-eyebrow__line — inline style must win */
.hero__slide .hero-eyebrow__line {
  background: unset !important;
}
.hero-h1 {
  font-size: clamp(44px, 6vw, 88px) !important;
  line-height: .97 !important;
  letter-spacing: -.04em !important;
  font-weight: 800 !important;
  margin-bottom: 20px !important;
}
.hero-h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--slide-ital-clr, #A0267A);
}
.hero-sub {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #4A4A4A;
  max-width: 400px !important;
  font-weight: 400 !important;
  margin-bottom: 36px !important;
  opacity: 1 !important;
  animation: none !important;
}
.hero-actions {
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  opacity: 1 !important;
  animation: none !important;
}
.btn-primary, .btn-fill {
  font-size: 9px !important;
  letter-spacing: .2em;
  padding: 14px 28px !important;
  border-radius: 0 !important;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}
.btn-primary::before, .btn-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-101%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  display: block !important;
  z-index: 0;
}
.btn-primary:hover::before, .btn-fill:hover::before {
  transform: translateX(0);
}
.btn-primary span, .btn-fill span,
.btn-primary svg, .btn-fill svg {
  position: relative !important;
  z-index: 1 !important;
  color: inherit !important;
}
.link-arrow {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--slide-link-clr, #1A1A1A);
  font-weight: 400;
}

/* ── TICKER: delgado, naranja, tipografía fina ── */
/* ticker colors controlled by section settings via .ticker-{id} scoped CSS */

/* statement colors controlled by section settings via .stmt-{id} scoped CSS */

/* ── PRODUCTS: sección limpia, sin fondo ── */
#productos {
  background: #fff !important;
  padding-top: 80px;
  padding-bottom: 80px;
}
#productos .section-h2 {
  font-size: clamp(32px, 4vw, 56px) !important;
  font-weight: 800;
  letter-spacing: -.03em;
}
#productos .section-h2 em {
  font-style: italic;
  font-weight: 300;
  color: #A0267A;
}
/* Cards: bordes, no sombras */
.pcard {
  background: #fff !important;
  border: 1px solid #F0F0F0 !important;
  border-radius: 0 !important;
  transition: border-color .3s ease;
}
.pcard:hover {
  border-color: #1A1A1A !important;
  transform: none !important;
  box-shadow: none !important;
}
.pcard-brand, .pcard-vendor {
  font-size: 9px !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #A0267A !important;
}
.pcard-name, .pcard-title {
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.4;
}
.pcard-price {
  font-size: 13px !important;
  font-weight: 600;
}
.pcard-cta {
  background: #1A1A1A !important;
  font-size: 8px !important;
  letter-spacing: .2em;
  border-radius: 0 !important;
}
.pcard-cta:hover {
  background: #A0267A !important;
}
.badge-sale, .badge-new, .badge-bestseller {
  background: #A0267A !important;
  font-size: 7px !important;
  letter-spacing: .15em;
  border-radius: 0 !important;
  padding: 3px 8px;
}

/* ── WHY: alternado blanco con acentos de color en íconos ── */
.section-why {
  background: #fff !important;
  border-top: 1px solid #F0F0F0;
}
.why-title {
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: -.01em;
}
.why-desc {
  font-size: 13px !important;
  line-height: 1.7;
  color: #6A6A6A;
}
.why-icon {
  border-radius: 0 !important;
}

/* ── STORY: fondo crema con foto grande ── */
.section-story {
  background: #F7F3EF !important;
}
.story-h2 {
  font-size: clamp(28px, 3.5vw, 48px) !important;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #1A1A1A !important;
}
.story-quote {
  font-size: 16px !important;
  line-height: 1.6;
  font-style: italic;
  font-weight: 300;
  color: #A0267A !important;
}
.story-stat-num {
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 800;
  color: #1A1A1A !important;
  letter-spacing: -.03em;
}
.story-stat-label {
  font-size: 9px !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #A0267A !important;
}

/* ── REVIEWS: fondo oscuro elegante ── */
.section-reviews {
  background: #1A1A1A !important;
}
.section-reviews .section-h2 {
  font-size: clamp(28px, 3.5vw, 48px) !important;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff !important;
}
.review-card {
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  border-top: 2px solid #A0267A !important;
  padding: 32px !important;
}
.review-text {
  font-size: 14px !important;
  line-height: 1.8;
  color: #4A4A4A !important;
  font-weight: 300;
}
.review-name {
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .05em;
  color: #1A1A1A !important;
}
.review-product {
  font-size: 9px !important;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #A0267A !important;
}
.review-avatar {
  background: #A0267A !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 600;
}
.star { fill: #C8622A !important; width: 12px; height: 12px; }

/* ── RITUAL: contraste fuerte izq oscuro der crema ── */
.split-visual {
  background: #1A1A1A !important;
}
.split-title {
  font-size: clamp(28px, 3.5vw, 48px) !important;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff !important;
}
.split-eyebrow {
  font-size: 9px !important;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #7AAA20 !important;
}
.split-content {
  background: #F7F3EF !important;
  border-left: none;
}
.rnum {
  font-size: 11px !important;
  font-weight: 700;
  color: #A0267A !important;
  min-width: 32px;
}
.rname {
  font-size: 13px !important;
  font-weight: 600;
  color: #1A1A1A !important;
}
.rdesc {
  font-size: 11px !important;
  color: #6A6A6A !important;
  line-height: 1.6;
}
.rstep {
  border-bottom: 1px solid #E8E8E8 !important;
  padding: 16px 0;
  transition: padding-left .2s ease;
}
.rstep:hover {
  padding-left: 8px;
  border-bottom-color: #A0267A !important;
}

/* ── NEWSLETTER: fondo oscuro, tipografía grande ── */
.section-newsletter, .section-nl {
  background: #1A1A1A !important;
}
.nl-title {
  font-size: clamp(28px, 3.5vw, 48px) !important;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff !important;
}
.nl-sub {
  font-size: 13px !important;
  color: rgba(255,255,255,0.5) !important;
}
.nl-input {
  border: 1px solid rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-size: 12px;
  padding: 14px 20px !important;
}
.nl-input::placeholder {
  color: rgba(255,255,255,0.3) !important;
}
.nl-btn {
  background: #A0267A !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-size: 9px !important;
  letter-spacing: .2em;
  padding: 14px 24px !important;
}
.nl-btn:hover {
  background: #6A2898 !important;
}

/* ── BRANDS: fondo oscuro, texto elegante ── */
.section-brands {
  background: #1A1A1A !important;
  border-top: 1px solid #2A2A2A;
}
.brand-item {
  font-size: 11px !important;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5) !important;
  font-weight: 400;
  transition: color .2s ease;
}
.brand-item:hover {
  color: #fff !important;
}
.brands-label {
  font-size: 9px !important;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3) !important;
}
.bsep { color: rgba(255,255,255,0.15) !important; }

/* ── FOOTER: muy limpio ── */
footer {
  background: #1A1A1A !important;
}
.ft-trust {
  background: #A0267A !important;
  padding: 16px 0;
}
.ft-h {
  font-size: 9px !important;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff !important;
}
.ft-links a {
  font-size: 12px !important;
  font-weight: 300;
  color: rgba(255,255,255,0.5) !important;
}
.ft-links a:hover {
  color: #fff !important;
}
.ft-desc {
  font-size: 12px !important;
  line-height: 1.7;
  color: rgba(255,255,255,0.4) !important;
}
.ft-logo {
  font-size: 18px !important;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff !important;
}

/* ── BEFORE/AFTER: fondo blanco, etiquetas limpias ── */
.section-ba {
  background: #F7F3EF !important;
}
.ba-label {
  background: #1A1A1A !important;
  color: #fff !important;
  font-size: 8px !important;
  letter-spacing: .2em;
  padding: 6px 14px !important;
}
.ba-handle {
  background: #A0267A !important;
  border-color: #A0267A !important;
}

/* ── INSTAGRAM: fondo crema ── */
.section-ig {
  background: #F7F3EF !important;
}

/* ── QUIZ: fondo blanco limpio ── */
.section-quiz {
  background: #F7F3EF !important;
}
.quiz-title {
  font-size: clamp(28px, 3.5vw, 48px) !important;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #1A1A1A !important;
}
.quiz-option {
  background: #fff !important;
  border: 1px solid #E8E8E8 !important;
  border-radius: 0 !important;
  transition: border-color .2s ease;
}
.quiz-option:hover {
  border-color: #A0267A !important;
  background: #fff !important;
}
.quiz-option.selected, .quiz-option.active {
  border-color: #A0267A !important;
  background: #fff !important;
}
.quiz-btn-next {
  background: #1A1A1A !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-size: 9px !important;
  letter-spacing: .2em;
}
.quiz-btn-next:hover {
  background: #A0267A !important;
}
.quiz-bar-fill, .quiz-progress-bar {
  background: #A0267A !important;
}

/* ── ROUTINE: fondo oscuro ── */
.section-routine {
  background: #1A1A1A !important;
}
.rs-title {
  color: #fff !important;
  font-weight: 800;
  letter-spacing: -.03em;
}
.rs-type {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 0 !important;
  color: #fff !important;
  transition: background .2s ease, border-color .2s ease;
}
.rs-type:hover, .rs-type.active {
  background: #A0267A !important;
  border-color: #A0267A !important;
}
.rs-btn-next {
  background: #A0267A !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-size: 9px !important;
  letter-spacing: .2em;
}
.rs-btn-next:hover {
  background: #6A2898 !important;
}

/* ── ATC y CHECKOUT botones ── */
.product-atc {
  background: #1A1A1A !important;
  border-radius: 0 !important;
  font-size: 9px !important;
  letter-spacing: .2em;
}
.product-atc:hover {
  background: #A0267A !important;
}
.cart-checkout {
  background: #1A1A1A !important;
  border-radius: 0 !important;
}
.cart-checkout:hover {
  background: #A0267A !important;
}

/* ── COLECCIÓN hero ── */
.collection-hero, .col-hero {
  background: #1A1A1A !important;
}
.col-hero-h1, .collection-hero h1 {
  font-size: clamp(36px, 5vw, 72px) !important;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #fff !important;
}

/* ── SEARCH ── */
.search-input {
  border: 1px solid #E8E8E8 !important;
  border-radius: 0 !important;
}
.search-input:focus {
  border-color: #A0267A !important;
  outline: none;
}

/* ── GLOBAL: transiciones suaves ── */
a, button, .btn-fill, .btn-primary, .pcard, .pcard-cta,
.nl-btn, .product-atc, .quiz-option, .rs-type {
  transition: background .2s ease, color .2s ease,
              border-color .2s ease, transform .2s ease !important;
}

/* ── MOBILE refinements ── */
@media (max-width: 768px) {
  .hero-l { padding: 60px 24px !important; }
  .hero-h1 { font-size: clamp(40px, 12vw, 64px) !important; }
  .stmt-text { font-size: clamp(24px, 8vw, 40px) !important; }
}


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

.hero-carousel {
  display: contents;
}

/* Hero needs relative positioning for absolute slides */
.hero {
  position: relative !important;
  overflow: hidden !important;
}

/* Each slide: always display:grid but hidden via opacity + pointer-events */
.hero-slide {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
  position: absolute !important;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 0;
}
.hero-slide.active {
  opacity: 1 !important;
  pointer-events: auto;
  z-index: 1;
}

/* Carousel nav */
.hero-carousel-nav {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 10;
}
.hero-nav-prev,
.hero-nav-next {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.9);
  border: 1px solid #E8E8E8;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
  border-radius: 0;
  color: #1A1A1A;
}
.hero-nav-prev:hover,
.hero-nav-next:hover {
  background: #A0267A;
  border-color: #A0267A;
  color: #fff;
}
.hero-nav-prev svg,
.hero-nav-next svg {
  stroke: currentColor;
}

/* Dots */
.hero-carousel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-dot {
  width: 6px; height: 6px;
  background: rgba(26,26,26,0.2);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background .3s ease, width .3s ease;
}
.hero-dot.active {
  background: #A0267A;
  width: 24px;
  border-radius: 3px;
}

/* hero-scroll position fix with carousel */
.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 56px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.6;
}
.hero-scroll span {
  font-size: 8px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: #8A8A8A;
}
.hero-scroll-line {
  width: 1px;
  height: 28px;
  background: #A0267A;
}

/* Mobile: hide nav, show dots only */
@media (max-width: 768px) {
  .hero-nav-prev, .hero-nav-next { display: none; }
  .hero-carousel-nav { bottom: 20px; }
  .hero-scroll { display: none !important; }
}


/* ── SLIDE-BTN: per-slide customizable button ── */
.slide-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  font-family: 'Satoshi', sans-serif;
}

/* ── HERO: full viewport, centered content ── */
.hero, #hero {
  height: 100vh !important;
  min-height: 600px !important;
  max-height: 100vh !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Carousel slides: remove opacity animations, show immediately */
.hero-slide .hero-eyebrow,
.hero-slide .hero-sub,
.hero-slide .hero-actions,
.hero-slide .hero-h1 .li {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* hero-r background respects inline style */
.hero-slide .hero-r {
  background: transparent;
}

/* All slides fill the hero completely */
.hero-slide {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
}

/* Hero-l: centered vertically, good padding */
.hero-slide .hero-l,
.hero.hero-has-carousel > .hero-l {
  padding: 0 64px !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Override base padding-top:100px on hero-l */
.hero-l {
  padding-top: 0 !important;
}

/* Shopify wraps hero in a div with padding from nav */
.shopify-section:has(#hero),
.shopify-section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ── HERO SLIDE LAYOUTS ── */

/* text-right: use flex order to swap columns */
.hero-slide--text-right {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

/* full-image: spans full width */
.hero-slide--full-image {
  grid-template-columns: 1fr !important;
}
.hero-slide--full-image .hero-slide-full {
  grid-column: 1 / -1;
}

/* text-only: centered, no image */
.hero-slide--text-only {
  grid-template-columns: 1fr !important;
}

/* Nav always on top of all layouts */
.hero-carousel-nav {
  z-index: 20 !important;
}