/* ==========================================================================
   AMOR NATURAL — IDENTIDADE VISUAL
   Tokens extraídos de design-reference/styles.css (fonte de verdade do design).
   Fontes carregadas via wp_enqueue_style em functions.php (Google Fonts).
   ========================================================================== */

/* Trava de segurança: elementos com scroll horizontal (carrossel do hero) não
   devem nunca causar overflow horizontal na página inteira. */
html, body { overflow-x: hidden; max-width: 100%; }

:root {
    /* Fundos */
    --bg-main: #FBF9F5;
    --bg-surface: #FFFFFF;
    --bg-card-glass: rgba(255, 255, 255, 0.85);
    --bg-accent: #F2ECE4;
    --bg-dark: #111D12;
    --bg-dark-card: #19271B;

    /* Texto */
    --text-primary: #172418;
    --text-secondary: #4F5D50;
    --text-muted: #829283;

    /* Verde (marca) */
    --brand-green-dark: #152E18;
    --brand-green-main: #234E27;
    --brand-green-gradient: linear-gradient(135deg, #27572C 0%, #17361A 100%);
    --brand-green-light: #447C4A;
    --brand-sage: #8BA988;
    --brand-sage-light: #EBF2EB;

    /* Dourado (destaque premium) */
    --brand-gold: #C69238;
    --brand-gold-gradient: linear-gradient(135deg, #D6A449 0%, #B27E27 100%);
    --brand-gold-light: #FDF8EF;
    --brand-gold-glow: rgba(198, 146, 56, 0.25);

    /* Laranja (CTA de compra) */
    --brand-orange: #E08225;
    --brand-orange-hover: #C96F1A;
    --brand-warning: #DE6422;

    /* Tipografia */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    /* Sombras */
    --shadow-soft: 0 4px 20px rgba(21, 46, 24, 0.05);
    --shadow-md: 0 10px 30px rgba(21, 46, 24, 0.08);
    --shadow-hover: 0 16px 40px rgba(21, 46, 24, 0.14);
    --shadow-glow: 0 8px 25px rgba(35, 78, 39, 0.25);

    /* Raio de borda */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 999px;

    /* Transições */
    --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-normal: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --------------------------------------------------------------------
       Alias de compatibilidade: o CSS funcional já existente (checkout,
       carrinho, cards de produto, minha-conta) foi escrito em cima destes
       nomes --an-*. Redefinindo o valor deles aqui, toda essa base herda a
       nova identidade sem precisar reescrever regra por regra.
       -------------------------------------------------------------------- */
    --an-verde: var(--brand-green-main);
    --an-laranja: var(--brand-orange);
    --an-terracota: var(--brand-orange-hover);
    --an-bege: var(--bg-accent);
    --an-fundo: var(--bg-main);
    --an-texto: var(--text-primary);
    --an-borda: var(--bg-accent);
}

/* ==========================================================================
   Tipografia global
   ========================================================================== */

body {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.site-title,
.woocommerce-products-header__title,
.product_title,
.ast-woocommerce-container .woocommerce-Tabs-panel h2 {
    font-family: var(--font-heading);
}

/* ==========================================================================
   Conteúdo geral do site: novo padrão é usar quase toda a largura da tela
   (como já era feito no cabeçalho), em vez do max-width:1240px padrão do
   Astra — em monitores largos sobrava ~330px de vazio de cada lado.
   Especificidade BAIXA de propósito (só a classe, sem "body.xxx" na frente):
   isso faz esta regra virar o novo "padrão" sem atropelar as páginas que já
   têm uma largura própria mais específica — carrinho/checkout/conta
   (1180px, de propósito, ver style.css) e capa/sobre/blog (100%, já mais
   específico que isto). Se precisar mudar a largura de alguma página
   específica, sempre com um seletor mais específico que este.
   ========================================================================== */
.ast-container {
    max-width: 100% !important;
    padding-left: 24px;
    padding-right: 24px;
}

/* ==========================================================================
   Cabeçalho: usa mais largura que o conteúdo (mesmo container .ast-container
   do Astra). Necessário desde que o menu ganhou mais itens (Início, ícones
   de favoritos/carrinho) — em 1240px (largura padrão do conteúdo) o logo
   colidia com o menu em várias páginas.
   Especificidade alta de propósito: style.css já tem
   "body.woocommerce-cart .ast-container { max-width:1180px !important }"
   (correto para o CONTEÚDO dessas páginas) que usa a mesma classe .ast-container
   do cabeçalho — precisamos vencer essa regra só aqui, sem alterá-la.
   ========================================================================== */
body .ast-primary-header-bar .site-primary-header-wrap.ast-container {
    max-width: 100% !important;
    padding-left: 24px;
    padding-right: 24px;
}

/* ==========================================================================
   Páginas de conteúdo full-width (capa, sobre, blog) — sem a sidebar padrão
   do Astra, que senão sobra como uma coluna vazia à esquerda.
   IDs: 13555 = capa, 13558 = sobre, 13563 = blog.
   ========================================================================== */
body.page-id-13555 #secondary,
body.page-id-13558 #secondary,
body.page-id-13563 #secondary {
    display: none !important;
}

body.page-id-13555 #primary,
body.page-id-13558 #primary,
body.page-id-13563 #primary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

body.page-id-13555 .ast-container,
body.page-id-13558 .ast-container,
body.page-id-13563 .ast-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* ==========================================================================
   Primitivas reutilizáveis entre páginas de conteúdo (capa, sobre, blog)
   ========================================================================== */

.an-home-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.an-home-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--brand-gold);
    margin-bottom: 8px;
}

