/* ============================================================================
   IMPORTS CAMPOOS — design system (estilo Nike)
   Tokens fielmente baseados na spec fornecida. Fontes substitutas open-source:
   Bebas Neue (display campanha 96px/0.9/uppercase) + Inter (UI 400/500).
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;700&display=swap');

:root{
  /* Brand & surface */
  --ink:#111111;          --canvas:#ffffff;       --on-primary:#ffffff;
  --soft-cloud:#f5f5f5;   --hairline:#cacacb;     --hairline-soft:#e5e5e5;
  /* Text */
  --charcoal:#39393b;     --ash:#4b4b4d;          --mute:#707072;   --stone:#9e9ea0;
  /* Semantic */
  --sale:#d30005;         --sale-deep:#780700;    --success:#007d48;
  --success-bright:#1eaa52;--info:#1151ff;        --info-deep:#0034e3;
  /* Category accents */
  --accent-pink:#ed1aa0;  --accent-teal:#0a7281;
  /* Spacing 8px base */
  --xxs:2px; --xs:4px; --sm:8px; --md:12px; --lg:18px; --xl:24px; --xxl:30px; --section:48px;
  /* Radius */
  --r-none:0px; --r-sm:18px; --r-md:24px; --r-lg:30px; --r-full:9999px;
  --maxw:1440px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--canvas);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
button{font-family:inherit; cursor:pointer; border:none; background:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--xl)}
@media(min-width:1920px){ .wrap{padding:0 80px} }

/* ---------- Tipografia ---------- */
.display{font-family:'Bebas Neue',Impact,sans-serif; font-weight:400;
  text-transform:uppercase; line-height:.9; letter-spacing:-.005em}
.h-xl{font-size:32px; font-weight:500; line-height:1.2}
.h-lg{font-size:24px; font-weight:500; line-height:1.2}
.h-md{font-size:16px; font-weight:500; line-height:1.75}
.body-strong{font-weight:500}
.caption{font-size:14px; font-weight:500}
.caption-sm{font-size:12px; font-weight:500}
.mute{color:var(--mute)}
.upper{text-transform:uppercase}

/* ---------- Botões (pill) ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center;
  font-weight:500; font-size:16px; line-height:1.5; border-radius:var(--r-lg);
  padding:14px 28px; min-height:48px; transition:transform .12s, opacity .12s;
  white-space:nowrap}
.btn:active{transform:scale(.96); opacity:.7}
.btn-primary{background:var(--ink); color:var(--on-primary)}
.btn-secondary{background:var(--soft-cloud); color:var(--ink)}
.btn-on-image{background:var(--canvas); color:var(--ink); padding:12px 24px}
.btn-sm{font-size:14px; padding:10px 18px; min-height:40px}
.btn-block{display:flex; width:100%}
.btn-success{background:var(--success); color:#fff}

.icon-btn{width:40px; height:40px; border-radius:var(--r-full);
  background:var(--soft-cloud); display:inline-flex; align-items:center;
  justify-content:center; color:var(--ink)}

/* ---------- Utility bar ---------- */
.utility{background:var(--soft-cloud); font-size:12px; font-weight:500}
.utility .wrap{display:flex; justify-content:flex-end; gap:var(--lg);
  height:36px; align-items:center}
.utility a{color:var(--ink)}
.utility .links{display:flex; gap:var(--lg)}
.utility .sep{color:var(--hairline)}

/* ---------- Primary nav ---------- */
.nav{background:var(--canvas); position:sticky; top:0; z-index:50;
  box-shadow:inset 0 -1px 0 var(--hairline-soft)}
.nav .wrap{display:flex; align-items:center; gap:var(--xl); height:60px}
.brand{font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:.02em;
  text-transform:uppercase; line-height:1}
.brand b{font-weight:400}
.nav-links{display:flex; gap:var(--xl); margin:0 auto; font-weight:500}
.nav-links a{padding:6px 2px; position:relative}
.nav-links a.active{box-shadow:inset 0 -2px 0 var(--ink)}
.nav-right{display:flex; align-items:center; gap:var(--md)}
.search-pill{display:flex; align-items:center; gap:8px; background:var(--soft-cloud);
  border-radius:var(--r-md); height:40px; padding:0 16px; border:2px solid transparent}
.search-pill:focus-within{background:var(--canvas); border-color:var(--ink);
  box-shadow:0 0 0 12px var(--soft-cloud)}
