/* =====================================================================
   Layout "loja" — ajustes do SITE PHP sobre o CSS da loja original
   ---------------------------------------------------------------------
   O CSS em assets/loja/css é o da loja original, sem mudança. Aqui só:
    - o que o SITE PHP acrescenta ao rodapé (bandeiras e selos reais);
    - recursos da loja original que não existem aqui (favoritos/conta);
    - o miolo das páginas do SITE PHP (carrinho, checkout, pedido,
      políticas) com a cara da loja: laranja, DM Sans, fundo cinza.
   ===================================================================== */

body.layout-loja-tema {
    --lj-laranja: #f58220;
    --lj-laranja-esc: #e06f10;
    --lj-texto: #323232;
    /* paleta do style.css do SITE PHP (páginas do site) na cor da loja */
    --primary: #f58220;
    --primary-dark: #e06f10;
    --accent: #f58220;
    --accent-dark: #e06f10;
    --bg: #f5f5f5;
    --text: #323232;
}

/* Favoritos dependem de conta de cliente, que esta loja não tem */
body.layout-loja-tema .vtex-wish-list-1-x-wishlistIconContainer { display: none !important; }
/* minicarrinho: a loja não tem cupom de desconto */
body.layout-loja-tema .minicart-footer__dropdown,
body.layout-loja-tema .minicart-footer__input--coupon,
body.layout-loja-tema .minicart-footer__coupon { display: none !important; }
/* o botão de login ("Entrar / Cadastrar") vira "Meus / pedidos" (leva ao rastreio) */
body.layout-loja-tema .vtex-login-2-x-container .vtex-login-2-x-label:after { content: " pedidos"; }

/* ---- rodapé: formas de pagamento e selos de segurança reais ---- */
.lj-pagamentos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lj-pagamentos .pay-badge { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 30px; background: #fff; border-radius: 4px; overflow: hidden; }
.lj-pagamentos .pay-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lj-selos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lj-selos .trust-seal { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: #fff; border: 1px solid #e5e5e5; border-radius: 999px; color: #323232; text-decoration: none; font-size: 12px; line-height: 1.2; }
.lj-selos .trust-seal-ic { color: #2eb618; display: inline-flex; }
.lj-selos .trust-seal-tx { display: flex; flex-direction: column; }
.lj-selos .trust-seal-tx strong { font-weight: 700; }
.lj-selos .trust-seal-tx span { color: #777; font-size: 11px; }

/* ---- miolo das páginas do SITE PHP dentro do casco da loja ---- */
body.layout-loja-tema .lj-site {
    font-family: 'DM Sans', sans-serif;
    color: var(--lj-texto);
    background: #f5f5f5;
    padding: 24px 0 48px;
    line-height: 1.6;
    flex: 1 0 auto;
}
body.layout-loja-tema .lj-site .container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
body.layout-loja-tema .lj-site h1,
body.layout-loja-tema .lj-site .section-title { font-family: 'DM Sans', sans-serif; color: var(--lj-texto); font-weight: 700; }
body.layout-loja-tema .lj-site .section-title { font-size: 1.6rem; margin-bottom: 16px; text-transform: none; }
body.layout-loja-tema .lj-site a { color: var(--lj-laranja); }
body.layout-loja-tema .lj-site .btn,
body.layout-loja-tema .lj-site button.btn,
body.layout-loja-tema .lj-site .btn-block {
    background: var(--lj-laranja); border-color: var(--lj-laranja); color: #fff; border-radius: 8px; font-family: 'DM Sans', sans-serif; font-weight: 700;
}
body.layout-loja-tema .lj-site .btn:hover { background: var(--lj-laranja-esc); }
body.layout-loja-tema .lj-site .btn-outline { background: #fff; color: var(--lj-laranja); border: 1px solid var(--lj-laranja); }
body.layout-loja-tema .lj-site .box { border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
body.layout-loja-tema .lj-site input,
body.layout-loja-tema .lj-site select,
body.layout-loja-tema .lj-site textarea { font-family: 'DM Sans', sans-serif; }
body.layout-loja-tema .lj-site .breadcrumb a { color: #777; }

/* o rodapé da loja original fica sempre embaixo, mesmo em página curta */
body.layout-loja-tema .vtex-store__template > .flex.flex-column { min-height: 100vh; }

/* ---- página de produto: "Adicionar ao carrinho" (secundário, abaixo do "Comprar") ---- */
body.layout-loja-tema .lj-carrinho-col { margin: -10px 0 22px; }
body.layout-loja-tema .lj-btn-carrinho {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 46px; padding: 0 16px;
    background: #fff; color: #2eb618; border: 2px solid #2eb618; border-radius: 10px;
    font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 700; cursor: pointer;
    transition: background .15s, color .15s;
}
body.layout-loja-tema .lj-btn-carrinho:hover { background: #f1fbef; }
body.layout-loja-tema .lj-btn-carrinho:focus-visible { outline: 2px solid #2eb618; outline-offset: 2px; }
@media (max-width: 576px) {
    /* no celular o "Comprar" vira barra fixa no rodapé; este fica no fluxo da página */
    body.layout-loja-tema .lj-carrinho-col { margin: 4px 0 18px; }
}

/* logo enviado no painel: mantém a proporção dentro do espaço do tema (nunca estica) */
body.layout-loja-tema .vtex-store-components-3-x-logoImage { object-fit: contain; object-position: left center; }