/*
 * Loja · componentes (cartão, campos, botões, status, frete).
 * O cabeçalho, o rodapé, as fontes e as cores vêm de ../inc/filhas.css e ../inc/paginas.css
 * (as mesmas do site). Aqui ficam só as peças próprias da loja, usando as variáveis --f-*.
 */

/* topo */
.loja-kicker{font-family:var(--f-nome);font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--f-ouro-claro);margin:0 0 1rem}
.loja-topo h1 em{font-style:italic;color:var(--f-ouro-claro)}

/* corpo claro, com o cartão centralizado */
.loja-corpo{padding-block:clamp(2.5rem,6vw,5rem);background:var(--f-perola)}
.loja-centro{display:flex;justify-content:center}

/* cartão */
.cartao{width:100%;max-width:30rem;padding:clamp(1.5rem,4vw,2.4rem);text-align:left;background:#fff;border:1px solid rgba(168,132,60,.45);border-radius:2px;box-shadow:0 22px 44px -26px rgba(16,39,31,.35)}
.cartao.centro{text-align:center}
.cartao h3{font-family:var(--f-nome);font-weight:500;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--f-floresta);margin:1.8rem 0 0}
.cartao.centro h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.8rem,4vw,2.4rem);color:var(--f-floresta);line-height:1.1;margin:0 0 .6rem}
.cartao.centro p{margin-top:.8rem}

.produto{font-family:var(--f-nome);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--f-ouro);margin-bottom:.4rem}
.preco{font-family:var(--f-display);font-size:2.2rem;line-height:1.1;color:var(--f-floresta)}

/* campos */
.campo{display:block;margin-top:1.15rem}
.campo>span{display:block;font-family:var(--f-nome);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--f-floresta);margin-bottom:.45rem}
input,textarea{width:100%;font:inherit;font-size:1.1rem;padding:.7rem .9rem;border:1px solid var(--f-prata);border-radius:2px;background:var(--f-perola);color:var(--f-tinta)}
input{min-height:3.1rem}
input:focus,textarea:focus{outline:2px solid var(--f-ouro);outline-offset:1px;border-color:var(--f-ouro)}
.row{display:flex;gap:.7rem}.row>*{flex:1;min-width:0}

/* textos de apoio */
.nota{font-style:italic;font-size:.98rem;color:var(--f-tinta-suave);margin:.9rem 0 0;line-height:1.5}
.erro{font-style:italic;color:#8c2a2a;margin:.9rem 0 0;font-size:1rem}

/* botões */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:3.2rem;margin-top:1.6rem;padding:.8rem 1.7rem;border:1px solid transparent;border-radius:2px;cursor:pointer;
  font-family:var(--f-nome);font-weight:500;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;text-align:center;text-decoration:none;
  background:var(--f-floresta);color:var(--f-perola);transition:background .25s ease,transform .1s ease}
.btn:hover{background:var(--f-floresta-2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--f-ouro);outline-offset:3px}
.btn.btn-calc{width:auto;flex:none;margin:0;min-height:3.1rem;padding:0 1.4rem;white-space:nowrap;line-height:1.2}
.row input#cep{flex:1 1 auto}
.voltar{display:block;text-align:center;margin-top:1.4rem;font-family:var(--f-nome);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--f-floresta);text-decoration:none;border-bottom:1px solid transparent;width:max-content;margin-inline:auto}
.voltar:hover{border-bottom-color:var(--f-ouro)}

/* status do pedido */
.selo-status{display:inline-block;font-family:var(--f-nome);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:.45rem 1rem;border-radius:2px;margin:.4rem .25rem 0;border:1px solid var(--f-prata);color:var(--f-tinta-suave)}
.selo-status.ok{background:#e3f0e7;border-color:#9cc7ab;color:#1c5a3a}
.selo-status.esp{background:#f6efdc;border-color:var(--f-ouro-claro);color:#6f5620}
.selo-status.env{background:#e7ecf2;border-color:var(--f-prata-claro);color:var(--f-floresta)}
.rastreio{font-family:var(--f-display);font-size:1.6rem;color:var(--f-floresta)}

/* frete */
#fretes{margin-top:.7rem}
.opt{display:flex;align-items:center;gap:.8rem;padding:.8rem .9rem;margin-top:.5rem;border:1px solid var(--f-prata);border-radius:2px;background:var(--f-perola);cursor:pointer}
.opt:has(input:checked){border-color:var(--f-ouro);box-shadow:0 0 0 2px rgba(168,132,60,.25)}
.opt input{width:auto;min-height:0;margin:0;accent-color:var(--f-floresta)}
.opt span{flex:1;line-height:1.3}.opt b{display:block;font-weight:500;color:var(--f-floresta)}.opt em{font-size:.9rem;color:var(--f-tinta-suave)}
.opt strong{font-family:var(--f-display);font-size:1.3rem;color:var(--f-floresta);white-space:nowrap}
.total{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid rgba(168,132,60,.4);font-family:var(--f-nome);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--f-floresta)}
.total strong{font-family:var(--f-display);font-size:1.9rem;letter-spacing:0;text-transform:none;color:var(--f-floresta);margin-left:.5rem}
.linha-total{display:flex;justify-content:space-between;font-family:var(--f-corpo);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--f-tinta-suave);margin-top:.25rem}
.linha-total b{font-weight:500;color:var(--f-floresta)}