/* Estilos da loja Alerta Padel. Carregado so nas paginas da loja (ver
   alerta_padel_loja_e_pagina_da_loja em alerta-padel-loja.php) - nunca no
   resto do site. Mobile-first: estilos base sao pro celular, os ajustes de
   desktop entram depois, em @media (min-width: 768px). */

/* A loja e sempre clara (nao tem tema escuro) - sem isso, controles nativos
   sem "color" explicito (button, input, select) podem seguir o modo escuro
   do sistema no Safari/iOS (texto virando branco), mesmo com fundo branco
   fixado via CSS - foi exatamente o que causou o botao "Aplicar" cupom
   invisivel no popup do mini-carrinho, no celular. */
:root {
    color-scheme: light;
    --ap-bg: #f6f6f2;
    --ap-card-bg: #ffffff;
    --ap-ink: #1b2a38;
    --ap-ink-muted: #7a7a70;
    --ap-amarelo: #e4f018;
    --ap-amarelo-hover: #d0dc00;
    --ap-borda: #e2e0d7;
    --ap-vermelho: #d1382e;
    --ap-fonte-destaque: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --ap-fonte-corpo: 'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --ap-fonte-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

/* O tema (Twenty Twenty-Five) aplica um respiro global (has-global-padding)
   em qualquer wrapper de conteudo - soma com o padding que a gente ja da
   pro nosso proprio layout e sobra uma margem dupla nas laterais, em vez de
   preencher a tela. So zera nos wrappers que envolvem a Home/produto da
   loja (nao mexe no checkout/carrinho, que usa os blocos nativos do Woo e
   depende desse respiro do tema). */
.has-global-padding:has(.ap-loja-header),
.has-global-padding:has(.ap-produto) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.ap-loja-frete-bar,
.ap-loja-header,
.ap-produto,
.ap-secao-ofertas,
.ap-secao-produtos,
.ap-loja-diferenciais,
.ap-loja-footer,
.ap-mini-carrinho,
.ap-mini-carrinho-overlay {
    box-sizing: border-box;
    font-family: var(--ap-fonte-corpo);
}

.ap-loja-frete-bar *, .ap-loja-header *, .ap-produto *, .ap-secao-ofertas *,
.ap-secao-produtos *, .ap-loja-diferenciais *, .ap-loja-footer *, .ap-mini-carrinho * {
    box-sizing: border-box;
}

body.single-product main.wp-block-group.alerta-padel-produto-template,
.ap-loja-frete-bar, .ap-loja-header, .ap-produto, .ap-secao-ofertas,
.ap-secao-produtos, .ap-banner, .ap-loja-diferenciais, .ap-loja-footer {
    background: var(--ap-bg);
    color: var(--ap-ink);
}

/* ---------- Barra de frete grátis ---------- */
.ap-loja-frete-bar {
    background: var(--ap-ink);
    color: #fff;
    text-align: center;
    font-family: var(--ap-fonte-destaque);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px 12px;
}

/* ---------- Cabeçalho ---------- */
.ap-loja-header {
    padding: 14px 16px 0;
    border-bottom: 1px solid var(--ap-borda);
}
.ap-loja-header-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
}
.ap-loja-voltar {
    font-size: 22px;
    text-decoration: none;
    color: var(--ap-ink);
}
.ap-loja-logo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.ap-loja-logo-imagem {
    display: block;
    height: 28px !important;
    width: auto !important;
}
.ap-loja-logo span {
    display: block;
    font-family: var(--ap-fonte-mono);
    font-size: 9px;
    font-weight: 500;
    color: var(--ap-ink-muted);
    letter-spacing: 0.1em;
    margin-top: 2px;
    text-transform: uppercase;
}
.ap-loja-header-acoes {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
}
.ap-loja-conta {
    color: var(--ap-ink);
    text-decoration: none;
}
.ap-loja-carrinho-botao {
    position: relative;
    background: none;
    border: none;
    font: inherit;
    color: var(--ap-ink);
    cursor: pointer;
    padding: 0;
}
.ap-loja-carrinho-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--ap-amarelo);
    color: var(--ap-ink);
    font-family: var(--ap-fonte-destaque);
    font-size: 10px;
    font-weight: 800;
}
.ap-loja-busca {
    padding-bottom: 12px;
}
.ap-loja-busca input[type="search"] {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid var(--ap-borda);
    background: var(--ap-card-bg);
    font-size: 14px;
}
.ap-loja-categorias {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
}
.ap-loja-categoria-tab {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--ap-card-bg);
    border: 1px solid var(--ap-borda);
    color: var(--ap-ink);
    text-decoration: none;
    font-family: var(--ap-fonte-destaque);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.ap-loja-categoria-tab.ativa {
    background: var(--ap-ink);
    color: #fff;
    border-color: var(--ap-ink);
}

