/* ===== Macrofood — visual profissional (estrutura estilo Dispan, cores da logo) ===== */
:root{
  --vinho:#852E3E;--vinho-esc:#6d2333;--vinho-claro:#9a3a4b;
  --laranja:#FF832B;--laranja-esc:#ef6f12;--vermelho:#FF471D;
  --creme:#fbf6f0;--creme-2:#fdebd8;--texto:#3a2228;--cinza:#8a7d80;--cinza-2:#b5a8ab;
  --borda:#ece0d4;--ok:#1faa51;--ok-esc:#178a41;
  --sombra-sm:0 1px 3px rgba(133,46,62,.06);
  --sombra:0 4px 16px rgba(133,46,62,.09);
  --sombra-lg:0 10px 34px rgba(133,46,62,.14);
  --raio:14px;--raio-sm:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:'Baloo 2','Segoe UI',system-ui,sans-serif;background:var(--creme);color:var(--texto);font-size:15.5px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.01em;}

/* barra topo */
.barra-topo{background:var(--vinho-esc);color:#ffe6d6;font-size:12.5px;font-weight:600;}
.barra-topo-in{max-width:1260px;margin:0 auto;padding:7px 20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}

/* cabecalho */
.topo{background:var(--vinho);color:#fff;position:sticky;top:0;z-index:60;box-shadow:0 3px 18px rgba(109,35,51,.28);}

/* menu */
.menu{background:var(--laranja);box-shadow:inset 0 -2px 0 rgba(0,0,0,.07);}
.menu-in{max-width:1260px;margin:0 auto;padding:0 20px;display:flex;gap:2px;align-items:center;min-height:44px;flex-wrap:wrap;}
.menu-in a{color:#fff;font-weight:700;font-size:13px;padding:10px 13px;border-radius:8px;text-transform:uppercase;letter-spacing:.4px;transition:background .15s;}
.menu-in a:hover{background:rgba(0,0,0,.12);}
.menu-vazio{color:#fff;opacity:.85;font-weight:600;font-size:12.5px;padding:11px 0;}

.wrap{max-width:1260px;margin:0 auto;padding:26px 20px 56px;}

/* capa */
.capa{margin-bottom:30px;}
.capa-slide{border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra-lg);}
.capa-slide img{width:100%;height:auto;display:block;}
.capa-vazia{border-radius:var(--raio);min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(120deg,var(--laranja) 0%,var(--vermelho) 100%);color:#fff;text-align:center;padding:34px;box-shadow:var(--sombra-lg);position:relative;overflow:hidden;}
.capa-vazia::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.18),transparent 45%);}
.capa-vazia b{font-size:26px;z-index:1;}
.capa-vazia span{opacity:.95;font-weight:600;font-size:15px;z-index:1;}
.capa-dots{display:flex;gap:8px;justify-content:center;margin-top:14px;}
.capa-dots i{width:10px;height:10px;border-radius:50%;background:var(--creme-2);display:inline-block;transition:background .2s;}
.capa-dots i.on{background:var(--laranja);width:26px;border-radius:6px;}

.faixa-promo{margin:34px 0;border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra);}
.faixa-promo img{width:100%;display:block;}

/* titulo secao */
.sec-tit{display:flex;align-items:center;gap:14px;margin:10px 0 20px;}
.sec-tit h3{font-size:23px;margin:0;color:var(--vinho);position:relative;padding-left:14px;}
.sec-tit h3::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:24px;background:var(--laranja);border-radius:3px;}
.sec-tit .linha{flex:1;height:2px;background:linear-gradient(90deg,var(--borda),transparent);border-radius:2px;}

