/* ================= CHB SPORTSWEAR — DESIGN SYSTEM ================= */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

:root{
  --black:#0a0a0a;
  --black-2:#131313;
  --black-3:#1c1c1c;
  --white:#f5f4f2;
  --white-2:#e9e8e5;
  --grey:#8a8a86;
  --line:rgba(245,244,242,.14);
  --glass-bg:rgba(255,255,255,.05);
  --glass-brd:rgba(255,255,255,.14);
  --glass-spec:rgba(255,255,255,.35);
  --bg:var(--black);
  --bg-2:var(--black-2);
  --bg-3:var(--black-3);
  --fg:var(--white);
  --fg-dim:var(--grey);
  --inv:var(--black);
  --shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  --ease: cubic-bezier(.16,.84,.24,1);
}

html[data-theme="light"]{
  --bg:var(--white);
  --bg-2:var(--white-2);
  --bg-3:#e2e0db;
  --fg:var(--black);
  --fg-dim:#5c5c58;
  --inv:var(--white);
  --line:rgba(10,10,10,.12);
  --glass-bg:rgba(10,10,10,.045);
  --glass-brd:rgba(10,10,10,.14);
  --glass-spec:rgba(255,255,255,.6);
  --shadow: 0 20px 60px -20px rgba(0,0,0,.25);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Barlow Condensed', sans-serif;
  font-size:17px;
  line-height:1.5;
  overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}
h1,h2,h3{font-family:'Anton', sans-serif;font-weight:400;letter-spacing:.01em;line-height:.95;text-transform:uppercase;}
::selection{background:var(--fg);color:var(--bg);}

.tag{
  display:inline-block;font-family:'Barlow Condensed',sans-serif;
  font-size:13px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--fg-dim);border-left:2px solid var(--fg);padding-left:10px;
  margin-bottom:18px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 34px;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:transform .35s var(--ease), background .3s, color .3s;
  white-space:nowrap;
}
.btn-solid{background:var(--fg);color:var(--bg);}
.btn-solid:hover{transform:translateY(-3px) scale(1.02);}
.btn-ghost{border:1px solid var(--fg);color:var(--fg);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);}
.btn-ghost:hover{background:var(--fg);color:var(--bg);}
.btn-wide{width:100%;}

/* ================= PRELOADER ================= */
.preloader{
  position:fixed;inset:0;background:var(--black);z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.done{opacity:0;visibility:hidden;pointer-events:none;}
.preloader-logo{display:flex;align-items:center;gap:16px;}
.pre-logo-img{
  width:clamp(220px,34vw,360px);
  opacity:0;filter:drop-shadow(0 0 30px rgba(255,255,255,.15));
  clip-path:inset(0 100% 0 0);
  animation:logoWipe 1s var(--ease) forwards .15s, logoFade .3s ease forwards .15s;
}
@keyframes logoWipe{to{clip-path:inset(0 0 0 0);}}
@keyframes logoFade{to{opacity:1;}}
.preloader-bar{width:200px;height:2px;background:rgba(255,255,255,.15);overflow:hidden;}
.preloader-bar span{display:block;height:100%;width:0%;background:var(--white);animation:barFill 1.6s var(--ease) forwards .2s;}
@keyframes barFill{to{width:100%;}}

/* ================= FLOATING SHAPES ================= */
.float-field{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden;mix-blend-mode:difference;}
.floater{position:absolute;fill:var(--white);color:var(--white);opacity:.55;}
.f1{width:34px;top:12%;left:6%;animation:drift1 22s ease-in-out infinite;}
.f2{width:22px;top:70%;left:88%;animation:drift2 18s ease-in-out infinite;}
.f3{width:60px;top:38%;left:92%;animation:drift3 26s ease-in-out infinite;}
.f4{width:44px;top:80%;left:12%;animation:drift1 30s ease-in-out infinite reverse;}
.f5{width:30px;top:22%;left:80%;animation:drift2 20s ease-in-out infinite;}
.f6{width:20px;top:55%;left:4%;animation:drift3 24s ease-in-out infinite reverse;}
@keyframes drift1{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(40px,60px) rotate(18deg);}}
@keyframes drift2{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(-50px,40px) rotate(-24deg);}}
@keyframes drift3{0%,100%{transform:translate(0,0) rotate(0deg) scale(1);}50%{transform:translate(-30px,-50px) rotate(12deg) scale(1.08);}}
@media (max-width:720px){.float-field{opacity:.6;} .f3{width:40px;}}

