/* ==================================================================
   VeGaya — loja
   Sabor e Saúde com Amor

   A paleta sai direto da marca: vinho profundo de fundo, dourado
   como único destaque, creme para o texto. Dourado é reservado ao
   que importa (preço, botão de ação, título) — dourado em tudo é
   dourado em nada.
   ================================================================== */

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */
:root {
    /* vinho — do mais escuro ao mais aberto */
    --vinho-950: #2A0407;
    --vinho-900: #3A070B;
    --vinho-800: #4C0C11;
    --vinho-700: #5E1217;
    --vinho-600: #74171E;
    --vinho-500: #8E2028;

    /* dourado */
    --ouro-200: #F7E9C8;
    --ouro-300: #EFD8A4;
    --ouro-400: #E3C382;
    --ouro-500: #D4A24C;
    --ouro-600: #B8863A;
    --ouro-700: #94682B;

    /* neutros quentes */
    --creme:      #F8F1E4;
    --creme-2:    #EFE3CE;
    --texto:      #F3E5CC;
    --texto-fraco:#CDB48F;

    /* apoio */
    --verde:  #6E8B3D;
    --verde-escuro: #47612A;
    --alerta: #C8752A;
    --erro:   #E06B5C;

    /* superfícies */
    --fundo:       var(--vinho-800);
    --superficie:  #581016;
    --superficie-2:#63151B;
    --borda:       rgba(212, 162, 76, .26);
    --borda-forte: rgba(212, 162, 76, .5);

    /* tipografia */
    --fonte-titulo: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    --fonte-lead:   'Cormorant Garamond', 'Georgia', serif;
    --fonte-texto:  'Lato', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* medidas */
    --largura:  1180px;
    --raio:     14px;
    --raio-sm:  8px;
    --sombra:   0 12px 34px rgba(0, 0, 0, .34);
    --sombra-sm:0 4px 14px rgba(0, 0, 0, .22);
    --transicao:.18s ease;
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font: 400 16px/1.65 var(--fonte-texto);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* a folha de ouro do topo: repete o traço do coração do logo */
body::before {
    content: '';
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ouro-700), var(--ouro-400), var(--ouro-700));
    z-index: 100;
}

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    line-height: 1.18;
    margin: 0 0 .5em;
    color: var(--ouro-300);
    letter-spacing: .1px;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

a { color: var(--ouro-400); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--ouro-300); }

img { max-width: 100%; height: auto; display: block; }

hr {
    border: 0;
    height: 1px;
    background: var(--borda);
    margin: 2rem 0;
}

::selection { background: var(--ouro-500); color: var(--vinho-900); }

:focus-visible {
    outline: 2px solid var(--ouro-400);
    outline-offset: 2px;
}

.container {
    width: 100%;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 20px;
}

.oculto { display: none !important; }

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
}
.pular-para-conteudo:focus {
    left: 12px; top: 12px;
    z-index: 200;
    background: var(--ouro-500);
    color: var(--vinho-900);
    padding: 10px 16px;
    border-radius: var(--raio-sm);
}

/* ---------------------------------------------------------------
   3. Ornamentos da marca
   --------------------------------------------------------------- */

/* fio dourado com coração no meio — o separador da identidade */
.fio-coracao {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 1.5rem 0;
    color: var(--ouro-500);
}
.fio-coracao::before,
.fio-coracao::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ouro-600), transparent);
}
.fio-coracao span { font-size: 1rem; line-height: 1; }

.olho-alto {
    display: block;
    font-family: var(--fonte-texto);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: var(--ouro-600);
    margin-bottom: .7rem;
}

.lead {
    font-family: var(--fonte-lead);
    font-size: 1.28rem;
    line-height: 1.55;
    color: var(--texto);
}

/* ---------------------------------------------------------------
   4. Cabeçalho
   --------------------------------------------------------------- */
.topo {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(42, 4, 7, .93);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borda);
}

.topo__linha {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px 20px;
    max-width: var(--largura);
    margin: 0 auto;
}

