/* =========================
   ATACADÃO DA SOLA CSS
========================= */

:root{

--laranja:#ec5606;
--laranja2:#e48f19;

--amarelo:#FDD835;

--marrom:#5D4037;

--preto:#222;

--cinza:#f5f6fa;

--branco:#fff;

}

/* RESET */

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

html{
scroll-behavior:smooth;
}

body{

font-family:Arial,sans-serif;

background:white;

color:var(--preto);
}

/* =========================
   TOP BAR
========================= */

.top-bar{

background:
linear-gradient(
90deg,
#ec5606,
#e48f19
);

padding:4px 15px;
}

.top-content{

display:flex;

justify-content:space-between;

align-items:center;

max-width:1200px;

margin:auto;
}

.slogan{

color:white;

font-size:14px;

font-weight:bold;
}

.contato{

display:flex;

gap:15px;
}

.contato a{

color:white;

font-size:18px;

text-decoration:none;

transition:.25s;
}

.contato a:hover{

opacity:.8;
}


header{

position:fixed;

top:0;

left:0;

width:100%;

height:90px;

padding:0 24px;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(0,0,0,.12);

backdrop-filter:blur(14px);

-webkit-backdrop-filter:blur(14px);

opacity:0;

visibility:hidden;

transition:.35s ease;

z-index:5000;
}

header.ativo{

opacity:1;

visibility:visible;
}

header.ativo{

opacity:1;

visibility:visible;
}

.logo img{

height:90px;
}

/* BOTÃO MENU */

/* BOTÃO MENU */

.menu-toggle{

background:none;

border:none;

font-size:28px;

/* COR DO MENU ☰ */

color:#FDD835;

cursor:pointer;

display:block;

margin-left:8px;

order:3;

transition:.25s ease;

}

.menu-toggle:hover{

color:#ec5606;

}

/* HEADER VISÍVEL */

header.ativo{

opacity:1;

visibility:visible;
}

/* SEARCH HEADER */

.search-box{

position:relative;

display:flex;

align-items:center;

margin-left:auto;

margin-right:26px;

}

/* LUPA */

.search-btn{

background:transparent;

border:none;

font-size:24px;

cursor:pointer;

/* COR DA LUPA */

color:#FDD835;

padding:8px;

transition:.25s ease;

}

.search-btn:hover{

color:#ec5606;

}

/* INPUT */

.search-input{

position:absolute;

top:65px;

right:0;

width:260px;

padding:14px 18px;

background:#fff;

border:none;

outline:none;

border-radius:18px;

box-shadow:
0 14px 35px rgba(0,0,0,.14);

opacity:0;

visibility:hidden;

transform:translateY(-10px);

transition:.28s ease;

z-index:9999;

}

.search-box.active .search-input{

opacity:1;

visibility:visible;

transform:translateY(0);
}


.header{

display:flex;

align-items:center;

justify-content:space-between;

}

/* LUPA */

@media(max-width:768px){

.search-box{

order:2;

margin-left:auto;

margin-right:58px;

}

/* MENU ☰ */

.menu-toggle{

margin-left:8px;   

order:3;

}

/* INPUT */

.search-input{

top:55px;

right:-15px;

width:180px;

padding:12px 14px;

}

.search-btn{

font-size:20px;

padding:4px;

}

}
/* MOBILE */

@media(max-width:768px){

.search-input{

width:190px;

top:60px;

}

header.ativo .search-input{

top:48px;

}

}

/* MENU ESCONDIDO */

#categorias{

position:fixed;

left:50%;

top:18px;

transform:translateX(-50%);

display:flex;

gap:12px;

z-index:7000;

opacity:0;

transition:.35s ease;
}

#categorias.header{

opacity:1;
}

/* FINAL NO HEADER */

#categorias.header{

top:18px;

transform:translateX(-50%);
}
/* BOTÕES */

#categorias a{

padding:10px 18px;

background:rgba(255,255,255,.88);

backdrop-filter:blur(12px);

border-radius:999px;

text-decoration:none;

color:#5D4037;

font-size:14px;

font-weight:700;

box-shadow:
0 10px 28px rgba(0,0,0,.12);

transition:.25s ease;
}

#categorias a:hover{

background:#ec5606;

color:#fff;
}


.container{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));

gap:18px;

padding:18px;

padding-bottom: 100px;

max-width:1200px;

margin:auto;
}

/* =========================
   CARD
========================= */