/* ================= NAV ================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,5vw,56px);
  background:transparent;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:blur(16px);padding-block:14px;border-color:var(--line);}
.brand{display:flex;align-items:center;gap:10px;}
.brand-logo-img{
  height:30px;width:auto;object-fit:contain;
  filter:drop-shadow(0 0 0 transparent);
  transition:filter .5s var(--ease);
}
html[data-theme="light"] .brand-logo-img{filter:invert(1);}
.footer-logo-img{height:38px;}
.nav-links{display:flex;gap:38px;}
.nav-links a{font-size:15px;letter-spacing:.08em;text-transform:uppercase;position:relative;padding-bottom:4px;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--fg);transition:width .3s var(--ease);}
.nav-links a:hover::after{width:100%;}
.nav-actions{display:flex;align-items:center;gap:10px;}
.icon-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;position:relative;}
.icon-btn svg{width:20px;height:20px;fill:var(--fg);stroke:var(--fg);}
#iconSun circle{fill:var(--fg);stroke:none;}
.cart-count{position:absolute;top:2px;right:2px;background:var(--fg);color:var(--bg);font-size:10px;font-weight:700;
  width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;}
.burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center;}
.burger span{width:22px;height:2px;background:var(--fg);transition:.3s;}
.mobile-menu{
  position:fixed;top:0;right:-100%;width:78%;max-width:320px;height:100vh;background:var(--bg-2);
  z-index:600;display:flex;flex-direction:column;gap:26px;padding:100px 34px;transition:right .5s var(--ease);
  border-left:1px solid var(--line);
}
.mobile-menu.open{right:0;}
.mobile-menu a{font-family:'Anton',sans-serif;font-size:26px;text-transform:uppercase;}

/* ================= HERO ================= */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.65);}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.35) 40%,var(--black) 96%);}
html[data-theme="light"] .hero-veil{background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.25) 40%,var(--white) 96%);}
.hero-cut{position:absolute;right:-10%;top:0;bottom:0;width:55%;
  background:transparent;border-left:1px solid rgba(255,255,255,.12);
  clip-path:polygon(30% 0,100% 0,100% 100%,0% 100%);pointer-events:none;}
.hero-content{position:relative;z-index:3;padding:0 clamp(20px,5vw,56px) 90px;max-width:900px;}
.hero-eyebrow{font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--white-2);margin-bottom:18px;}
.hero-title{font-size:clamp(46px,10vw,120px);color:var(--white);}
.hero-title .line{display:block;overflow:hidden;}
.hero-title .accent{-webkit-text-stroke:2px var(--white);color:transparent;}
.hero-sub{max-width:480px;color:var(--white-2);font-size:19px;margin:26px 0 34px;}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;}
.hero .btn-ghost{border-color:var(--white);color:var(--white);}
.hero .btn-ghost:hover{background:var(--white);color:var(--black);}
.hero-scroll{position:absolute;bottom:26px;right:clamp(20px,5vw,56px);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--white-2);}
.hero-scroll span{font-size:11px;letter-spacing:.3em;writing-mode:vertical-rl;}
.scroll-line{width:1px;height:50px;background:rgba(255,255,255,.4);overflow:hidden;position:relative;}
.scroll-line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:#fff;animation:scrollDown 1.8s ease-in-out infinite;}
@keyframes scrollDown{0%{top:-50%;}100%{top:100%;}}