.marca {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.marca img { width: 52px; height: 52px; border-radius: 50%; }
.marca__nome {
    font-family: var(--fonte-titulo);
    font-size: 1.42rem;
    color: var(--ouro-300);
    line-height: 1;
    display: block;
}
.marca__tag {
    font-family: var(--fonte-lead);
    font-size: .82rem;
    color: var(--ouro-600);
    letter-spacing: .04em;
}

.menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-wrap: wrap;
}
.menu a {
    padding: 9px 13px;
    border-radius: var(--raio-sm);
    font-size: .93rem;
    color: var(--texto);
    transition: background var(--transicao), color var(--transicao);
}
.menu a:hover { background: rgba(212, 162, 76, .12); color: var(--ouro-300); }
.menu a.ativo { color: var(--ouro-400); background: rgba(212, 162, 76, .1); }

/* bolinha do carrinho */
.btn-carrinho {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px !important;
    border: 1px solid var(--borda-forte);
    border-radius: 999px;
    color: var(--ouro-300) !important;
}
.btn-carrinho:hover { background: rgba(212, 162, 76, .16) !important; }
.btn-carrinho__n {
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    display: inline-grid;
    place-items: center;
    background: var(--ouro-500);
    color: var(--vinho-900);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
}

.menu-toggle {
    display: none;
    margin-left: auto;
    background: none;
    border: 1px solid var(--borda-forte);
    color: var(--ouro-300);
    border-radius: var(--raio-sm);
    padding: 8px 12px;
    font-size: 1.1rem;
    cursor: pointer;
}

/* ---------------------------------------------------------------
   5. Botões
   --------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 26px;
    border: 0;
    border-radius: 999px;
    font: 700 .96rem/1 var(--fonte-texto);
    letter-spacing: .02em;
    cursor: pointer;
    text-align: center;
    transition: transform var(--transicao), box-shadow var(--transicao),
                background var(--transicao), color var(--transicao);
}
.btn:active { transform: translateY(1px); }

.btn--ouro {
    background: linear-gradient(135deg, var(--ouro-400), var(--ouro-600));
    color: var(--vinho-900);
    box-shadow: 0 6px 18px rgba(212, 162, 76, .26);
}
.btn--ouro:hover {
    background: linear-gradient(135deg, var(--ouro-300), var(--ouro-500));
    color: var(--vinho-950);
    box-shadow: 0 9px 24px rgba(212, 162, 76, .36);
}

.btn--contorno {
    background: transparent;
    color: var(--ouro-300);
    border: 1px solid var(--borda-forte);
}
.btn--contorno:hover { background: rgba(212, 162, 76, .14); color: var(--ouro-200); }

.btn--telegram {
    background: linear-gradient(135deg, #2FA8DC, #1D7FB0);
    color: #fff;
    box-shadow: 0 6px 18px rgba(47, 168, 220, .3);
}
.btn--telegram:hover { background: linear-gradient(135deg, #43B7E8, #2189BC); color: #fff; }

.btn--fantasma {
    background: transparent;
    color: var(--texto-fraco);
    padding: 9px 14px;
}
.btn--fantasma:hover { color: var(--ouro-300); }

.btn--largo { width: 100%; }
.btn--grande { padding: 16px 34px; font-size: 1.03rem; }
.btn--pequeno { padding: 9px 16px; font-size: .86rem; }

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---------------------------------------------------------------
   6. Hero
   --------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4.5rem);
    background:
        radial-gradient(1000px 460px at 78% 12%, rgba(212, 162, 76, .16), transparent 62%),
        radial-gradient(700px 400px at 8% 92%, rgba(142, 32, 40, .5), transparent 60%),
        var(--vinho-900);
}

.hero__grade {
    display: grid;
    grid-template-columns: 1.06fr .94fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.hero h1 { margin-bottom: .35em; }
.hero h1 em {
    font-style: normal;
    color: var(--ouro-500);
    display: block;
}

.hero__acoes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 1.8rem;
}

/* o logo redondo com o halo dourado */
.hero__selo {
    position: relative;
    justify-self: center;
    width: min(392px, 78vw);
    aspect-ratio: 1;
}
.hero__selo img {
    width: 100%;
    border-radius: 50%;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .48);
    position: relative;
    z-index: 1;
}
.hero__selo::after {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 1px solid var(--borda-forte);
    animation: girar 26s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .hero__selo::after { animation: none; }
    html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------
   7. Selos (vegano, sem leite, sem glúten, sem açúcar)
   --------------------------------------------------------------- */
.selos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.selo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: rgba(212, 162, 76, .07);
    font-size: .81rem;
    color: var(--ouro-200);
    white-space: nowrap;
}
.selo svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--ouro-500); }

