:root{
  --bg:#0a0a0c;
  --surface:#141416;
  --surface-2:#1c1c1f;
  --line:#2a2a2e;
  --text:#f7f7f5;
  --muted:#9d9da3;
  --lime:#d4ff3f;
  --pink:#ff2e7e;
  --font-display:'Anton',sans-serif;
  --font-body:'Space Grotesk',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font-family:inherit;background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:6px;padding:10px 12px;font-size:14px;width:100%;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lime);}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px;}
h1,h2,h3{font-family:var(--font-display);text-transform:uppercase;line-height:.95;letter-spacing:.01em;}

.marquee{background:var(--lime);color:#0a0a0c;overflow:hidden;white-space:nowrap;border-bottom:3px solid #0a0a0c;}
.marquee-track{display:inline-flex;animation:scroll 22s linear infinite;}
.marquee span{display:inline-flex;align-items:center;font-family:var(--font-display);font-size:15px;padding:10px 28px;letter-spacing:.02em;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

header{position:sticky;top:0;z-index:50;background:rgba(10,10,12,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;}
.logo{font-family:var(--font-display);font-size:24px;letter-spacing:.02em;}
.logo span{color:var(--lime);}
.nav-links{display:flex;gap:34px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
.nav-links a:hover{color:var(--lime);}
.cart-btn{position:relative;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;background:var(--text);color:#0a0a0c;padding:10px 18px;border-radius:100px;}
.cart-btn:hover{background:var(--lime);}
.cart-count{background:var(--pink);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.nav-right{display:flex;align-items:center;gap:14px;}
.lang-toggle{display:flex;border:1px solid var(--line);border-radius:100px;overflow:hidden;}
.lang-btn{padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--muted);}
.lang-btn.active{background:var(--lime);color:#0a0a0c;}

.hero{position:relative;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1.15fr .85fr;min-height:640px;}
.hero-left{padding:80px 48px 60px 24px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);padding:6px 14px;border-radius:100px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;width:fit-content;margin-bottom:26px;}
.hero-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);}
.hero h1{font-size:clamp(50px,7.2vw,108px);}
.hero h1 .l1{display:block;}
.hero h1 .hl{color:var(--lime);}
.hero h1 .outline{-webkit-text-stroke:2px var(--text);color:transparent;}
.hero p{margin-top:26px;max-width:42ch;color:var(--muted);font-size:17px;}
.hero-cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em;border-radius:100px;}
.btn-lime{background:var(--lime);color:#0a0a0c;}
.btn-lime:hover{background:var(--text);}
.btn-ghost{border:1px solid var(--line);color:var(--text);}
.btn-ghost:hover{border-color:var(--text);}
.hero-right{position:relative;background:var(--pink);overflow:hidden;}
.hero-right img{width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity;opacity:.85;}
.hero-right::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,10,12,.85));}
.hero-tag{position:absolute;bottom:28px;left:28px;right:28px;z-index:2;color:#fff;}
.hero-tag .p1{font-family:var(--font-display);font-size:34px;}
.hero-tag .p2{font-size:13px;color:rgba(255,255,255,.8);margin-top:4px;}

.cats{padding:70px 0 40px;}
.cats-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;flex-wrap:wrap;gap:16px;}
.cats-head h2{font-size:clamp(30px,4vw,46px);}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.cat-card{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:6px;background:var(--surface);cursor:pointer;}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;filter:grayscale(30%);}
.cat-card:hover img{transform:scale(1.08);filter:grayscale(0%);}
.cat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85));}
.cat-label{position:absolute;bottom:16px;left:16px;z-index:2;font-family:var(--font-display);font-size:20px;color:#fff;}
.cat-label small{display:block;font-family:var(--font-body);font-weight:500;font-size:11px;color:var(--lime);text-transform:uppercase;margin-top:2px;}

.filters{display:flex;gap:10px;flex-wrap:wrap;padding:40px 0 30px;border-top:1px solid var(--line);margin-top:40px;}
.chip{padding:10px 20px;border:1px solid var(--line);border-radius:100px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);}
.chip.active,.chip:hover{background:var(--text);color:#0a0a0c;border-color:var(--text);}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:80px;}
.card{background:var(--surface);border-radius:8px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .2s,transform .2s;}
.card:hover{border-color:var(--lime);transform:translateY(-4px);}
.card-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:#1c1c1f;}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card:hover .card-img img{transform:scale(1.06);}
.tag{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 10px;border-radius:100px;text-transform:uppercase;color:#0a0a0c;}
.tag.novo{background:var(--lime);}
.tag.promo{background:var(--pink);color:#fff;}
.card-body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.card-cat{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.card-name{font-weight:600;font-size:15px;}
.card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:10px;}
.price{font-family:var(--font-display);font-size:19px;color:var(--lime);}
.price small{color:var(--muted);font-size:12px;text-decoration:line-through;margin-right:6px;font-family:var(--font-body);font-weight:400;}
.add-btn{width:38px;height:38px;background:var(--text);color:#0a0a0c;display:flex;align-items:center;justify-content:center;font-size:20px;border-radius:50%;flex-shrink:0;}
.add-btn:hover{background:var(--lime);}

.promo{background:linear-gradient(120deg,var(--pink),#ff6ea8);border-radius:12px;margin-bottom:80px;padding:60px 48px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;color:#0a0a0c;}
.promo h3{font-size:clamp(28px,4vw,44px);max-width:16ch;color:#0a0a0c;}
.promo .btn{background:#0a0a0c;color:#fff;}
.promo .btn:hover{background:#000;}

.insta{padding-bottom:90px;}
.insta-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;flex-wrap:wrap;gap:12px;}
.insta-head h2{font-size:clamp(26px,3.4vw,38px);}
.insta-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.insta-grid a{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:6px;background:var(--surface);}
.insta-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.insta-grid a:hover img{transform:scale(1.1);}

.trust{border-top:1px solid var(--line);background:var(--bg);}
.trust-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:28px 24px;}
.trust-shipping{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text);}
.trust-icon{font-size:18px;}
.trust-payments{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;}
.payment-badge{display:flex;flex-direction:column;align-items:center;gap:4px;}
.payment-badge svg{display:block;border-radius:6px;}
.payment-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;text-align:center;max-width:70px;line-height:1.2;}

footer{border-top:1px solid var(--line);padding:60px 0 30px;background:var(--surface);}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;}
.foot-grid h4{font-family:var(--font-display);font-size:14px;letter-spacing:.04em;margin-bottom:16px;text-transform:uppercase;color:var(--muted);}
.foot-grid li{margin-bottom:10px;font-size:14px;}
.foot-grid li a:hover{color:var(--lime);}
.foot-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;color:var(--muted);font-size:13px;flex-wrap:wrap;gap:10px;}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);opacity:0;pointer-events:none;transition:opacity .25s;z-index:90;}
.overlay.open{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:-440px;width:420px;max-width:92vw;height:100%;background:var(--bg);border-left:1px solid var(--line);z-index:95;transition:right .3s ease;display:flex;flex-direction:column;}
.drawer.open{right:0;}
.drawer-head{padding:22px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.drawer-head h3{font-size:16px;font-family:var(--font-display);text-transform:uppercase;}
.drawer-close{font-size:22px;}
.drawer-items{flex:1;overflow-y:auto;padding:10px 24px;}
.drawer-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);}
.drawer-item img{width:64px;height:76px;object-fit:cover;background:var(--surface);border-radius:4px;}
.drawer-item-info{flex:1;}
.drawer-item-info .name{font-size:14px;font-weight:600;margin-bottom:4px;}
.drawer-item-info .price{font-size:13px;font-family:var(--font-body);}
.qty-row{display:flex;align-items:center;gap:10px;margin-top:8px;}
.qty-row button{width:22px;height:22px;border:1px solid var(--line);font-size:14px;border-radius:4px;}
.qty-row .remove{border:none;color:var(--pink);font-size:12px;margin-left:auto;text-decoration:underline;}
.drawer-empty{color:var(--muted);text-align:center;padding:60px 0;font-size:14px;}
.drawer-foot{padding:22px 24px;border-top:1px solid var(--line);}
.drawer-foot .total-row{display:flex;justify-content:space-between;font-family:var(--font-display);font-size:20px;margin-bottom:16px;}
.drawer-foot .btn{width:100%;justify-content:center;}
.drawer-note{font-size:12px;color:var(--muted);margin-top:10px;text-align:center;}