.card{

background:white;

border-radius:20px;

overflow:hidden;

box-shadow:
0 4px 15px rgba(0,0,0,.08);

transition:.28s;

position:relative;
}

.card:hover{

transform:translateY(-5px);

box-shadow:
0 12px 25px rgba(0,0,0,.12);
}

.card img{

width:100%;

aspect-ratio:1/1;

object-fit:cover;

display:block;
}

.card h3{

font-size:15px;

padding:12px;

font-weight:bold;
}

/* =========================
   BOTÕES
========================= */

.btn{

display:block;

width:calc(100% - 24px);

margin:12px auto;

padding:14px 16px;

background:#ffffff;

color:#ec5606;

border:1px solid rgba(236,86,6,.12);

border-radius:14px;

font-size:15px;

font-weight:700;

font-family:inherit;

cursor:pointer;

text-align:center;

transition:.25s ease;

box-shadow:
0 4px 10px rgba(0,0,0,.05);

outline:none;
}

.btn:hover{

background:#ec5606;

color:#fff;

transform:translateY(-2px);

box-shadow:
0 10px 20px rgba(236,86,6,.18);
}

.btn:active{

transform:scale(.98);
}

/* =========================
   MODAL
========================= 

.modal{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.6);

justify-content:center;

align-items:center;

padding:15px;

z-index:9999;
}

.modal.ativo{

display:flex;
}

.modal-content{

background:white;

padding:25px;

border-radius:20px;

width:100%;

max-width:420px;

position:relative;

animation:popup .25s ease;

box-shadow:
0 20px 40px rgba(0,0,0,.18);
}

@keyframes popup{

from{
opacity:0;
transform:scale(.92);
}

to{
opacity:1;
transform:scale(1);
}
}

.modal-content h3{

margin-bottom:15px;
}

.modal-content input{

width:100%;

padding:14px;

margin-top:10px;

border-radius:12px;

border:1px solid #ddd;

font-size:15px;

outline:none;

transition:.2s;
}

.modal-content input:focus{

border-color:#ec5606;
}

.fechar{

position:absolute;

top:15px;
right:18px;

font-size:24px;

cursor:pointer;

color:#777;
}*/

/* ===== MODAL PREMIUM ===== */

.modal{

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.55);

backdrop-filter:blur(5px);

justify-content:center;

align-items:center;

padding:20px;

z-index:99999;

}

/* BOX */

.modal-content{

background:#fff;

width:100%;

max-width:420px;

padding:28px;

border-radius:26px;

position:relative;

box-shadow:
0 25px 60px rgba(0,0,0,.18);

animation:modalIn .25s ease;

display:flex;

flex-direction:column;

gap:16px;

}

/* TÍTULO */

#produtoSelecionado{

font-size:22px;

font-weight:800;

color:#5D4037;

text-align:center;

line-height:1.2;

}

/* FECHAR */

.fechar{

position:absolute;

top:14px;

right:18px;

font-size:28px;

cursor:pointer;

color:#999;

transition:.25s;

}

.fechar:hover{

color:#ec5606;

transform:rotate(90deg);

}

/* INPUT */

.modal-content input{

width:100%;

padding:16px 18px;

border:2px solid #ececec;

border-radius:18px;

font-size:15px;

outline:none;

transition:.25s;

background:#FFF8E8;

}

.modal-content input:focus{

border-color:#FDD835;

background:#fff;

box-shadow:
0 0 0 4px rgba(253,216,53,.18);

}

/* BOTÃO */

.modal-content .btn{

margin-top:6px;

}

/* ANIMAÇÃO */

@keyframes modalIn{

from{

opacity:0;

transform:
translateY(20px)
scale(.95);

}

to{

opacity:1;

transform:
translateY(0)
scale(1);

}

}

/* MOBILE */

@media(max-width:768px){

.modal-content{

max-width:95%;

padding:22px;

border-radius:22px;

}

#produtoSelecionado{

font-size:19px;

}

}


/* =========================
   ANIMAÇÕES
========================= */

.card{

opacity:0;

transform:translateY(15px);

animation:aparecer .5s ease forwards;
}

.card:nth-child(1){animation-delay:.1s;}
.card:nth-child(2){animation-delay:.2s;}
.card:nth-child(3){animation-delay:.3s;}
.card:nth-child(4){animation-delay:.4s;}
.card:nth-child(5){animation-delay:.5s;}
.card:nth-child(6){animation-delay:.6s;}

@keyframes aparecer{

to{

opacity:1;

transform:translateY(0);
}
}

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

@media(max-width:900px){

.container{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));

