/* ============================================================================
   ANIMEX WEAR — Storefront UI Kit styles
   Loads on top of ../../colors_and_type.css
   ============================================================================ */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  color:var(--fg-1);
  background:var(--bg-1);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:#000;color:#fff;}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--ink-200);}
::-webkit-scrollbar-track{background:var(--ink-050);}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}

/* ---- shared type helpers ---- */
.over{font-family:var(--font-mono);font-size:var(--fs-overline);letter-spacing:var(--tr-over);text-transform:uppercase;color:var(--fg-3);}
.mono{font-family:var(--font-mono);}

/* ====================== BUTTONS ====================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:var(--tr-button);text-transform:uppercase;
  padding:16px 32px;border:1px solid #000;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
  background:#000;color:#fff;white-space:nowrap;
}
.btn:hover{background:#fff;color:#000;}
.btn:active{transform:scale(.985);}
.btn--lg{padding:20px 44px;font-size:14px;}
.btn--sm{padding:11px 20px;font-size:11px;}
.btn--block{width:100%;}
.btn--secondary{background:#fff;color:#000;}
.btn--secondary:hover{background:#000;color:#fff;}
.btn--ghost{background:transparent;border-color:var(--border-2);color:var(--fg-1);}
.btn--ghost:hover{border-color:#000;background:#000;color:#fff;}
.btn--inverse{background:#fff;color:#000;border-color:#fff;}
.btn--inverse:hover{background:transparent;color:#fff;}
.btn:disabled{background:var(--ink-100);border-color:var(--ink-100);color:var(--ink-300);cursor:not-allowed;transform:none;}
.btn-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:var(--tr-button);text-transform:uppercase;cursor:pointer;border:none;background:none;padding:0;color:#000;}
.btn-link i{transition:transform var(--dur) var(--ease-out);}
.btn-link:hover i{transform:translateX(5px);}

/* ====================== BADGES ====================== */
.badge{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;background:#000;color:#fff;line-height:1;}
.badge--line{background:#fff;color:#000;border:1px solid #000;}
.badge--sale{background:var(--fn-sale);color:#fff;}
.badge--muted{background:var(--ink-100);color:var(--fg-3);}

/* ====================== ANNOUNCEMENT BAR ====================== */
.announce{background:#000;color:#fff;text-align:center;padding:11px 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;}
.announce a{text-decoration:underline;text-underline-offset:3px;}

/* ====================== NAVBAR ====================== */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border-1);transition:padding var(--dur) var(--ease-out);}
.nav__inner{display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter);transition:padding var(--dur) var(--ease-out);}
.nav.is-scrolled .nav__inner{padding-block:13px;}
.nav__group{display:flex;align-items:center;gap:30px;flex:1;}
.nav__group--right{justify-content:flex-end;}
.nav__links{display:flex;align-items:center;gap:30px;}
.nav__link{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-1);cursor:pointer;position:relative;padding:6px 0;white-space:nowrap;}
.nav__link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:#000;transition:width var(--dur) var(--ease-out);}
.nav__link:hover::after,.nav__link.is-active::after{width:100%;}
.logo{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.04em;text-transform:uppercase;cursor:pointer;line-height:1;white-space:nowrap;}
.logo .lite{font-weight:300;letter-spacing:.04em;}
.nav__icons{display:flex;align-items:center;gap:6px;}
.iconbtn{width:42px;height:42px;border-radius:50%;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--fg-1);position:relative;transition:background var(--dur-fast) var(--ease-out);}
.iconbtn:hover{background:var(--ink-100);}
.iconbtn .count{position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 4px;background:#000;color:#fff;border-radius:999px;font-family:var(--font-mono);font-size:10px;display:flex;align-items:center;justify-content:center;}

/* mega menu */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--border-1);box-shadow:var(--sh-2);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:all var(--dur) var(--ease-out);}
.mega.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
.mega__inner{display:grid;grid-template-columns:repeat(4,1fr) 1.4fr;gap:40px;padding:48px var(--gutter) 56px;max-width:var(--maxw);margin:0 auto;}
.mega__col h4{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-4);margin:0 0 18px;}
.mega__col a{display:block;font-family:var(--font-display);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:-.01em;padding:7px 0;color:var(--fg-1);transition:opacity var(--dur-fast);}
.mega__col a:hover{opacity:.5;}
.mega__feat{background:var(--ink-700);color:#fff;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;}
.mega__feat .w{position:absolute;right:-10px;top:-20px;font-family:var(--font-display);font-weight:800;font-size:130px;color:rgba(255,255,255,.06);line-height:1;}
.mega__feat .over{color:rgba(255,255,255,.5);}
.mega__feat h3{font-family:var(--font-display);font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:-.02em;margin:8px 0 16px;}

/* mobile menu trigger hidden on desktop */
.nav__burger{display:none;}

/* ====================== HERO ====================== */
.hero{position:relative;height:calc(100vh - 64px);min-height:600px;max-height:920px;overflow:hidden;background:#05060a;--accent:#2BE2FF;--accent2:#1E6BFF;}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease-out);}
.hero__slide.is-active{opacity:1;}
.hero__media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hero__media img{animation:heroZoom 9s var(--ease-out) forwards;}
@keyframes heroZoom{from{transform:scale(1.16);}to{transform:scale(1.04);}}
.hero__duotone{position:absolute;inset:0;z-index:1;mix-blend-mode:screen;opacity:.9;}
.hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,6,10,.35) 0%,rgba(5,6,10,.15) 38%,rgba(5,6,10,.82) 100%);}
.hero__aura{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:120vmin;height:120vmin;z-index:2;pointer-events:none;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent), transparent 60%);mix-blend-mode:screen;animation:auraPulse 6.5s var(--ease-in-out) infinite;transition:background var(--dur-slow);}
.hero__aura--2{left:74%;top:64%;width:70vmin;height:70vmin;background:radial-gradient(circle, color-mix(in srgb, var(--accent2) 42%, transparent), transparent 60%);animation:auraPulse 8s var(--ease-in-out) infinite reverse;}
@keyframes auraPulse{0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(1);}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.2);}}
.hero__grid{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.16;background-image:linear-gradient(color-mix(in srgb,var(--accent) 60%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 60%,transparent) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(120% 90% at 50% 100%,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(120% 90% at 50% 100%,#000 10%,transparent 70%);}
.hero__vignette{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(125% 95% at 50% 30%, transparent 32%, rgba(5,6,10,.7) 100%);}
.hero__fx{position:absolute;inset:0;z-index:4;pointer-events:none;}
.hero__content{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gutter) clamp(40px,7vw,96px);color:#fff;max-width:var(--maxw);margin:0 auto;z-index:6;opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);pointer-events:none;}
.hero__content.is-active{opacity:1;transform:none;pointer-events:auto;}
.hero__kicker{display:flex;align-items:center;gap:12px;margin-bottom:4px;}
.hero__kicker .over{color:var(--accent);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 70%,transparent);}
.hero__pulse{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent);animation:pulseDot 1.8s var(--ease-out) infinite;}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 65%,transparent);}70%{box-shadow:0 0 0 12px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
.hero__title{text-shadow:0 0 60px color-mix(in srgb,var(--accent) 55%,transparent),0 0 22px color-mix(in srgb,var(--accent) 35%,transparent);}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:var(--fs-display);line-height:.9;letter-spacing:-.035em;text-transform:uppercase;margin:14px 0 0;max-width:14ch;}
.hero__sub{font-size:17px;color:rgba(255,255,255,.82);max-width:46ch;margin:22px 0 32px;line-height:1.6;}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;}
.hero__dots{position:absolute;right:var(--gutter);bottom:clamp(40px,7vw,96px);display:flex;gap:10px;z-index:6;}
.hero__dot{width:40px;height:3px;background:rgba(255,255,255,.28);border:none;cursor:pointer;padding:0;overflow:hidden;position:relative;transition:background var(--dur);}
.hero__dot.is-active{background:color-mix(in srgb,var(--accent) 85%,white);box-shadow:0 0 14px var(--accent);}