.selos--faixa {
    justify-content: center;
    gap: 14px;
    padding: 1.5rem 0;
}

/* ---------------------------------------------------------------
   8. Seções
   --------------------------------------------------------------- */
.secao { padding: clamp(2.8rem, 6vw, 4.8rem) 0; }
.secao--alt { background: var(--vinho-900); }
.secao--escura { background: var(--vinho-950); }

.secao__cabeca {
    text-align: center;
    max-width: 660px;
    margin: 0 auto 2.6rem;
}
.secao__cabeca p { color: var(--texto-fraco); }

/* ---------------------------------------------------------------
   9. Cards de produto
   --------------------------------------------------------------- */
.grade-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 22px;
    /* cada card com a sua altura: quando um abre o painel de
       tamanhos, os vizinhos não esticam junto com um vão no meio */
    align-items: start;
}

.produto-card {
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
    transition: transform var(--transicao), box-shadow var(--transicao),
                border-color var(--transicao);
}
.produto-card:hover {
    transform: translateY(-4px);
    border-color: var(--borda-forte);
    box-shadow: var(--sombra);
}

.produto-card__foto {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--vinho-900);
    overflow: hidden;
}
.produto-card__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.produto-card:hover .produto-card__foto img { transform: scale(1.05); }

.etiqueta-canto {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--ouro-500);
    color: var(--vinho-900);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
}
.etiqueta-canto--esgotado { background: var(--erro); color: #fff; }
.etiqueta-canto--promo { background: var(--verde); color: #fff; }

.produto-card__corpo {
    padding: 17px 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}
.produto-card__nome {
    font-family: var(--fonte-titulo);
    font-size: 1.13rem;
    color: var(--ouro-300);
    margin: 0;
}
.produto-card__desc {
    font-size: .89rem;
    color: var(--texto-fraco);
    margin: 0;
    flex: 1;
    /* três linhas reservadas: com a grade em align-items:start, é o
       que mantém os cards fechados na mesma altura */
    min-height: 4.9em;
}

.preco {
    font-family: var(--fonte-titulo);
    font-size: 1.5rem;
    color: var(--ouro-400);
    line-height: 1;
}
.preco small {
    font-family: var(--fonte-texto);
    font-size: .74rem;
    color: var(--texto-fraco);
    font-weight: 400;
}
.preco-cheio {
    font-size: .92rem;
    color: var(--texto-fraco);
    text-decoration: line-through;
    margin-left: 8px;
}

.produto-card__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

/* ---------------------------------------------------------------
   9b. Escolher o tamanho

   O card mostra o sabor; o painel mostra as quantidades e os
   valores. É <details> de propósito: abre, fecha e envia sem uma
   linha de JavaScript — o script só deixa mais bonito.
   --------------------------------------------------------------- */
.opcoes {
    border-top: 1px solid var(--borda);
    margin-top: 2px;
}
.opcoes > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 13px 0 3px;
    cursor: pointer;
    list-style: none;
}
.opcoes > summary::-webkit-details-marker { display: none; }

.opcoes__preco { white-space: nowrap; }
.opcoes__preco small {
    display: block;
    font-size: .66rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--texto-fraco);
    margin-bottom: 2px;
}
.opcoes__preco .preco { font-size: 1.34rem; }

.opcoes__abrir {
    flex-shrink: 0;
    white-space: nowrap;
    background: var(--ouro-500);
    color: var(--vinho-900);
    font-size: .82rem;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 999px;
    transition: background var(--transicao);
}
.opcoes__abrir::after {
    content: '⌄';
    display: inline-block;
    margin-left: 6px;
    transition: transform var(--transicao);
}
.opcoes[open] .opcoes__abrir::after { transform: rotate(180deg); }
.opcoes > summary:hover .opcoes__abrir { background: var(--ouro-400); }

