/* ============================================================
   AJUSTES FINAIS DE MARCA — BASICO & CIA.

   Este bloco no projeto original forcava a paleta do cliente
   anterior por cima de tudo com !important, inclusive pintando
   a barra superior e o botao de busca de vermelho. Reescrito
   para a paleta Basico & Cia., alinhado ao cabecalho branco.

   Regra de contraste seguida aqui: o laranja puro (#F57105) NAO
   pode levar texto branco (2,9:1, reprova em WCAG AA). Onde o
   fundo e laranja e o texto e branco, usa-se #B85400 (4,9:1).
   ============================================================ */
:root{
  --marca-azul:#014484;       --marca-azul-esc:#003672;
  --marca-laranja:#F57105;    --marca-laranja-cta:#B85400;
  --marca-laranja-esc:#A34A00;--marca-laranja-claro:#FE8703;
}

/* Faixa institucional do topo (ticker) */
.promo-banner, .promo-ticker{ background:#014484; }

/* CTA principal de compra: laranja acessivel com texto branco */
.btn-primary, .hero .btn-primary, .btn-hero-p,
.pc-btn-cart, .pd-btn-buy,
.ck-submit-btn, .cart-checkout-btn, .btn-cart-finish{
  background:#B85400; color:#FFFFFF;
  border-color:#B85400; font-weight:800;
}
.btn-primary:hover, .hero .btn-primary:hover, .btn-hero-p:hover,
.pc-btn-cart:hover, .pd-btn-buy:hover,
.ck-submit-btn:hover, .cart-checkout-btn:hover{
  background:#A34A00; color:#FFFFFF; border-color:#A34A00;
}

/* CTA secundario e busca: azul da marca */
.search-button, .pd-btn-cart{ background:#014484; color:#FFFFFF; border-color:#014484; }
.search-button:hover, .pd-btn-cart:hover{ background:#003672; border-color:#003672; }

.btn-primary svg, .btn-hero-p svg, .search-button svg,
.pc-btn-cart svg, .pd-btn-buy svg, .pd-btn-cart svg,
.ck-submit-btn svg{ fill:#FFFFFF; }

/* Botao desabilitado nunca herda a cor de CTA */
.pc-btn-cart[disabled], .pd-btn-cart[disabled], .pd-btn-off{
  background:#E0E0E0; color:#5A5A5A; border-color:#E0E0E0; cursor:not-allowed;
}
.pc-btn-cart[disabled]:hover, .pd-btn-cart[disabled]:hover{ background:#E0E0E0; color:#5A5A5A; }

/* Preco em destaque */
.pc-price-now, .price-now, .price-current, .pd-price-now, .pd-price-current{ color:#014484; }

/* Selo de desconto */
.pc-badge-sale, .pill-off, .badge-desconto{ background:#B85400; color:#fff; }

/* Destaques sobre fundo azul escuro: laranja claro mantem leitura */
.idx-about-title, .hero-title em, .hero-content h2 em{ color:#FE8703; }
.idx-cat-card:hover .idx-cat-name{ color:#FE8703; }

/* Selecao de texto e foco da busca */
::selection{ background:#014484; color:#FFFFFF; }
::-moz-selection{ background:#014484; color:#FFFFFF; }
.search-form:focus-within, .search-bar:focus-within{ box-shadow:0 0 0 3px rgba(1,68,132,.18); }

/* ---- Contraste de textos auxiliares (AA) ---- */
.pc-price-old{ color:#5A6B85; }
.catalog-header-meta{ color:#5A6B85; }
.idx-sec-desc{ color:#55606E; }
.pc-pix-price, .pc-pix-off{ color:#0B6B4F; }
.pc-pix-tag{ background:#0B7C6B; color:#fff; }

/* Alvo de toque minimo no celular (acessibilidade) */
@media(max-width:768px){
  .pc-btn-cart, .pd-btn-cart, .pd-btn-buy,
  .btn-primary, .ck-submit-btn, .cart-checkout-btn{ min-height:46px; }
}

/* ============================================================
   ALVOS DE TOQUE NO CELULAR (acessibilidade)

   A auditoria em iPhone e Android encontrou links de 14 px de
   altura no rodapé e nas páginas institucionais — pequenos
   demais para o dedo. O WCAG 2.2 pede 24x24 px de area minima
   (criterio 2.5.8) e o Google recomenda 48 px para conteudo
   tocavel. O padding abaixo resolve sem mudar o visual.
   ============================================================ */
@media (pointer: coarse), (max-width: 768px) {
    .footer-links a,
    .footer-contact a,
    .footer-bottom-links a,
    .inst-conteudo a,
    .inst-dados dd a,
    .pd-info-box a,
    .ct-canal a,
    .rt-form a,
    .mk-filtros a,
    .ms-filtros a,
    .cat-side a,
    .idx-catbar-item {
        display: inline-block;
        min-height: 26px;
        padding-top: 4px;
        padding-bottom: 4px;
        line-height: 1.55;
    }

    /* links dentro de paragrafo nao viram bloco: manteria o
       texto quebrado. Aqui basta a area vertical. */
    .inst-conteudo p a,
    .inst-conteudo li a {
        display: inline;
        padding: 6px 0;
    }

    .footer-bottom-links { gap: 4px 16px; }
    .footer-bottom-links a { padding: 8px 2px; }

    /* botoes e campos: altura confortavel para o dedo */
    button, .btn, input[type="submit"], input[type="button"],
    select, input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="search"], input[type="number"] {
        min-height: 44px;
    }
    .pd-qty-btn, .cart-item-qty button { min-height: 42px; min-width: 42px; }

    /* migalha de pao e links do menu lateral */
    .inst-crumb a, .cat-crumb a, .pd-breadcrumb a, .ck-crumb a {
        display: inline-block;
        min-height: 26px;
        padding: 5px 2px;
    }
    .mobile-footer p a {
        display: inline-block;
        min-height: 30px;
        padding: 6px 0;
    }

    /* Letra miuda com link dentro da frase. O criterio WCAG 2.5.8
       isenta link "inline" no meio de um texto, mas aumentar a
       entrelinha ja deixa o alvo mais confortavel sem quebrar o
       paragrafo. */
    .badge-note, .ck-nota, .ct-lgpd,
    #cookie-consent-banner p, .ck-aceite label {
        line-height: 1.9;
    }
    .ck-nota a, .ct-lgpd a,
    #cookie-consent-banner p a, .ck-aceite label a {
        padding: 7px 1px;
    }

    /* link sozinho dentro do paragrafo: nao e "inline dentro de
       frase", entao precisa de area de toque propria */
    .badge-note a {
        display: inline-block;
        min-height: 30px;
        padding: 7px 2px;
    }

    /* barra superior: visivel do tablet para cima */
    /* nome do produto no cartao: quando cabe numa linha so, o
       link ficava com 16px de altura */
    .pc-name a {
        display: block;
        min-height: 26px;
        padding: 4px 0;
    }
    .top-bar-item a {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 5px 0;
    }
    .top-bar-link {
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
    }
}