/* energy button — gradient fill, glow on hover */
.btn--energy{background:linear-gradient(120deg,var(--accent),var(--accent2));color:#04060c;border:none;position:relative;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent),0 8px 30px color-mix(in srgb,var(--accent) 35%,transparent);transition:box-shadow var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out);}
.btn--energy:hover{background:linear-gradient(120deg,var(--accent),var(--accent2));color:#04060c;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 70%,transparent),0 10px 44px color-mix(in srgb,var(--accent) 60%,transparent);transform:translateY(-2px);}

/* ====================== SECTION HEADERS ====================== */
.section{padding-block:var(--section-y);}
.section--tight{padding-block:clamp(48px,6vw,90px);}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:46px;}
.sec-head h2{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h2);text-transform:uppercase;letter-spacing:-.025em;margin:10px 0 0;line-height:1;}
.sec-head__intro{max-width:60%;}

/* ====================== PRODUCT CARD ====================== */
.pcard{cursor:pointer;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);background:#fff;border:1px solid var(--border-1);border-radius:14px;box-shadow:var(--sh-2);overflow:hidden;}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sh-3);}
.pcard__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-050);}
.ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity var(--dur-slow) var(--ease-out),transform 1.2s var(--ease-out);}
.ph .w{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,7vw,72px);letter-spacing:-.04em;line-height:1;user-select:none;}
.ph--a{z-index:1;}
.ph--b{opacity:0;z-index:2;}
.pcard:hover .ph--b{opacity:1;}
.pcard:hover .ph--a{transform:scale(1.04);}
.pcard__badges{position:absolute;top:14px;left:14px;display:flex;gap:6px;z-index:4;}
.pcard__wish{position:absolute;top:12px;right:12px;z-index:4;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);border:none;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;opacity:0;transform:translateY(-6px);transition:all var(--dur) var(--ease-out);}
.pcard:hover .pcard__wish{opacity:1;transform:translateY(0);}
.pcard__wish.is-on{color:var(--fn-sale);opacity:1;transform:none;}
.pcard__add{position:absolute;left:14px;right:14px;bottom:14px;z-index:4;background:#000;color:#fff;border:none;border-radius:8px;font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:14px;cursor:pointer;transform:translateY(calc(100% + 16px));opacity:0;transition:all var(--dur) var(--ease-out);}
.pcard:hover .pcard__add{transform:translateY(0);opacity:1;}
.pcard__add:hover{background:var(--ink-700);}
.pcard__info{padding:16px 16px 18px;border-top:1px solid var(--border-1);background:#fff;}
.pcard__over{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-4);}
.pcard__title{font-family:var(--font-display);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;margin:7px 0 6px;color:var(--fg-1);}
.pcard__price{font-family:var(--font-mono);font-size:13px;color:var(--fg-1);display:flex;gap:9px;align-items:center;}
.pcard__price .was{color:var(--fg-4);text-decoration:line-through;}
.pcard__price .now{color:var(--fn-sale);}

/* product grid */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 18px;}
.pgrid--3{grid-template-columns:repeat(3,1fr);}