/* grade */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(204px,1fr));gap:20px;}
.card{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sombra-sm);transition:transform .16s,box-shadow .16s,border-color .16s;position:relative;}
.card:hover{transform:translateY(-5px);box-shadow:var(--sombra-lg);border-color:#f5d9c4;}
.selo-promo{position:absolute;top:12px;left:0;background:var(--vermelho);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.5px;padding:4px 11px 4px 9px;border-radius:0 6px 6px 0;z-index:2;box-shadow:0 2px 6px rgba(255,71,29,.3);}
.card-foto{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:14px;border-bottom:1px solid var(--creme-2);}
.card-foto img{width:100%;height:100%;object-fit:contain;transition:transform .2s;}
.card:hover .card-foto img{transform:scale(1.05);}
.card-foto .semfoto{color:#e0cdbb;font-size:46px;}
.card-corpo{padding:12px 15px 17px;display:flex;flex-direction:column;flex:1;text-align:center;}
.card-nome{font-size:13.5px;font-weight:600;line-height:1.32;min-height:54px;color:var(--texto);display:flex;align-items:center;justify-content:center;transition:color .15s;}
.card:hover .card-nome{color:var(--vinho);}
.card-cod{font-size:11.5px;color:var(--cinza-2);margin:3px 0 2px;}
.card-esgotado{font-size:11.5px;color:var(--vermelho);font-weight:700;}
.card-preco{font-size:22px;font-weight:800;color:var(--vinho);margin:9px 0 2px;}
.card-preco small{font-size:12px;color:var(--cinza);font-weight:600;}
.qtd{display:flex;align-items:center;justify-content:center;border:1.5px solid var(--borda);border-radius:var(--raio-sm);overflow:hidden;margin:11px auto;width:130px;background:#fff;}
.qtd button{border:0;background:var(--creme-2);color:var(--vinho);width:38px;height:38px;font-size:19px;font-weight:800;cursor:pointer;font-family:inherit;transition:background .12s;}
.qtd button:hover{background:#f8dcc2;}
.qtd input{border:0;width:50px;text-align:center;font-size:15px;font-family:inherit;font-weight:700;color:var(--texto);outline:none;-moz-appearance:textfield;appearance:textfield;}
.qtd input::-webkit-outer-spin-button,.qtd input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.btn-add{margin-top:auto;border:0;background:var(--ok);color:#fff;font-weight:700;padding:11px;border-radius:var(--raio-sm);cursor:pointer;font-family:inherit;font-size:14px;display:flex;align-items:center;justify-content:center;gap:7px;transition:background .15s,transform .1s;}
.btn-add:hover{background:var(--ok-esc);}
.btn-add:active{transform:scale(.98);}
.btn-add:disabled{background:#dcd2ce;cursor:not-allowed;}

/* produto */
.prod{display:grid;grid-template-columns:minmax(290px,470px) 1fr;gap:38px;background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:32px;box-shadow:var(--sombra);}
.prod-foto{aspect-ratio:1/1;background:#fff;border:1px solid var(--borda);border-radius:var(--raio);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:22px;}
.prod-foto img{width:100%;height:100%;object-fit:contain;}
.prod h1{font-size:27px;margin:0 0 10px;color:var(--vinho);line-height:1.2;}
.prod .preco-big{font-size:36px;font-weight:800;color:var(--vinho);margin:16px 0;}
.voltar{display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;color:var(--vinho);font-weight:700;font-size:14px;}
.voltar:hover{color:var(--laranja-esc);}

/* ===== formularios / login ===== */
.auth{max-width:440px;margin:48px auto;background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:38px 34px;box-shadow:var(--sombra-lg);}
.auth .logo-c{text-align:center;margin-bottom:20px;}
.auth h1{font-size:23px;text-align:center;color:var(--vinho);margin:0 0 20px;}
.cartao{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:30px;box-shadow:var(--sombra-sm);}
.cartao h2{color:var(--vinho);margin:0 0 18px;font-size:22px;}
.campo{display:block;margin:0 0 16px;}
.campo span{display:block;font-size:13px;font-weight:700;color:var(--vinho);margin-bottom:6px;}
.campo input{width:100%;border:1.5px solid var(--borda);border-radius:var(--raio-sm);padding:12px 14px;font-size:15px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;background:#fff;}
.campo input:focus{border-color:var(--laranja);box-shadow:0 0 0 3px rgba(255,131,43,.16);}
.radio-linha{display:flex;gap:22px;margin-bottom:16px;font-weight:600;font-size:14.5px;}
.radio-linha label{display:flex;align-items:center;gap:7px;cursor:pointer;}
.dica{font-size:12px;color:var(--cinza);margin:-8px 0 14px;}
.btn{width:100%;border:0;background:var(--laranja);color:#fff;font-weight:800;padding:13px;border-radius:var(--raio-sm);cursor:pointer;font-family:inherit;font-size:16px;transition:background .15s,transform .1s;}
.btn:hover{background:var(--laranja-esc);}
.btn:active{transform:scale(.99);}
.btn-verde{background:var(--ok);}
.btn-verde:hover{background:var(--ok-esc);}
.link-c{text-align:center;margin-top:16px;font-size:14px;}
.link-c a{color:var(--vermelho);font-weight:700;}

/* grid login 2 colunas */
.login-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}

/* conta */
.conta-grid{display:grid;grid-template-columns:264px 1fr;gap:26px;align-items:start;}
.conta-menu{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
  overflow:hidden;box-shadow:var(--sombra-sm);position:sticky;top:120px;}
.conta-menu a{display:flex;align-items:center;gap:11px;padding:14px 18px;
  border-bottom:1px solid var(--borda);font-weight:600;font-size:14.5px;
  color:#5a4348;transition:background .12s,color .12s;position:relative;}
.conta-menu a:last-child{border-bottom:0;}
.conta-menu a .ico{width:19px;height:19px;color:var(--cinza-2);transition:color .12s;}
.conta-menu a:hover{background:var(--creme);color:var(--vinho);}
.conta-menu a:hover .ico{color:var(--laranja);}

/* Pagina atual. Antes nao havia indicacao nenhuma de onde a pessoa estava
   dentro da area do cliente. */
.conta-menu a.on{background:var(--creme-2);color:var(--vinho);font-weight:700;
  box-shadow:inset 3px 0 0 var(--laranja);}
.conta-menu a.on .ico{color:var(--laranja);}

.conta-menu a.sair{color:var(--vermelho);}
.conta-menu a.sair .ico{color:var(--vermelho);opacity:.65;}
.conta-menu a.sair:hover{background:#fdeaea;color:var(--vermelho);}

/* Contador do carrinho dentro do menu */
.conta-badge{margin-left:auto;background:var(--laranja);color:#fff;font-style:normal;
  font-size:11.5px;font-weight:800;min-width:21px;height:21px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 6px;}

/* Dados do cliente: rotulo e valor em colunas, em vez de <br> em fila */
.conta-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:11px 22px;
  font-size:14.5px;align-items:baseline;}
.conta-dl dt{color:var(--cinza);font-weight:600;white-space:nowrap;}
.conta-dl dd{margin:0;color:var(--texto);}
.conta-editar{margin-left:10px;color:var(--laranja);font-weight:700;font-size:13px;}
.conta-editar:hover{text-decoration:underline;}

/* Regras de senha: lista com visto, mais claro que um paragrafo corrido */
.conta-regras{list-style:none;padding:0;margin:-6px 0 18px;}
.conta-regras li{position:relative;padding:3px 0 3px 22px;font-size:13px;color:var(--cinza);}
.conta-regras li::before{content:"\2713";position:absolute;left:0;color:var(--ok);font-weight:800;}

@media(max-width:880px){.conta-menu{position:static;}}

/* tabela carrinho */
.tab{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden;}
.tab thead tr{background:var(--creme-2);color:var(--vinho);text-align:left;}
.tab th{padding:14px 18px;font-size:13.5px;}
.tab td{padding:14px 18px;border-top:1px solid var(--borda);}

/* rodape */
.rodape{background:var(--vinho);color:#ffd9c2;margin-top:54px;}
.rodape-cols{max-width:1260px;margin:0 auto;padding:40px 20px 14px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:34px;}
.rodape-cols img{height:58px;margin-bottom:14px;}
.rodape h4{color:#fff;font-size:15px;margin:0 0 13px;}
.rodape a,.rodape p{color:#ffd9c2;font-size:13.5px;margin:6px 0;display:block;transition:color .12s;}
.rodape a:hover{color:#fff;padding-left:3px;}
.rodape-base{border-top:1px solid rgba(255,255,255,.14);text-align:center;font-size:12.5px;padding:18px;color:#f0c6b2;}

/* painel */
.painel-top{background:var(--vinho);color:#fff;padding:14px 22px;display:flex;align-items:center;gap:14px;box-shadow:var(--sombra);}
.painel-top img{height:40px;}
.painel-wrap{max-width:920px;margin:26px auto;padding:0 20px;}
.painel-card{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:24px;box-shadow:var(--sombra-sm);margin-bottom:22px;}
.painel-card h2{margin:0 0 16px;color:var(--vinho);font-size:19px;}
.painel-form{display:flex;gap:10px;flex-wrap:wrap;align-items:end;}
.painel-form input,.painel-form select{border:1.5px solid var(--borda);border-radius:var(--raio-sm);padding:10px 12px;font-family:inherit;font-size:14px;outline:none;}
.lista-banner{list-style:none;padding:0;margin:14px 0 0;}
.lista-banner li{display:flex;align-items:center;gap:14px;padding:11px;border:1px solid var(--borda);border-radius:var(--raio-sm);margin-bottom:9px;}
.lista-banner img{height:48px;width:84px;object-fit:cover;border-radius:6px;}
.btn-mini{border:0;background:var(--vermelho);color:#fff;border-radius:8px;padding:7px 13px;cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;}

@media(max-width:880px){
  .prod,.login-grid,.conta-grid{grid-template-columns:1fr;}
  .rodape-cols{grid-template-columns:1fr;}
}

/* preco bloqueado (visitante sem login) */
.preco-bloq{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:11px;
  background:var(--creme-2);color:var(--vinho);font-weight:700;font-size:13.5px;
  padding:11px;border-radius:var(--raio-sm);transition:background .15s;}
.preco-bloq:hover{background:#f8dcc2;}

/* ===== carrossel da capa (full width, deslizavel) ===== */
.carrossel-full{width:100%;background:var(--vinho-esc);}
.carrossel{position:relative;overflow:hidden;max-width:1600px;margin:0 auto;}
.carrossel-trilho{display:flex;transition:transform .5s ease;cursor:grab;user-select:none;}
.carrossel-trilho:active{cursor:grabbing;}
.carrossel-slide{min-width:100%;}
.carrossel-slide img{width:100%;height:auto;display:block;aspect-ratio:1600/480;object-fit:cover;}
.carrossel-seta{position:absolute;top:50%;transform:translateY(-50%);background:rgba(133,46,62,.78);border:0;width:48px;height:48px;border-radius:50%;font-size:22px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.25);transition:background .15s;z-index:3;}
.carrossel-seta:hover{background:var(--laranja);}
.carrossel-seta.prev{left:18px;}
.carrossel-seta.next{right:18px;}
.carrossel-dots{position:absolute;bottom:18px;left:0;right:0;display:flex;gap:10px;justify-content:center;z-index:3;}
.carrossel-dots i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:all .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.carrossel-dots i.on{background:var(--laranja);width:32px;border-radius:6px;}
@media(max-width:760px){.carrossel-seta{width:38px;height:38px;font-size:18px;}}

/* ===== faixa de marcas ===== */
.marcas{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:24px 34px;margin:30px 0;box-shadow:var(--sombra-sm);}
.marcas h4{text-align:center;color:var(--vinho);font-size:15px;margin:0 0 18px;text-transform:uppercase;letter-spacing:1px;}
.marcas-trilho{display:flex;align-items:center;justify-content:center;gap:38px;flex-wrap:wrap;}
.marcas-trilho .marca{height:54px;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--cinza-2);font-size:17px;opacity:.7;transition:opacity .15s,transform .15s;padding:8px 14px;border-radius:10px;}
.marcas-trilho .marca:hover{opacity:1;transform:scale(1.06);color:var(--vinho);}
.marcas-trilho img{max-height:46px;width:auto;object-fit:contain;}

/* ===== Painel admin com menu lateral ===== */
.pnl-body{display:flex;min-height:100vh;background:var(--creme);margin:0;}
.pnl-side{width:240px;background:var(--vinho);color:#fff;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.pnl-logo{padding:18px;text-align:center;border-bottom:1px solid rgba(255,255,255,.12);}
.pnl-side nav{display:flex;flex-direction:column;padding:12px 0;flex:1;}
.pnl-side nav a{color:#ffd9c2;padding:13px 22px;font-weight:600;font-size:14.5px;transition:background .12s,color .12s;display:flex;align-items:center;gap:9px;}
.pnl-side nav a:hover{background:rgba(255,255,255,.10);color:#fff;}
.pnl-side nav a.on{background:var(--laranja);color:#fff;}
.pnl-side nav a.sair{margin-top:auto;color:#ffb4a0;}
.pnl-main{flex:1;padding:32px 38px;max-width:1100px;}
.pnl-tit{font-size:26px;color:var(--vinho);margin:0 0 4px;}
.pnl-sub{color:var(--cinza);margin:0 0 24px;}
.pnl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;}
.pnl-stat{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:22px;text-align:center;box-shadow:var(--sombra-sm);transition:transform .14s,box-shadow .14s;}
.pnl-stat:hover{transform:translateY(-4px);box-shadow:var(--sombra);}
.pnl-stat b{display:block;font-size:34px;color:var(--laranja);font-weight:800;}
.pnl-stat span{color:var(--cinza);font-weight:600;font-size:13.5px;}
.pnl-box{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:24px;box-shadow:var(--sombra-sm);margin-bottom:20px;}
.pnl-box h2{margin:0 0 16px;color:var(--vinho);font-size:18px;}
@media(max-width:760px){.pnl-side{width:64px;}.pnl-side nav a span,.pnl-logo img{display:none;}.pnl-main{padding:20px;}}

/* ===== upload de banner no painel ===== */
.pnl-upload{display:flex;flex-direction:column;gap:18px;}
.campo-up{border:2px dashed var(--borda);border-radius:var(--raio);padding:20px;background:var(--creme);}
.rotulo-up{display:block;font-size:14px;font-weight:700;color:var(--vinho);margin-bottom:10px;}
.campo-up input[type=file]{font-family:inherit;font-size:14px;}
.dica-up{font-size:12.5px;color:var(--cinza);margin:10px 0 0;line-height:1.5;}
.dica-up b{color:var(--vinho);}
.pnl-upgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.pnl-upgrid .campo{margin:0;}
.pnl-upgrid select{width:100%;border:1.5px solid var(--borda);border-radius:var(--raio-sm);padding:12px 14px;font-size:15px;font-family:inherit;outline:none;background:#fff;}
@media(max-width:680px){.pnl-upgrid{grid-template-columns:1fr;}}

/* ===== carrossel de marcas (horizontal deslizavel) ===== */
.marcas{position:relative;}
.marcas-carrossel{display:flex;gap:14px;align-items:stretch;overflow-x:auto;
  scroll-behavior:smooth;padding:4px 2px 8px;scrollbar-width:none;}
.marcas-carrossel::-webkit-scrollbar{display:none;}

/* CELULA DE TAMANHO FIXO.
   Antes era flex:0 0 auto, entao cada logo ficava com a largura do proprio
   desenho -- logo larga e logo alta ocupavam espacos bem diferentes, e a
   faixa parecia desalinhada. Com celula fixa e imagem centralizada dentro,
   todas ficam no mesmo eixo, independentemente do formato do arquivo.

   O max-width alem do max-height e o que faz logo horizontal (tipo
   "Nestle") e logo quadrada (tipo um simbolo) terem peso visual parecido. */
.marca-item{flex:0 0 178px;height:112px;display:flex;align-items:center;
  justify-content:center;padding:10px 14px;border-radius:var(--raio-sm);
  transition:background .15s;}
.marca-item:hover{background:var(--creme);}
.marca-item a{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;}
.marca-item img{max-height:88px;max-width:100%;width:auto;object-fit:contain;
  transition:transform .18s;}
.marca-item:hover img{transform:scale(1.06);}
.marcas-seta{position:absolute;top:calc(50% + 9px);transform:translateY(-50%);
  background:var(--vinho);color:#fff;border:0;width:40px;height:40px;
  border-radius:50%;cursor:pointer;font-size:17px;display:flex;
  align-items:center;justify-content:center;box-shadow:var(--sombra);z-index:2;
  transition:background .15s;}
.marcas-seta:hover{background:var(--laranja);}
.marcas-seta.prev{left:-14px;}
.marcas-seta.next{right:-14px;}

/* Em tela estreita a celula encolhe para caber pelo menos duas. */
@media(max-width:600px){
  .marca-item{flex:0 0 140px;height:92px;}
  .marca-item img{max-height:70px;}
  .marcas{padding:20px 22px;}
}

/* ===== bloco: banner + produtos ===== */
.bloco{margin:8px 0 12px;}
.bloco-banner{border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra);margin-bottom:22px;}
.bloco-banner img{width:100%;display:block;}

/* ===== artes menores (4 no final) ===== */
.artes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:36px 0;}
.arte-item{border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra-sm);transition:transform .15s,box-shadow .15s;}
.arte-item:hover{transform:translateY(-4px);box-shadow:var(--sombra);}
.arte-item img{width:100%;display:block;aspect-ratio:16/7;object-fit:cover;}
@media(max-width:880px){.artes-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.artes-grid{grid-template-columns:1fr;}}

/* ===== newsletter ===== */
.newsletter{background:var(--laranja);margin-top:40px;}
.newsletter-in{max-width:1260px;margin:0 auto;padding:26px 20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between;}
.newsletter-txt b{color:#fff;font-size:20px;}
.newsletter-form{display:flex;gap:10px;flex:1;max-width:640px;min-width:280px;}
.newsletter-form input{flex:1;border:0;border-radius:var(--raio-sm);padding:13px 16px;font-family:inherit;font-size:15px;outline:none;}
.newsletter-form .btn-verde{border:0;color:#fff;font-weight:800;padding:13px 32px;border-radius:var(--raio-sm);cursor:pointer;font-family:inherit;font-size:15px;background:var(--ok);transition:background .15s;}
.newsletter-form .btn-verde:hover{background:var(--ok-esc);}
@media(max-width:760px){.newsletter-in{flex-direction:column;align-items:stretch;}.newsletter-form{max-width:100%;}}

/* ===== painel: toggle ativo/inativo e grid de artes ===== */
.tag-on{background:#e6f7ed;color:var(--ok-esc);font-weight:700;font-size:12px;padding:3px 10px;border-radius:999px;}
.tag-off{background:#fdeaea;color:#c0392b;font-weight:700;font-size:12px;padding:3px 10px;border-radius:999px;}
.btn-toggle{border:0;border-radius:8px;padding:7px 13px;cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;background:var(--laranja);color:#fff;}
.pnl-thumbs{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;}
.pnl-thumb{border:1px solid var(--borda);border-radius:var(--raio-sm);padding:10px;width:180px;background:#fff;}
.pnl-thumb img{width:100%;height:90px;object-fit:contain;border-radius:6px;margin-bottom:8px;}

/* ===== ofertas: selo, preco de/por, menu ===== */
.selo-oferta{position:absolute;top:12px;right:0;background:var(--ok);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.5px;padding:4px 11px 4px 9px;border-radius:6px 0 0 6px;z-index:2;box-shadow:0 2px 6px rgba(31,170,81,.35);}
.preco-de{font-size:13px;color:var(--cinza);text-decoration:line-through;margin-top:8px;}
.card-preco.oferta{color:var(--ok-esc);margin-top:0;}
.menu-ofertas{background:var(--vermelho)!important;color:#fff!important;font-weight:800!important;animation:pulsa 1.8s infinite;}
.menu-ofertas:hover{background:#e63a12!important;}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(255,71,29,.5);}50%{box-shadow:0 0 0 6px rgba(255,71,29,0);}}
.prod .preco-de-big{font-size:20px;color:var(--cinza);text-decoration:line-through;}
.prod .preco-big.oferta{color:var(--ok-esc);}


/* renderizacao de imagens mais nitida em telas comuns */
.card-foto img,.prod-foto img,.marca-item img,.carrossel-slide img,
.bloco-banner img,.arte-item img,.rodape-cols img,.pnl-logo img{
  image-rendering:-webkit-optimize-contrast;
}

/* texto mais nitido (antialiasing) */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
/* ===================================================================== */
/* CHECKOUT E PAGAMENTO                                                  */
/* ===================================================================== */

/* Avisos */
/* .aviso ja existe acima (.aviso.erro / .aviso.ok). Aqui so os aliases
   com hifen, para os templates que usam a outra convencao. */
.aviso-erro{background:#fdecea;border:1px solid #f5c2bd;color:#a32316;}
.aviso-ok{background:#e8f7ee;border:1px solid #b6e3c8;color:#146b34;}

/* Grade de duas colunas: formulario + resumo fixo */
.ck-grid{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start;}
.ck-bloco{margin-bottom:20px;}
.ck-linha{margin:4px 0;}
.ck-fraco{color:var(--cinza);}

.ck-resumo{position:sticky;top:150px;}
.ck-itens{border-top:1px solid var(--borda);padding-top:12px;max-height:310px;overflow-y:auto;}
.ck-item{display:grid;grid-template-columns:38px 1fr auto;gap:9px;padding:8px 0;border-bottom:1px dashed var(--borda);font-size:14px;align-items:start;}
.ck-item:last-child{border-bottom:0;}
.ck-item-qtd{color:var(--laranja);font-weight:800;}
.ck-item-desc{color:#5a4348;line-height:1.35;}
.ck-item-val{font-weight:700;white-space:nowrap;}
.ck-total{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:15px;border-top:2px solid var(--borda);font-size:19px;}
.ck-total b{color:var(--vinho);font-size:25px;}
.ck-voltar{display:block;text-align:center;margin-top:13px;color:var(--cinza);font-size:13.5px;font-weight:600;}
.ck-voltar:hover{color:var(--vinho);}

/* Opcoes clicaveis (entrega / forma de pagamento) */
.ck-opcao{display:flex;gap:13px;align-items:flex-start;border:1.5px solid var(--borda);border-radius:var(--raio-sm);
  padding:14px 16px;margin-bottom:11px;cursor:pointer;transition:border-color .15s,background .15s;}
.ck-opcao:hover{border-color:var(--laranja);background:#fffaf5;}
.ck-opcao input{margin-top:4px;accent-color:var(--laranja);width:18px;height:18px;flex-shrink:0;}
.ck-opcao input:checked ~ span b{color:var(--vinho);}
.ck-opcao:has(input:checked){border-color:var(--laranja);background:#fffaf5;box-shadow:0 0 0 3px rgba(255,131,43,.12);}
.ck-opcao span{display:block;}
.ck-opcao b{display:block;font-size:15.5px;}
.ck-opcao small{display:block;color:var(--cinza);font-weight:500;font-size:13px;margin-top:3px;line-height:1.45;}
.ck-pag b{font-size:16.5px;}
.ck-tag{display:inline-block;font-style:normal;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;margin-left:7px;vertical-align:middle;}
.ck-tag-ok{background:#e8f7ee;color:var(--ok-esc);}

/* Campos */
.ck-rotulo{display:block;margin:16px 0 6px;font-weight:700;color:#5a4348;font-size:14px;}
.ck-input{width:100%;border:1.5px solid var(--borda);border-radius:var(--raio-sm);padding:13px 14px;
  font-family:inherit;font-size:16px;outline:none;background:#fff;color:var(--texto);transition:border-color .15s;}
.ck-input:focus{border-color:var(--laranja);box-shadow:0 0 0 3px rgba(255,131,43,.13);}
.ck-textarea{width:100%;border:1.5px solid var(--borda);border-radius:var(--raio-sm);padding:11px 13px;
  font-family:inherit;font-size:15px;outline:none;resize:vertical;}
.ck-textarea:focus{border-color:var(--laranja);}
.ck-dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ck-bandeira{min-height:19px;margin-top:6px;font-size:13px;font-weight:700;color:var(--vinho);}
.ck-seguro{margin-top:15px;color:var(--cinza);font-size:12.5px;text-align:center;line-height:1.5;}

/* ===== Tela do pedido ===== */
.pd-fraco{color:var(--cinza);font-weight:500;}

.pd-resultado{max-width:620px;margin:20px auto;text-align:center;padding:44px 32px;}
.pd-resultado h2{margin:0 0 8px;font-size:26px;}
.pd-sub{margin:6px 0;color:#5a4348;font-size:15.5px;}
.pd-valor{font-size:31px;font-weight:800;color:var(--vinho);margin:14px 0;}
.pd-valor small{font-size:16px;font-weight:600;color:var(--cinza);}
.pd-motivo{background:#fdecea;border:1px solid #f5c2bd;color:#a32316;border-radius:var(--raio-sm);
  padding:12px 16px;margin:16px auto;max-width:440px;font-weight:600;}
.pd-icone{width:74px;height:74px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;
  justify-content:center;font-size:38px;font-weight:800;color:#fff;background:var(--ok);}
.pd-erro .pd-icone{background:var(--vermelho);}
.pd-icone-cinza{background:var(--cinza-2);}
.pd-acoes{margin-top:26px;display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;}
.pd-link{color:var(--cinza);font-weight:600;font-size:14px;}
.pd-link:hover{color:var(--vinho);}

/* Pix */
.pd-pix{text-align:center;}
.pd-status{display:inline-flex;align-items:center;gap:9px;background:#fff7ed;border:1px solid #ffd9b3;
  color:#9a5000;border-radius:999px;padding:9px 20px;font-weight:700;font-size:14px;margin-bottom:22px;}
.pd-status-ok{background:#e8f7ee;border-color:#b6e3c8;color:var(--ok-esc);}
.pd-pulso{width:10px;height:10px;border-radius:50%;background:var(--laranja);animation:pd-pisca 1.3s infinite;}
@keyframes pd-pisca{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.75);}}

.pd-qr{width:250px;height:250px;margin:0 auto;padding:14px;background:#fff;
  border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra-sm);}
.pd-qr svg{width:100%;height:100%;display:block;}
.pd-qr-legenda{color:var(--cinza);font-size:13.5px;margin:14px 0 0;}

.pd-ou{display:flex;align-items:center;gap:14px;margin:26px 0 14px;color:var(--cinza-2);font-size:12.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.pd-ou::before,.pd-ou::after{content:"";flex:1;height:1px;background:var(--borda);}

.pd-copia{display:flex;gap:9px;}
.pd-copia input{flex:1;min-width:0;border:1.5px solid var(--borda);border-radius:var(--raio-sm);
  padding:13px 14px;font-family:monospace;font-size:12.5px;background:#faf7f4;color:#5a4348;outline:none;}
.pd-aviso-tempo{margin-top:22px;color:var(--cinza);font-size:13.5px;line-height:1.6;}
.pd-cancelar{margin-top:16px;background:none;border:0;color:var(--cinza-2);font-family:inherit;
  font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline;}
.pd-cancelar:hover{color:var(--vermelho);}

/* Etiquetas de situacao (cliente e painel) */
.sit{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;}
.sit-ok{background:#e8f7ee;color:var(--ok-esc);}
.sit-espera{background:#fff7ed;color:#9a5000;}
.sit-erro{background:#fdecea;color:#a32316;}
.sit-cinza{background:#f0eae6;color:var(--cinza);}

/* KPIs do painel */
.pnl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:6px;}
.pnl-kpi{background:#fff;border:1px solid var(--borda);border-left:4px solid var(--laranja);
  border-radius:var(--raio-sm);padding:15px 17px;}
.pnl-kpi small{display:block;color:var(--cinza);font-size:12.5px;font-weight:600;}
.pnl-kpi b{display:block;font-size:29px;color:var(--vinho);line-height:1.25;}
.pnl-kpi span{font-size:12.5px;color:var(--cinza-2);font-weight:600;}
.pnl-kpi-alerta{border-left-color:var(--vermelho);background:#fffaf9;}
.pnl-kpi-alerta b{color:var(--vermelho);}

/* Celular */
@media (max-width:900px){
  .ck-grid{grid-template-columns:1fr;}
  .ck-resumo{position:static;order:-1;}
  .ck-itens{max-height:200px;}
  .pd-qr{width:210px;height:210px;}
  .pd-copia{flex-direction:column;}
  .pd-copia .btn{width:100%;}
}

/* ===================================================================== */
/* PAINEL - TELA DE PEDIDOS E CONCILIACAO                                */
/* ===================================================================== */

/* Linha com valor pendente de devolucao. Fica visivel na varredura da
   tabela sem precisar ler numero por numero. */
.linha-alerta{background:#fffaf9;}
.linha-alerta td{border-left:0;}
.linha-alerta td:first-child{box-shadow:inset 3px 0 0 var(--vermelho);}

/* Faixa de conciliacao: pagou - cortou - devolvido = a devolver */
.conc{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;}
.conc-item{flex:1;min-width:150px;background:#fff;border:1px solid var(--borda);
  border-radius:var(--raio-sm);padding:14px 16px;}
.conc-item small{display:block;color:var(--cinza);font-size:12.5px;font-weight:600;}
.conc-item b{display:block;font-size:25px;color:var(--vinho);line-height:1.3;}
.conc-item span{font-size:12.5px;color:var(--cinza-2);font-weight:600;}
.conc-sinal{display:flex;align-items:center;font-size:22px;color:var(--cinza-2);font-weight:700;}
.conc-alerta{border-color:var(--vermelho);background:#fffaf9;}
.conc-alerta b{color:var(--vermelho);}

/* Detalhe: conteudo + coluna lateral */
.det-grid{display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start;}

/* Lista de dados (rotulo / valor) */
.det-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:14px;}
.det-dl dt{color:var(--cinza);font-weight:600;white-space:nowrap;}
.det-dl dd{margin:0;color:var(--texto);word-break:break-word;}
.det-mono{font-family:monospace;font-size:12px;}

/* KPI clicavel */
.pnl-kpi span a{color:var(--laranja);font-weight:700;}
.pnl-kpi span a:hover{text-decoration:underline;}

@media (max-width:1100px){
  .det-grid{grid-template-columns:1fr;}
  .conc-sinal{display:none;}
}

/* ===================================================================== */
/* MODALIDADE: ENTREGA x RETIRADA                                        */
/* ===================================================================== */

/* Bandeiras de modalidade, na barra de cima ao lado de "Minha conta".
   Presentes em toda pagina, porque a escolha muda preco E estoque -- o
   cliente precisa saber com qual delas esta montando o carrinho.

   As duas ficam sempre visiveis, e nao um botao "trocar": ver a opcao
   nao escolhida ao lado da escolhida elimina a duvida de qual esta
   valendo. */


/* ---- Tela de escolha (porta de entrada) ---- */
.esc-topo{text-align:center;margin:34px 0 30px;}
.esc-topo h1{font-size:30px;color:var(--vinho);margin:0 0 8px;}
.esc-topo p{color:var(--cinza);font-size:16px;margin:0;}

.esc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:860px;margin:0 auto;}
.esc-card{display:flex;flex-direction:column;background:#fff;border:2px solid var(--borda);
  border-radius:var(--raio);padding:32px 28px;text-align:center;box-shadow:var(--sombra-sm);
  transition:transform .16s,box-shadow .16s,border-color .16s;}
.esc-card:hover{transform:translateY(-6px);box-shadow:var(--sombra-lg);border-color:var(--laranja);}
.esc-icone{font-size:52px;line-height:1;margin-bottom:10px;}
.esc-card h2{font-size:25px;color:var(--vinho);margin:0 0 4px;}
.esc-sub{color:var(--laranja);font-weight:700;font-size:15px;margin:0 0 18px;}
.esc-lista{list-style:none;padding:0;margin:0 0 24px;text-align:left;}
.esc-lista li{padding:7px 0 7px 24px;position:relative;font-size:14.5px;color:#5a4348;
  border-bottom:1px dashed var(--borda);}
.esc-lista li:last-child{border-bottom:0;}
.esc-lista li::before{content:"\2713";position:absolute;left:0;color:var(--ok);font-weight:800;}
.esc-botao{margin-top:auto;background:var(--ok);color:#fff;font-weight:800;padding:13px;
  border-radius:var(--raio-sm);font-size:15.5px;transition:background .15s;}
.esc-card:hover .esc-botao{background:var(--ok-esc);}
.esc-rodape{text-align:center;color:var(--cinza);font-size:13.5px;margin:28px 0 0;}

@media(max-width:760px){
  .esc-grid{grid-template-columns:1fr;}
  .esc-topo h1{font-size:24px;}
}

/* Produto sem preco na modalidade escolhida. Nao mostra R$ 0,00 nem botao
   de comprar -- o cliente veria um valor que nao existe. */
.card-sempreco{font-size:15px;font-weight:700;color:var(--cinza);margin:12px 0 4px;
  padding:8px;background:var(--creme-2);border-radius:var(--raio-sm);}

/* Valor que subiu ou desceu na reprecificacao. Classe, e nao style inline:
   editor le style= como CSS e acusa erro no Jinja interpolado. */
.val-sobe{color:var(--vermelho);}
.val-desce{color:var(--ok-esc);}

/* ---- Icone de ajuda + modal da modalidade ---- */


.mod-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:20px;}
.mod-modal[hidden]{display:none;}
.mod-modal-fundo{position:absolute;inset:0;background:rgba(58,34,40,.62);}
.mod-modal-caixa{position:relative;background:#fff;border-radius:var(--raio);
  max-width:640px;width:100%;max-height:88vh;overflow-y:auto;padding:32px 30px;
  box-shadow:var(--sombra-lg);}
.mod-modal-x{position:absolute;top:12px;right:16px;border:0;background:none;
  font-size:30px;line-height:1;color:var(--cinza-2);cursor:pointer;padding:4px 8px;}
.mod-modal-x:hover{color:var(--vermelho);}
.mod-modal-caixa h2{color:var(--vinho);margin:0 0 12px;font-size:23px;padding-right:30px;}
.mod-modal-intro{color:#5a4348;margin:0 0 20px;font-size:15px;line-height:1.55;}

.mod-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;}
.mod-modal-op{background:var(--creme);border:1px solid var(--borda);
  border-radius:var(--raio-sm);padding:18px;text-align:center;}

.mod-modal-op h3{color:var(--vinho);font-size:17px;margin:0 0 8px;}
.mod-modal-op p{font-size:14px;color:#5a4348;margin:0 0 6px;line-height:1.45;}
.mod-modal-det{color:var(--cinza)!important;font-size:12.5px!important;font-weight:600;}

.mod-modal-aviso{background:var(--creme-2);border-left:4px solid var(--laranja);
  border-radius:var(--raio-sm);padding:14px 16px;font-size:14px;line-height:1.55;
  color:#5a4348;}
.mod-modal-aviso b{color:var(--vinho);display:block;margin-bottom:4px;}
.mod-modal-rodape{margin:18px 0 0;font-size:13px;color:var(--cinza);line-height:1.5;}

@media(max-width:600px){
  .mod-modal-grid{grid-template-columns:1fr;}
  .mod-modal-caixa{padding:26px 20px;}
}

/* Filtro "só com estoque" na tela de precos */
.filtro-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--creme);border:1.5px solid var(--borda);border-radius:var(--raio-sm);
  padding:10px 14px;font-weight:600;font-size:14px;color:#5a4348;transition:all .15s;}
.filtro-check:hover{border-color:var(--laranja);}
.filtro-check input{accent-color:var(--laranja);width:17px;height:17px;cursor:pointer;}
.filtro-check.on{background:#fffaf5;border-color:var(--laranja);color:var(--vinho);}

/* ===================================================================== */
/* PAINEL - EDICAO NA PROPRIA LINHA                                      */
/* ===================================================================== */
/* Clicar em Editar transforma a linha em formulario, no lugar. Sem
   pagina nova e sem JavaScript: o ?editar=ID na URL decide qual abre. */

.lista-editando,.linha-editando{background:#fffaf5;box-shadow:inset 3px 0 0 var(--laranja);}
.lista-editando{display:block!important;padding:18px!important;}
.linha-editando td{padding:18px!important;}

.edit-grid{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start;}
.edit-foto img{width:100%;border:1px solid var(--borda);border-radius:var(--raio-sm);
  background:#fff;padding:6px;}
.edit-troca{display:block;margin-top:10px;font-size:13px;font-weight:700;color:var(--vinho);}
.edit-troca span{display:block;margin-bottom:5px;}
.edit-troca input{font-family:inherit;font-size:12.5px;width:100%;}
.edit-campos .campo{margin-bottom:12px;}
.edit-campos .campo input,.edit-campos .campo select{width:100%;}
.edit-acoes{display:flex;gap:8px;align-items:center;margin-top:12px;}
.edit-acoes .btn-mini{padding:9px 18px;}

.pnl-thumb-editando{width:240px;background:#fffaf5;border-color:var(--laranja);}
.pnl-thumb-editando .campo span{font-size:12px;}
.pnl-thumb-editando input{width:100%;font-size:13px;padding:7px 9px;}

@media(max-width:760px){.edit-grid{grid-template-columns:1fr;}}

/* ===================================================================== */
/* IDENTIDADE VISUAL - ICONES, TOPO E MENU                               */
/* ===================================================================== */

/* ---- Icones SVG ----
   Substituem os emojis. Emoji muda de desenho conforme o sistema do
   cliente (Windows, Android e iPhone desenham diferente) e nao aceita a
   cor da marca. SVG tracado herda currentColor e fica nitido em qualquer
   tamanho. */
.ico{width:22px;height:22px;flex-shrink:0;display:inline-block;vertical-align:middle;}
.ico-p{width:15px;height:15px;}

/* ---- Barra superior ---- */
.barra-topo{background:var(--vinho-esc);color:#f0d3c6;font-size:12.5px;font-weight:600;}
.barra-topo-in{max-width:1320px;margin:0 auto;padding:8px 22px;display:flex;
  justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.barra-esq{display:inline-flex;align-items:center;gap:7px;}
.barra-dir{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;}
.barra-sep{opacity:.35;font-weight:400;}
.barra-link{display:inline-flex;align-items:center;gap:5px;color:#f0d3c6;
  transition:color .15s;}
.barra-link:hover{color:#fff;}

/* Bandeiras de modalidade. As duas sempre a vista: ver a nao escolhida ao
   lado da escolhida elimina a duvida de qual esta valendo. */
.mod-sel{display:inline-flex;align-items:center;gap:3px;
  background:rgba(0,0,0,.26);border-radius:999px;padding:3px;}
.mod-flag{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;
  border-radius:999px;font-weight:700;font-size:12px;color:#e0bdb0;
  transition:background .15s,color .15s;white-space:nowrap;}
.mod-flag:hover{color:#fff;background:rgba(255,255,255,.13);}
.mod-flag.on{background:var(--laranja);color:#fff;box-shadow:0 2px 7px rgba(0,0,0,.3);}

.mod-ajuda{width:24px;height:24px;border-radius:50%;border:0;background:rgba(255,255,255,.12);
  color:#f0d3c6;cursor:pointer;padding:0;display:inline-flex;align-items:center;
  justify-content:center;transition:all .15s;}
.mod-ajuda:hover{background:#fff;color:var(--vinho);}

/* ---- Cabecalho ---- */
/* Logo, busca e ações no mesmo eixo. O selo da logo é bem mais alto que
   os outros dois, então sem altura mínima comum ele domina a linha e o
   resto parece flutuar. */
.topo-bar{max-width:1320px;margin:0 auto;padding:12px 22px;display:flex;
  align-items:center;gap:24px;min-height:100px;}


/* Busca com lupa dentro do campo */
/* Altura fixa: sem ela a busca depende do padding do input e nunca bate
   com a altura das acoes ao lado. */
.busca{flex:1;display:flex;align-items:center;max-width:920px;background:#fff;
  border-radius:999px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.16);
  transition:box-shadow .15s;height:52px;}
.busca:focus-within{box-shadow:0 4px 20px rgba(255,131,43,.4);}
.busca-ico{width:19px;height:19px;margin-left:20px;color:var(--cinza-2);flex-shrink:0;}
.busca input{flex:1;border:0;padding:0 16px;font-size:15px;outline:none;
  font-family:inherit;color:var(--texto);background:transparent;height:100%;}
.busca input::placeholder{color:var(--cinza-2);}
.busca button{border:0;background:var(--laranja);color:#fff;padding:0 30px;
  height:100%;font-weight:700;cursor:pointer;font-family:inherit;font-size:15px;
  transition:background .15s;}
.busca button:hover{background:var(--laranja-esc);}

/* Acoes (conta, carrinho) */
/* margin-left:auto encosta o bloco na borda direita, em vez de deixa-lo
   colado na busca. */
.topo-acoes{display:flex;align-items:center;gap:6px;flex-shrink:0;
  margin-left:auto;}
.acao{display:flex;align-items:center;gap:10px;padding:9px 15px;border-radius:12px;
  color:#fff;transition:background .15s;}
.acao:hover{background:rgba(255,255,255,.14);}
.acao-txt{display:flex;flex-direction:column;line-height:1.25;}
.acao-txt small{font-size:11px;opacity:.78;font-weight:500;}
.acao-txt b{font-size:14px;white-space:nowrap;}

/* Contador do carrinho: numero em circulo sobre o icone, como todo
   e-commerce faz. Antes ficava no texto e passava despercebido. */
.acao-ico-badge{position:relative;display:inline-flex;}
.badge{position:absolute;top:-7px;right:-9px;background:var(--laranja);color:#fff;
  font-style:normal;font-size:11px;font-weight:800;min-width:19px;height:19px;
  border-radius:999px;display:flex;align-items:center;justify-content:center;
  padding:0 5px;border:2px solid var(--vinho);}
.acao-carrinho:hover .badge{background:var(--laranja-esc);}

/* ---- Menu de departamentos: faixa fina, rolagem horizontal ---- */
/* Antes quebrava em duas linhas e empurrava o conteudo para baixo. Agora
   rola na horizontal e ocupa uma faixa so. */
.menu{background:var(--laranja);box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);}
.menu-in{max-width:1320px;margin:0 auto;padding:0 12px;display:flex;
  align-items:center;gap:4px;min-height:38px;position:relative;}

.menu-trilho{display:flex;gap:2px;align-items:center;overflow-x:auto;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;flex:1;
  padding:0 4px;}
.menu-trilho::-webkit-scrollbar{display:none;}
.menu-trilho a{color:#fff;font-weight:700;font-size:12.5px;padding:9px 14px;
  border-radius:7px;text-transform:uppercase;letter-spacing:.4px;
  white-space:nowrap;transition:background .15s;}
.menu-trilho a:hover{background:rgba(0,0,0,.14);}

/* Setas laterais. Ficam escondidas quando nao ha o que rolar -- seta
   morta confunde mais que a ausencia dela. */
.menu-seta{border:0;background:var(--laranja);color:#fff;width:30px;height:30px;
  border-radius:50%;cursor:pointer;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;padding:0;transition:background .15s;
  box-shadow:0 0 10px 8px var(--laranja);z-index:2;}
.menu-seta:hover{background:rgba(0,0,0,.22);}
.menu-seta[hidden]{display:none;}

.menu-ofertas{background:var(--vermelho)!important;color:#fff!important;
  animation:pulsa 1.8s infinite;}
.menu-ofertas:hover{background:#e63a12!important;}

.wrap{max-width:1320px;}

@media(max-width:980px){
  .topo-bar{flex-wrap:wrap;gap:16px;}
  .busca{order:3;max-width:100%;flex-basis:100%;}
  .topo-logo img{height:56px;}
  .topo-logo{padding:4px 11px;}
  .acao-txt{display:none;}
  .acao{padding:9px 11px;}
}
@media(max-width:760px){
  .barra-esq{display:none;}
  .barra-topo-in{justify-content:center;padding:7px 14px;}
  .mod-flag{padding:5px 11px;}
}

/* ---- Avisos com icone ---- */
/* O icone dá o tom antes de a pessoa ler: verde com visto para sucesso,
   vermelho com triangulo para problema. */
.aviso{display:flex;align-items:flex-start;gap:11px;text-align:left;
  border-radius:var(--raio-sm);padding:13px 16px;font-size:14px;font-weight:600;
  margin-bottom:16px;line-height:1.5;}
.aviso::before{content:"";width:19px;height:19px;flex-shrink:0;margin-top:1px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;}
.aviso.erro{background:#fdeaea;color:#c0392b;}
.aviso.erro::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");}
.aviso.ok{background:#e6f7ed;color:var(--ok-esc);}
.aviso.ok::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");}

/* ---- Icone do modal de modalidade ---- */
.mod-modal-ico{width:38px;height:38px;color:var(--laranja);margin-bottom:8px;}

/* Modalidade no checkout: mostra a escolha do topo, nao repergunta. */
.ck-modo{display:flex;align-items:center;gap:14px;background:var(--creme);
  border:1.5px solid var(--laranja);border-radius:var(--raio-sm);padding:15px 17px;}
.ck-modo-ico{width:30px;height:30px;color:var(--laranja);flex-shrink:0;}
.ck-modo div{flex:1;}
.ck-modo b{display:block;font-size:16px;color:var(--vinho);}
.ck-modo small{display:block;color:var(--cinza);font-size:13px;margin-top:2px;}
.ck-modo-trocar{color:var(--laranja);font-weight:700;font-size:13.5px;
  padding:7px 14px;border-radius:999px;border:1.5px solid var(--laranja);
  transition:all .15s;white-space:nowrap;}
.ck-modo-trocar:hover{background:var(--laranja);color:#fff;}

/* ===================================================================== */
/* CARRINHO                                                              */
/* ===================================================================== */
/* Duas colunas: itens a esquerda, resumo fixo a direita. O total e o
   botao de finalizar acompanham a rolagem -- em carrinho longo, antes era
   preciso descer ate o fim so para saber quanto ia pagar. */

.car-grid{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;}

.car-itens{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
  box-shadow:var(--sombra-sm);overflow:hidden;}
.car-cab{display:flex;justify-content:space-between;align-items:center;
  padding:16px 22px;border-bottom:1px solid var(--borda);background:var(--creme);
  font-weight:700;color:var(--vinho);font-size:14.5px;}
.car-modo{display:inline-flex;align-items:center;gap:6px;background:#fff;
  border:1px solid var(--borda);border-radius:999px;padding:5px 13px;
  font-size:12.5px;color:var(--cinza);}

/* Uma linha por item: foto, descricao, quantidade, subtotal */
.car-item{display:grid;grid-template-columns:78px 1fr auto auto;gap:18px;
  align-items:center;padding:18px 22px;border-bottom:1px solid var(--borda);}
.car-item:last-of-type{border-bottom:0;}

.car-foto{width:78px;height:78px;border:1px solid var(--borda);border-radius:var(--raio-sm);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:6px;background:#fff;flex-shrink:0;}
.car-foto img{max-width:100%;max-height:100%;object-fit:contain;}

.car-desc a{display:block;font-weight:600;font-size:15px;color:var(--texto);
  line-height:1.35;transition:color .12s;}
.car-desc a:hover{color:var(--vinho);}
.car-desc small{display:block;font-size:12px;color:var(--cinza-2);margin-top:3px;}
.car-unit{color:var(--cinza)!important;}

/* Quantidade editavel na propria linha */
.car-qtd{display:flex;align-items:center;border:1.5px solid var(--borda);
  border-radius:var(--raio-sm);overflow:hidden;background:#fff;}
.car-qtd button{border:0;background:var(--creme-2);color:var(--vinho);width:34px;
  height:38px;font-size:18px;font-weight:800;cursor:pointer;font-family:inherit;
  transition:background .12s;}
.car-qtd button:hover{background:#f8dcc2;}
.car-qtd input{border:0;width:48px;height:38px;text-align:center;font-size:15px;
  font-family:inherit;font-weight:700;color:var(--texto);outline:none;
  -moz-appearance:textfield;appearance:textfield;}
.car-qtd input::-webkit-outer-spin-button,
.car-qtd input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.car-sub{text-align:right;min-width:110px;}
.car-sub b{display:block;font-size:18px;font-weight:800;color:var(--vinho);}
.car-remover{border:0;background:none;color:var(--cinza-2);font-family:inherit;
  font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 0;margin-top:4px;
  text-decoration:underline;transition:color .12s;}
.car-remover:hover{color:var(--vermelho);}

.car-continuar{display:inline-flex;align-items:center;gap:7px;margin:18px 22px;
  color:var(--vinho);font-weight:700;font-size:14px;}
.car-continuar:hover{color:var(--laranja);}

/* Resumo fixo */
.car-resumo{position:sticky;top:120px;}
.car-linha{display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;font-size:14.5px;color:#5a4348;}
.car-linha-total{margin-top:10px;padding-top:16px;border-top:2px solid var(--borda);
  font-size:18px;}
.car-linha-total b{font-size:27px;font-weight:800;color:var(--vinho);}
.car-finalizar{display:block;text-align:center;text-decoration:none;
  margin-top:18px;padding:15px;font-size:16.5px;}
.car-pag{display:flex;align-items:center;justify-content:center;gap:7px;
  margin:14px 0 0;color:var(--cinza);font-size:12.5px;text-align:center;
  line-height:1.5;}

/* Carrinho vazio */
.car-vazio{text-align:center;background:#fff;border:1px solid var(--borda);
  border-radius:var(--raio);padding:64px 32px;box-shadow:var(--sombra-sm);
  max-width:520px;margin:0 auto;}
.car-vazio-ico{width:60px;height:60px;color:var(--cinza-2);margin-bottom:16px;}
.car-vazio h2{color:var(--vinho);font-size:22px;margin:0 0 8px;}
.car-vazio p{color:var(--cinza);margin:0 0 24px;}
.car-vazio .btn{display:inline-block;width:auto;padding:13px 34px;text-decoration:none;}

@media(max-width:900px){
  .car-grid{grid-template-columns:1fr;}
  .car-resumo{position:static;}
  .car-item{grid-template-columns:64px 1fr;gap:14px;row-gap:12px;}
  .car-foto{width:64px;height:64px;}
  .car-qtd{grid-column:1/2;}
  .car-sub{grid-column:2/3;}
}

/* ---- Newsletter: nome + WhatsApp ---- */
/* O +55 e fixo na tela, fora do campo: o cliente nao digita e nao erra. */
.newsletter-txt small{display:block;color:rgba(255,255,255,.88);font-size:13.5px;
  font-weight:500;margin-top:3px;}
.news-tel{display:flex;align-items:stretch;background:#fff;
  border-radius:var(--raio-sm);overflow:hidden;flex:1;min-width:190px;}
.news-ddi{display:flex;align-items:center;padding:0 13px;background:var(--creme-2);
  color:var(--vinho);font-weight:800;font-size:14.5px;border-right:1px solid var(--borda);}
.news-tel input{flex:1;border:0;padding:13px 14px;font-family:inherit;font-size:15px;
  outline:none;min-width:0;}
.news-aviso{max-width:1320px;margin:0 auto;padding:0 20px 20px;font-weight:700;
  font-size:14px;}
.news-aviso-ok{color:#fff;}
.news-aviso-erro{color:#fff3ee;}

/* ===================================================================== */
/* CADASTRO DE CLIENTE                                                   */
/* ===================================================================== */
/* Formulario longo dividido em tres blocos numerados. Um bloco so, com
   16 campos seguidos, faz a pessoa desistir na metade. */

.cad-topo{text-align:center;margin:26px 0 22px;}
.cad-topo h1{font-size:28px;color:var(--vinho);margin:0 0 6px;}
.cad-topo p{color:var(--cinza);margin:0;font-size:15.5px;}

.cad-form{max-width:760px;margin:0 auto;}
.cad-bloco{margin-bottom:20px;}
.cad-bloco h2{display:flex;align-items:center;gap:11px;}
.cad-num{width:28px;height:28px;border-radius:50%;background:var(--laranja);
  color:#fff;font-size:15px;font-weight:800;display:inline-flex;
  align-items:center;justify-content:center;flex-shrink:0;}

.cad-linha{display:flex;gap:14px;flex-wrap:wrap;}
.cad-linha .campo{flex:1;min-width:0;}
.cad-c2{flex:1 1 46%!important;min-width:190px!important;}
.cad-c3{flex:1 1 28%!important;min-width:120px!important;}
.cad-c3x2{flex:2 1 60%!important;min-width:200px!important;}

.cad-cep-aviso{display:flex;align-items:flex-end;padding-bottom:18px;
  font-size:13px;color:var(--cinza);font-weight:600;}
.cad-cep-aviso.ok{color:var(--ok-esc);}
.cad-cep-aviso.erro{color:var(--vermelho);}

.cad-acoes{text-align:center;margin:26px 0 40px;}
.cad-acoes .btn{max-width:340px;margin:0 auto;padding:15px;font-size:16.5px;}

.cad-form select{width:100%;border:1.5px solid var(--borda);
  border-radius:var(--raio-sm);padding:12px 14px;font-size:15px;
  font-family:inherit;outline:none;background:#fff;color:var(--texto);}
.cad-form select:focus{border-color:var(--laranja);
  box-shadow:0 0 0 3px rgba(255,131,43,.16);}

@media(max-width:600px){
  .cad-c2,.cad-c3,.cad-c3x2{flex:1 1 100%!important;}
  .cad-cep-aviso{padding-bottom:8px;}
}

/* Aviso de cadastro concluido, na home */
.cad-ok{max-width:1320px;margin:18px auto 0;padding:0 20px;}

/* ===================================================================== */
/* INSTITUCIONAL                                                         */
/* ===================================================================== */

/* Formulario do painel */
.inst-grid{display:flex;gap:14px;flex-wrap:wrap;}
.inst-grid .campo{flex:1;min-width:180px;}
.inst-c2{flex:2 1 45%!important;}
.inst-c4{flex:0 0 90px!important;min-width:90px!important;}
.inst-grid .campo input{width:100%;}
.inst-salvar{display:flex;align-items:center;gap:14px;margin:24px 0 40px;}
.inst-salvar .btn{width:auto;padding:14px 40px;}

/* Pagina publica de texto */
.inst-pagina{display:grid;grid-template-columns:1fr 300px;gap:22px;
  align-items:start;}
.inst-pagina p{color:#5a4348;line-height:1.75;font-size:15.5px;margin:0 0 15px;}
.inst-pagina p:last-child{margin-bottom:0;}
.inst-outras{display:flex;flex-direction:column;gap:2px;}
.inst-outras a{padding:11px 13px;border-radius:var(--raio-sm);font-weight:600;
  font-size:14.5px;color:#5a4348;transition:background .12s,color .12s;}
.inst-outras a:hover{background:var(--creme-2);color:var(--vinho);}

/* Rodape: logo no mesmo selo do topo, endereco e redes */
.rodape-cols{grid-template-columns:1.3fr 1fr 1fr 1.2fr;}
.rodape-end{font-size:13px;line-height:1.7;opacity:.9;}
.rodape-redes{display:flex;gap:10px;margin-top:12px;}
.rodape-redes a{display:inline-block!important;background:rgba(255,255,255,.13);
  padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:700;
  margin:0!important;}
.rodape-redes a:hover{background:var(--laranja);color:#fff;padding-left:14px;}
.rodape p{display:flex;align-items:center;gap:7px;}

@media(max-width:980px){
  .inst-pagina{grid-template-columns:1fr;}
  .rodape-cols{grid-template-columns:1fr 1fr;}
}
@media(max-width:600px){.rodape-cols{grid-template-columns:1fr;}}

/* ===================================================================== */
/* LOGO - SELO UNICO                                                     */
/* ===================================================================== */
/* Existiam CINCO estilos diferentes para a mesma marca: uma com sombra
   projetada, uma com raio 10px, duas soltas sobre o vinho sem selo
   nenhum. A marca parecia outra a cada tela.

   Agora e uma classe so. O tamanho varia pelo modificador; a borda, o
   fundo e a sombra sao sempre os mesmos.

   O RECHEIO E MINIMO de proposito: o desperdicio de altura estava nele,
   nao na marca. Com 4px em vez de 20px, o desenho ocupa ~90% do selo e
   parece MAIOR ocupando MENOS espaco. */

.selo-logo{display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:14px;padding:4px 14px;flex-shrink:0;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  transition:transform .18s,box-shadow .18s;}
.selo-logo img{width:auto;display:block;filter:none;
  image-rendering:-webkit-optimize-contrast;}

/* Clicavel levanta um pouco. Selo decorativo fica parado. */
a.selo-logo:hover{transform:translateY(-2px);
  box-shadow:0 7px 20px rgba(0,0,0,.28);}

/* Tamanhos. Ordem importa: o padrao vem PRIMEIRO e os modificadores
   depois, senao o generico sobrescreve o especifico -- mesma
   especificidade, vence quem vem por ultimo.

   O max-height junto do height trava o crescimento mesmo se alguma
   regra externa tentar esticar. */
.selo-logo > img,
.selo-logo img{height:76px;max-height:76px;width:auto;}

/* Login e cadastro: a marca ocupa mais espaço dentro do mesmo selo.
   O recheio cai de 4px para 3px e a altura sobe para 82px -- a faixa
   cresce pouco (uns 20px) e a marca aparece bem mais. */
.selo-logo-md > img,
.selo-logo-md img{height:82px!important;max-height:82px!important;}
.selo-logo-md{padding:3px 18px;border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.26);}

.selo-logo-sm > img,
.selo-logo-sm img{height:52px!important;max-height:52px!important;}
.selo-logo-sm{border-radius:11px;padding:3px 11px;}

/* Sobre fundo claro a sombra some: selo branco em fundo branco vira
   apenas uma borda. */
.selo-logo-claro{box-shadow:none;border:1px solid var(--borda);}

/* Faixa vinho com o selo centralizado. O padding fica enxuto porque o
   selo ja tem respiro proprio -- somar os dois afastaria demais a marca
   do conteudo. */
.faixa-logo{background:var(--vinho);text-align:center;padding:16px;}

@media(max-width:980px){
  .selo-logo img{height:56px;}
  .selo-logo{padding:4px 11px;}
}

/* ===================================================================== */
/* PAINEL - FILA DO BLOCO                                                */
/* ===================================================================== */
/* A ordem e o que decide quem aparece na home, entao ela precisa ser
   visivel de relance -- e as linhas que estao no ar, distintas das que
   estao na reserva. */

.fila-visivel{background:#f4fbf6;}
.fila-visivel td:first-child{box-shadow:inset 3px 0 0 var(--ok);}

.fila-pos{display:flex;align-items:center;gap:8px;}
.fila-pos > b{font-size:17px;color:var(--vinho);min-width:18px;}
.fila-setas{display:flex;flex-direction:column;gap:2px;}
.fila-setas button{border:0;background:var(--creme-2);color:var(--vinho);
  width:24px;height:17px;font-size:9px;line-height:1;cursor:pointer;
  border-radius:4px;padding:0;transition:background .12s;}
.fila-setas button:hover{background:var(--laranja);color:#fff;}

/* Tipo de pessoa no cadastro. Dois cartoes grandes em vez de radio solto:
   a escolha decide TIPOFJ, CONTRIBUINTE e CONSUMIDORFINAL de uma vez, e
   errar aqui compromete o tratamento fiscal do cliente inteiro. */
.cad-tipo{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.cad-tipo label{flex:1;min-width:180px;display:flex;align-items:flex-start;
  gap:11px;border:1.5px solid var(--borda);border-radius:var(--raio-sm);
  padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s;}
.cad-tipo label:hover{border-color:var(--laranja);background:#fffaf5;}
.cad-tipo label:has(input:checked){border-color:var(--laranja);
  background:#fffaf5;box-shadow:0 0 0 3px rgba(255,131,43,.12);}
.cad-tipo input{margin-top:3px;accent-color:var(--laranja);
  width:18px;height:18px;flex-shrink:0;}
.cad-tipo b{display:block;font-size:15px;color:var(--vinho);}
.cad-tipo small{display:block;color:var(--cinza);font-size:12.5px;margin-top:2px;}

/* Cartoes da conta "sem preco": parcela + parcela = total.
   Grid explicito em vez de auto-fit, para os sinais + e = ficarem
   estreitos e as tres contas com a mesma largura. */
.pnl-cards-3{display:grid;
  grid-template-columns:1fr auto 1fr auto 1.1fr;
  align-items:stretch;gap:12px;}
.kpi-mais,.kpi-igual{border:0!important;background:none!important;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:800;color:var(--cinza-2);padding:0!important;
  min-width:22px;}
.kpi-total{border-left-color:var(--vinho)!important;background:var(--creme-2);}
.kpi-total b{color:var(--vinho);}

@media(max-width:900px){
  .pnl-cards-3{grid-template-columns:1fr;}
  .kpi-mais,.kpi-igual{display:none;}
}

/* Segunda linha do cartao: o recorte com estoque na filial do filtro.
   Cinza quando zero (nao ha o que fazer agora), vermelho quando ha
   mercadoria parada. */
.kpi-est{display:inline-block;margin-top:3px;padding:2px 9px;border-radius:999px;
  background:#f0eae6;color:var(--cinza);font-size:12px;font-weight:700;}
.kpi-est-on{background:#fdeaea;color:var(--vermelho);}

/* ---- Icones SVG no lugar dos emojis ---- */
/* Emoji e desenhado pelo sistema operacional: colorido, arredondado e
   diferente em cada aparelho. Ao lado de icones de traco fino, destoa --
   parece que a tela foi montada por duas pessoas. */

/* Cartoes de escolha de modalidade */
.esc-icone{width:56px;height:56px;color:var(--laranja);margin:0 auto 10px;
  display:block;}

/* Visto de pedido aprovado: o circulo colorido ja existe, o SVG vai
   dentro dele em branco. */
.pd-icone svg{width:38px;height:38px;color:#fff;}

/* Setas dos carrosseis */
.carrossel-seta .ico,.marcas-seta .ico{width:20px;height:20px;}

/* Cadeado do preço bloqueado. Era emoji -- colorido e diferente em cada
   sistema, destoando dos ícones de traço do resto da tela. */
.preco-bloq .ico{color:var(--vinho);opacity:.75;}

/* O botão da página de produto tinha o estilo inteiro inline. Virou
   classe: mesma aparência, mas ajustável de um lugar só. */
.btn-entrar{display:inline-flex!important;align-items:center;gap:9px;
  width:auto!important;padding:13px 28px!important;text-decoration:none;
  margin-top:14px;}
.btn-entrar .ico{width:19px;height:19px;}

/* Empilhado, não lado a lado: a quantidade fica acima do botão, como
   antes. O flex em coluna mantém os dois esticados na largura do card
   sem colocá-los na mesma linha. */
.card-corpo form{width:100%;margin-top:auto;display:flex;
  flex-direction:column;align-items:stretch;}
.card-corpo .btn-add{width:100%;}

/* O seletor de quantidade tem largura própria e fica centralizado. Sem
   isso o align-items:stretch o esticaria junto com o botão. */
.card-corpo .qtd{align-self:center;flex-shrink:0;}
/* Carrinho no mesmo traço dos ícones da capa: era emoji, que muda de
   desenho conforme o sistema e não aceita a cor do botão. */
.btn-add .ico{width:17px;height:17px;color:currentColor;}

/* Página de produto: estilo que estava inline virou classe. */
.btn-comprar{display:inline-flex!important;align-items:center;gap:9px;
  width:auto!important;padding:13px 28px!important;}
.btn-comprar .ico{width:20px;height:20px;}


/* Catálogo: contagem e tela vazia */
.cat-contagem{color:var(--cinza);font-size:14px;margin:-10px 0 16px;}
.cat-vazio{text-align:center;padding:48px 24px;background:#fff;
  border:1px solid var(--borda);border-radius:var(--raio);
  box-shadow:var(--sombra-sm);max-width:520px;margin:0 auto;}
.cat-vazio p{color:#5a4348;font-size:15.5px;margin:0 0 8px;}
.cat-vazio .dica{margin-bottom:20px;}
.cat-vazio .btn-mini{display:inline-block;padding:11px 26px;background:var(--laranja);}


/* Recuperação de senha */
.rec-nome{font-size:17px;font-weight:700;color:var(--vinho);margin:0 0 4px;}
.rec-ajuda{background:var(--creme-2);border:1.5px dashed var(--laranja);
  border-radius:var(--raio);padding:22px 26px;margin-top:20px;text-align:center;}
.rec-ajuda h2{color:var(--vinho);font-size:17px;margin:0 0 8px;}
.rec-ajuda p{color:#5a4348;font-size:14.5px;line-height:1.6;margin:0 0 12px;}


/* Artes menores: informação e botões dentro do cartão */
.arte-info{font-size:11.5px;color:var(--cinza);margin-bottom:9px;line-height:1.5;}
.arte-link{color:var(--cinza-2);word-break:break-all;font-size:11px;}
.arte-botoes{display:flex;gap:6px;}
.arte-botoes .btn-mini{flex:1;text-align:center;}
.arte-botoes form{flex:1;}
.arte-botoes form .btn-mini{width:100%;}