:root{
--bg:#f7f8fc;
--card:#ffffff;
--text:#172033;
--muted:#64748b;
--line:#e8edf6;

--primary:#0d3b78;
--primary-dark:#082a57;

--accent:#ff8a3d;
--accent-dark:#ea7122;

--green:#18c964;
--red:#d7263d;

--shadow:0 18px 40px rgba(13,59,120,.10);
--shadow-soft:0 10px 24px rgba(13,59,120,.07);

--radius:20px;
}

body.dark{
--bg:#0f1728;
--card:#171f33;
--text:#f1f5ff;
--muted:#9cabcb;
--line:#283249;
--primary:#3265b9;
--primary-dark:#244b8a;
}

/* RESET */

*{
box-sizing:border-box;
margin:0;
padding:0;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
}

a{
text-decoration:none;
color:inherit;
}

img{
display:block;
max-width:100%;
}

button,input,select,textarea{
font:inherit;
}

.hidden{
display:none!important;
}

.container{
width:min(1200px,92%);
margin:auto;
}

/* TOPBAR */

.topbar{
background:#081f42;
color:#fff;
font-size:.9rem;
padding:8px 0;
}

.topbar-inner{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:12px;
}

/* HEADER */

.header{
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#fff;
position:sticky;
top:0;
z-index:40;
box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.header-inner{
display:grid;
grid-template-columns:auto 1fr auto;
gap:18px;
align-items:center;
min-height:92px;
}

.brand{
display:flex;
align-items:center;
gap:12px;
}

.logo{
width:64px;
border-radius:16px;
background:#fff;
padding:6px;
}

.brand h1{
font-size:1.9rem;
}

.brand p{
font-size:.85rem;
opacity:.9;
}

/* SEARCH */

.header-search-wrap{
display:flex;
justify-content:flex-end;
gap:10px;
}

.search-box{
display:flex;
background:#fff;
border-radius:999px;
overflow:hidden;
width:min(420px,100%);
box-shadow:var(--shadow-soft);
}

.search-box input{
flex:1;
border:none;
padding:12px 16px;
outline:none;
color:#111;
}

.search-box button{
border:none;
background:var(--accent);
color:#fff;
padding:12px 16px;
cursor:pointer;
}

/* BUTTONS */

.menu-toggle,
.theme-btn{
width:46px;
height:46px;
border:none;
border-radius:14px;
background:rgba(255,255,255,.15);
color:#fff;
cursor:pointer;
}

.header-actions{
display:flex;
align-items:center;
gap:10px;
}

.ghost-btn{
background:rgba(255,255,255,.14);
padding:10px 16px;
border-radius:14px;
color:#fff;
}

.cart-btn{
background:var(--green);
padding:10px 16px;
border-radius:14px;
color:#fff;
font-weight:600;
display:flex;
gap:6px;
align-items:center;
}

/* CATEGORY DRAWER */

.category-drawer{
position:absolute;
top:100%;
left:0;
width:100%;
background:#fff;
border-top:1px solid var(--line);
box-shadow:0 20px 40px rgba(0,0,0,.15);
padding:18px 0;
z-index:20;
}

.category-drawer-inner{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.drawer-item{
background:#f3f4f6;
border:none;
padding:10px 16px;
border-radius:999px;
cursor:pointer;
font-weight:600;
}

.drawer-item:hover{
background:var(--accent);
color:#fff;
}

/* HERO */

.hero-slider{
background:linear-gradient(135deg,#0a2750,#0d3b78 45%,#ff8a3d 140%);
color:#fff;
overflow:hidden;
position:relative;
}

.hero-slide{
display:none;
}

.hero-slide.active{
display:block;
}

.hero-slide-inner{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:30px;
min-height:520px;
}

.hero-copy h2{
font-size:2.8rem;
margin-bottom:12px;
}

/* SECTION */

.section{
padding:70px 0;
}

.section-head{
display:flex;
justify-content:space-between;
margin-bottom:24px;
}

.section-head h2{
font-size:2rem;
}

/* PRODUCTS */

.product-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:16px;
}

.product-card{
background:var(--card);
border:1px solid var(--line);
border-radius:18px;
overflow:hidden;
box-shadow:var(--shadow-soft);
transition:.25s;
position:relative;
}

.product-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow);
}

.product-card img{
width:100%;
height:160px;
object-fit:contain;
padding:12px;
background:#f5f7fb;
}

.product-body{
padding:14px;
display:flex;
flex-direction:column;
gap:6px;
}

.product-title-link h3{
font-size:14px;
font-weight:600;
}

.product-description{
font-size:.85rem;
color:var(--muted);
}

.product-footer{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:auto;
}

.product-footer strong{
color:var(--accent);
font-size:1.1rem;
}