.opcoes__titulo {
    margin: 0 0 10px;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-fraco);
}

.opcoes__lista {
    display: grid;
    gap: 8px;
    margin: 12px 0 14px;
}

.opcao {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    background: rgba(0, 0, 0, .14);
    cursor: pointer;
    transition: border-color var(--transicao), background var(--transicao);
}
.opcao:hover { border-color: var(--borda-forte); }
.opcao input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--ouro-500);
    cursor: inherit;
}
.opcao__texto { flex: 1; line-height: 1.25; }
.opcao__texto strong {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--texto);
}
.opcao__texto small { font-size: .76rem; color: var(--texto-fraco); }
.opcao__preco {
    font-family: var(--fonte-titulo);
    font-size: 1.08rem;
    color: var(--ouro-300);
    white-space: nowrap;
}
.opcao__preco em { font-style: normal; font-size: .8rem; color: var(--texto-fraco); }
.opcao__preco .preco-cheio { font-size: .8rem; margin-left: 5px; }

.opcao--marcada,
.opcao:has(input:checked) {
    border-color: var(--ouro-500);
    background: rgba(212, 162, 76, .13);
}
.opcao--esgotada {
    opacity: .48;
    cursor: not-allowed;
}
.opcao--esgotada:hover { border-color: var(--borda); }

.opcoes__acoes {
    display: grid;
    gap: 9px;
    justify-items: center;
    padding-bottom: 4px;
}
.opcoes__acoes a { font-size: .82rem; }

/* ---------------------------------------------------------------
   10. Cards de vitrine
   --------------------------------------------------------------- */
.grade-vitrines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
    gap: 22px;
}

.vitrine-card {
    position: relative;
    display: block;
    min-height: 262px;
    border-radius: var(--raio);
    overflow: hidden;
    border: 1px solid var(--borda);
    transition: transform var(--transicao), box-shadow var(--transicao);
}
.vitrine-card:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.vitrine-card img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.vitrine-card__veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(42,4,7,.24) 0%, rgba(42,4,7,.88) 68%);
}
.vitrine-card__texto {
    position: relative;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 262px;
}
.vitrine-card__texto h3 { margin: 0 0 4px; font-size: 1.35rem; }
.vitrine-card__texto p { margin: 0; font-size: .88rem; color: var(--texto-fraco); }
.vitrine-card__n {
    margin-top: 12px;
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ouro-500);
}

/* ---------------------------------------------------------------
   11. Página de produto
   --------------------------------------------------------------- */
.produto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.8rem, 4vw, 3.4rem);
    padding: clamp(2rem, 4vw, 3.4rem) 0;
}
.produto__foto {
    border-radius: var(--raio);
    overflow: hidden;
    border: 1px solid var(--borda);
    background: var(--vinho-900);
    align-self: start;
}
.produto__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.produto__preco {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 1.1rem 0;
}
.produto__preco .preco { font-size: 2.3rem; }

.quantidade {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--borda-forte);
    border-radius: 999px;
    overflow: hidden;
}
.quantidade button {
    width: 42px; height: 44px;
    background: transparent;
    border: 0;
    color: var(--ouro-300);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background var(--transicao);
}
.quantidade button:hover { background: rgba(212, 162, 76, .16); }
.quantidade input {
    width: 52px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--texto);
    text-align: center;
    font: 700 1rem var(--fonte-texto);
    -moz-appearance: textfield;
}
.quantidade input::-webkit-outer-spin-button,
.quantidade input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.produto__comprar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin: 1.4rem 0;
}

