/*
 * Theme Name:  Briluz Shoptimizer Child
 * Theme URI:   https://briluzeletrica.com.br
 * Description: Child theme do Shoptimizer para Briluz Eletrica
 * Author:      Briluz Eletrica
 * Author URI:  https://briluzeletrica.com.br
 * Template:    shoptimizer
 * Version:     2.4.7
 * License:     GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: briluz-shoptimizer
 * Domain Path: /languages
 */

/* =============================================================================
   DESIGN SYSTEM -- CSS Custom Properties
   Briluz Eletrica | Shoptimizer Child Theme
   ============================================================================= */

:root {
    /* Paleta principal */
    --color-primary: #000000;
    /* Botoes, header, textos principais */
    --color-accent: #ff9502;
    /* Hover/links em fundos escuros, focus ring em fundos escuros */
    --color-highlight: #ffd710;
    /* Badges de promocao, cart counter */
    --color-bg: #ffffff;
    /* Fundo principal */
    --color-bg-alt: #f2f2f2;
    /* Fundo de secoes alternadas */
    --color-text: #282828;
    /* Texto do body */
    --color-border: #c3c3c3;
    /* Bordas, divisores */
    --color-search-bg: #474747;
    /* Campo de busca */

    /* Tokens WCAG AA -- OBRIGATORIOS */
    --color-accent-a11y: #c57200;
    /* Texto de destaque em fundos CLAROS (contraste >= 4.5:1) */
    --color-text-muted: #767676;
    /* Precos riscados, texto desabilitado (contraste 4.54:1 no branco) */
    --color-btn-text: #fff7e5;
    /* Texto dos botoes primarios */

    /* Tokens secundarios -- Estados, hierarquia */
    --color-error: #c62828;
    /* Vermelho de validacao/erro */
    --color-error-bg: #ffebee;
    /* Fundo claro para mensagens de erro */
    --color-success: #2e7d32;
    /* Verde de sucesso/Pix discount */
    --color-success-bg: #e8f5e9;
    /* Fundo claro para mensagens de sucesso */
    --color-success-dark: #1b5e20;
    /* Texto verde escuro em fundos claros */
    --color-text-strong: #1a1a1a;
    /* Texto em alta hierarquia (titulos de cards, etc) */
    --color-text-soft: #888888;
    /* Texto secundario (~placeholder, descricoes leves) */
    --color-text-medium: #666666;
    /* Texto muted variante (links menores, helpers) */
    --color-border-light: #e0e0e0;
    /* Borders suaves (skeleton, free shipping bar, tables) */
    --color-bg-soft: #fbf8f2;
    /* Fundo bege suave (social proof, sidebar destaque, CommerceKit countdown) */

    /* Tokens de marca/brand-specific */
    --color-whatsapp: #25d366;
    /* Verde oficial do WhatsApp (botao flutuante + share button) */

    /* Tipografia */
    --font-family-base: 'Inter', Arial, Helvetica, sans-serif;
    --font-size-body: 14px;
    --font-size-h1: 36px;
    --font-size-h2: 22px;
    --font-size-h3: 18px;
    --font-size-h4: 16px;
    --font-size-price: 24px;
    --font-size-badge: 13px;
    --font-weight-normal: 400;
    --font-weight-semi: 600;
    --font-weight-bold: 700;
    --line-height-body: 1.7;
    --line-height-h1: 1.2;
    --line-height-h2: 1.3;
    --line-height-h3: 1.4;

    /* Botoes */
    --btn-radius: 9999px;
    /* pill-shaped */
    --btn-padding: 15px 20px;

    /* Sombras */
    --shadow-card: 0 2px 2px rgba(0, 0, 0, 0.02);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-footer: 0 -1px 10px rgba(0, 0, 0, 0.1);
    --shadow-side-cart: -4px 0 20px rgba(0, 0, 0, 0.15);

    /* S5: Z-index hierarchy -- side cart > WhatsApp > LGPD
     * Documentado como referencia para S9a (WhatsApp) e S9b (LGPD cookie banner).
     * Side cart precisa estar acima de todos os elementos flutuantes.
     */
    --z-side-cart: 1002;
    --z-whatsapp: 1000;
    /* S9a */
    --z-lgpd: 1003;
    /* S9b */
}