.an-tag-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: 16px;
}

.an-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: var(--transition-normal);
    text-decoration: none !important;
}

.an-btn-emerald { background: var(--brand-green-gradient); color: #FFF !important; box-shadow: var(--shadow-glow); }
.an-btn-emerald:hover { transform: translateY(-3px); box-shadow: 0 14px 35px rgba(35, 78, 39, 0.35); }

.an-btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: #FFF !important;
    background: rgba(255, 255, 255, 0.05);
}
.an-btn-outline-light:hover { background: rgba(255, 255, 255, 0.2); border-color: #FFF; transform: translateY(-2px); }

.an-btn-gold { background: var(--brand-gold-gradient); color: #FFF !important; box-shadow: 0 8px 25px var(--brand-gold-glow); }
.an-btn-gold:hover { transform: translateY(-3px); box-shadow: 0 14px 35px rgba(198, 146, 56, 0.4); }

.an-page-banner {
    background-color: var(--brand-green-dark);
    background-image: linear-gradient(rgba(21, 46, 24, 0.9), rgba(21, 46, 24, 0.9));
    color: #FFF;
    padding: 90px 0;
    text-align: center;
}

.an-page-banner-title {
    font-family: var(--font-heading);
    font-size: 44px;
    margin: 12px 0 0;
    color: #fff;
}

.an-page-banner-sub {
    font-size: 17px;
    opacity: 0.9;
    max-width: 640px;
    margin: 12px auto 0;
}

.an-section-padding { padding: 80px 0; }

.an-newsletter-box {
    background: var(--brand-green-gradient);
    color: #FFF;
    border-radius: var(--radius-lg);
    padding: 56px 48px;
    text-align: center;
}

.an-newsletter-box h2 { font-family: var(--font-heading); font-size: 32px; margin: 0 0 10px; color: #fff; }
.an-newsletter-box p { opacity: 0.9; max-width: 520px; margin: 0 auto 28px; font-size: 15px; }

.an-newsletter-form { display: flex; gap: 12px; max-width: 480px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }

.an-newsletter-form input {
    flex: 1 1 260px;
    padding: 15px 22px;
    border-radius: var(--radius-full);
    border: none;
    outline: none;
    font-size: 14px;
    font-family: var(--font-body);
}

/* O SureForms embrulha o botão de envio num .wp-block-button (bloco nativo do
   Gutenberg), que vem com text-align:left fixo por padrão — isso sobrepõe o
   text-align:center do .srfm-submit-container e deixa o botão à esquerda. */
.an-newsletter-form .wp-block-button {
    text-align: center !important;
}

/* ==========================================================================
   Cabeçalho — barra superior, ícones (favoritos/carrinho) e mega-menu
   ========================================================================== */

.an-top-bar {
    background-color: var(--brand-green-dark);
    color: #DCE8DB;
    font-size: 12.5px;
    padding: 8px 0;
}

.an-top-bar-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.an-top-bar-links { display: flex; align-items: center; gap: 10px; }
.an-top-bar-links a { color: #DCE8DB; font-weight: 500; text-decoration: none; }
.an-top-bar-links a:hover { color: var(--brand-gold); }
.an-top-bar-sep { width: 1px; height: 12px; background: rgba(255,255,255,0.3); display: inline-block; }

.an-header-icon-item { display: flex; align-items: center; }

.an-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 18px;
    color: var(--text-primary);
    text-decoration: none !important;
    cursor: pointer;
}

.an-wishlist-btn { opacity: 0.55; cursor: not-allowed; }

.an-icon-count {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--brand-orange);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* Dropdown tradicional (em lista) do item "Loja" — categorias reais do WooCommerce.
   !important em position/display de propósito: já tivemos regras do Astra (ex.:
   .ast-header-break-point .main-header-menu .sub-menu { position: static }) brigando
   por especificidade com isso, e o dropdown acabava virando bloco "inline" e empurrando
   o cabeçalho pra baixo em vez de flutuar por cima. Não remover os !important sem
   testar em várias larguras de tela. */
li.menu-item.an-has-mega {
    position: relative !important;
}

ul.an-simple-dropdown {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 9999 !important;
    background: var(--bg-surface);
    box-shadow: var(--shadow-hover);
    border-top: 3px solid var(--brand-green-main);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    list-style: none;
    margin: 0 !important;
    padding: 8px 0;
    width: 220px !important;
}

li.menu-item.an-has-mega:hover ul.an-simple-dropdown { display: block !important; }

.an-simple-dropdown li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
}

.an-simple-dropdown a {
    display: block;
    padding: 10px 20px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4 !important;
    text-decoration: none;
    white-space: nowrap;
}

.an-simple-dropdown a:hover { background: var(--bg-accent); color: var(--brand-green-main); }

.an-simple-dropdown-all {
    border-top: 1px solid var(--bg-accent);
    margin-top: 6px !important;
    padding-top: 6px !important;
}

.an-simple-dropdown-all a { color: var(--brand-green-main); font-weight: 700; }

@media (max-width: 992px) {
    .an-page-banner { padding: 56px 0; }
    .an-page-banner-title { font-size: 30px; }
    .an-newsletter-box { padding: 40px 24px; }
    .an-newsletter-box h2 { font-size: 24px; }
    .an-top-bar-content { justify-content: center; text-align: center; }
}

/* O dropdown do "Loja" fica SEMPRE position:absolute (nunca static/em fluxo) —
   já foi tentado deixar "static" no mobile e isso fazia o dropdown empurrar o
   cabeçalho inteiro pra baixo (esticando o header) em vez de flutuar por cima. */