.acordeao {
    border-top: 1px solid var(--borda);
}
.acordeao details { border-bottom: 1px solid var(--borda); }
.acordeao summary {
    padding: 15px 2px;
    cursor: pointer;
    font-weight: 700;
    font-size: .95rem;
    color: var(--ouro-300);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after {
    content: '+';
    color: var(--ouro-500);
    font-size: 1.3rem;
    line-height: 1;
}
.acordeao details[open] summary::after { content: '−'; }
.acordeao details > *:not(summary) {
    padding-bottom: 16px;
    font-size: .93rem;
    color: var(--texto-fraco);
    margin: 0;
}

/* ---------------------------------------------------------------
   12. Carrinho
   --------------------------------------------------------------- */
.carrinho {
    display: grid;
    grid-template-columns: 1.55fr .95fr;
    gap: 26px;
    align-items: start;
    padding: 2rem 0 4rem;
}

.linha-item {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--borda);
}
.linha-item:last-child { border-bottom: 0; }
.linha-item__foto {
    width: 84px; height: 84px;
    border-radius: var(--raio-sm);
    object-fit: cover;
    background: var(--vinho-900);
}
.linha-item__nome {
    font-family: var(--fonte-titulo);
    font-size: 1.04rem;
    color: var(--ouro-300);
    margin: 0 0 3px;
}
.linha-item__meta { font-size: .82rem; color: var(--texto-fraco); margin: 0; }
.linha-item__dir { text-align: right; display: grid; gap: 8px; justify-items: end; }

.painel {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 24px;
}
.painel--grudado { position: sticky; top: 96px; }
.painel h3 { margin-top: 0; }

.resumo-linha {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: .94rem;
}
.resumo-linha--total {
    border-top: 1px solid var(--borda-forte);
    margin-top: 8px;
    padding-top: 15px;
    font-family: var(--fonte-titulo);
    font-size: 1.3rem;
    color: var(--ouro-300);
}
.resumo-linha--gratis span:last-child { color: var(--verde); font-weight: 700; }

.barra-frete {
    margin: 14px 0 4px;
    font-size: .84rem;
    color: var(--texto-fraco);
}
.barra-frete__trilha {
    height: 6px;
    background: rgba(212, 162, 76, .16);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 7px;
}
.barra-frete__fita {
    height: 100%;
    background: linear-gradient(90deg, var(--ouro-600), var(--ouro-400));
    border-radius: 999px;
    transition: width .4s ease;
}

.vazio {
    text-align: center;
    padding: 4rem 1rem;
}
.vazio img { width: 116px; margin: 0 auto 1.4rem; border-radius: 50%; opacity: .55; }

/* ---------------------------------------------------------------
   13. Formulários
   --------------------------------------------------------------- */
.campo { margin-bottom: 17px; }

.campo > label,
.rotulo {
    display: block;
    font-size: .81rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ouro-600);
    margin-bottom: 7px;
}
.campo .obrigatorio { color: var(--erro); }

.campo input[type=text], .campo input[type=email], .campo input[type=tel],
.campo input[type=number], .campo input[type=date], .campo input[type=password],
.campo input[type=search], .campo select, .campo textarea {
    width: 100%;
    padding: 13px 15px;
    background: rgba(42, 4, 7, .5);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    color: var(--texto);
    font: 400 1rem var(--fonte-texto);
    transition: border-color var(--transicao), box-shadow var(--transicao),
                background var(--transicao);
}
.campo textarea { min-height: 96px; resize: vertical; }

.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: 0;
    border-color: var(--ouro-500);
    background: rgba(42, 4, 7, .72);
    box-shadow: 0 0 0 3px rgba(212, 162, 76, .17);
}
.campo input::placeholder, .campo textarea::placeholder { color: rgba(205, 180, 143, .5); }

.campo select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ouro-500) 50%),
                      linear-gradient(135deg, var(--ouro-500) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 14px) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

.campo__ajuda { font-size: .8rem; color: var(--texto-fraco); margin: 6px 0 0; }
.campo__erro  { font-size: .82rem; color: var(--erro); margin: 6px 0 0; font-weight: 700; }
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: var(--erro); }

.campo--ok input { border-color: var(--verde); }

/* estado de "consultando..." nos campos de CEP e documento */
.campo--carregando { position: relative; }
.campo--carregando::after {
    content: '';
    position: absolute;
    right: 15px;
    bottom: 16px;
    width: 16px; height: 16px;
    border: 2px solid var(--borda-forte);
    border-top-color: var(--ouro-400);
    border-radius: 50%;
    animation: rodar .7s linear infinite;
}
@keyframes rodar { to { transform: rotate(360deg); } }