.mini-btn{
background:var(--accent);
border:none;
color:#fff;
padding:8px 12px;
border-radius:10px;
cursor:pointer;
}

/* SERVICES */

.services-section{
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#fff;
}

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:18px;
}

.service-card{
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.14);
border-radius:18px;
padding:24px;
text-align:center;
}

/* CONTACT */

.contact-card{
background:var(--card);
border:1px solid var(--line);
border-radius:18px;
padding:22px;
display:grid;
gap:10px;
box-shadow:var(--shadow-soft);
}

/* FOOTER */

.footer{
padding:18px 0 28px;
text-align:center;
color:var(--muted);
}

/* ============================= */
/* CARRINHO */
/* ============================= */

.checkout-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 420px;
gap:32px;
align-items:start;
}

.cart-list{
display:grid;
gap:4px;
}

.cart-item{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:16px 0;
border-bottom:1px solid var(--line);
}

.cart-item-left{
display:flex;
align-items:center;
gap:14px;
flex:1;
}

.cart-item-left img{
width:88px;
height:88px;
border-radius:14px;
object-fit:cover;
background:#f2f4f8;
}

.cart-info{
display:flex;
flex-direction:column;
gap:4px;
}

.cart-actions{
display:flex;
align-items:center;
gap:8px;
}

.qty-btn{
width:34px;
height:34px;
border:none;
border-radius:10px;
background:#e8edf6;
cursor:pointer;
}

.remove-btn{
border:none;
background:none;
color:#60a5fa;
cursor:pointer;
}

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-top:10px;
}

.form-grid textarea{
grid-column:span 2;
}

.form-grid input,
.form-grid select,
.form-grid textarea{
padding:14px;
border-radius:12px;
border:1px solid var(--line);
background:var(--card);
}

.coupon-box{
display:grid;
grid-template-columns:1fr auto;
gap:10px;
margin-top:14px;
}

.summary-box{
background:rgba(13,59,120,.05);
border:1px solid var(--line);
border-radius:16px;
padding:18px;
display:grid;
gap:10px;
}

.full-btn{
width:100%;
margin-top:14px;
padding:16px;
background:var(--accent);
color:#fff;
border:none;
border-radius:12px;
cursor:pointer;
}

/* RESPONSIVE */

@media(max-width:1200px){

.product-grid{
grid-template-columns:repeat(4,1fr);
}

}

@media(max-width:900px){

.product-grid{
grid-template-columns:repeat(3,1fr);
}

.checkout-layout{
grid-template-columns:1fr;
}

.hero-slide-inner{
grid-template-columns:1fr;
text-align:center;
}

}

@media(max-width:600px){

.product-grid{
grid-template-columns:repeat(2,1fr);
}

.header-inner{
grid-template-columns:1fr;
gap:12px;
}

.hero-copy h2{
font-size:2rem;
}

}

.hero-controls{
position:absolute;
bottom:24px;
left:0;
width:100%;
display:flex;
justify-content:center;
align-items:center;
gap:14px;
z-index:10;
pointer-events:auto;
}

.hero-slider{
position:relative;
overflow:hidden;
}

.hero-dots{
  display:flex;
  gap:8px;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  border:none;
  cursor:pointer;
}

.dot.active{
  background:#fff;
  width:26px;
  border-radius:999px;
}

.hero-slider *{
max-width:100%;
}

.hero-controls{
position:absolute;
bottom:24px;
left:0;
width:100%;
display:flex;
justify-content:center;
align-items:center;
gap:14px;
z-index:10;
pointer-events:auto;
}

.hero-dots{
display:flex;
gap:8px;
}

.dot{
width:10px;
height:10px;
border-radius:50%;
background:rgba(255,255,255,.5);
cursor:pointer;
}

.dot.active{
background:#fff;
width:26px;
border-radius:999px;
}

.section-categories{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:10px;
margin-bottom:25px;
}

.category-chip{
background:#f1f4f9;
border:none;
padding:8px 16px;
border-radius:999px;
cursor:pointer;
font-weight:600;
font-size:.85rem;
transition:.2s;
}

.category-chip:hover{
background:var(--accent);
color:#fff;
}

.category-chip.active{
background:var(--primary);
color:#fff;
}

.section-head{
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:15px;
}

.hero-slide-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:30px;
  min-height:520px;
  position:relative;
}

.slides{
position:relative;
width:100%;
}

.hero-slider{
position:relative;
overflow:hidden;
}

.hero-controls button{
width:42px;
height:42px;
border-radius:50%;
border:none;
background:rgba(255,255,255,.15);
color:#fff;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
}

.hero-dots{
display:flex;
gap:8px;
}

.dot{
width:10px;
height:10px;
border-radius:50%;
background:rgba(255,255,255,.5);
border:none;
}