.search-pill input{border:none; background:none; outline:none; font-size:15px;
  width:170px; font-family:inherit}
.nav-toggle{display:none}

/* ---------- Hero / campaign tile ---------- */
.hero{position:relative; background:var(--ink); color:#fff; overflow:hidden;
  min-height:560px; display:flex; align-items:flex-end}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.62}
.hero-inner{position:relative; padding:var(--section) var(--xl);
  max-width:var(--maxw); margin:0 auto; width:100%}
.hero .kicker{font-weight:500; letter-spacing:.18em; font-size:13px;
  text-transform:uppercase; margin-bottom:var(--md)}
.hero .display{font-size:96px; max-width:14ch; margin-bottom:var(--xl)}
.hero p{max-width:46ch; margin-bottom:var(--xl); font-size:18px; color:#eee}

/* ---------- Seções ---------- */
.section{padding:var(--section) 0}
.section-head{display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:var(--xl)}
.section-head h2{font-size:24px; font-weight:500}
.section-head a{font-weight:500; font-size:15px}

/* ---------- Grid de produtos ---------- */
.grid{display:grid; gap:var(--sm)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.card{display:block; background:var(--canvas)}
.card .ph{aspect-ratio:1/1; background:var(--soft-cloud); overflow:hidden;
  position:relative}
.card .ph img{width:100%; height:100%; object-fit:cover}
.card .badge{position:absolute; top:12px; left:12px; background:var(--canvas);
  border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:4px 12px; font-size:12px; font-weight:500}
.card .meta{padding-top:var(--sm)}
.card .pname{font-weight:500; line-height:1.4}
.card .psub{color:var(--mute); font-size:14px; font-weight:500}
.card .price{margin-top:6px; font-weight:500}
.card .price .now{color:var(--ink)}
.card .price .sale{color:var(--sale)}
.card .price .old{color:var(--mute); text-decoration:line-through; margin-left:8px;
  font-weight:400}
.card .price .off{color:var(--sale); margin-left:8px}

/* ---------- Rail "compre por time" ---------- */
.rail{display:flex; gap:var(--sm); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:var(--sm)}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--hairline); border-radius:var(--r-full)}
.tile{position:relative; flex:0 0 320px; aspect-ratio:4/5; background:var(--soft-cloud);
  scroll-snap-align:start; overflow:hidden}
.tile img{width:100%; height:100%; object-fit:cover}
.tile .label{position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:flex-end; padding:var(--xl);
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%)}
.tile .label h3{color:#fff; font-size:24px; font-weight:500; margin-bottom:var(--md)}
.tile .label .btn{align-self:flex-start}

/* ---------- Category icon strip ---------- */
.cats-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sm)}
.cat-card{text-align:center; padding:var(--xl) var(--sm); background:var(--soft-cloud)}
.cat-card .ic{font-family:'Bebas Neue'; font-size:40px; line-height:1}
.cat-card .nm{font-size:14px; font-weight:500; margin-top:var(--sm)}

/* ---------- PLP (album) layout ---------- */
.plp{display:flex; gap:var(--xl); padding-top:var(--xl)}
.subnav{box-shadow:inset 0 -1px 0 var(--hairline-soft)}
.subnav .wrap{display:flex; align-items:center; justify-content:space-between;
  height:56px}
.breadcrumb{color:var(--mute); font-size:14px; font-weight:500}
.breadcrumb a:hover{color:var(--ink)}
.sortbar{display:flex; align-items:center; gap:var(--lg); font-weight:500}
.sortbar select{font-family:inherit; font-weight:500; border:none; background:none;
  font-size:15px; cursor:pointer}
.sidebar{flex:0 0 220px}
.sidebar h4{font-weight:500; margin-bottom:var(--md)}
.sidebar a{display:block; color:var(--mute); padding:6px 0; font-weight:500}
.sidebar a.active{color:var(--ink); box-shadow:inset 0 -1px 0 var(--ink); width:fit-content}
.plp-main{flex:1; min-width:0}

/* ---------- PDP ---------- */
.pdp{display:grid; grid-template-columns:1fr 420px; gap:var(--section);
  padding:var(--xl) 0}