/* ---------- Banner ---------- */
.ap-banner {
    margin: 16px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    min-height: 220px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.ap-banner-conteudo {
    background: linear-gradient(to top, rgba(27,42,56,0.85), rgba(27,42,56,0));
    width: 100%;
    padding: 24px 20px 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.ap-banner-tag {
    background: var(--ap-amarelo);
    color: var(--ap-ink);
    font-family: var(--ap-fonte-destaque);
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 5px 9px;
    border-radius: 3px;
}
.ap-banner-conteudo h2 {
    margin: 0;
    font-family: var(--ap-fonte-destaque);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.01em;
}
.ap-banner-conteudo p {
    margin: 0;
    font-size: 13px;
    opacity: 0.9;
}
.ap-banner-conteudo .ap-botao { margin-top: 4px; }

/* ---------- Botões ---------- */
.ap-botao {
    display: inline-block;
    text-align: center;
    padding: 14px 20px;
    border-radius: 10px;
    font-family: var(--ap-fonte-destaque);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    width: 100%;
}
.ap-botao-primario {
    background: var(--ap-amarelo);
    color: var(--ap-ink);
}
.ap-botao-primario:hover { background: var(--ap-amarelo-hover); }
.ap-botao-secundario {
    background: transparent;
    color: var(--ap-ink);
    border: 1px solid var(--ap-ink);
}

/* ---------- Grade de produtos / cards ---------- */
.ap-secao-ofertas, .ap-secao-produtos { padding: 24px 16px; }
.ap-secao-ofertas h2, .ap-secao-produtos h2, .ap-relacionados h2 {
    font-family: var(--ap-fonte-destaque);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
}
.ap-produtos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.ap-produto-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ap-card-bg);
    border: 1px solid var(--ap-borda);
    border-radius: 12px;
    padding: 10px;
    text-decoration: none;
    color: var(--ap-ink);
}
/* height:0 + padding-bottom:100% (em vez de aspect-ratio) - truque antigo
   e universal pra caixa quadrada, funciona em absolutamente qualquer
   navegador (inclusive Safari de iPhone antigo tipo o 7 Plus) sem
   depender de suporte a propriedade CSS recente. padding-bottom em % e
   sempre calculado em cima da LARGURA do elemento, mesmo em altura.
   !important no width/height da img: confirmado ao vivo (produto Adidas
   Metalbone Reserve) que sem isso uma regra externa (provavelmente do
   tema, algo tipo "img { height: auto }") vencia e a imagem renderizava
   no formato NATURAL da foto (ex.: 540x868) em vez de preencher a caixa
   quadrada (540x540) - "position: absolute" sozinho nao bastava. */
.ap-produto-card-imagem { position: relative; height: 0; padding-bottom: 100%; overflow: hidden; border-radius: 8px; margin-bottom: 8px; background: #f0f0ee; }
.ap-produto-card-imagem img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain; }
.ap-produto-card-marca { font-family: var(--ap-fonte-mono); font-size: 10px; text-transform: uppercase; color: var(--ap-ink-muted); font-weight: 500; letter-spacing: 0.08em; }
.ap-produto-card-nome { font-family: var(--ap-fonte-destaque); font-size: 13px; font-weight: 700; margin: 2px 0 6px; }
.ap-produto-card-preco-riscado { font-size: 12px; color: var(--ap-ink-muted); text-decoration: line-through; }
.ap-produto-card-preco-pix { font-family: var(--ap-fonte-destaque); font-size: 16px; font-weight: 900; letter-spacing: -0.01em; }
.ap-produto-card-preco-cartao { font-size: 11px; color: var(--ap-ink-muted); }
.ap-produto-card-esgotado {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.75); font-weight: 800; text-transform: uppercase; font-size: 13px;
}
.ap-sem-produtos { color: var(--ap-ink-muted); }

.ap-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 8px;
    border-radius: 5px;
    font-family: var(--ap-fonte-destaque);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    z-index: 1;
}
.ap-badge-desconto { background: var(--ap-ink); color: var(--ap-amarelo); }

/* ---------- Diferenciais / rodapé ---------- */
.ap-loja-diferenciais {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px 16px;
    border-top: 1px solid var(--ap-borda);
}
.ap-loja-diferenciais strong { display: block; font-family: var(--ap-fonte-destaque); font-weight: 800; font-size: 13px; }
.ap-loja-diferenciais span { display: block; font-size: 12px; color: var(--ap-ink-muted); }