/* ====================== COLLECTION TILES ====================== */
.coll-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.coll{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ink-700);cursor:pointer;display:flex;align-items:flex-end;border-radius:12px;box-shadow:var(--sh-1);transition:box-shadow var(--dur) var(--ease-out);}
.coll:hover{box-shadow:var(--sh-3);}
.coll__img{transition:transform 1.2s var(--ease-out);}
.coll:hover .coll__img{transform:scale(1.06);}
.coll .w{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:clamp(50px,9vw,110px);color:rgba(255,255,255,.06);transition:transform 1.2s var(--ease-out);}
.coll:hover .w{transform:scale(1.08);}
.coll__scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(5,6,10,.72));z-index:1;}
.coll__glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 80% at 50% 120%, color-mix(in srgb,var(--accent) 55%,transparent), transparent 60%);opacity:.5;transition:opacity var(--dur-slow) var(--ease-out);mix-blend-mode:screen;}
.coll:hover .coll__glow{opacity:1;}
.coll:hover{box-shadow:var(--sh-3),0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 18px 50px color-mix(in srgb,var(--accent) 30%,transparent);}
.coll__label{position:relative;z-index:2;padding:26px;color:#fff;width:100%;}
.coll__label .over{color:var(--accent);text-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%,transparent);}
.coll__label h3{font-family:var(--font-display);font-weight:800;font-size:clamp(18px,2vw,26px);text-transform:uppercase;letter-spacing:-.02em;margin:8px 0 0;}
.coll__label .arr{margin-top:14px;opacity:0;transform:translateX(-8px);transition:all var(--dur) var(--ease-out);font-size:18px;}
.coll:hover .coll__label .arr{opacity:1;transform:translateX(0);}