.pdp-gallery .main{aspect-ratio:1/1; background:var(--soft-cloud); overflow:hidden}
.pdp-gallery .main img{width:100%; height:100%; object-fit:cover}
.pdp-thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--xs);
  margin-top:var(--xs)}
.pdp-thumbs img{aspect-ratio:1/1; object-fit:cover; background:var(--soft-cloud);
  cursor:pointer; border:1px solid transparent}
.pdp-thumbs img:hover{border-color:var(--ink)}
.pdp-info h1{font-size:24px; font-weight:500; line-height:1.2}
.pdp-info .sub{color:var(--mute); font-weight:500; margin-bottom:var(--lg)}
.pdp-info .price{font-size:20px; font-weight:500; margin-bottom:var(--xl)}
.pdp-info .price .sale{color:var(--sale)}
.pdp-info .price .old{color:var(--mute); text-decoration:line-through; margin-left:10px;
  font-size:16px}
.sizes{display:flex; flex-wrap:wrap; gap:var(--sm); margin:var(--md) 0 var(--xl)}
.size{border:1px solid var(--hairline); border-radius:var(--r-md); min-width:64px;
  text-align:center; padding:12px; font-weight:500; cursor:pointer}
.size.active,.size:hover{border-color:var(--ink)}
.disclosure{border-top:1px solid var(--hairline); padding:var(--xl) 0;
  font-weight:500; display:flex; justify-content:space-between; cursor:pointer}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--hairline); margin-top:var(--section);
  padding:var(--section) 0 var(--xl)}
.footer-cols{display:grid; grid-template-columns:repeat(4,1fr) 1.2fr; gap:var(--xl)}
.footer h5{font-weight:500; margin-bottom:var(--md); font-size:15px}
.footer a{display:block; color:var(--mute); font-size:14px; font-weight:500;
  padding:5px 0}
.footer .fine{display:flex; gap:var(--lg); flex-wrap:wrap; color:var(--mute);
  font-size:11px; margin-top:var(--section); padding-top:var(--lg);
  border-top:1px solid var(--hairline)}

/* ---------- Flash / utilidades ---------- */
.flash{padding:12px 16px; border-radius:var(--r-md); margin-bottom:var(--md);
  font-weight:500}
.flash.ok{background:#e7f6ee; color:var(--success)}
.flash.err{background:#fdecec; color:var(--sale)}
.empty{padding:var(--section); text-align:center; color:var(--mute)}

/* ---------- Responsivo ---------- */
@media(max-width:1023px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .cats-strip{grid-template-columns:repeat(3,1fr)}
  .pdp{grid-template-columns:1fr}
  .hero .display{font-size:64px}
}
@media(max-width:768px){
  .nav-links{display:none}
  .search-pill input{display:none}
  .nav-toggle{display:inline-flex}
  .footer-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:599px){
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr}
  .cats-strip{grid-template-columns:repeat(2,1fr)}
  .section{padding:24px 0}
  .hero .display{font-size:48px}
  .tile{flex-basis:80vw}
}

/* ============================================================================
   ADMIN — painel de configuracao
   ============================================================================ */
.adm-body{background:var(--soft-cloud)}
.adm-top{background:var(--ink); color:#fff; position:sticky; top:0; z-index:30}
.adm-top .wrap{display:flex; align-items:center; gap:var(--xl); height:58px}
.adm-top .brand{color:#fff}
.adm-nav{display:flex; gap:var(--lg); margin-left:auto; font-weight:500; font-size:15px}
.adm-nav a{color:#ddd; padding:6px 0}
.adm-nav a.active,.adm-nav a:hover{color:#fff; box-shadow:inset 0 -2px 0 #fff}
.adm-main{max-width:1100px; margin:0 auto; padding:var(--xl)}
.adm-card{background:var(--canvas); border:1px solid var(--hairline-soft);
  border-radius:var(--r-md); padding:var(--xl); margin-bottom:var(--lg)}
.adm-card h3{font-size:18px; font-weight:500; margin-bottom:var(--md)}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--md);
  margin-bottom:var(--lg)}
.stat{background:var(--canvas); border:1px solid var(--hairline-soft);
  border-radius:var(--r-md); padding:var(--lg)}
.stat .n{font-family:'Bebas Neue'; font-size:44px; line-height:1}
.stat .l{color:var(--mute); font-weight:500; font-size:14px}
.field{margin-bottom:var(--md)}
.field label{display:block; font-weight:500; font-size:14px; margin-bottom:6px}
.field input,.field select,.field textarea{width:100%; font-family:inherit;
  font-size:15px; padding:10px 12px; border:1px solid var(--hairline);
  border-radius:var(--r-sm); background:var(--canvas)}
.row{display:flex; gap:var(--md); flex-wrap:wrap}
.row>*{flex:1; min-width:160px}
.tbl{width:100%; border-collapse:collapse; background:var(--canvas)}
.tbl th,.tbl td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--hairline-soft);
  font-size:14px; vertical-align:middle}
.tbl th{font-weight:500; color:var(--mute)}
.tbl img{width:48px; height:48px; object-fit:cover; background:var(--soft-cloud);
  border-radius:8px}
.pill-tag{display:inline-block; font-size:12px; font-weight:500; padding:2px 10px;
  border-radius:var(--r-full); background:var(--soft-cloud)}
.pill-tag.on{background:#e7f6ee; color:var(--success)}
.pill-tag.off{background:#fdecec; color:var(--sale)}
.adm-prod-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--md)}
.adm-prod{background:var(--canvas); border:1px solid var(--hairline-soft);
  border-radius:var(--r-md); overflow:hidden}
.adm-prod .ph{aspect-ratio:1/1; background:var(--soft-cloud)}
.adm-prod .ph img{width:100%; height:100%; object-fit:cover}
.adm-prod .bd{padding:var(--md)}
.adm-prod input{width:100%; margin-bottom:6px; padding:7px 9px;
  border:1px solid var(--hairline); border-radius:10px; font-family:inherit; font-size:13px}
.adm-prod .chk{display:flex; gap:var(--md); font-size:13px; font-weight:500; margin:6px 0}
.login-screen{min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--ink)}
.login-box{background:var(--canvas); border-radius:var(--r-md); padding:40px;
  width:360px; text-align:center}