/* ================= MARQUEE ================= */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;background:var(--bg);white-space:nowrap;padding:16px 0;
}
.marquee-track{display:inline-flex;animation:marquee 22s linear infinite;}
.marquee-track span{font-family:'Anton',sans-serif;font-size:clamp(20px,3.4vw,34px);letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px var(--fg);padding-right:4px;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ================= REVEALS ================= */
[data-reveal]{opacity:0;transition:opacity .9s var(--ease), transform .9s var(--ease);will-change:transform;}
[data-reveal="up"]{transform:translateY(50px);}
[data-reveal="left"]{transform:translateX(-70px);}
[data-reveal="right"]{transform:translateX(70px);}
[data-reveal].in-view{opacity:1;transform:translate(0,0);}

/* ================= MANIFEST ================= */
.manifest{padding:150px clamp(20px,5vw,56px);display:flex;flex-direction:column;gap:140px;max-width:1440px;margin:0 auto;}
.manifest-row{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.manifest-row.reverse{direction:rtl;}
.manifest-row.reverse > *{direction:ltr;}
.manifest-text h2{font-size:clamp(30px,3.6vw,52px);margin:10px 0 22px;}
.manifest-text p{color:var(--fg-dim);font-size:19px;max-width:440px;}
.manifest-media{position:relative;aspect-ratio:4/5;overflow:hidden;clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);}
.manifest-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) contrast(1.05);transition:transform .8s var(--ease), filter .5s;}
.manifest-media:hover img{transform:scale(1.06);filter:grayscale(0) contrast(1.05);}
.media-corner{position:absolute;bottom:16px;left:16px;font-size:11px;letter-spacing:.2em;padding:6px 12px;
  background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--glass-brd);color:var(--fg);}

/* ================= GLASS (liquid glass) ================= */
.glass{
  position:relative;
  background:var(--glass-bg);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--shadow), inset 0 1px 0 var(--glass-spec);
}
.glass::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg, var(--glass-spec) 0%, transparent 30%, transparent 70%, rgba(255,255,255,.08) 100%);
  opacity:.5;mix-blend-mode:overlay;
}

/* ================= CATALOG ================= */
.catalog{padding:60px clamp(20px,5vw,56px) 150px;max-width:1440px;margin:0 auto;}
.section-head{text-align:center;margin-bottom:40px;}
.section-head h2{font-size:clamp(34px,5vw,58px);}
.section-head .tag{border:none;padding:0;display:block;margin-bottom:10px;}
.filters{display:flex;gap:12px;justify-content:center;margin-bottom:56px;flex-wrap:wrap;}
.filter-btn{
  padding:10px 22px;border:1px solid var(--line);font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .3s,color .3s,border-color .3s;
}
.filter-btn.active,.filter-btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg);}

.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.product-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--bg-2);
  transition:transform .5s var(--ease), border-color .4s;
}
.product-card:hover{transform:translateY(-8px);border-color:var(--fg-dim);}
.pc-media{position:relative;aspect-ratio:4/5;overflow:hidden;}
.pc-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35);transition:transform .7s var(--ease), filter .5s;}
.product-card:hover .pc-media img{transform:scale(1.08);filter:grayscale(0);}
.pc-badge{position:absolute;top:12px;left:12px;background:var(--fg);color:var(--bg);font-size:11px;letter-spacing:.14em;
  padding:5px 10px;text-transform:uppercase;}
.pc-add{
  position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;
  background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--glass-brd);
  display:flex;align-items:center;justify-content:center;transform:translateY(70px);opacity:0;
  transition:transform .4s var(--ease), opacity .4s, background .3s;
}
.product-card:hover .pc-add{transform:translateY(0);opacity:1;}
.pc-add:hover{background:var(--fg);}
.pc-add:hover svg{stroke:var(--bg);}
.pc-add svg{width:18px;height:18px;stroke:var(--fg);fill:none;stroke-width:1.8;transition:stroke .3s;}
.pc-body{padding:18px 20px 22px;}
.pc-cat{font-size:11px;letter-spacing:.2em;color:var(--fg-dim);text-transform:uppercase;}
.pc-name{font-family:'Anton',sans-serif;font-size:20px;margin:6px 0 10px;text-transform:uppercase;}
.pc-price{font-size:18px;color:var(--fg);}
.pc-price del{color:var(--fg-dim);margin-right:8px;font-size:15px;}

@media (max-width:980px){.product-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.product-grid{grid-template-columns:1fr;}}

