/* =====================
RESET
===================== */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:Poppins, sans-serif;
background:#0b0e14;
color:white;

}

a{

text-decoration:none;
color:inherit;

}

img{

max-width:100%;
display:block;

}

.container{

width:95%;
max-width:1200px;
margin:auto;

}



/* =====================
CORES PADRÃO
===================== */

:root{

--bg:#0b0e14;
--bg-soft:#11151d;

--card:#161d2d;
--card-hover:#1f2740;

--line:rgba(255,255,255,.08);

--text:#ffffff;
--muted:#a8b2c8;

--primary:#ffd84d;
--primary-dark:#f2c200;

--danger:#ff4d5a;

--radius:14px;

}



/* =====================
TOPBAR
===================== */

.topbar{

background:#07090d;
border-bottom:1px solid var(--line);

}

.topbar-inner{

display:flex;
justify-content:space-between;
align-items:center;

padding:8px 0;

font-size:13px;

color:var(--muted);

flex-wrap:wrap;

gap:10px;

}



/* =====================
HEADER
===================== */

.site-header{

background:var(--bg-soft);

border-bottom:1px solid var(--line);

position:sticky;
top:0;

z-index:999;

}

.header-inner{

display:grid;

grid-template-columns:
200px
1fr
auto;

gap:20px;

align-items:center;

padding:15px 0;

}



/* logo */

.logo{

display:flex;
align-items:center;

gap:10px;

font-size:20px;
font-weight:700;

}

.logo-badge{

width:38px;
height:38px;

border-radius:10px;

display:flex;
align-items:center;
justify-content:center;

background:linear-gradient(135deg,var(--primary),var(--primary-dark));

color:#111;

font-weight:900;

}



/* busca */

.searchbar{

display:flex;
align-items:center;

gap:10px;

background:#0f1420;

border:1px solid var(--line);

border-radius:40px;

padding:8px 14px;

}

.searchbar input{

flex:1;

background:none;

border:none;
outline:none;

color:white;

font-size:14px;

}

.searchbar input::placeholder{

color:#7c87a3;

}

.search-btn{

width:38px;
height:38px;

border-radius:50%;

border:none;

cursor:pointer;

background:linear-gradient(135deg,var(--primary),var(--primary-dark));

font-weight:700;

}



/* icones */

.header-actions{

display:flex;
gap:10px;

}

.icon-btn{

width:40px;
height:40px;

border-radius:10px;

display:flex;
align-items:center;
justify-content:center;

background:#0f1420;

border:1px solid var(--line);

position:relative;

cursor:pointer;

}

.cart-count{

position:absolute;

top:-6px;
right:-6px;

background:var(--danger);

font-size:11px;

padding:2px 6px;

border-radius:20px;

font-weight:700;

}



/* =====================
MENU
===================== */

.nav{

border-top:1px solid var(--line);

}

.nav-inner{

display:flex;
justify-content:space-between;
align-items:center;

padding:10px 0;

flex-wrap:wrap;

gap:15px;

}

.menu{

display:flex;

gap:16px;

flex-wrap:wrap;

font-size:14px;

}

.menu a{

color:var(--muted);

transition:.2s;

}

.menu a:hover{

color:white;

}

.menu .active{

color:white;

font-weight:600;

}

.nav-cta{

color:var(--primary);

font-weight:600;

font-size:13px;

}



/* =====================
HERO
===================== */

.hero{

padding:70px 0 50px;

background:linear-gradient(180deg,#0b0e14,#141a27);

}

.hero-content{

max-width:600px;

}

.hero-tag{

font-size:13px;

color:var(--primary);

margin-bottom:8px;

display:block;

}

.hero h1{

font-size:40px;

margin-bottom:12px;

}

.hero p{

color:var(--muted);

margin-bottom:20px;

line-height:1.6;

}

.hero-actions{

display:flex;

gap:10px;

flex-wrap:wrap;

}



/* botões */

.hero-btn{

padding:12px 20px;

border-radius:10px;

font-weight:600;

}

.primary{

background:linear-gradient(135deg,var(--primary),var(--primary-dark));

color:#111;

}

.secondary{

background:#0f1420;

border:1px solid var(--line);

}



/* =====================
SECTIONS
===================== */

.section{

padding:50px 0;

}

.section-head{

margin-bottom:25px;

}

.section-head h2{

font-size:26px;

margin-bottom:5px;

}

.section-head p{

color:var(--muted);

font-size:14px;

}



/* =====================
CATEGORIAS
===================== */

.categories-grid{

display:grid;

grid-template-columns:

repeat(5,1fr);

gap:14px;

}

.category-card{

background:var(--card);

padding:18px;

border-radius:var(--radius);

border:1px solid var(--line);

text-align:center;

transition:.2s;

}

.category-card:hover{

background:var(--card-hover);

transform:translateY(-3px);

}

.category-card strong{

display:block;

margin-bottom:5px;

font-size:16px;

}

.category-card span{

font-size:12px;

color:var(--muted);

}



/* =====================
PRODUTOS
===================== */

.products-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:16px;

}

.product{

background:var(--card);

border-radius:var(--radius);

border:1px solid var(--line);

overflow:hidden;

transition:.2s;

}

.product:hover{

transform:translateY(-4px);

border-color:rgba(255,255,255,.15);

}



/* imagem produto */

.product-image{

aspect-ratio:1/1;

display:flex;

align-items:center;
justify-content:center;

background:#0e1422;

padding:10px;

}

.product-body{

padding:15px;

text-align:center;

}

.product-category{

font-size:11px;

color:var(--muted);

margin-bottom:6px;

letter-spacing:.05em;

}

.product-title{

font-size:14px;

min-height:38px;

margin-bottom:8px;

}



/* preço */

.price{

color:var(--primary);

font-weight:700;

font-size:17px;

margin-bottom:10px;

}



/* botoes produto */

.product-actions{

display:flex;

gap:8px;

}

.btn{

flex:1;

padding:8px;

border-radius:8px;

font-size:13px;

display:flex;

align-items:center;
justify-content:center;

font-weight:600;

cursor:pointer;

}

.btn-buy{

background:linear-gradient(135deg,var(--primary),var(--primary-dark));

color:#111;

}

.btn-view{

background:#232c44;

}



/* =====================
FOOTER
===================== */

.site-footer{

margin-top:40px;

padding:30px 0;

text-align:center;

background:#07090d;

border-top:1px solid var(--line);

color:#7c87a3;

font-size:14px;

}



/* =====================
RESPONSIVO
===================== */

@media(max-width:1100px){

.products-grid{

grid-template-columns:

repeat(3,1fr);

}

.categories-grid{

grid-template-columns:

repeat(3,1fr);

}

}



@media(max-width:800px){

.products-grid{

grid-template-columns:

repeat(2,1fr);

}

.categories-grid{

grid-template-columns:

repeat(2,1fr);

}

.header-inner{

grid-template-columns:

1fr auto;

}

.searchbar{

grid-column:1/-1;

}

}



@media(max-width:500px){

.products-grid{

grid-template-columns:

1fr;

}

.categories-grid{

grid-template-columns:

1fr;

}

.hero h1{

font-size:28px;

}

.menu{

gap:10px;

}

.product-actions{

flex-direction:column;

}

}