.dot.active{
width:26px;
background:#fff;
border-radius:999px;
}

.btn-whatsapp{
display:inline-block;
background:#25D366;
color:white;

padding:14px 22px;
border-radius:10px;

font-size:16px;
font-weight:600;

text-decoration:none;
border:none;

box-shadow:0 4px 12px rgba(0,0,0,0.15);
transition:all .2s ease;
}

.btn-whatsapp:hover{
background:#1ebe5d;
transform:translateY(-2px);
}

@media(max-width:480px){

.hero-copy h2{
font-size:1.6rem;
}

.product-grid{
grid-template-columns:1fr 1fr;
}

.search-box{
width:100%;
}

.hero-art{
max-height:220px;
}

}

/* ================= MOBILE FIX ================= */

@media (max-width: 600px){

/* HEADER */
.header-inner{
grid-template-columns:1fr;
gap:10px;
text-align:center;
}

.brand{
justify-content:center;
}

.header-search-wrap{
width:100%;
justify-content:center;
}

.search-box{
width:100%;
}

.header-actions{
justify-content:center;
}

/* HERO */
.hero-slide-inner{
grid-template-columns:1fr;
text-align:center;
}

.hero-copy h2{
font-size:1.6rem;
line-height:1.3;
}

.hero-art{
max-width:180px;
margin:auto;
}

/* PRODUTOS */
.product-grid{
grid-template-columns:1fr 1fr;
gap:12px;
}

.product-card img{
height:120px;
}

/* BOTÃO ADD */
.product-footer{
flex-direction:column;
align-items:flex-start;
gap:8px;
}

.mini-btn{
width:100%;
text-align:center;
}

/* CATEGORIAS */
.section-categories{
overflow-x:auto;
flex-wrap:nowrap;
padding-bottom:5px;
}

.category-chip{
white-space:nowrap;
}

/* CONTATO */
.contact-card{
padding:18px;
}

.btn-whatsapp{
width:100%;
text-align:center;
}

}

.whatsapp-float{
position:fixed;
bottom:20px;
right:20px;

width:60px;
height:60px;

background:#25D366;
color:white;

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

border-radius:50%;
font-size:28px;

box-shadow:0 8px 20px rgba(0,0,0,.25);
z-index:999;
}

/* FIX LAYOUT MOBILE */

html, body{
width:100%;
overflow-x:hidden;
}

.container{
width:100%;
max-width:1200px;
margin:auto;
padding:0 16px;
box-sizing:border-box;
}

/* HEADER MOBILE */
@media (max-width:600px){

.header-inner{
grid-template-columns:1fr;
gap:10px;
text-align:center;
}

.brand{
justify-content:center;
}

.header-search-wrap{
width:100%;
}

.search-box{
width:100%;
}

.header-actions{
justify-content:center;
}

}

/* HERO MOBILE */
@media (max-width:600px){

.hero-slide-inner{
grid-template-columns:1fr;
text-align:center;
}

.hero-art{
max-width:200px;
margin:auto;
}

.hero-copy h2{
font-size:1.6rem;
}

}

/* PRODUTOS MOBILE */

@media (max-width:600px){

.product-grid{
grid-template-columns:1fr 1fr;
gap:14px;
}

.product-card{
width:100%;
}

}

/* BOTÃO WHATSAPP */

.whatsapp-float{
position:fixed;
bottom:20px;
right:20px;

width:60px;
height:60px;

background:#25D366;
color:white;

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

border-radius:50%;
font-size:26px;

box-shadow:0 10px 20px rgba(0,0,0,.2);
z-index:999;
}

/* ================= HEADER MOBILE FIX ================= */

@media (max-width:600px){

.header-inner{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
padding:12px 0;
}

.brand{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

.logo{
width:60px;
}

.header-search-wrap{
display:flex;
width:100%;
gap:10px;
}

.menu-toggle{
flex-shrink:0;
}

.search-box{
flex:1;
width:100%;
}

.header-actions{
display:flex;
justify-content:center;
gap:10px;
width:100%;
}

}

@media (max-width:600px){

.header-inner{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
padding:10px 0;
}

.logo{
width:48px;
}

.brand h1{
font-size:1.5rem;
}

.brand p{
font-size:.8rem;
opacity:.9;
}

.header-search-wrap{
width:100%;
gap:8px;
}

.search-box input{
padding:10px 14px;
}

.header-actions{
gap:8px;
}

}

/* BOTÃO CUPOM */

.coupon-box button{
background: var(--accent);
color: #fff;

border: none;
border-radius: 10px;

padding: 12px 16px;
font-weight: 600;

cursor: pointer;
transition: .2s;
}

.coupon-box button:hover{
background: var(--accent-dark);
transform: translateY(-1px);
}