.ap-loja-footer {
    background: var(--ap-ink);
    color: #b6b6ac;
    padding: 24px 16px;
    text-align: center;
}
.ap-loja-footer-marca { height: 30px !important; width: auto !important; margin-bottom: 14px; }
.ap-loja-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 14px; }
.ap-loja-footer-links a { color: #b6b6ac; font-size: 12px; text-decoration: underline; }
.ap-loja-footer-whatsapp {
    display: block;
    font-size: 12px;
    color: #b6b6ac;
    text-decoration: underline;
    border-top: 1px solid #33465a;
    padding-top: 14px;
}

/* ---------- Página de produto ---------- */
.ap-produto { padding: 16px; display: flex; flex-direction: column; gap: 20px; }
.ap-produto-galeria { position: relative; }
/* height:0 + padding-bottom:100% no lugar de aspect-ratio - ver comentario
   em .ap-produto-card-imagem, mesmo motivo (compatibilidade universal). */
.ap-produto-imagem-principal-botao {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #f0f0ee;
    border: none;
    cursor: zoom-in;
}
.ap-produto-galeria img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border-radius: 12px; object-fit: contain; }
.ap-produto-miniaturas { display: flex; gap: 8px; margin-top: 8px; }
.ap-produto-miniatura-botao {
    display: block;
    position: relative;
    width: 56px;
    height: 0;
    padding-bottom: 56px;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #f0f0ee;
    cursor: pointer;
    line-height: 0;
}
/* object-fit: contain (nao cover) - as fotos do produto nem sempre sao
   quadradas (tem fotos de detalhe, por exemplo) e "cover" cortava pedacos
   da imagem pra preencher o quadrado de 56x56, deixando miniaturas com
   crops estranhos/irreconheciveis. "contain" mostra a foto inteira. */
.ap-produto-miniatura-botao img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border-radius: 6px; object-fit: contain; display: block; }
.ap-produto-miniatura-botao.ativa { border-color: var(--ap-ink); }

/* Lightbox de imagens do produto. */
.ap-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(27, 42, 56, 0.92);
    align-items: center;
    justify-content: center;
}
.ap-lightbox.aberto { display: flex; }
.ap-lightbox-imagem { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px; }
/* Fundo solido (nao translucido) - as fotos de produto costumam ter fundo
   branco ocupando quase o quadro todo, e um botao so 12% branco sobre
   branco fica invisivel. Fundo escuro solido garante contraste em
   qualquer foto. */