gap:18px;

padding:18px;

padding-bottom:110px;

max-width:1200px;

margin:auto;

}

header img{

height:120px;
}
}

@media(max-width:600px){

body{
padding:0;
}

/* HEADER */

header{

padding:16px 10px;
}

header img{

height:120px;
}

/* TOP */

.top-content{

flex-direction:column;

gap:8px;
}

.slogan{

font-size:12px;

text-align:center;
}


/* GRID */

@media(max-width:600px){

.container{

grid-template-columns:1fr 1fr;

gap:12px;

padding:10px;

padding-bottom:95px;

}

}

/* CARD */

.card{

border-radius:16px;
}

.card h3{

font-size:13px;
}

/* BTN */

.btn{

font-size:13px;

padding:12px;

margin:10px;
}


/* MODAL */

.modal-content{

padding:22px;

border-radius:18px;
}
}

@media(max-width:420px){

.container{

grid-template-columns:1fr 1fr;

padding-bottom:85px;

}

}

.btn{

font-size:12px;
}

@media(max-width:600px){

header img{
height:100px;
}
}





@media(max-width:600px){

.categoria{

margin:26px 10px 16px;

padding:15px 18px;

font-size:20px;

border-radius:16px;
}

}





/* =========================
   DIVISÕES CATEGORIA V2
========================= */

.categoria{

max-width:1200px;

margin:42px auto 22px;

padding:18px 26px;

position:relative;

display:flex;

align-items:center;

font-size:28px;

font-weight:800;

letter-spacing:.5px;

color:#2d1b12;

background:
linear-gradient(
90deg,
#ffffff 0%,
#fafafa 100%
);

border-radius:20px;

overflow:hidden;

box-shadow:
0 10px 24px rgba(0,0,0,.06);
}

/* BARRA BRANDING */

.categoria::before{

content:"";

position:absolute;

left:0;

top:0;

bottom:0;

width:10px;

background:
linear-gradient(
180deg,
#FDD835,
#ec5606,
#e48f19
);
}

/* LINHA MODERNA */

.categoria::after{

content:"";

flex:1;

margin-left:18px;

height:3px;

border-radius:999px;

background:
linear-gradient(
90deg,
rgba(236,86,6,.45),
rgba(253,216,53,.15),
transparent
);
}

html{
scroll-behavior:smooth;
}
/* =========================
   HERO INICIAL
========================= */

/* BANNER INICIAL */

.hero-inicial{

width:100%;

/* DIMINUI ALTURA */

height:72vh;

overflow:hidden;

position:relative;
}

.hero-banner{

width:100%;

height:100%;

object-fit:cover;

object-position:center center;
}

/* NOTEBOOK */

@media(max-width:1200px){

.hero-inicial{

height:65vh;
}
}

/* TABLET */

@media(max-width:1024px){

.hero-inicial{

height:58vh;
}
}

/* CELULAR */

@media(max-width:768px){

.hero-inicial{

height:46vh;
}
}

/* CELULAR PEQUENO */

@media(max-width:480px){

.hero-inicial{

height:42vh;
}
}

/* DESKTOP GRANDE */

@media(min-width:1400px){

.hero-banner{

object-position:center center;
}
}

/* NOTEBOOK / DESKTOP MENOR */

@media(max-width:1399px){

.hero-banner{

object-position:58% center;
}
}

/* DESKTOP PEQUENO */

@media(max-width:1200px){

.hero-banner{

object-position:64% center;
}
}

/* TABLET */

@media(max-width:1024px){

.hero-banner{

object-position:68% center;
}
}

/* MOBILE */

@media(max-width:768px){

.hero-banner{

object-position:74% center;
}
}

/* MOBILE PEQUENO */

@media(max-width:480px){

.hero-banner{

object-position:82% center;
}
}

/* =========================
   BOTÕES RESPONSIVO MOBILE
========================= */

@media(max-width:768px){

#categorias{

width:100%;

padding:0 12px;

justify-content:center;

gap:8px;

overflow-x:auto;

scrollbar-width:none;

white-space:nowrap;
}

#categorias::-webkit-scrollbar{

display:none;
}

#categorias a{

padding:10px 14px;

font-size:13px;

flex:0 0 auto;

border-radius:999px;
}

}

/* CELULAR PEQUENO */

@media(max-width:480px){

#categorias{

justify-content:flex-start;

padding:0 10px;

gap:6px;
}

#categorias a{

padding:9px 12px;

font-size:12px;
}
}

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