/* ================= LOOKBOOK ================= */
.lookbook{padding:40px clamp(20px,5vw,56px) 150px;max-width:1440px;margin:0 auto;}
.lookbook-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,220px);gap:20px;}
.lb-item{overflow:hidden;position:relative;}
.lb-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4);transition:transform .8s var(--ease),filter .5s;}
.lb-item:hover img{transform:scale(1.07);filter:grayscale(0);}
.lb-1{grid-column:1/4;grid-row:1/3;clip-path:polygon(0 0,100% 0,100% 92%,92% 100%,0 100%);}
.lb-2{grid-column:4/7;grid-row:1/2;}
.lb-3{grid-column:4/6;grid-row:2/3;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%,0 12%);}
.lb-4{grid-column:6/7;grid-row:2/3;}
@media (max-width:900px){
  .lookbook-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,220px);}
  .lb-1{grid-column:1/3;grid-row:1/2;}
  .lb-2{grid-column:1/2;grid-row:2/3;}
  .lb-3{grid-column:2/3;grid-row:2/3;}
  .lb-4{grid-column:1/3;grid-row:3/4;}
}

/* ================= CTA BAND ================= */
.cta-band{padding:130px clamp(20px,5vw,56px);text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;}
.cta-band h2{font-size:clamp(34px,6vw,72px);}
.cta-band p{color:var(--fg-dim);font-size:19px;margin:16px 0 34px;}

/* ================= FOOTER ================= */
.footer{padding:90px clamp(20px,5vw,56px) 30px;max-width:1440px;margin:0 auto;}
.footer-top{margin-bottom:60px;}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.footer-tag{color:var(--fg-dim);font-size:18px;max-width:420px;}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-bottom:50px;border-bottom:1px solid var(--line);}
.footer-grid h4{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:16px;}
.footer-grid div{display:flex;flex-direction:column;gap:10px;font-size:17px;}
.footer-grid a:hover{opacity:.6;}
.footer-bottom{padding-top:26px;color:var(--fg-dim);font-size:14px;}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr;}}

/* ================= CART DRAWER ================= */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:700;opacity:0;visibility:hidden;transition:.4s;backdrop-filter:blur(2px);}
.cart-overlay.open{opacity:1;visibility:visible;}
.cart-drawer{
  position:fixed;top:0;right:-440px;width:min(440px,92vw);height:100vh;z-index:800;
  display:flex;flex-direction:column;padding:30px 26px;transition:right .5s var(--ease);
  background:var(--bg-2);
}
.cart-drawer.open{right:0;}
.cart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
.cart-head h3{font-size:24px;}
.cart-items{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:18px;}
.cart-item{display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px;}
.cart-item img{width:70px;height:88px;object-fit:cover;filter:grayscale(.3);}
.ci-name{font-family:'Anton',sans-serif;font-size:15px;text-transform:uppercase;}
.ci-price{color:var(--fg-dim);font-size:14px;margin-top:4px;}
.ci-qty{display:flex;align-items:center;gap:10px;margin-top:8px;}
.ci-qty button{width:22px;height:22px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;}
.ci-remove{grid-column:3;justify-self:end;color:var(--fg-dim);font-size:13px;text-decoration:underline;}
.cart-empty{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:var(--fg-dim);}
.cart-footer{padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:16px;}
.cart-total{display:flex;justify-content:space-between;align-items:center;font-family:'Anton',sans-serif;font-size:20px;}

/* ================= WHATSAPP FLOAT ================= */
.wa-float{
  position:fixed;bottom:26px;left:26px;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;z-index:400;
  box-shadow:0 10px 30px rgba(0,0,0,.35);animation:waPulse 2.6s ease-in-out infinite;
}
.wa-float svg{width:28px;height:28px;fill:#fff;}
@keyframes waPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}

/* ================= TOAST ================= */
.toast{
  position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--fg);color:var(--bg);padding:14px 26px;font-size:15px;letter-spacing:.05em;
  z-index:900;opacity:0;pointer-events:none;transition:.4s var(--ease);text-transform:uppercase;font-weight:600;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ================= RESPONSIVE NAV ================= */
@media (max-width:900px){
  .nav-links{display:none;}
  .burger{display:flex;}
}
@media (max-width:640px){
  .manifest-row,.manifest-row.reverse{grid-template-columns:1fr;direction:ltr;gap:34px;}
  .manifest{gap:90px;padding-top:100px;padding-bottom:100px;}
  .hero-content{padding-bottom:60px;}
  .hero-cut{display:none;}
}