.ap-lightbox-fechar,
.ap-lightbox-anterior,
.ap-lightbox-proxima {
    position: absolute;
    z-index: 1;
    border: none;
    background: rgba(27, 42, 56, 0.85);
    color: #fff;
    cursor: pointer;
    border-radius: 999px;
    width: 44px;
    height: 44px;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ap-lightbox-fechar { top: 16px; right: 16px; }
.ap-lightbox-anterior { left: 16px; top: 50%; transform: translateY(-50%); }
.ap-lightbox-proxima { right: 16px; top: 50%; transform: translateY(-50%); }

.ap-produto-marca { font-family: var(--ap-fonte-mono); font-size: 11px; text-transform: uppercase; font-weight: 500; color: var(--ap-ink-muted); letter-spacing: 0.1em; }
.ap-produto-titulo { font-family: var(--ap-fonte-destaque); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin: 4px 0 12px; }

.ap-produto-preco { background: #fbfee2; border: 1px solid var(--ap-amarelo); border-radius: 4px; padding: 14px; margin-bottom: 14px; }
/* .ap-badge normalmente e um selo no canto de uma foto (position:absolute) -
   aqui ele fica dentro da linha do preco Pix, junto de texto normal, entao
   precisa voltar a fluir no lugar (senao cai fora da area visivel). */
.ap-produto-preco .ap-badge-desconto { position: static; margin-left: 6px; }
.ap-preco-riscado { text-decoration: line-through; color: var(--ap-ink-muted); font-size: 13px; }
.ap-preco-pix-linha { display: flex; align-items: center; margin: 4px 0 0; }
.ap-preco-pix { font-family: var(--ap-fonte-destaque); font-size: 26px; font-weight: 900; letter-spacing: -0.02em; }
.ap-preco-pix-rotulo { margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--ap-ink-muted); }
.ap-preco-cartao { display: block; font-size: 12px; color: var(--ap-ink-muted); }

.ap-estoque { font-family: var(--ap-fonte-destaque); font-size: 12px; font-weight: 800; text-transform: uppercase; margin: 0 0 12px; }
.ap-estoque-ultima-unidade, .ap-estoque-escasso { color: var(--ap-vermelho); }
.ap-estoque-esgotado { color: var(--ap-ink-muted); }

.ap-produto-cta-form { margin: 0 0 12px; }
.ap-produto-argumentos { list-style: none; margin: 20px 0; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 10px; }

.ap-frete-calc { background: var(--ap-bg); border-radius: 10px; padding: 14px; }
.ap-frete-calc-titulo {
    display: block;
    font-family: var(--ap-fonte-destaque);
    font-weight: 800;
    font-size: 13px;
    color: var(--ap-ink);
    margin-bottom: 8px;
}
.ap-frete-calc-campo { display: flex; gap: 8px; }
.ap-frete-calc-campo input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--ap-borda);
    background: var(--ap-card-bg);
    font-family: var(--ap-fonte-corpo);
    font-size: 14px;
}
.ap-frete-calc-campo button {
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--ap-ink);
    background: var(--ap-card-bg);
    color: var(--ap-ink);
    font-family: var(--ap-fonte-destaque);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
}
.ap-frete-calc-resultado { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--ap-ink); }
.ap-frete-calc-resultado:empty { display: none; }
.ap-produto-descricao-curta { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--ap-ink-muted); }
.ap-produto-ver-descricao {
    display: block;
    margin: 8px 0 20px;
    padding: 0;
    border: none;
    background: none;
    color: var(--ap-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.ap-produto-descricao { font-size: 14px; line-height: 1.6; }
.ap-produto-descricao h2 { font-size: 15px; margin-bottom: 8px; }

/* Lightbox da descricao completa - caixa clara centralizada, rola por
   dentro se o texto for maior que a tela (diferente do lightbox de imagem,
   que e so foto). */
.ap-lightbox-descricao {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(27, 42, 56, 0.7);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ap-lightbox-descricao.aberto { display: flex; }
.ap-lightbox-descricao-caixa {
    position: relative;
    background: var(--ap-card-bg);
    border-radius: 12px;
    padding: 32px 24px 24px;
    max-width: 560px;
    max-height: 80vh;
    overflow-y: auto;
    width: 100%;
}
.ap-lightbox-descricao-caixa h2 { font-size: 17px; margin: 0 0 12px; }
.ap-lightbox-descricao-caixa .ap-lightbox-fechar {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--ap-bg);
    color: var(--ap-ink);
    width: 36px;
    height: 36px;
    font-size: 20px;
}
.ap-produto-whatsapp { font-size: 12px; color: var(--ap-ink-muted); margin-top: 16px; }
.ap-produto-whatsapp a { color: var(--ap-ink); }
.ap-relacionados { margin-top: 24px; }

/* ---------- Mini-carrinho lateral ---------- */
.ap-mini-carrinho-overlay {
    position: fixed; inset: 0; background: rgba(27,42,56,0.5);
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 1000;
}
.ap-mini-carrinho-overlay.aberto { opacity: 1; pointer-events: auto; }
.ap-mini-carrinho {
    position: fixed; top: 0; right: 0; height: 100%; width: min(400px, 100%);
    background: #fff; z-index: 1001; transform: translateX(100%);
    transition: transform 0.25s ease; display: flex; flex-direction: column;
    padding: 20px; overflow-y: auto;
}
.ap-mini-carrinho.aberto { transform: translateX(0); }
.ap-mini-carrinho-topo { display: flex; justify-content: space-between; align-items: center; font-family: var(--ap-fonte-destaque); font-weight: 900; font-size: 17px; margin-bottom: 16px; }
.ap-mini-carrinho-fechar { background: none; border: none; font-size: 22px; cursor: pointer; }
.ap-mini-carrinho-vazio { color: var(--ap-ink-muted); }
.ap-mini-carrinho-itens { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ap-mini-carrinho-item { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 10px; align-items: center; }
.ap-mini-carrinho-item-imagem { position: relative; width: 56px; height: 56px; overflow: hidden; border-radius: 8px; background: #f0f0ee; }
.ap-mini-carrinho-item-imagem img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 8px; }
.ap-mini-carrinho-item-nome { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.ap-mini-carrinho-item-qtd { display: flex; align-items: center; gap: 8px; font-size: 13px; }
/* color explicito nesses botoes - sem isso, o texto usa a cor padrao que o
   navegador escolhe pra <button>, que no Safari/iOS pode virar branca
   automaticamente quando o celular esta no modo escuro do sistema. Como o
   fundo aqui e sempre branco (fixo via CSS), isso resultava em texto branco
   sobre fundo branco, invisivel - confirmado pelo usuario no botao
   "Aplicar" do cupom, no popup do mini-carrinho, no celular. */
.ap-mini-carrinho-item-qtd button { width: 22px; height: 22px; border: 1px solid var(--ap-borda); background: #fff; color: var(--ap-ink); border-radius: 6px; cursor: pointer; }
.ap-mini-carrinho-item-preco { font-family: var(--ap-fonte-destaque); font-size: 14px; font-weight: 800; }
.ap-mini-carrinho-item-remover { background: none; border: none; color: var(--ap-ink-muted); font-size: 16px; cursor: pointer; }
.ap-mini-carrinho-cupom { display: flex; gap: 8px; margin-bottom: 16px; }
.ap-mini-carrinho-cupom input { flex: 1; padding: 9px 10px; border: 1px solid var(--ap-borda); border-radius: 8px; }
.ap-mini-carrinho-cupom button { padding: 9px 14px; border: 1px solid var(--ap-ink); background: #fff; color: var(--ap-ink); border-radius: 8px; cursor: pointer; }
.ap-mini-carrinho-resumo { border-top: 1px solid var(--ap-borda); padding-top: 12px; margin-bottom: 16px; }
.ap-linha { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--ap-ink-muted); }
.ap-linha-total { font-family: var(--ap-fonte-destaque); font-weight: 900; color: var(--ap-ink); font-size: 18px; border-top: 1px solid var(--ap-borda); margin-top: 6px; padding-top: 10px; }
.ap-mini-carrinho-finalizar {
    display: block; text-align: center; background: var(--ap-amarelo); color: var(--ap-ink);
    padding: 14px; border-radius: 10px; font-family: var(--ap-fonte-destaque); font-weight: 900; text-decoration: none; text-transform: uppercase;
}

/* ---------- Desktop (>= 768px) ---------- */
/* Celulares maiores (>480px de largura util) cabem 3 colunas em vez de 2
   sem espremer os cards - antes pulava direto de 2 (mobile) pra 4
   (768px+), deixando uma faixa grande de telas so com 2. */
@media (min-width: 480px) {
    .ap-produtos-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .ap-loja-frete-bar { font-size: 12px; }
    .ap-loja-header-topo { padding: 4px 0 16px; }
    .ap-loja-header { padding: 20px 40px 0; }
    .ap-loja-busca, .ap-secao-ofertas, .ap-secao-produtos, .ap-loja-diferenciais, .ap-loja-footer { padding-left: 40px; padding-right: 40px; }
    .ap-produtos-grid { grid-template-columns: repeat(4, 1fr); }
    .ap-loja-diferenciais { grid-template-columns: repeat(4, 1fr); }
    .ap-produto { flex-direction: row; padding: 32px 40px; gap: 40px; }
    .ap-produto-galeria, .ap-produto-info { flex: 1; }
    .ap-banner { margin: 20px 40px; min-height: 320px; }

    .woocommerce-cart .wc-block-components-sidebar-layout,
    .woocommerce-checkout .wc-block-components-sidebar-layout {
        flex-direction: row !important;
    }
    .woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-sidebar,
    .woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
        width: 100% !important;
        max-width: 350px;
    }
    .woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-main,
    .woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
        width: auto !important;
        flex: 1 1 auto !important;
        padding-right: 4.5283% !important;
    }

    /* Centraliza o conteudo em telas largas, em vez de esticar borda a
       borda - o cabecalho/rodape (fundo) continuam full-width. */
    .ap-loja-header-topo, .ap-loja-busca, .ap-loja-categorias,
    .ap-secao-ofertas > *, .ap-secao-produtos > *,
    .ap-loja-diferenciais, .ap-loja-footer > *, .ap-produto, .ap-banner {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Deixa claro no checkout que o telefone pedido e o WhatsApp - via CSS (nao
   JS) porque o campo e renderizado pelo React do WooCommerce Blocks e um
   texto trocado via JS seria sobrescrito no proximo re-render. */
label[for="shipping-phone"]::after,
label[for="billing-phone"]::after {
    content: " (WhatsApp)";
}

/* Reordena visualmente o formulario de endereco do checkout (WooCommerce
   Blocks) pra CEP vir antes da rua/cidade/estado - o filtro nativo
   woocommerce_get_country_locale (ver includes/checkout-campos.php) so
   afeta o checkout classico, o Blocks usa uma ordem fixa no React. Como o
   container e flex (.wc-block-components-address-form), a propriedade CSS
   order resolve sem precisar mexer no DOM via JS. */
/* A loja so vende pro Brasil (WooCommerce > Geral > Locais de venda), o
   campo Pais so tem uma opcao possivel e ja vem pre-selecionado como
   "Brasil" - so escondemos ele, sem remover do DOM, entao o valor "BR"
   continua sendo enviado normalmente no submit. */
/* !important em tudo aqui - confirmado em teste real (iPhone, Safari) que
   sem isso o CEP aparecia depois de Cidade/Estado, uma ordem completamente
   diferente da testada em Chrome desktop. Order sem !important perde pra
   qualquer style inline que o React do WooCommerce Blocks aplicar (mesmo
   com especificidade CSS menor, inline sempre ganha de external sem
   !important) - forcando garante a ordem em qualquer navegador. */
/* CAUSA RAIZ do CEP "voltando" pra posicao original em telas estreitas:
   o WooCommerce Blocks so deixa esse formulario como display:flex em telas
   largas - em telas estreitas (confirmado testando numa viewport de 390px,
   a largura real de um iPhone) ele vira display:block, e a propriedade CSS
   "order" simplesmente nao tem efeito nenhum fora de um container flex/grid
   (nao e uma questao de especificidade/!important - o navegador ignora
   "order" inteiro em block). Por isso funcionava no Chrome desktop (janela
   larga) e nunca funcionou no celular. Forcamos flex (coluna unica) sempre,
   em qualquer largura, pra "order" ter efeito de verdade. */
.wc-block-components-address-form {
    display: flex !important;
    flex-direction: column !important;
}
.wc-block-components-address-form__country { display: none !important; }
.wc-block-components-address-form__first_name { order: 2 !important; }
.wc-block-components-address-form__last_name { order: 2 !important; }
.wc-block-components-address-form__document { order: 3 !important; }
.wc-block-components-address-form__postcode { order: 4 !important; }
.wc-block-components-address-form__address_1 { order: 5 !important; }
/* Campo "Numero" e de um plugin de terceiros (Woo Better - Campos
   Brasileiros) que o registra sem prioridade, caindo em order:0 por padrao
   e pulando pra frente de tudo (ate do Pais) - forcamos ele pra logo depois
   da rua, antes do complemento, como faz sentido no endereco. */
.wc-block-components-address-form__number { order: 6 !important; }
.wc-block-components-address-form__address_2-toggle,
.wc-block-components-address-form__address_2-hidden-input { order: 6 !important; }
.wc-block-components-address-form__city { order: 7 !important; }
.wc-block-components-address-form__state { order: 8 !important; }
.wc-block-components-address-form__phone { order: 9 !important; }

/* Carrinho, Checkout e Minha Conta sao paginas nativas do WooCommerce e usam
   o cabecalho generico do tema, que tem um menu "Navigation" com bloco
   "Lista de paginas" - lista TODAS as paginas publicadas do site sem
   curadoria (inclusive rascunhos/paginas internas e duplicatas). Escondemos
   so nessas 3 paginas; o rodape com os links certos da loja ja cobre a
   navegacao (ver includes/links-loja.php). Nao afeta a Home nem nenhuma
   outra pagina - confirmado que esse menu nao aparece la. */
.woocommerce-cart .wp-block-navigation,
.woocommerce-checkout .wp-block-navigation,
.woocommerce-account .wp-block-navigation {
    display: none !important;
}

/* Fallback do layout 2 colunas (formulario + resumo do pedido) do
   Carrinho/Checkout nativo do WooCommerce Blocks. Por padrao o WooCommerce
   decide quando empilhar pra 1 coluna via CSS "container query"
   (@container), um recurso recente que navegadores mais antigos (ex.:
   Safari do iPhone 7 Plus, limitado ao iOS 15) simplesmente ignoram -
   ficam travados no layout de 2 colunas mesmo em tela pequena, tudo
   sobreposto e ilegivel. Forcamos 1 coluna por padrao (mobile-first, igual
   o resto deste arquivo) e voltamos pra 2 colunas so a partir do
   breakpoint desktop - via media query tradicional, suportada em
   absolutamente qualquer navegador. */
.wc-block-components-sidebar-layout {
    flex-direction: column !important;
}
.wc-block-components-sidebar-layout .wc-block-components-sidebar,
.wc-block-components-sidebar-layout .wc-block-components-main {
    width: 100% !important;
    padding-right: 0 !important;
}

/* ------------------------------------------------------------------
   Skin nativo: Carrinho, Checkout e Minha Conta
   Essas 3 paginas sao renderizadas pelos blocos nativos do WooCommerce
   (Cart/Checkout blocks) e pelo shortcode classico de Minha Conta - usam o
   tema padrao do site, sem nenhuma cor/fonte da identidade da loja. Aqui
   a gente so pinta por cima com as variaveis --ap-* ja definidas acima,
   sem mexer em estrutura/funcionalidade nenhuma (WooCommerce continua
   dono do HTML, isso e so aparencia). */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
    font-family: var(--ap-fonte-corpo);
    color: var(--ap-ink);
}

.woocommerce-cart h1.wp-block-post-title,
.woocommerce-checkout h1.wp-block-post-title,
.woocommerce-account h1.wp-block-post-title,
.woocommerce-cart .wc-block-components-checkout-step__title,
.woocommerce-checkout .wc-block-components-checkout-step__title,
.woocommerce-cart .wc-block-components-totals-item,
.woocommerce-checkout .wc-block-components-totals-item,
.woocommerce-cart .wc-block-components-product-name,
.woocommerce-checkout .wc-block-components-product-name,
.woocommerce-cart .wc-block-components-button,
.woocommerce-checkout .wc-block-components-button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account .button {
    font-family: var(--ap-fonte-destaque);
}

.woocommerce-cart h1.wp-block-post-title,
.woocommerce-checkout h1.wp-block-post-title,
.woocommerce-account h1.wp-block-post-title {
    font-weight: 800;
    color: var(--ap-ink);
}

/* Botoes (Finalizar pedido, Prosseguir para o checkout, Aplicar cupom,
   Editar endereco, etc.) - mesma cor de destaque dos botoes primarios da
   loja (produto, comprar agora). */
.woocommerce-cart .wc-block-components-button,
.woocommerce-checkout .wc-block-components-button,
.woocommerce-cart .wp-element-button,
.woocommerce-checkout .wp-element-button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account .button {
    background: var(--ap-amarelo) !important;
    color: var(--ap-ink) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    transition: background 0.15s ease;
}
.woocommerce-cart .wc-block-components-button:hover,
.woocommerce-checkout .wc-block-components-button:hover,
.woocommerce-cart .wp-element-button:hover,
.woocommerce-checkout .wp-element-button:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .button:hover {
    background: var(--ap-amarelo-hover) !important;
}
/* Botoes secundarios/discretos (ex.: "Remover" cupom aplicado, links de
   texto que o WooCommerce tambem marca como .wc-block-components-button
   na variante "plain") mantem-se transparentes. */
.woocommerce-cart .wc-block-components-button.is-link,
.woocommerce-checkout .wc-block-components-button.is-link {
    background: transparent !important;
    color: var(--ap-ink) !important;
    text-decoration: underline;
}

/* Campos de formulario (endereco, contato, cupom, editar conta). */
.woocommerce-cart input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-checkout input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-account input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-cart textarea,
.woocommerce-checkout textarea,
.woocommerce-account textarea,
.woocommerce-cart .wc-blocks-components-select__select,
.woocommerce-checkout .wc-blocks-components-select__select,
.woocommerce-account select {
    border: 1px solid var(--ap-borda) !important;
    border-radius: 10px !important;
    background: var(--ap-card-bg);
    color: var(--ap-ink);
}
.woocommerce-cart .wc-block-components-text-input.is-active input,
.woocommerce-checkout .wc-block-components-text-input.is-active input {
    border-color: var(--ap-ink) !important;
}

/* Titulos de cada etapa do checkout (Informacoes de contato, Endereco de
   entrega, Opcoes de entrega, Opcoes de pagamento...). Sem isso, os grupos
   de radio de frete e de pagamento ficam com a mesma caixinha/cor e
   praticamente sem espaco entre eles - dava pra confundir "Frete gratis"
   com uma opcao de pagamento. A linha + espaco maior antes de cada titulo
   (exceto o primeiro) marca visualmente onde uma etapa termina e a
   proxima comeca. */
.woocommerce-checkout .wc-block-components-checkout-step__title {
    font-family: var(--ap-fonte-destaque);
    font-size: 18px;
    font-weight: 900;
    color: var(--ap-ink);
}
/* Numera cada etapa (1. Informacoes de contato, 2. Endereco...) como no
   design - via contador CSS, entao acompanha automaticamente mesmo quando
   uma etapa condicional (ex.: "Endereco de cobranca") aparece ou some. */
.woocommerce-checkout .wc-block-checkout__form {
    counter-reset: ap-etapa;
}
.woocommerce-checkout .wc-block-components-checkout-step {
    counter-increment: ap-etapa;
}
.woocommerce-checkout .wc-block-components-checkout-step__title::before {
    content: counter(ap-etapa) ". ";
}
.woocommerce-checkout .wc-block-components-checkout-step {
    padding-top: 24px;
    border-top: 1px solid var(--ap-borda);
}
.woocommerce-checkout .wc-block-components-checkout-step:first-child {
    padding-top: 0;
    border-top: none;
}

/* Campos de texto/select do checkout - rotulo sempre pequeno e fixo no
   topo (em vez do padrao "flutuante" que so encolhe ao focar/preencher),
   parecido com o rotulo tecnico do design. */
.woocommerce-checkout .wc-block-components-text-input input {
    padding: 20px 12px 8px !important;
}
.woocommerce-checkout .wc-block-components-text-input label,
.woocommerce-checkout .wc-blocks-components-select__label {
    transform: none !important;
    top: 6px !important;
    left: 12px !important;
    font-family: var(--ap-fonte-mono) !important;
    font-size: 9px !important;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ap-ink-muted) !important;
}
.woocommerce-checkout .wc-blocks-components-select__container select {
    padding-top: 20px !important;
    padding-bottom: 8px !important;
}

/* O WooCommerce Blocks nao respeita o 'label' do filtro
   woocommerce_get_country_locale pros campos que ele mesmo renderiza -
   so via CSS mesmo pra troca "Codigo postal" -> "CEP" (nome mais usado no
   Brasil). font-size:0 esconde o texto original sem remove-lo (o campo
   continua acessivel), o ::before mostra o texto novo. */
.woocommerce-checkout .wc-block-components-text-input label[for="shipping-postcode"],
.woocommerce-checkout .wc-block-components-text-input label[for="billing-postcode"] {
    font-size: 0 !important;
}
.woocommerce-checkout .wc-block-components-text-input label[for="shipping-postcode"]::before,
.woocommerce-checkout .wc-block-components-text-input label[for="billing-postcode"]::before {
    content: "CEP";
    font-size: 9px;
}

/* Opcoes de frete/pagamento (radio) e checkboxes. A opcao marcada ganha um
   fundo destacado (nao so a borda) - no design, o metodo de pagamento
   selecionado (normalmente o Pix) se destaca claramente dos outros. */
.woocommerce-checkout .wc-block-components-radio-control__option {
    border: 1px solid var(--ap-borda) !important;
    border-radius: 10px !important;
}
.woocommerce-checkout .wc-block-components-radio-control__option-checked,
.woocommerce-checkout .wc-block-components-radio-control__option--checked-option-highlighted {
    border-width: 2px !important;
    border-color: var(--ap-ink) !important;
    background: #fbfee2 !important;
}
.woocommerce-checkout .wc-block-components-radio-control__input:checked {
    background-color: var(--ap-ink) !important;
    border-color: var(--ap-ink) !important;
}

/* Cartao do resumo do pedido (sidebar do checkout/carrinho). O
   WooCommerce zera o padding-right dessa coluna por padrao
   (padding: 20px 0 20px 20px, confirmado ao vivo) - sem !important nosso
   "padding: 20px" perdia so nesse lado, deixando os precos (Subtotal,
   Total estimado, etc.) colados na borda direita da tela. */
.woocommerce-cart .wc-block-components-sidebar,
.woocommerce-checkout .wc-block-components-sidebar {
    background: var(--ap-card-bg);
    border: 1px solid var(--ap-borda);
    border-radius: 12px;
    padding: 20px !important;
}
.woocommerce-cart .wc-block-components-totals-item,
.woocommerce-checkout .wc-block-components-totals-item {
    color: var(--ap-ink);
}
/* Linha do total: maior destaque e separada por um tracejado, como no
   design - e o numero mais importante da tela toda. */
.woocommerce-cart .wc-block-components-totals-footer-item,
.woocommerce-checkout .wc-block-components-totals-footer-item {
    border-top: 1px dashed var(--ap-borda) !important;
    padding-top: 12px !important;
    margin-top: 4px !important;
}
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-family: var(--ap-fonte-destaque);
    font-weight: 800;
    font-size: 15px;
}
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--ap-fonte-destaque);
    font-weight: 900;
    font-size: 24px;
    letter-spacing: -0.02em;
}

