/* ============================================================
   Loja Wine Casino — só o que é da loja.

   As cores, os botoes e as entradas vem do style.css do app, que
   esta pagina carrega antes desta. Aqui ficam a vitrine, a ficha
   do produto e o carrinho: coisas que o app nao tem.
   ============================================================ */

/* ============================================================
   A loja e site, nao app.

   O style.css do app foi feito para uma tela de celular: .app-container
   tem max-width 430px, pinta uma arte de fundo fixa nessa largura e um
   ruido por cima. Num monitor isso vira uma tira estreita no meio da
   tela. Aqui esse container e desfeito e a loja vira largura livre,
   com uma faixa central que acompanha o tamanho da janela.
   ============================================================ */
body.loja {
    /* Uma medida so para o respiro lateral: o topo, o corpo e o rodape
       precisam comecar exatamente na mesma coluna, senao a logo fica
       desalinhada do titulo logo abaixo dela. */
    --loja-faixa: 1120px;
    --loja-lado: 16px;

    background: var(--bg-app);
    color: var(--ivory);
    min-height: 100vh;
}

body.loja .app-container {
    max-width: none;
    box-shadow: none;
    background: var(--bg-app);
}

/* A arte de fundo e o graozinho eram do app; num site claro so sujam */
body.loja .app-container::before,
body.loja .app-container::after { content: none; display: none; }

/* A faixa central: tudo o que e conteudo mora dentro dela */
.loja-faixa {
    width: 100%;
    max-width: var(--loja-faixa);
    margin: 0 auto;
    padding: 0 var(--loja-lado);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.loja-corpo {
    flex: 1;
    width: 100%;
    max-width: var(--loja-faixa);
    margin: 0 auto;
    padding: 18px var(--loja-lado) 40px;
    box-sizing: border-box;
}

/* ---------- topo ---------- */
.loja-topo {
    padding: 12px 0;
    border-bottom: 1px solid var(--mogno-borda);
    background: var(--mogno);
    position: sticky;
    top: 0;
    z-index: 5;
}

.loja-marca img { height: 34px; display: block; }

.loja-topo-acoes { display: flex; align-items: center; gap: 14px; }

.loja-topo-link {
    font-size: 13px;
    color: var(--ivory-dim);
    text-decoration: none;
    max-width: 9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.loja-topo-link:hover { color: var(--ivory); }

.loja-carrinho {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    color: var(--ivory-dim);
}
.loja-carrinho:hover { border-color: var(--vinho); color: var(--ivory); }
.loja-carrinho .ico { width: 18px; height: 18px; margin: 0; }

/* O selo precisa ser legivel em cima do icone, entao ganha fundo proprio */
.loja-carrinho-selo {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--vinho);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---------- abertura ---------- */
.loja-abertura { padding: 10px 0 22px; }
.loja-abertura h1 {
    margin: 0 0 6px;
    font-size: 1.6rem;
    color: var(--ivory);
    text-wrap: balance;
}
.loja-abertura p {
    margin: 0;
    max-width: 46ch;
    font-size: 0.92rem;
    color: var(--ivory-dim);
}

/* ---------- vitrine ---------- */
.loja-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.loja-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mogno-borda);
    border-radius: var(--raio-grande);
    background: var(--card-vidro);
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.16s, transform 0.16s;
}
.loja-card:hover { border-color: var(--vinho); transform: translateY(-2px); }

.loja-card-foto {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: var(--mogno-hi);
}
.loja-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loja-card-foto .ico { width: 34px; height: 34px; margin: 0; color: var(--smoke); }

/* A tarja tem fundo escuro proprio, entao a cor da letra e branca fixa e nao
   var(--ivory): no tema claro o ivory e quase preto e sumiria no escuro. */
.loja-tarja {
    position: absolute;
    inset: auto 0 0 0;
    padding: 5px;
    background: rgba(26, 26, 26, 0.72);
    color: #fff;
    font-size: 11px;
    text-align: center;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.loja-card-corpo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 12px 13px;
}
.loja-card-nome   { font-size: 13.5px; font-weight: 500; color: var(--ivory); line-height: 1.3; }
.loja-card-resumo { font-size: 11.5px; color: var(--smoke); line-height: 1.35; }
.loja-card-preco  {
    margin-top: 4px;
    font-size: 15px;
    color: var(--dourado);
    font-variant-numeric: tabular-nums;
}
.loja-card-preco s { margin-right: 6px; font-size: 12px; color: var(--smoke); }

/* ---------- ficha do produto ---------- */
.loja-produto {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 6px 0 4px;
}

.loja-produto-fotos { display: grid; gap: 10px; }
.loja-produto-fotos img {
    width: 100%;
    border-radius: var(--raio-grande);
    border: 1px solid var(--mogno-borda);
    display: block;
}

.loja-produto-semfoto {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: var(--raio-grande);
    border: 1px solid var(--mogno-borda);
    background: var(--mogno-hi);
}
.loja-produto-semfoto .ico { width: 44px; height: 44px; margin: 0; color: var(--smoke); }

.loja-produto-dados h1 {
    margin: 0 0 8px;
    font-size: 1.4rem;
    color: var(--ivory);
    text-wrap: balance;
}
.loja-produto-resumo { margin: 0 0 14px; color: var(--ivory-dim); font-size: 0.94rem; }

