:root{--azul:#12285a; --azul2:#0c1c42; --teal:#01a0a6; --teal2:#008a8f; --gelo:#eef6f7; --tinta:#14213d; --cinza:#5b6680; --linha:#dce4ee; --zap:#1fa855;
  --disp:"Bricolage Grotesque","Poppins",system-ui,sans-serif; --txt:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--txt); color:var(--tinta); background:#f7f9fb; font-size:16px; line-height:1.5}
body.travado{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--teal); outline-offset:2px}
[hidden]{display:none !important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.miolo{width:min(1120px, 100% - 32px); margin-inline:auto}
h1,h2{font-family:var(--disp); margin:0; line-height:1.08}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; padding:12px 20px; font-weight:600; text-decoration:none; font-size:15px; transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn svg{width:20px; height:20px; fill:currentColor}
.btn-zap{background:var(--zap); color:#fff}
.btn-claro{background:rgba(255,255,255,.14); color:#fff}
.btn-azul{background:var(--azul); color:#fff}
.btn-azul:disabled{background:#c5cdd9; cursor:default}
.btn-linha{border:2px solid var(--azul); color:var(--azul); background:#fff}
.btn-teal{background:var(--teal); color:#fff}
.largo{width:100%}

.aviso-demo{background:#fff6d6; color:#5c4a00; font-size:13.5px; text-align:center; padding:8px 16px}
.aviso-demo a{font-weight:600}
.embutido .aviso-demo{display:none}

/* barra fixa */
.barra{position:sticky; top:0; z-index:15; background:var(--azul); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.barra .miolo{display:flex; align-items:center; justify-content:space-between; height:58px}
.marca-loja{color:#fff; text-decoration:none; font-family:var(--disp); font-weight:800; font-size:20px}
.btn-sacola{display:flex; align-items:center; gap:8px; background:#fff; color:var(--azul); border:0; border-radius:999px; padding:8px 14px 8px 12px; font-weight:600}
.btn-sacola svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linejoin:round}
.conta{min-width:22px; height:22px; border-radius:11px; background:#d6dde8; color:var(--azul); font-size:12.5px; display:grid; place-items:center; padding:0 6px}
.conta.tem{background:var(--teal); color:#fff}

/* capa */
.capa{background:var(--azul); color:#fff; position:relative; overflow:hidden; padding:34px 0 40px}
.capa::after{content:""; position:absolute; width:520px; height:520px; right:-160px; top:-220px; border-radius:50%; background:radial-gradient(circle, rgba(1,160,166,.45), transparent 65%); pointer-events:none}
.capa .miolo{position:relative; z-index:1}
.tipo{margin:0 0 6px; color:#8fe3e0; font-weight:600}
.capa h1{font-size:clamp(36px, 8vw, 64px); font-weight:800}
.slogan{margin:10px 0 0; color:#c9d6ef; font-size:17px; max-width:40ch}
.acoes-capa{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}

/* seções */
main.miolo{padding-block:28px 56px}
main h2{font-size:26px; color:var(--azul); font-weight:800}
.novidades{margin-bottom:34px}
.trilho{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px, 190px); gap:14px; overflow-x:auto; padding:14px 2px 6px; scroll-snap-type:x mandatory; scrollbar-width:thin}
.trilho .peca{scroll-snap-align:start}
.cab-pecas{display:grid; gap:14px; margin-bottom:16px}
.filtros{display:grid; gap:10px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
@media (max-width:719px){ .chips{flex-wrap:nowrap; overflow-x:auto; margin-inline:-16px; padding-inline:16px; scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .chip{flex:none} }
.chip{border:1.5px solid var(--linha); background:#fff; border-radius:999px; padding:7px 16px; font-weight:500; font-size:14.5px}
.chip.ativo{background:var(--azul); border-color:var(--azul); color:#fff}
.linha-filtro{display:grid; grid-template-columns:1fr auto; gap:10px}
.linha-filtro input,.linha-filtro select{width:100%; font:inherit; font-size:15px; border:1.5px solid var(--linha); border-radius:12px; padding:10px 12px; background:#fff; color:var(--tinta)}
.grade{display:grid; grid-template-columns:repeat(4, 1fr); gap:22px 18px}
.vazio{color:var(--cinza); text-align:center; padding:30px 0}

/* cartão de peça */
.peca{display:grid; gap:8px; align-content:start}
.abre-peca{display:grid; gap:2px; text-align:left; background:none; border:0; padding:0}
.foto{position:relative; display:block; border-radius:16px; overflow:hidden; background:#eef1f5; aspect-ratio:4/5; margin-bottom:8px}
.foto img{width:100%; height:100%; object-fit:cover; transition:transform .3s}
.abre-peca:hover .foto img{transform:scale(1.03)}
.selo{position:absolute; left:8px; top:8px; font-size:12px; font-weight:600; border-radius:999px; padding:3px 10px; background:#fff; color:var(--azul)}
.selo.novo{background:var(--teal); color:#fff}
.selo.reservado{background:#f2b33d; color:#3d2a00}
.selo.vendido{background:#2b3245; color:#fff}
.indisp .foto img{filter:grayscale(.85); opacity:.55}
.p-nome{font-weight:600; font-size:15px; line-height:1.3}
.p-meta{font-size:13px; color:var(--cinza)}
.p-preco{font-family:var(--disp); font-weight:800; font-size:19px; color:var(--azul); margin-top:2px}
.indisp .p-preco{color:var(--cinza); text-decoration:line-through}
.add{border:1.5px solid var(--azul); background:#fff; color:var(--azul); border-radius:12px; padding:8px; font-weight:600; font-size:14px}
.add.na{background:var(--gelo); border-color:var(--teal); color:var(--teal2)}

/* rodapé */
.rodape-loja{background:var(--azul2); color:#c9d6ef; padding:28px 0 36px; font-size:14.5px}
.rodape-loja .miolo{display:flex; flex-wrap:wrap; gap:18px 40px; justify-content:space-between; align-items:flex-end}
.rodape-loja b{color:#fff}
.rodape-loja p{margin:2px 0 0}
.feito{text-decoration:none; color:#8fe3e0}

/* janelas */
.folha{position:fixed; inset:0; z-index:40; display:flex; align-items:flex-end; justify-content:center}
.folha .escuro{position:absolute; inset:0; background:rgba(8,16,36,.6); animation:aparece .2s ease both}
.folha .painel{position:relative; width:100%; max-width:560px; max-height:92vh; max-height:92dvh; overflow-y:auto; overscroll-behavior:contain; background:#fff; border-radius:24px 24px 0 0; padding:24px 20px 28px; display:grid; gap:14px; animation:sobe .3s cubic-bezier(.2,.8,.2,1) both}
.folha h2{font-size:26px; color:var(--azul); padding-right:44px}
.fechar{position:absolute; right:14px; top:14px; width:40px; height:40px; border-radius:50%; border:0; background:#eef1f6; font-size:26px; line-height:1; display:grid; place-items:center; z-index:2}
.painel-peca{padding:0 0 24px}
.painel-peca > img{width:100%; aspect-ratio:4/5; object-fit:cover; max-height:52vh}
.pd-info{display:grid; gap:10px; padding:0 20px}
.pd-cat{margin:0; color:var(--teal2); font-weight:600; font-size:14px}
.pd-preco{margin:0; font-family:var(--disp); font-weight:800; font-size:28px; color:var(--azul)}
.pd-ficha{display:flex; gap:28px; margin:0}
.pd-ficha dt{font-size:13px; color:var(--cinza)}
.pd-ficha dd{margin:0; font-weight:600}
.pd-info p{margin:0}
.item{display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--linha)}
.item img{width:64px; height:80px; object-fit:cover; border-radius:10px}
.item b{display:block; font-size:15px}
.item span{display:block; font-size:13px; color:var(--cinza)}
.item .vl{color:var(--azul); font-weight:600; font-size:15px}
.tira{border:0; background:none; color:#b3263a; font-weight:600; font-size:14px; padding:8px}
.total{display:flex; justify-content:space-between; font-size:18px; margin:4px 0 0}
.total b{font-family:var(--disp); font-size:24px; color:var(--azul)}
.campo{display:grid; gap:6px; margin-top:4px; font-weight:600; font-size:14.5px}
.campo input,.campo textarea,.campo select{font:inherit; font-weight:400; font-size:16px; border:1.5px solid var(--linha); border-radius:12px; padding:11px 12px; width:100%; background:#fff; color:var(--tinta)}
.opc{font-weight:400; color:var(--cinza)}
.opcoes{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px}
.opcoes legend{font-weight:600; font-size:14.5px; margin-bottom:6px; padding:0}
.opcoes label{display:flex; align-items:center; gap:8px; border:1.5px solid var(--linha); border-radius:12px; padding:9px 14px; font-size:15px}
.opcoes label:has(input:checked){border-color:var(--teal); background:var(--gelo)}
.opcoes input{accent-color:var(--teal)}
.nota{margin:0; font-size:13px; color:var(--cinza); text-align:center}
.vazio-sacola{color:var(--cinza); margin:0}
.toast{position:fixed; left:50%; top:12px; max-width:calc(100% - 32px); text-align:center; translate:-50% -20px; background:var(--azul); color:#fff; padding:10px 18px; border-radius:999px; font-size:14.5px; opacity:0; pointer-events:none; transition:.25s; z-index:60}
.toast.vis{opacity:1; translate:-50% 0}
@keyframes aparece{from{opacity:0}}
@keyframes sobe{from{transform:translateY(100%)}}

@media (min-width:720px){
  .folha{align-items:center}
  .folha .painel{border-radius:24px; max-height:88vh}
  .painel-peca{max-width:860px; grid-template-columns:1fr 1fr; padding:0; gap:0}
  .painel-peca > img{max-height:none; height:100%}
  .pd-info{padding:28px 26px; align-content:start}
  .cab-pecas{grid-template-columns:auto 1fr; align-items:end}
  .filtros{justify-items:end}
  .linha-filtro{width:min(460px, 100%)}
}
@media (max-width:900px){ .grade{grid-template-columns:repeat(3, 1fr)} }
@media (max-width:600px){ .grade{grid-template-columns:repeat(2, 1fr); gap:20px 12px} .p-preco{font-size:17px} }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:none !important} html{scroll-behavior:auto} }

/* ---------- painel da lojista ---------- */
.painel-loja{background:#f2f5f9}
.topo-painel{background:var(--azul); color:#fff}
.topo-painel .miolo{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:62px}
.topo-painel .tit{font-family:var(--disp); font-weight:800; font-size:19px}
.topo-painel .tit small{display:block; font-family:var(--txt); font-weight:400; font-size:12.5px; color:#a9b9da}
.topo-painel a{color:#fff; font-size:14px; font-weight:600; text-decoration:none; background:rgba(255,255,255,.14); border-radius:999px; padding:8px 14px; white-space:nowrap}
.abas{position:sticky; top:0; z-index:12; background:#fff; border-bottom:1px solid var(--linha)}
.abas .miolo{display:flex; gap:4px; overflow-x:auto}
.aba{border:0; background:none; padding:14px 14px 12px; font-weight:600; color:var(--cinza); border-bottom:3px solid transparent; white-space:nowrap}
.aba[aria-selected=true]{color:var(--azul); border-color:var(--teal)}
.secao-painel{padding-block:22px 80px}
.resumo{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:20px}
.resumo div{background:#fff; border-radius:16px; padding:14px 16px}
.resumo b{display:block; font-family:var(--disp); font-size:28px; color:var(--azul); line-height:1.1}
.resumo span{font-size:13.5px; color:var(--cinza)}
.lista-pecas{display:grid; gap:10px}
.linha-peca{display:grid; grid-template-columns:62px 1fr; gap:12px; align-items:center; background:#fff; border-radius:16px; padding:10px 12px}
.linha-peca img{width:62px; height:76px; object-fit:cover; border-radius:10px}
.linha-peca b{display:block; font-size:15px; line-height:1.3}
.linha-peca span{font-size:13px; color:var(--cinza)}
.situacao{display:flex; gap:4px; background:#eef1f6; border-radius:12px; padding:3px}
.situacao button{border:0; background:none; border-radius:9px; padding:7px 9px; font-size:13px; font-weight:600; color:var(--cinza)}
.situacao button[aria-pressed=true][data-s=disponivel]{background:var(--teal); color:#fff}
.situacao button[aria-pressed=true][data-s=reservado]{background:#f2b33d; color:#3d2a00}
.situacao button[aria-pressed=true][data-s=vendido]{background:#2b3245; color:#fff}
.acoes-linha{grid-column:2 / -1; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap}
.editar{border:0; background:none; color:var(--azul); font-weight:600; font-size:14px; padding:6px 0; text-decoration:underline}
.fab{position:fixed; right:18px; bottom:20px; z-index:20; box-shadow:0 10px 26px rgba(1,160,166,.4); padding:15px 22px; font-size:16px}
.fab svg{fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round}
.foto-campo{display:grid; grid-template-columns:110px 1fr; gap:14px; align-items:center}
.foto-campo img{width:110px; height:136px; object-fit:cover; border-radius:14px; background:#eef1f5}
.foto-campo label.btn{cursor:pointer}
.foto-campo input{position:absolute; opacity:0; width:1px; height:1px}
.duas{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.cartao-branco{background:#fff; border-radius:18px; padding:20px; display:grid; gap:14px; margin-bottom:16px}
.cartao-branco h2{font-size:22px; color:var(--azul)}
.cartao-branco p{margin:0; color:var(--cinza)}
.msg-previa{white-space:pre-wrap; background:#e9f7ef; border-radius:14px; padding:14px; font-size:14.5px; color:#1e3b2b; margin:0}
.botoes{display:flex; flex-wrap:wrap; gap:10px}
.excluir{border:0; background:none; color:#b3263a; font-weight:600; padding:10px 0}
.placa-area{display:grid; place-items:center}
.placa{width:min(340px, 100%); aspect-ratio:3/4; background:var(--azul); color:#fff; border-radius:22px; padding:22px; display:grid; grid-template-rows:auto auto 1fr auto; gap:10px; text-align:center; position:relative; overflow:hidden}
.placa::before{content:""; position:absolute; width:300px; height:300px; right:-120px; top:-140px; border-radius:50%; background:radial-gradient(circle, rgba(1,160,166,.5), transparent 65%)}
.placa .pl-nome{font-family:var(--disp); font-weight:800; font-size:28px; line-height:1.05; position:relative}
.placa .pl-chama{margin:0; color:#c9d6ef; font-size:14px; position:relative}
.placa .qr{background:#fff; border-radius:16px; padding:12px; width:62%; justify-self:center; align-self:center; position:relative}
.placa .qr svg{display:block; width:100%; height:auto}
.placa .pl-pe{font-size:12.5px; color:#8fe3e0; position:relative}
@media (max-width:600px){ .resumo{grid-template-columns:repeat(2, 1fr)} .fab span{display:none} .fab{padding:16px} }
@media print{ body *{visibility:hidden} .placa,.placa *{visibility:visible} .placa{position:fixed; left:0; top:0; width:100mm; -webkit-print-color-adjust:exact; print-color-adjust:exact} }

/* ---------- login e admin ---------- */
.entrar{min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px 16px; background:var(--azul)}
.entrar .cartao-branco{width:min(420px, 100%); margin:0}
.erro-form{margin:0; color:#b3263a; font-weight:600; min-height:1.2em; font-size:14.5px}
.lojas{display:grid; gap:12px}
.loja-item{background:#fff; border-radius:18px; padding:16px 18px; display:grid; gap:10px}
.loja-item .topo-item{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap}
.loja-item b{font-size:17px; color:var(--azul)}
.loja-item .meta{font-size:13.5px; color:var(--cinza)}
.loja-item .link-loja{font-size:14px; color:var(--teal2); word-break:break-all}
.etiqueta{font-size:12.5px; font-weight:600; border-radius:999px; padding:3px 10px; background:var(--gelo); color:var(--teal2)}
.etiqueta.off{background:#fde8ea; color:#b3263a}
.mini{font-size:14px !important; padding:9px 14px !important}
.interruptor{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600}
.interruptor input{width:20px; height:20px; accent-color:var(--teal)}

/* ---------- v2: logo, cor, subcategorias ---------- */
.marca-loja{display:flex; align-items:center; gap:10px}
.marca-loja img{width:36px; height:36px; border-radius:10px; background:#fff; object-fit:contain; padding:3px}
.logo-capa{width:104px; height:104px; border-radius:26px; background:#fff; object-fit:contain; padding:10px; margin-bottom:16px; box-shadow:0 12px 30px rgba(0,0,0,.25)}
.chips.sub{gap:6px}
.chips.sub .chip{font-size:13.5px; padding:5px 13px; background:var(--gelo); border-color:transparent}
.chips.sub .chip.ativo{background:var(--teal); color:#fff}
.p-sub{font-size:12.5px; color:var(--teal2); font-weight:600}
.cores{display:flex; flex-wrap:wrap; gap:10px}
.cores label{position:relative; cursor:pointer}
.cores input{position:absolute; opacity:0; width:1px; height:1px}
.cores span{display:block; width:42px; height:42px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 2px var(--linha)}
.cores input:checked + span{box-shadow:0 0 0 3px var(--tinta)}
.cores input:focus-visible + span{outline:3px solid var(--teal); outline-offset:3px}
.logo-campo{display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center}
.logo-campo img{width:96px; height:96px; border-radius:22px; object-fit:contain; background:#eef1f5; padding:6px}
.logo-campo input[type=file]{position:absolute; opacity:0; width:1px; height:1px}
.logo-campo label.btn{cursor:pointer}
.placa .pl-logo{width:72px; height:72px; border-radius:18px; background:#fff; object-fit:contain; padding:6px; justify-self:center; position:relative}
textarea.cats{font-family:inherit}
.marca-loja{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-right:12px}
.marca-loja img{flex:none}
@media (max-width:480px){ .marca-loja{font-size:17px} }