/* ---------- Painel de administração ---------- */
.admin-body{max-width:1100px;margin:0 auto;padding:40px 24px 100px;}
.admin-login{max-width:360px;margin:120px auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:36px;text-align:center;}
.admin-login h1{font-size:22px;margin-bottom:8px;}
.admin-login p{color:var(--muted);font-size:13px;margin-bottom:24px;}
.field{margin-bottom:16px;text-align:left;}
.field label{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.admin-tabs{display:flex;gap:8px;margin-bottom:30px;border-bottom:1px solid var(--line);}
.admin-tab{padding:12px 20px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);border-bottom:2px solid transparent;}
.admin-tab.active{color:var(--lime);border-bottom-color:var(--lime);}
.admin-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:26px;margin-bottom:24px;}
.admin-card h3{font-size:16px;margin-bottom:20px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-grid.full{grid-template-columns:1fr;}
.table{width:100%;border-collapse:collapse;}
.table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);}
.table td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle;}
.table img{width:44px;height:52px;object-fit:cover;border-radius:4px;}
.table-actions{display:flex;gap:8px;}
.icon-btn{width:32px;height:32px;border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.icon-btn:hover{border-color:var(--lime);color:var(--lime);}
.icon-btn.danger:hover{border-color:var(--pink);color:var(--pink);}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--lime);color:#0a0a0c;padding:12px 24px;border-radius:100px;font-weight:600;font-size:14px;z-index:200;opacity:0;transition:opacity .3s;pointer-events:none;}
.toast.show{opacity:1;}
.top-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
.top-actions h1{font-size:26px;}
.logout{font-size:13px;color:var(--muted);text-decoration:underline;}
.logout:hover{color:var(--pink);}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:150;padding:20px;}
.modal-bg.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:30px;max-width:480px;width:100%;}
.modal h3{margin-bottom:20px;font-size:18px;}
.modal-actions{display:flex;gap:12px;margin-top:22px;}
.cat-row{display:grid;grid-template-columns:1fr 2fr auto;gap:10px;margin-bottom:10px;align-items:center;}

@media(max-width:900px){
  .nav-links{display:none;}
  .hero{grid-template-columns:1fr;}
  .hero-right{min-height:340px;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .grid{grid-template-columns:repeat(2,1fr);}
  .insta-grid{grid-template-columns:repeat(3,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;}
}
@media(max-width:520px){
  .insta-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr;}
}