.linha-campos {
    display: grid;
    gap: 17px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.linha-campos--2 { grid-template-columns: 1fr 1fr; }
.linha-campos--cep { grid-template-columns: 190px 1fr; }
.linha-campos--num { grid-template-columns: 1fr 1.4fr; }

@media (max-width: 560px) {
    .linha-campos, .linha-campos--2,
    .linha-campos--cep, .linha-campos--num { grid-template-columns: 1fr; }
}

/* escolha em cartão (tipo de pessoa, forma de entrega, pagamento) */
.opcoes { display: grid; gap: 12px; }
.opcoes--2 { grid-template-columns: 1fr 1fr; }
.opcoes--3 { grid-template-columns: repeat(3, 1fr); }

.opcao {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 15px 17px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    background: rgba(42, 4, 7, .34);
    cursor: pointer;
    transition: border-color var(--transicao), background var(--transicao);
}
.opcao:hover { border-color: var(--borda-forte); }
.opcao input { margin: 3px 0 0; accent-color: var(--ouro-500); flex-shrink: 0; }
.opcao__nome { font-weight: 700; font-size: .95rem; color: var(--texto); display: block; }
.opcao__ajuda { font-size: .81rem; color: var(--texto-fraco); display: block; margin-top: 2px; }
.opcao__preco { font-weight: 700; color: var(--ouro-400); font-size: .88rem; }

.opcao:has(input:checked) {
    border-color: var(--ouro-500);
    background: rgba(212, 162, 76, .12);
}
.opcao:has(input:checked) .opcao__nome { color: var(--ouro-300); }

.aceite {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: .88rem;
    color: var(--texto-fraco);
    line-height: 1.5;
}
.aceite input { margin-top: 3px; accent-color: var(--ouro-500); }

/* ---------------------------------------------------------------
   14. Checkout — passos
   --------------------------------------------------------------- */
.checkout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 28px;
    align-items: start;
    padding: 2rem 0 4rem;
}

.passos {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    flex-wrap: wrap;
}
.passos li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .85rem;
    color: var(--texto-fraco);
}
.passos li::after {
    content: '';
    width: 26px; height: 1px;
    background: var(--borda);
    margin: 0 3px;
}
.passos li:last-child::after { display: none; }
.passos__n {
    width: 27px; height: 27px;
    display: grid; place-items: center;
    border: 1px solid var(--borda);
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.passos li.ativo { color: var(--ouro-300); font-weight: 700; }
.passos li.ativo .passos__n {
    background: var(--ouro-500);
    color: var(--vinho-900);
    border-color: var(--ouro-500);
}
.passos li.feito { color: var(--verde); }
.passos li.feito .passos__n {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
}

/* cartão de "já te conheço" — o cadastro achado pelo telefone */
.cartao-cliente {
    border: 1px solid var(--ouro-500);
    background: linear-gradient(135deg, rgba(212, 162, 76, .15), rgba(212, 162, 76, .05));
    border-radius: var(--raio);
    padding: 22px 24px;
    margin-bottom: 1.6rem;
}
.cartao-cliente__ola {
    font-family: var(--fonte-titulo);
    font-size: 1.5rem;
    color: var(--ouro-300);
    margin: 0 0 3px;
}
.cartao-cliente dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 15px;
    margin: 1rem 0 1.2rem;
    font-size: .9rem;
}
.cartao-cliente dt {
    color: var(--ouro-600);
    font-size: .76rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    align-self: center;
}
.cartao-cliente dd { margin: 0; color: var(--texto); }
.cartao-cliente__acoes { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------
   15. Avisos
   --------------------------------------------------------------- */
.aviso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 17px;
    border-radius: var(--raio-sm);
    border-left: 3px solid var(--ouro-500);
    background: rgba(212, 162, 76, .11);
    font-size: .91rem;
    margin-bottom: 1.2rem;
}
.aviso--ok    { border-color: var(--verde);  background: rgba(110, 139, 61, .15); }
.aviso--erro  { border-color: var(--erro);   background: rgba(224, 107, 92, .14); }
.aviso--alerta{ border-color: var(--alerta); background: rgba(200, 117, 42, .14); }
.aviso strong { color: var(--ouro-200); }

/* ---------------------------------------------------------------
   16. Pedido confirmado
   --------------------------------------------------------------- */