/* Tabela de itens do carrinho. */
.woocommerce-cart .wc-block-cart-items {
    border-top: 1px solid var(--ap-borda);
}
.woocommerce-cart .wc-block-cart-items__row {
    border-bottom: 1px solid var(--ap-borda);
}
/* Confirmado com um iframe de 390px (viewport exato do iPhone 14) que o
   grid de colunas fixas em pixel do WooCommerce (imagem/produto/total)
   nao cabe no espaco real disponivel nessa largura - o preco vazava ~34px
   pra fora da tela, cortado. Abaixo de 480px trocamos pra empilhamento
   simples (cada celula vira uma linha inteira) - garante que nunca vaza,
   independente do tamanho do conteudo. */
@media (max-width: 479px) {
    .wc-block-cart-items__row {
        display: block !important;
    }
    .wc-block-cart-items__row > * {
        width: 100% !important;
        margin: 0 0 8px !important;
    }
}

/* Minha conta: menu (Painel/Pedidos/Detalhes da conta/Sair) e tabela de
   pedidos. O tema desenha essa nav como uma coluna lateral estreita
   (~300px) - mantemos a lista vertical (nao da pra virar abas horizontais
   nesse espaco) e so pintamos com as cores da loja. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
    list-style: none;
    border-bottom: 1px solid var(--ap-borda);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
    display: block;
    padding: 10px 0;
    color: var(--ap-ink-muted);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    color: var(--ap-ink);
    border-left: 3px solid var(--ap-amarelo);
    padding-left: 10px;
}
.woocommerce-account table.shop_table {
    border: 1px solid var(--ap-borda);
    border-radius: 12px;
    border-collapse: separate;
    overflow: hidden;
}
.woocommerce-account table.shop_table th {
    background: var(--ap-bg);
    color: var(--ap-ink);
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
    border-color: var(--ap-borda);
}

/* Barra de progresso do pedido (ver includes/pedido-progresso.php) - so
   decoracao em cima da tabela nativa do WooCommerce na pagina "Ver pedido". */