.loja-produto-preco {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 18px;
    font-variant-numeric: tabular-nums;
}
.loja-produto-preco strong { font-size: 1.75rem; color: var(--dourado); font-weight: 600; }
.loja-produto-preco s      { font-size: 1rem; color: var(--smoke); }

.loja-comprar-linha { display: flex; gap: 8px; margin-top: 4px; }
.loja-comprar-linha .entrada { width: 5.5rem; flex-shrink: 0; text-align: center; }
.loja-comprar-linha .btn-primario { flex: 1; }

.loja-produto-texto {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--borda);
    font-size: 0.92rem;
    color: var(--ivory-dim);
    line-height: 1.6;
}

.loja-voltar { margin: 26px 0 0; }
.loja-voltar a { font-size: 13px; color: var(--ivory-dim); text-decoration: none; }
.loja-voltar .ico { width: 12px; height: 12px; }

/* ---------- carrinho ---------- */
.loja-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--borda);
}
.loja-linha:last-of-type { border-bottom: none; }

.loja-linha-foto {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border-radius: var(--raio);
    border: 1px solid var(--mogno-borda);
    background: var(--mogno-hi);
    object-fit: cover;
}

.loja-linha-dados { flex: 1; min-width: 0; }
.loja-linha-nome  { display: block; font-size: 13.5px; color: var(--ivory); }
.loja-linha-unit  { font-size: 11.5px; color: var(--smoke); }

.loja-linha-acoes { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.loja-linha-acoes .entrada { width: 3.8rem; padding: 6px; text-align: center; font-size: 12px; }

.loja-linha-total {
    min-width: 5.5rem;
    text-align: right;
    font-size: 13.5px;
    color: var(--dourado);
    font-variant-numeric: tabular-nums;
}

.loja-somas { margin-top: 18px; }
.loja-soma {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13.5px;
    color: var(--ivory-dim);
    font-variant-numeric: tabular-nums;
}
.loja-soma.total {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--borda);
    font-size: 1.05rem;
    color: var(--ivory);
}
.loja-soma.total b { color: var(--dourado); }

/* ---------- rodape ---------- */
.loja-pe {
    padding: 26px 0 34px;
    border-top: 1px solid var(--mogno-borda);
    background: var(--mogno);
}
.loja-pe-links {
    flex-wrap: wrap;
    gap: 8px 22px;
    justify-content: center;
}
.loja-pe a { font-size: 12.5px; color: var(--ivory-dim); text-decoration: none; }
.loja-pe a:hover { color: var(--vinho); }

/* ---------- administracao da loja ---------- */
.adm-abas {
    display: flex;
    gap: 6px;
    margin: 4px 0 18px;
    overflow-x: auto;
}
.adm-abas a {
    flex-shrink: 0;
    padding: 7px 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    font-size: 12.5px;
    color: var(--ivory-dim);
    text-decoration: none;
    white-space: nowrap;
}
.adm-abas a:hover  { border-color: var(--vinho); color: var(--ivory); }
.adm-abas a.ativa  { border-color: var(--dourado); color: var(--dourado); }

.adm-produto {
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
    background: var(--card-vidro);
}
/* Fora da vitrine tem de dar para ver de relance, sem ler a linha de baixo */
.adm-produto.fora { opacity: 0.58; border-style: dashed; }

.adm-produto-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.adm-produto-topo strong { font-size: 14px; font-weight: 500; color: var(--ivory); }
.adm-produto-topo span   { font-size: 13px; color: var(--dourado); white-space: nowrap;
                           font-variant-numeric: tabular-nums; }

.adm-produto-meta { margin: 4px 0 10px; font-size: 11.5px; color: var(--smoke); }

.adm-produto-acoes { display: flex; flex-wrap: wrap; gap: 6px; }

.adm-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 26rem) { .adm-dupla { grid-template-columns: 1fr; } }

/* ============================================================
   Tela larga — a loja e responsiva de verdade, nao um app esticado
   ============================================================ */
@media (min-width: 700px) {
    body.loja { --loja-lado: 24px; }
    .loja-corpo { padding-top: 28px; padding-bottom: 56px; }

    .loja-abertura { padding: 18px 0 30px; }
    .loja-abertura h1 { font-size: 2.4rem; }
    .loja-abertura p  { font-size: 1rem; max-width: 52ch; }

    .loja-grade { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
    .loja-card-nome   { font-size: 15px; }
    .loja-card-resumo { font-size: 12.5px; }
    .loja-card-preco  { font-size: 17px; }

    /* A foto do produto ocupa a coluna da esquerda e os dados acompanham a
       rolagem: em monitor, o botao de comprar nao pode ficar so la embaixo. */
    .loja-produto {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 40px;
        align-items: start;
        padding: 10px 0 8px;
    }
    .loja-produto-dados { position: sticky; top: 84px; }
    .loja-produto-dados h1 { font-size: 1.9rem; }
    .loja-produto-preco strong { font-size: 2.1rem; }

    .loja-linha-foto { width: 74px; height: 74px; }
}

@media (min-width: 1000px) {
    .loja-grade { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

    /* O carrinho e a administracao sao leitura em coluna: esticar a linha ate
       1120px so afasta o nome do preco. */
    .loja-corpo > .card-formulario,
    .loja-corpo > .licenca-cabecalho,
    .loja-corpo > .adm-produto,
    .loja-corpo > .alerta,
    .loja-corpo > .adm-abas { max-width: 760px; }
}