.confirmado {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4.5rem) 20px;
}
.confirmado__coracao {
    font-size: 3.4rem;
    line-height: 1;
    margin-bottom: 1rem;
}
.confirmado__codigo {
    display: inline-block;
    font-family: var(--fonte-titulo);
    font-size: 1.7rem;
    color: var(--ouro-300);
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio-sm);
    padding: 11px 24px;
    margin: .6rem 0 1.6rem;
    letter-spacing: .06em;
}
.confirmado__acoes {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 2rem 0;
}

.resumo-pedido {
    text-align: left;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 22px 24px;
    margin-top: 2rem;
}

/* bloco de texto para copiar (o resumo que vai pro Telegram) */
.para-copiar {
    position: relative;
    background: rgba(42, 4, 7, .62);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    padding: 16px 18px;
    font: 400 .85rem/1.6 'Consolas', 'Courier New', monospace;
    color: var(--texto);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow-y: auto;
    text-align: left;
}

/* ---------------------------------------------------------------
   17. Tabela simples (meus pedidos)
   --------------------------------------------------------------- */
.tabela-envolve { overflow-x: auto; }

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .91rem;
}
.tabela th {
    text-align: left;
    padding: 12px 14px;
    font-size: .74rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ouro-600);
    border-bottom: 1px solid var(--borda-forte);
    white-space: nowrap;
}
.tabela td {
    padding: 14px;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}
.tabela tbody tr:hover { background: rgba(212, 162, 76, .05); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

.pilula {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    color: #fff;
}

/* ---------------------------------------------------------------
   18. Rodapé
   --------------------------------------------------------------- */
.rodape {
    background: var(--vinho-950);
    border-top: 1px solid var(--borda);
    padding: 3rem 0 1.6rem;
    margin-top: 3rem;
    font-size: .9rem;
}
.rodape__grade {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.4rem;
    margin-bottom: 2.4rem;
}
.rodape h4 {
    font-size: .78rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ouro-600);
    font-family: var(--fonte-texto);
    margin-bottom: 1rem;
}
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.rodape a { color: var(--texto-fraco); }
.rodape a:hover { color: var(--ouro-300); }
.rodape__fim {
    border-top: 1px solid var(--borda);
    padding-top: 1.4rem;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--texto-fraco);
    font-size: .83rem;
}
.rodape__marca { display: flex; gap: 12px; align-items: center; margin-bottom: 1rem; }
.rodape__marca img { width: 58px; border-radius: 50%; }

/* botão flutuante do Telegram */
.flutuante {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 55;
    width: 54px; height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2FA8DC, #1D7FB0);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
    color: #fff;
}
.flutuante:hover { transform: scale(1.06); color: #fff; }
.flutuante svg { width: 26px; height: 26px; }

/* ---------------------------------------------------------------
   19. Responsivo
   --------------------------------------------------------------- */
@media (max-width: 940px) {
    .hero__grade { grid-template-columns: 1fr; text-align: center; }
    .hero__selo { order: -1; width: min(300px, 66vw); }
    .hero__acoes { justify-content: center; }
    .produto { grid-template-columns: 1fr; }
    .carrinho, .checkout { grid-template-columns: 1fr; }
    .painel--grudado { position: static; }
    .rodape__grade { grid-template-columns: 1fr; gap: 1.8rem; }
}

@media (max-width: 720px) {
    .menu-toggle { display: block; }
    .menu {
        display: none;
        width: 100%;
        order: 3;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding-top: 10px;
        border-top: 1px solid var(--borda);
        margin-top: 10px;
    }
    .menu.aberto { display: flex; }
    .topo__linha { flex-wrap: wrap; }
    .marca img { width: 44px; height: 44px; }
    .marca__nome { font-size: 1.2rem; }
    .opcoes--2, .opcoes--3 { grid-template-columns: 1fr; }
    .linha-item { grid-template-columns: 64px 1fr; }
    .linha-item__foto { width: 64px; height: 64px; }
    .linha-item__dir { grid-column: 1 / -1; justify-items: start; text-align: left; }
}

/* ---------------------------------------------------------------
   20. Impressão
   --------------------------------------------------------------- */
@media print {
    body { background: #fff; color: #000; }
    .topo, .rodape, .flutuante, .btn { display: none !important; }
}