/* ====================== BANNER / EDITORIAL ====================== */
.banner{position:relative;min-height:clamp(420px,52vw,640px);background:#000;color:#fff;display:flex;align-items:center;overflow:hidden;}
.banner .w{position:absolute;right:-4%;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-weight:900;font-size:38vw;color:rgba(255,255,255,.05);line-height:1;user-select:none;}
.banner__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%;}
.banner__inner .over{color:rgba(255,255,255,.55);}
.banner h2{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h1);text-transform:uppercase;letter-spacing:-.03em;line-height:.95;margin:14px 0 24px;max-width:16ch;}
.banner p{color:rgba(255,255,255,.7);max-width:42ch;margin:0 0 32px;line-height:1.6;}

/* flash sale strip */
.flash{background:var(--ink-050);border-block:1px solid var(--border-1);}
.flash__inner{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:34px var(--gutter);max-width:var(--maxw);margin:0 auto;flex-wrap:wrap;}
.flash__left{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.flash h3{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.4vw,30px);text-transform:uppercase;letter-spacing:-.02em;margin:0;}
.timer{display:flex;gap:8px;}
.timer__u{background:#000;color:#fff;min-width:54px;text-align:center;padding:10px 6px;}
.timer__u .n{font-family:var(--font-mono);font-weight:700;font-size:20px;line-height:1;}
.timer__u .l{font-family:var(--font-mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:4px;}

/* ====================== MARQUEE ====================== */
.marquee{background:#000;color:#fff;overflow:hidden;padding:18px 0;border-block:1px solid #000;}
.marquee__track{display:flex;gap:48px;white-space:nowrap;animation:marq 28s linear infinite;width:max-content;}
.marquee__track span{font-family:var(--font-display);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.02em;display:inline-flex;align-items:center;gap:48px;}
.marquee__track i{font-size:9px;opacity:.5;}
@keyframes marq{to{transform:translateX(-50%);}}

/* ====================== TESTIMONIALS ====================== */
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.testi__c{border:1px solid var(--border-1);padding:34px;background:#fff;}
.testi__stars{color:#000;font-size:13px;letter-spacing:2px;margin-bottom:18px;}
.testi__c p{font-family:var(--font-display);font-weight:500;font-size:18px;line-height:1.45;letter-spacing:-.01em;margin:0 0 24px;}
.testi__who{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4);}

/* ====================== NEWSLETTER ====================== */
.news{background:var(--ink-700);color:#fff;text-align:center;}
.news__inner{max-width:620px;margin:0 auto;padding:var(--section-y) var(--gutter);}
.news .over{color:rgba(255,255,255,.5);}
.news h2{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h2);text-transform:uppercase;letter-spacing:-.025em;margin:14px 0 16px;}
.news p{color:rgba(255,255,255,.66);margin:0 0 30px;}
.news__form{display:flex;border:1px solid rgba(255,255,255,.25);}
.news__form input{flex:1;background:none;border:none;outline:none;color:#fff;font-family:var(--font-body);font-size:15px;padding:18px 20px;}
.news__form input::placeholder{color:rgba(255,255,255,.45);}
.news__form button{background:#fff;color:#000;border:none;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:0 28px;cursor:pointer;transition:opacity var(--dur-fast);}
.news__form button:hover{opacity:.8;}

/* ====================== FOOTER ====================== */
.footer{background:#000;color:#fff;}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:var(--section-y) var(--gutter) 60px;max-width:var(--maxw);margin:0 auto;}
.footer__brand .logo{font-size:34px;margin-bottom:20px;}
.footer__brand p{color:rgba(255,255,255,.55);max-width:34ch;line-height:1.6;font-size:14px;}
.footer__social{display:flex;gap:8px;margin-top:24px;}
.footer__social a{width:40px;height:40px;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:17px;transition:all var(--dur-fast);}
.footer__social a:hover{background:#fff;color:#000;}
.footer__col h4{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:0 0 20px;}
.footer__col a{display:block;color:rgba(255,255,255,.7);font-size:14px;padding:7px 0;transition:color var(--dur-fast);}
.footer__col a:hover{color:#fff;}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding:26px var(--gutter);max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.footer__bottom span{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.4);text-transform:uppercase;}

/* ====================== CART DRAWER ====================== */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:90;opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease-out);}
.scrim.is-open{opacity:1;visibility:visible;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:#fff;z-index:100;display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out);box-shadow:var(--sh-4);}
.drawer.is-open{transform:translateX(0);}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:24px 26px;border-bottom:1px solid var(--border-1);}
.drawer__head h3{font-family:var(--font-display);font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.02em;margin:0;}
.drawer__body{flex:1;overflow-y:auto;padding:8px 26px;}
.drawer__foot{border-top:1px solid var(--border-1);padding:24px 26px;}
.cart-line{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--border-1);}
.cart-line__img{width:84px;height:104px;background:var(--ink-050);flex:none;display:flex;align-items:center;justify-content:center;}
.cart-line__img .w{font-family:var(--font-display);font-weight:800;font-size:26px;color:rgba(0,0,0,.08);}
.cart-line__main{flex:1;display:flex;flex-direction:column;}
.cart-line__over{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-4);}
.cart-line__title{font-family:var(--font-display);font-weight:600;font-size:14px;text-transform:uppercase;margin:5px 0 3px;}
.cart-line__meta{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);margin-bottom:auto;}
.cart-line__row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;}
.cart-line__price{font-family:var(--font-mono);font-size:13px;}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--border-2);}
.stepper button{width:32px;height:32px;border:none;background:#fff;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast);}
.stepper button:hover{background:var(--ink-100);}
.stepper .q{width:34px;text-align:center;font-family:var(--font-mono);font-size:12px;}
.cart-line__rm{background:none;border:none;cursor:pointer;color:var(--fg-4);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;}
.cart-line__rm:hover{color:#000;}
.cart-empty{text-align:center;padding:80px 20px;}
.cart-empty i{font-size:40px;color:var(--ink-200);}
.cart-empty p{font-family:var(--font-display);font-weight:600;font-size:18px;text-transform:uppercase;margin:18px 0 24px;}
.cart-totals{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:7px 0;color:var(--fg-2);}
.cart-totals.grand{color:#000;font-size:15px;border-top:1px solid var(--border-1);margin-top:8px;padding-top:16px;}
.cart-ship{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--fg-3);text-align:center;margin-top:14px;text-transform:uppercase;}

/* ====================== PAGE: PLP / FILTERS ====================== */
.pagehead{padding:48px var(--gutter) 40px;border-bottom:1px solid var(--border-1);max-width:var(--maxw);margin:0 auto;}
.pagehead .crumbs{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4);margin-bottom:20px;}
.pagehead h1{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h1);text-transform:uppercase;letter-spacing:-.03em;margin:0;line-height:.95;}
.pagehead p{color:var(--fg-2);margin:16px 0 0;max-width:56ch;}
.plp{display:grid;grid-template-columns:248px 1fr;gap:48px;max-width:var(--maxw);margin:0 auto;padding:36px var(--gutter) var(--section-y);}
.filters__group{border-bottom:1px solid var(--border-1);padding:22px 0;}
.filters__group:first-child{padding-top:0;}
.filters__group h4{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin:0 0 16px;}
.fopt{display:flex;align-items:center;gap:11px;padding:6px 0;cursor:pointer;font-size:14px;color:var(--fg-2);white-space:nowrap;}
.fbox{width:16px;height:16px;border:1px solid var(--border-2);flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;transition:all var(--dur-fast);}
.fopt.is-on .fbox{background:#000;border-color:#000;}
.fopt.is-on{color:#000;}
.fopt:hover{color:#000;}
.fopt .ct{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--fg-4);}
.fsize{display:flex;flex-wrap:wrap;gap:7px;}
.fsize .s{width:42px;height:42px;border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;cursor:pointer;transition:all var(--dur-fast);}
.fsize .s:hover{border-color:#000;}
.fsize .s.is-on{background:#000;color:#fff;border-color:#000;}
.plp__toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--border-1);}
.plp__count{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);}
.sortbar{display:flex;align-items:center;gap:18px;}
.sortbar select{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--border-2);background:#fff;padding:11px 14px;cursor:pointer;outline:none;}
.density{display:flex;gap:4px;}
.density button{width:38px;height:38px;border:1px solid var(--border-2);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--fg-3);}
.density button.is-on{background:#000;color:#fff;border-color:#000;}

/* ====================== PAGE: PDP ====================== */
.pdp{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;max-width:var(--maxw);margin:0 auto;padding:40px var(--gutter) var(--section-y);}
.pdp__gallery{display:grid;grid-template-columns:74px 1fr;gap:16px;align-items:start;}
.pdp__thumbs{display:flex;flex-direction:column;gap:10px;}
.pdp__thumb{aspect-ratio:4/5;background:var(--ink-050);border:1px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.pdp__thumb .w{font-family:var(--font-display);font-weight:800;font-size:18px;color:rgba(0,0,0,.1);}
.pdp__thumb.is-on{border-color:#000;}
.pdp__main-img{aspect-ratio:4/5;background:var(--ink-050);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.pdp__main-img .w{font-family:var(--font-display);font-weight:800;font-size:clamp(80px,11vw,150px);color:rgba(0,0,0,.07);}
.pdp__main-img .badge{position:absolute;top:18px;left:18px;}
.pdp__info{padding-top:8px;}
.pdp__info .over{color:var(--fg-4);}
.pdp__info h1{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.4vw,46px);text-transform:uppercase;letter-spacing:-.03em;line-height:.98;margin:14px 0 18px;}
.pdp__rating{display:flex;align-items:center;gap:12px;margin-bottom:24px;}
.pdp__rating .stars{color:#000;letter-spacing:2px;font-size:13px;}
.pdp__rating .ct{font-family:var(--font-mono);font-size:11px;color:var(--fg-4);letter-spacing:.06em;}
.pdp__price{display:flex;align-items:baseline;gap:14px;font-family:var(--font-mono);font-size:24px;margin-bottom:28px;}
.pdp__price .was{font-size:18px;color:var(--fg-4);text-decoration:line-through;}
.pdp__price .now{color:var(--fn-sale);}
.pdp__desc{color:var(--fg-2);line-height:1.65;font-size:15px;margin-bottom:30px;max-width:48ch;}
.pdp__block{padding:22px 0;border-top:1px solid var(--border-1);}
.pdp__block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.pdp__block-head h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:0;}
.pdp__block-head a{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-1);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.swatches{display:flex;gap:12px;}
.swatch{width:30px;height:30px;border-radius:50%;border:1px solid var(--border-2);cursor:pointer;}
.swatch.is-on{box-shadow:0 0 0 2px #fff,0 0 0 3px #000;}
.pdp__buy{display:flex;gap:12px;margin:30px 0 18px;}
.pdp__buy .stepper{border-color:#000;}
.pdp__buy .stepper button{width:54px;height:54px;font-size:16px;}
.pdp__buy .stepper .q{width:40px;font-size:14px;}
.pdp__perks{display:flex;flex-direction:column;gap:12px;margin-top:24px;}
.pdp__perk{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--fg-2);}
.pdp__perk i{font-size:18px;}

/* accordion */
.acc__item{border-top:1px solid var(--border-1);}
.acc__head{display:flex;align-items:center;justify-content:space-between;padding:20px 0;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;}
.acc__body{overflow:hidden;max-height:0;transition:max-height var(--dur-slow) var(--ease-out);}
.acc__body-inner{padding-bottom:22px;color:var(--fg-2);font-size:14px;line-height:1.6;}
.acc__item.is-open .acc__body{max-height:220px;}
.acc__item.is-open .acc__head i{transform:rotate(45deg);}
.acc__head i{transition:transform var(--dur) var(--ease-out);}

/* ====================== PAGE: CHECKOUT ====================== */
.checkout{display:grid;grid-template-columns:1.4fr 1fr;gap:0;max-width:var(--maxw);margin:0 auto;min-height:calc(100vh - 64px);}
.checkout__form{padding:56px clamp(24px,4vw,72px);}
.checkout__form h1{font-family:var(--font-display);font-weight:800;font-size:30px;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 8px;}
.co-step{margin-top:40px;}
.co-step__head{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.co-step__n{width:26px;height:26px;border-radius:50%;background:#000;color:#fff;font-family:var(--font-mono);font-size:12px;display:flex;align-items:center;justify-content:center;}
.co-step__head h3{font-family:var(--font-display);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.02em;margin:0;}
.field{margin-bottom:16px;}
.field label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:8px;}
.field input{width:100%;font-family:var(--font-body);font-size:15px;padding:15px 15px;border:1px solid var(--border-2);background:#fff;outline:none;transition:border-color var(--dur-fast);}
.field input:focus{border-color:#000;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ship-opt{display:flex;align-items:center;gap:14px;border:1px solid var(--border-2);padding:18px;cursor:pointer;margin-bottom:10px;transition:border-color var(--dur-fast);}
.ship-opt.is-on{border-color:#000;}
.ship-radio{width:18px;height:18px;border-radius:50%;border:1px solid var(--border-2);flex:none;position:relative;}
.ship-opt.is-on .ship-radio{border-color:#000;}
.ship-opt.is-on .ship-radio::after{content:"";position:absolute;inset:3px;background:#000;border-radius:50%;}
.ship-opt .name{font-family:var(--font-display);font-weight:600;font-size:14px;text-transform:uppercase;}
.ship-opt .sub{font-family:var(--font-mono);font-size:11px;color:var(--fg-4);margin-top:3px;}
.ship-opt .cost{margin-left:auto;font-family:var(--font-mono);font-size:13px;}
.checkout__summary{background:var(--ink-050);padding:56px clamp(24px,4vw,56px);border-left:1px solid var(--border-1);}
.osum-line{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--border-1);}
.osum-line__img{width:62px;height:78px;background:#fff;border:1px solid var(--border-1);flex:none;display:flex;align-items:center;justify-content:center;position:relative;}
.osum-line__img .w{font-family:var(--font-display);font-weight:800;font-size:18px;color:rgba(0,0,0,.1);}
.osum-line__img .q{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;background:#000;color:#fff;font-family:var(--font-mono);font-size:10px;display:flex;align-items:center;justify-content:center;}
.osum-line__main{flex:1;}
.osum-line__main .t{font-family:var(--font-display);font-weight:600;font-size:13px;text-transform:uppercase;}
.osum-line__main .m{font-family:var(--font-mono);font-size:10px;color:var(--fg-4);margin-top:4px;}
.osum-line__price{font-family:var(--font-mono);font-size:13px;}
.coupon{display:flex;gap:8px;margin:22px 0;}
.coupon input{flex:1;border:1px solid var(--border-2);padding:13px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;outline:none;background:#fff;}
.coupon button{background:#000;color:#fff;border:none;padding:0 20px;font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;}

/* ====================== AUTH / MODAL ====================== */
.auth-tabs{display:flex;border:1px solid var(--border-2);margin-bottom:28px;}
.auth-tabs button{flex:1;padding:14px;background:#fff;border:none;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);}
.auth-tabs button.is-on{background:#000;color:#fff;}

/* ====================== SEARCH OVERLAY ====================== */
.search-overlay{position:fixed;inset:0;z-index:120;background:rgba(255,255,255,.98);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease-out);}
.search-overlay.is-open{opacity:1;visibility:visible;}
.search-overlay__inner{max-width:760px;margin:0 auto;padding:80px var(--gutter);}
.search-overlay input{width:100%;border:none;border-bottom:2px solid #000;font-family:var(--font-display);font-weight:700;font-size:clamp(28px,5vw,54px);text-transform:uppercase;letter-spacing:-.02em;padding:0 0 18px;outline:none;background:none;}
.search-overlay input::placeholder{color:var(--ink-200);}
.search-sugg{margin-top:32px;}
.search-sugg h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-4);margin:0 0 16px;}
.search-result{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--border-1);cursor:pointer;}
.search-result .w{width:48px;height:60px;background:var(--ink-050);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:14px;color:rgba(0,0,0,.12);flex:none;}
.search-result:hover .t{opacity:.5;}
.search-result .t{font-family:var(--font-display);font-weight:600;font-size:16px;text-transform:uppercase;transition:opacity var(--dur-fast);}
.search-result .p{margin-left:auto;font-family:var(--font-mono);font-size:13px;}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#000;color:#fff;padding:15px 24px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;z-index:130;opacity:0;transition:all var(--dur) var(--ease-out);display:flex;align-items:center;gap:12px;}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0);}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);}
.reveal.is-in{opacity:1;transform:none;}

/* ====================== RESPONSIVE ====================== */
@media(max-width:1100px){
  .pgrid{grid-template-columns:repeat(3,1fr);}
  .coll-grid{grid-template-columns:repeat(2,1fr);}
  .pdp{grid-template-columns:1fr;gap:40px;}
  .checkout{grid-template-columns:1fr;}
  .footer__top{grid-template-columns:1fr 1fr;gap:32px;}
  .mega__inner{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:780px){
  .nav__links{display:none;}
  .nav__burger{display:flex;}
  .pgrid,.pgrid--3{grid-template-columns:repeat(2,1fr);}
  .testi{grid-template-columns:1fr;}
  .plp{grid-template-columns:1fr;}
  .filters{display:none;}
  .sec-head{flex-direction:column;align-items:flex-start;}
  .sec-head__intro{max-width:100%;}
  .footer__top{grid-template-columns:1fr;}
}

/* Cinematic hero — lightweight CSS light-sweep (replaces the canvas FX) */
.hero--cinematic .hero__media img{animation:heroZoom 16s var(--ease-out) forwards;}
.hero__sweep{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;}
.hero__sweep::before{content:"";position:absolute;top:-60%;left:-70%;width:45%;height:220%;transform:rotate(15deg);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 28%,transparent) 50%,transparent);filter:blur(8px);animation:heroSweep 8s var(--ease-in-out) infinite;}
@keyframes heroSweep{0%{left:-70%;opacity:0;}12%{opacity:1;}55%{left:120%;opacity:1;}56%,100%{left:120%;opacity:0;}}
@media(prefers-reduced-motion:reduce){.hero__sweep::before,.hero__aura,.hero__aura--2{animation:none;}}

/* Mobile slide-in menu (hamburger) */
.mnav{position:fixed;inset:0;z-index:60;background:var(--ink-999,#000);color:#fff;padding:18px var(--gutter) 48px;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s var(--ease-out);overflow-y:auto;visibility:hidden;}
.mnav.is-open{transform:none;visibility:visible;}
.mnav__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.mnav .logo{color:#fff;}
.mnav .iconbtn{color:#fff;background:none;border:0;font-size:22px;cursor:pointer;}
.mnav__link{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:26px;letter-spacing:-.02em;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12);cursor:pointer;color:#fff;}
.mnav__head{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin:26px 0 6px;}
.mnav__sub{font-family:var(--font-body);font-size:16px;padding:10px 0;opacity:.85;cursor:pointer;color:#fff;}
.mnav__sub:active{opacity:1;}
@media(min-width:781px){.mnav{display:none;}}