.categoria-banner{

width:min(1920px,calc(100% - 120px));

height:300px;

margin:120px auto 35px;

border-radius:34px;

overflow:hidden;

background-size:cover;

background-position:center center;

background-repeat:no-repeat;

box-shadow:
0 12px 35px rgba(0,0,0,.18);

scroll-margin-top:380px;
}

/* IMAGENS */

.categoria-kids{
background-image:url('kidsbanner.png');
}

.categoria-luta{
background-image:url('lutabanner.jpg');
}

.categoria-academia{
background-image:url('academia.png');
}

.categoria-decoracao{
background-image:url('decor.png');
}

/* RESPONSIVO */

@media(max-width:1024px){

.categoria-banner{

width:calc(100% - 60px);

height:240px;
}
}

@media(max-width:768px){

.categoria-banner{

width:calc(100% - 24px);

height:180px;

border-radius:22px;
}
}

@media(max-width:480px){

.categoria-banner{

width:calc(100% - 16px);

height:140px;

border-radius:18px;
}
}

.anchor-offset{

display:block;

position:relative;

top:-180px;

visibility:hidden;
}

/* ENQUADRAR CATEGORIA */

.categoria-banner{

scroll-margin-top:22vh;
}


/* =========================
   MOBILE HEADER CORRETO
========================= */

@media(max-width:768px){

header{

height:130px;

padding:12px;

}

/* LOGO CENTRAL */

.logo{

position:absolute;

top:10px;

left:50%;

transform:translateX(-50%);
}

.logo img{

height:70px;
}

/* MENU ☰ */

.menu-toggle{

position:absolute;

top:14px;

right:14px;
}

/* CATEGORIAS */

#categorias{

position:fixed !important;

top:78px !important; /* EMBAIXO DA LOGO */

left:0 !important;

right:0 !important;

width:100% !important;

transform:none !important;

display:flex;

justify-content:flex-start;

gap:8px;

padding:0 12px;

overflow-x:auto;

overflow-y:hidden;

white-space:nowrap;

scrollbar-width:none;

z-index:7000;
}

#categorias::-webkit-scrollbar{

display:none;
}

#categorias a{

flex:0 0 auto;

padding:9px 14px;

font-size:12px;
}

}

/* CELULAR PEQUENO */

@media(max-width:480px){

header{

height:120px;
}

.logo img{

height:42px;
}

#categorias{

top:70px !important;
}

}

/* HERO LOGO */

.hero-inicial{

width:100%;

height:60vh;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

background:
linear-gradient(
180deg,
#FFF8E8 0%,
#ffffff 100%
);
}

.hero-logo{

width:min(90vw,850px);

height:auto;

display:block;
}

/* RESPONSIVO */

@media(max-width:1024px){

.hero-inicial{

height:52vh;
}

.hero-logo{

width:74vw;
}
}

@media(max-width:768px){

.hero-inicial{

height:42vh;
}

.hero-logo{

width:84vw;
}
}

@media(max-width:480px){

.hero-inicial{

height:38vh;
}

.hero-logo{

width:90vw;
}
}

/* MOBILE MENU */

@media(max-width:768px){

header{

height:80px;
}

/* LOGO */

.logo{

position:absolute;

top:12px;

left:50%;

transform:translateX(-50%);
}

.logo img{

height:70px;
}

/* BOTÃO ☰ */

.menu-toggle{

display:block;

position:absolute;

right:12px;

top:16px;

font-size:30px;

z-index:8000;

}

/* MENU ESCONDIDO */

#categorias{

position:fixed;

top:78px;

left:12px;

right:12px;

transform:none !important;

display:flex;

flex-direction:column;

gap:8px;

padding:14px;

background:
rgba(255,255,255,.96);

backdrop-filter:blur(18px);

border-radius:18px;

box-shadow:
0 12px 34px rgba(0,0,0,.15);

opacity:0;

visibility:hidden;

pointer-events:none;

transition:.28s ease;
}

/* MENU ABERTO */

#categorias.mobile-open{

opacity:1;

visibility:visible;

pointer-events:auto;
}

#categorias a{

width:100%;

text-align:center;

padding:12px;
}

}

.wpp-float{
position:fixed;
right:25px;
bottom:25px;

width:70px;
height:70px;

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

background:#25D366;
color:#fff;

border-radius:50%;

box-shadow:0 12px 35px rgba(0,0,0,.25);

z-index:99999;

transition:.25s ease;

text-decoration:none;

animation:pulseWpp 2s infinite;
}

