/* Complemento do lumie.css - grades e telas que nao existiam na versao SPA */

.grid-prod{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:2px; padding-bottom:20px; }
.grid-prod.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-prod .pcard{flex:none;width:auto}
.grid-prod .pcard img{aspect-ratio:184/266}

.mobnav{display:none}
.mobnav.on{display:block}
@media(max-width:860px){ .grid-prod.grid-4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .grid-prod{grid-template-columns:repeat(2,1fr)} }

/* ---------- carrinho (pagina cheia) ---------- */
.cart-page{display:grid;grid-template-columns:1fr 380px;gap:56px;padding:10px 0 90px;align-items:start}
@media(max-width:960px){.cart-page{grid-template-columns:1fr;gap:34px}}

.cart-list{border-top:1px solid var(--line)}
.cart-row{display:grid;grid-template-columns:110px 1fr auto;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);align-items:center}
.cart-row img{width:110px;height:132px;object-fit:contain;background:#f8f6f3;padding:10px}
.cart-row h3{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;margin:0 0 8px;line-height:1.5;font-weight:500}
.cart-row .tam{font-family:var(--serif);font-size:15px;color:#6a6a6a;margin:0 0 14px}
.cart-row .linha{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cart-row .rm{background:none;border:0;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#999;text-decoration:underline;padding:0;cursor:pointer}
.cart-row .val{text-align:right;font-size:16px;font-weight:500;white-space:nowrap}
@media(max-width:640px){
.cart-row{grid-template-columns:90px 1fr;gap:16px}
.cart-row img{width:90px;height:108px}
.cart-row .val{grid-column:2;text-align:left;margin-top:10px}
}

.resumo{background:var(--soft);padding:30px 28px;position:sticky;top:20px}
.resumo h3{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 22px;font-weight:500}
.resumo .trow{margin-bottom:12px}
.resumo hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.resumo .btn{display:block;text-align:center;width:100%;padding:19px;margin-top:20px}
.resumo .inst{font-family:var(--serif);font-size:14px;color:#666;margin:8px 0 0;text-align:center}

.form-cliente{margin-top:34px;display:grid;gap:18px}
.form-cliente h3{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;margin:0;font-weight:500}
.form-cliente label{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#777;margin-bottom:8px}
.form-cliente input,.form-cliente textarea{width:100%;border:1px solid var(--line);background:#fff;padding:14px 15px;font-family:var(--sans);font-size:15px;color:var(--ink)}
.form-cliente input:focus,.form-cliente textarea:focus{outline:none;border-color:var(--ink)}
.form-cliente .dupla{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.form-cliente .dupla{grid-template-columns:1fr}}

/* ---------- paginas de conteudo e retorno ---------- */
.pagina{max-width:720px;padding:36px 0 90px}
.pagina h1{font-size:clamp(22px,2.6vw,30px);letter-spacing:.12em;text-transform:uppercase;margin-bottom:26px}
.pagina p{font-family:var(--serif);font-size:17px;line-height:1.72;color:#2f2f2f;margin:0 0 18px}
.pagina h2{font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:34px 0 14px}
.pagina a{color:var(--gold);text-decoration:underline}
.pagina ul{margin:0 0 18px;padding-left:20px;font-family:var(--serif);font-size:17px;line-height:1.72;color:#2f2f2f}
.pagina li{margin-bottom:8px}

.retorno{max-width:640px;padding:60px 0 100px;text-align:center;margin:0 auto}
.retorno h1{font-size:clamp(22px,2.6vw,30px);letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.retorno p{font-family:var(--serif);font-size:18px;line-height:1.65;margin:0 0 14px;color:#2f2f2f}
.retorno .nsu{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#888;margin:22px 0}
.retorno .btn{margin-top:20px}
.retorno .selo{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 26px;border:1px solid var(--gold);color:var(--gold)}
.retorno .selo svg{width:30px;height:30px}

.erro-box{background:#fbf5f5;border-left:2px solid var(--accent);padding:18px 22px;font-family:var(--serif);font-size:16px;color:#3a2020;margin:24px auto;max-width:620px;text-align:left}
.erro-box code{font-family:ui-monospace,monospace;font-size:12.5px;color:#6a3030;word-break:break-all}

.sec-title{text-align:center;font-size:clamp(18px,2.2vw,25px);letter-spacing:.18em;text-transform:uppercase;margin-bottom:42px;font-weight:500}

/* ===== Identidade Lumie: botoes na cor da marca ===== */
:root{ --brand:#780001; }
.btn,
.hero .btn,
.news button,
.dfoot .btn,
.resumo .btn{ background:var(--brand); color:#fff; border:1px solid var(--brand); transition:background .25s, color .25s, border-color .25s; cursor:pointer; }
.btn:hover, .btn:focus-visible,
.hero .btn:hover, .hero .btn:focus-visible,
.news button:hover, .news button:focus-visible,
.dfoot .btn:hover, .dfoot .btn:focus-visible,
.resumo .btn:hover, .resumo .btn:focus-visible{ background:#fff; color:var(--brand); border-color:var(--brand); }
.btn[disabled]{ background:var(--line); border-color:var(--line); color:#8a8a8a; cursor:not-allowed; }
.btn[disabled]:hover{ background:var(--line); color:#8a8a8a; }
.brand img, .fbottom img{ color:var(--ink); }

/* ---- header no celular: logo centralizada de verdade ----
   Com grade (1fr auto 1fr) a coluna do meio nao fica no centro da tela,
      porque o bloco de icones tem largura minima maior que o hamburguer.
         Tirando a marca do fluxo e centrando em 50% ela fica exata. */
         @media(max-width:860px){
         /* fix 2026-08-31: .util-left e redeclarado fora de media query no lumie.css e reaparecia no mobile, colidindo com a marca centralizada e o hamburguer */
         header .util-left{ display:none; }
         /* o Safari do iOS pinta o icone de <button> sem color com o azul do sistema */
         .burger{ color:var(--ink); }
         .util{ position:relative; display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:10px 16px 6px; }
         .brand{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; line-height:0; }
         .brand img{ height:auto; width:min(112px, calc(100vw - 250px)); margin:0; }
         .util-right{ gap:16px; }
         }
         @media(max-width:400px){
         .util{ padding:10px 12px 6px; }
         .util-right{ gap:14px; }
         .util-right > a:first-of-type{ display:none; }
         .brand img{ width:min(104px, calc(100vw - 195px)); }
         }