.ap-pedido-progresso {
    background: var(--ap-card-bg);
    border: 1px solid var(--ap-borda);
    border-radius: 12px;
    padding: 18px 16px;
    margin-bottom: 24px;
}
.ap-pedido-progresso-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.ap-pedido-progresso-numero {
    display: block;
    font-family: var(--ap-fonte-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ap-ink-muted);
    margin-bottom: 4px;
}
.ap-pedido-progresso-atual {
    display: block;
    font-family: var(--ap-fonte-destaque);
    font-weight: 900;
    font-size: 20px;
    color: var(--ap-ink);
}
.ap-pedido-progresso-selo {
    background: var(--ap-amarelo);
    color: var(--ap-ink);
    font-family: var(--ap-fonte-destaque);
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 0.02em;
    padding: 6px 9px;
    border-radius: 5px;
    white-space: nowrap;
}
.ap-pedido-progresso-barra { display: flex; gap: 6px; margin-bottom: 6px; }
.ap-pedido-progresso-barra span { flex: 1; height: 5px; border-radius: 3px; background: var(--ap-borda); }
.ap-pedido-progresso-barra span.ap-preenchido { background: var(--ap-ink); }
.ap-pedido-progresso-rotulos {
    display: flex;
    justify-content: space-between;
    font-family: var(--ap-fonte-mono);
    font-size: 9px;
    letter-spacing: 0.04em;
    color: var(--ap-ink-muted);
}