.login-box .brand{color:var(--ink); font-size:34px; margin-bottom:var(--xl)}
.inline-form{display:inline}
small.hint{color:var(--mute); font-weight:400}

/* ---------- Carrinho (drawer) ---------- */
.cart-btn{position:relative}
.cart-count{position:absolute; top:-4px; right:-4px; background:var(--ink); color:#fff;
  border-radius:var(--r-full); min-width:18px; height:18px; font-size:11px; font-weight:500;
  display:flex; align-items:center; justify-content:center; padding:0 4px}
.cart-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0;
  pointer-events:none; transition:opacity .2s; z-index:60}
.cart-drawer{position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw;
  background:var(--canvas); z-index:61; transform:translateX(100%); transition:transform .25s;
  display:flex; flex-direction:column; box-shadow:-8px 0 40px rgba(0,0,0,.12)}
body.cart-open .cart-backdrop{opacity:1; pointer-events:auto}
body.cart-open .cart-drawer{transform:translateX(0)}
.cart-head{display:flex; align-items:center; justify-content:space-between;
  padding:var(--xl); box-shadow:inset 0 -1px 0 var(--hairline-soft)}
.cart-body{flex:1; overflow-y:auto; padding:var(--lg) var(--xl)}
.cart-empty{color:var(--mute); text-align:center; padding:var(--section) 0; font-weight:500}
.cart-item{display:flex; gap:var(--md); padding:var(--md) 0;
  border-bottom:1px solid var(--hairline-soft)}
.cart-item img{width:84px; height:84px; object-fit:cover; background:var(--soft-cloud)}
.ci-info{flex:1; min-width:0}
.ci-name{font-weight:500; line-height:1.3}
.ci-sub{color:var(--mute); font-size:13px; font-weight:500}
.ci-price{font-weight:500; margin:4px 0}
.ci-qty{display:flex; align-items:center; gap:8px}
.ci-qty button{width:28px; height:28px; border:1px solid var(--hairline);
  border-radius:var(--r-full); font-weight:500; line-height:1}
.ci-qty .ci-rm{width:auto; border:none; color:var(--mute); text-decoration:underline;
  font-size:13px; margin-left:auto; padding:0}
.cart-foot{padding:var(--xl); box-shadow:inset 0 1px 0 var(--hairline-soft)}
.cart-total-row{display:flex; justify-content:space-between; font-size:18px;
  margin-bottom:var(--md)}
@media(max-width:599px){ .cart-drawer{width:100%} }