.wpp-float svg{
width:34px;
height:34px;
}

.wpp-float:hover{
transform:scale(1.10);
}

/* CELULAR */

@media(max-width:768px){

.wpp-float{

width:52px;
height:52px;

right:14px;
bottom:14px;

}

.wpp-float svg{

width:24px;
height:24px;

}

}

@keyframes pulseWpp{

0%{
box-shadow:0 0 0 0 rgba(37,211,102,.55);
}

70%{
box-shadow:0 0 0 18px rgba(37,211,102,0);
}

100%{
box-shadow:0 0 0 0 rgba(37,211,102,0);
}

}

/* SOLINHA FLOAT */

.solinha-float{

position:fixed;

right:18px;

bottom:18px;

z-index:99999;

display:flex;

flex-direction:column;

align-items:center;

text-decoration:none;

gap:6px;

animation:pulse 2s infinite;

}

/* SOLINHA */

.solinha-float img{

width:72px;

height:auto;

transition:.25s ease;

}

/* TEXTO */

.solinha-float span{

background:#25D366;

color:#fff;

padding:10px 16px;

border-radius:999px;

font-weight:700;

font-size:13px;

white-space:nowrap;

box-shadow:
0 8px 22px rgba(0,0,0,.18);

}

/* HOVER */

.solinha-float:hover img{

transform:scale(1.08);

}

/* MOBILE */

@media(max-width:768px){

.solinha-float{

right:10px;

bottom:10px;

}

.solinha-float img{

width:58px;

}

.solinha-float span{

font-size:11px;

padding:8px 12px;

}

}

/* ANIMAÇÃO */

@keyframes pulse{

0%{transform:translateY(0);}

50%{transform:translateY(-4px);}

100%{transform:translateY(0);}

}

/* BOTÃO CARRINHO */

.cart-btn{

position:fixed;

left:20px;

bottom:20px;

width:70px;

height:70px;

background:#0E559A;

color:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

cursor:pointer;

z-index:99999;

box-shadow:
0 10px 25px rgba(0,0,0,.2);

}

#cartCount{

position:absolute;

top:-4px;

right:-4px;

background:#C32C0D;

color:#fff;

font-size:12px;

font-weight:700;

padding:5px 8px;

border-radius:50%;

}

/* PAINEL */

.cart-panel{

position:fixed;

left:20px;

bottom:105px;

width:320px;

max-height:500px;

overflow:auto;

background:white;

padding:18px;

border-radius:20px;

box-shadow:
0 20px 40px rgba(0,0,0,.18);

z-index:99999;

display:none;

}

.cart-panel.open{

display:block;

}

/* ITENS DO CARRINHO */

.cart-item{

background:#FFF8E8;

border:1px solid rgba(236,86,6,.10);

border-radius:18px;

padding:14px 16px;

margin-bottom:12px;

display:flex;

flex-direction:column;

gap:8px;

box-shadow:
0 6px 16px rgba(0,0,0,.05);

transition:.25s ease;

}

.cart-item:hover{

transform:translateY(-2px);

border-color:#FDD835;

box-shadow:
0 14px 28px rgba(0,0,0,.10);

}

/* PRODUTO */

.cart-item strong{

font-size:15px;

font-weight:800;

color:#5D4037;

line-height:1.3;

}

/* QUANTIDADE */

.cart-item .qtd{

font-size:13px;

color:#666;

font-weight:600;

}

/* BOTÃO REMOVER */

.cart-item button{

margin-top:4px;

background:#fff;

color:#ec5606;

border:1px solid rgba(236,86,6,.20);

border-radius:12px;

padding:10px 14px;

font-size:13px;

font-weight:700;

cursor:pointer;

transition:.25s ease;

}

.cart-item button:hover{

background:#ec5606;

color:#fff;

border-color:#ec5606;

}
/* CEP CARRINHO */

#cepFinal{

width:100%;

padding:16px 18px;

margin:14px 0 16px;

border-radius:18px;

border:2px solid #ececec;

background:#FFF8E8;

font-size:15px;

font-weight:600;

color:#5D4037;

outline:none;

transition:.25s ease;

box-shadow:
0 4px 12px rgba(0,0,0,.04);

}

/* PLACEHOLDER */

#cepFinal::placeholder{

color:#999;

font-weight:500;

}

/* FOCUS */

#cepFinal:focus{

background:#fff;

border-color:#FDD835;

box-shadow:
0 0 0 4px rgba(253,216,53,.18);

transform:translateY(-1px);

}