/* AVISO WCAG:
 * --color-accent (#ff9502) e --color-highlight (#ffd710) NAO devem ser usados
 * como COR DE TEXTO em fundos claros (contraste < 4.5:1).
 * Use --color-accent-a11y (#c57200) para texto de destaque em fundos claros.
 * --color-highlight e para FUNDOS somente (texto sobre ele usa #000000).
 * Precos riscados usam --color-text-muted (#767676), NAO --color-border.
 */


/* =============================================================================
   TIPOGRAFIA GLOBAL
   ============================================================================= */

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-body);
    color: var(--color-text);
    /* background herdado do Shoptimizer pai / Customizer — nao sobrescrever */
}

h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h1);
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h2);
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semi);
    line-height: var(--line-height-h3);
}

h4 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semi);
    line-height: var(--line-height-h3);
}


/* =============================================================================
   BOTOES PILL-SHAPED (FR-1.5)
   ============================================================================= */

/* Seletores WooCommerce globais -- base pill-shaped */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce .button {
    border-radius: var(--btn-radius) !important;
    padding: var(--btn-padding);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

/* --- Botao Primario (CTA) ---
 * Cores DELEGADAS ao Customizer do Shoptimizer (Native First).
 * Aqui ficam APENAS propriedades estruturais (radius/shape).
 * Customizer > WooCommerce > Button Color / Text / Hover controla cor.
 */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input[type="submit"].alt,
.woocommerce #respond input#submit.alt,
.single_add_to_cart_button,
.checkout-button,
.wc-block-components-button,
.commercekit_sticky-atc .button {
    border-radius: var(--btn-radius) !important;
}

/* --- Botao Secundario ---
 * Cores delegadas ao Customizer (Native First).
 */

/* --- Botao Terciario (link-style) ---
 * Sem background, sem borda, texto accent-a11y (WCAG AA em fundos claros).
 * Hover: texto muda para preto.
 */
.btn-tertiary,
.woocommerce a.button.btn-link {
    background-color: transparent;
    color: var(--color-accent-a11y);
    border: none;
    border-radius: 0;
    padding: 0;
    text-decoration: none;
}

.btn-tertiary:hover,
.woocommerce a.button.btn-link:hover {
    background-color: transparent;
    color: var(--color-primary);
    text-decoration: underline;
}

/* --- Acessibilidade -- Focus indicator (NFR-3.2) ---
 * Focus ring visivel em todos os botoes interativos.
 */
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input[type="submit"]:focus,
.woocommerce #respond input#submit:focus,
.single_add_to_cart_button:focus,
.checkout-button:focus,
button.button:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* --- Botoes genericos WordPress (fora do WooCommerce) --- */
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
    border-radius: var(--btn-radius);
    padding: var(--btn-padding);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* =============================================================================
   CORREÇÃO DE CONFLITO: MENU STICKY VS COMMERCEKIT STICKY ATC
   ============================================================================= */

/* 1. Força o cabeçalho (Shoptimizer nativo ou Elementor) a grudar no topo na camada máxima */
.site-header,
#masthead,
.elementor-location-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 99 !important;
    /* Acima de tudo, inclusive do side-cart (9999) */
    width: 100%;
}

/* 2. Rebaixa a camada do botão de compra flutuante (CommerceKit) para não atropelar o menu */
.commercekit_sticky-atc {
    z-index: 9990 !important;
    /* Fica abaixo do header e do WhatsApp/LGPD definidos no :root */
}

/* 3. Previne que o menu seja coberto pela barra de administração do WordPress quando logado */
body.admin-bar .site-header,
body.admin-bar #masthead,
body.admin-bar .elementor-location-header {
    top: 32px !important;
}