/* =========================================================================
   CasaPri — tokens e base
   Identidade real extraída do kit Elementor (docs/referencia/elementor-kit-post-9180.css),
   com as correções de contraste do relatório de conversão (seção 4.4):
   - corpo escurecido de #7A7A7A para #5A5A5A (7:1, passa WCAG AA) e peso 400 (era 300)
   - descartado o amarelo de saldão #FDBF12
   - champagne #D1BC92 nunca recebe texto branco (usar sobre ele #292929)
   ========================================================================= */
:root {
    --ink:            #292929;  /* títulos, header, botão */
    --body:           #5A5A5A;  /* corpo (corrigido) */
    --surface:        #F5F5F5;  /* fundos de seção / moldura da galeria */
    --champagne:      #D1BC92;  /* cor de marca (accent) — só superfície, nunca texto */
    --champagne-2:    #E1CB84;  /* só estado: hover/foco */
    /* Champagne legível: #D1BC92 em texto dá 1,86:1 no branco, reprovado.
       Este é o MESMO dourado escurecido até 5,25:1 (AA folgado, inclusive em
       corpo pequeno). Papel nomeado de propósito — o Defeito 2 do relatório de
       conversão foi dourados sem papel definido brigando entre si. Usar
       exclusivamente em texto; superfície continua sendo --champagne. */
    --champagne-texto: #7D6A3E;
    --border:         #EAEAEA;
    --white:          #FFFFFF;

    --container:      1140px;
    --font-display:   "Jost", system-ui, sans-serif;
    --font-body:      "Heebo", system-ui, sans-serif;

    /* tokens do header (relatorio-header-navbar-casapri.md §4.2) — aliases dos
       tokens acima, nomeados como no relatório, sem hex solto nos componentes */
    --cp-bg-utility:   #1F1F1F;
    --cp-bg-header:    var(--ink);
    --cp-surface:      var(--surface);
    --cp-border:       var(--border);
    --cp-gold:         var(--champagne);
    --cp-gold-hover:   var(--champagne-2);
    --cp-on-dark:      var(--white);
    --cp-on-gold:      var(--ink);
    --cp-text:         var(--body);
    --cp-font-display: var(--font-display);
    --cp-font-body:    var(--font-body);

    --cp-h-utility: 36px;
    /* 76px -> 96px a pedido do Pedro ("o header podia ser mais alto mesmo") —
       passa o orçamento de ≤160px total documentado em
       relatorio-header-navbar-casapri.md (36+96+44=176px), decisão
       deliberada dele por cima daquele número, não um erro de conta. */
    --cp-h-main:    128px; /* Pedro: logo ilegível, pediu uns 33% maior — header pode crescer junto (era 96px) */
    --cp-h-nav:     44px;
    --cp-h-total:   176px;
    --cp-h-condensed: 56px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--body);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    /* Rede de segurança pro full-bleed do hero (home.css): width:100vw +
       margem negativa a partir do centro estoura por uma fração de pixel em
       telas de celular reais (barra de endereço escondendo/aparecendo, área
       de gesto) mesmo com o overflow-x:hidden já aplicado no próprio
       .casapri-hero — aquele hidden só contém o CONTEÚDO do hero, não evita
       que o body inteiro ganhe rolagem horizontal por causa da largura da
       caixa do hero. Aqui pega esse resíduo de qualquer full-bleed do site,
       não só do hero. */
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
}
/* uppercase/tracking só em rótulos curtos e eyebrows — nunca em nome de produto (Defeito 3) */
.casapri-eyebrow {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: .72rem;
    color: var(--champagne);
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--champagne); }

/* ---- acessibilidade: texto só para leitor de tela, skip link, foco visível ---- */
.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}
.casapri-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: .75rem 1.25rem;
    background: var(--ink);
    color: var(--white);
}
.casapri-skip-link:focus {
    left: 1rem;
    top: 1rem;
}
.casapri-header a:focus-visible,
.casapri-header button:focus-visible,
.casapri-header input:focus-visible {
    outline: 2px solid var(--champagne);
    outline-offset: 2px;
}

/* ---- faixa 1: barra utilitária ----
   Só o benefício central agora (Pedro tirou a porta B2B daqui — já tem
   espaço próprio no header/footer/home); uma linha só, centralizada. */
.casapri-topbar {
    background: var(--cp-bg-utility);
    color: var(--white);
    height: var(--cp-h-utility);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-size: .7rem;
    overflow-x: auto;
    white-space: nowrap;
    text-align: center;
}
.casapri-topbar__beneficios { color: var(--white); }

/* ---- faixa 2: header principal ---- */
.casapri-header {
    background: var(--cp-bg-header);
    position: sticky;
    top: 0;
    z-index: 30;
}
.casapri-header__main {
    max-width: var(--container);
    margin: 0 auto;
    min-height: var(--cp-h-main);
    /* Padding vertical zerado de propósito: a logo (grid item "auto" da
       primeira coluna) precisa poder crescer até quase a altura inteira da
       faixa — um padding vertical no container comprimiria ela de novo pro
       mesmo tamanho pequeno que o Pedro reclamou. Busca/ações continuam
       centralizadas verticalmente pelo align-items:center do grid, sem
       precisar de padding próprio. */
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
}
.casapri-header__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    /* stretch: a logo ocupa a altura inteira da faixa principal, não só o
       tamanho da caixa de busca ao lado — pedido explícito do Pedro. */
    align-self: stretch;
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.15rem;
    color: var(--cp-on-dark);
}
/* the_custom_logo() do WordPress envolve a <img> num <a class="custom-logo-link">
   — sem centralizar esse wrapper também, ele pode ficar com folga assimétrica
   (baseline de link inline) mesmo com align-items:center no pai, porque o
   <a> por padrão não estica nem centraliza o próprio conteúdo sozinho. */
.casapri-header__brand a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
/* ~6px de respiro em cima/embaixo — maior que antes (era -20px), a pedido
   do Pedro ("pode ser maior ainda"). display:block tira qualquer espaço
   fantasma de imagem inline (baseline) que atrapalharia a centralização. */
.casapri-header__brand img {
    display: block;
    max-height: calc(var(--cp-h-main) - 6px);
    width: auto;
}

/* ---- busca ---- */
.casapri-search {
    display: flex;
    align-items: stretch;
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
    background: var(--champagne);
    border-radius: 3px;
    overflow: hidden;
}
.casapri-search__input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: .65rem .9rem;
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--cp-on-gold);
}
.casapri-search__input::placeholder { color: var(--cp-on-gold); opacity: .75; }
.casapri-search__input:focus { outline: none; }
.casapri-search__botao {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    border: 0;
    background: transparent;
    color: var(--cp-on-gold); /* #292929 sobre #D1BC92 = 7,85:1 — corrige o D5 do relatório */
    cursor: pointer;
}
.casapri-search__botao:hover,
.casapri-search__botao:focus-visible { color: var(--ink); }

/* ---- conta e carrinho ---- */
.casapri-header__acoes {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    color: var(--cp-on-dark);
}
.casapri-header__conta,
.casapri-header__carrinho {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--cp-on-dark);
    font-family: var(--font-display);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    white-space: nowrap;
}
.casapri-header__conta:hover,
.casapri-header__carrinho:hover,
.casapri-header__conta:focus-visible,
.casapri-header__carrinho:focus-visible { color: var(--champagne); }
.casapri-header__carrinho { position: relative; font-weight: 500; }
.casapri-header__carrinho-contador {
    position: absolute;
    top: -.5rem;
    right: -.75rem;
    min-width: 16px;
    height: 16px;
    padding: 0 .25rem;
    border-radius: 999px;
    background: var(--champagne);
    color: var(--cp-on-gold);
    font-size: .65rem;
    line-height: 16px;
    text-align: center;
}

/* ---- hambúrguer (só mobile, ver breakpoint abaixo) ---- */
.casapri-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--cp-on-dark);
    cursor: pointer;
}
.casapri-header__toggle-icone,
.casapri-header__toggle-icone::before,
.casapri-header__toggle-icone::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
}
.casapri-header__toggle-icone { position: relative; }
.casapri-header__toggle-icone::before,
.casapri-header__toggle-icone::after {
    content: "";
    position: absolute;
    left: 0;
}
.casapri-header__toggle-icone::before { top: -6px; }
.casapri-header__toggle-icone::after { top: 6px; }

/* ---- faixa 3: categorias ---- */
.casapri-header__categorias {
    max-width: var(--container);
    margin: 0 auto;
    min-height: var(--cp-h-nav);
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
/* centralizados como grupo na faixa — evita o vão exagerado entre itens do
   space-between quando o menu tem poucos itens */
.casapri-menu { list-style: none; display: flex; align-items: center; justify-content: center; gap: 2.25rem; margin: 0; padding: 0; width: 100%; }
.casapri-menu li { position: relative; }
.casapri-menu a {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .78rem;
    color: var(--cp-on-dark);
    display: block;
    padding: .6rem 0;
}
.casapri-menu a:hover,
.casapri-menu a:focus-visible { color: var(--champagne); }

/* Outlet: receita real, mas fora da hierarquia de categoria (corrige D4) —
   aplicar a classe CSS "menu-item-outlet" no item em Aparência > Menus. */
.casapri-menu--mobile-extra { display: none; }
.casapri-menu .menu-item-outlet { margin-left: auto; }
.casapri-menu .menu-item-outlet > a {
    font-weight: 400;
    text-transform: none;
    color: var(--cp-text);
    background: var(--white);
    padding: .35rem .7rem;
    border-radius: 2px;
}
.casapri-menu .menu-item-outlet > a:hover,
.casapri-menu .menu-item-outlet > a:focus-visible { color: var(--ink); }

/* ---- submenu (profundidade 2), hover no desktop / clique no touch ----
   A abertura reage a :hover/:focus-within (funciona sem JS); o fechamento
   tem ~150ms de tolerância controlados por header.js via .is-open — sem
   isso, qualquer variação mínima no percurso do mouse entre o item e o
   painel derruba o :hover e o menu pisca (abre/fecha) ao tentar descer
   até um link do submenu. */
.casapri-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: .4rem;
    position: absolute;
    top: 100%;
    left: -.4rem;
    min-width: 210px;
    background: var(--cp-bg-header);
    border-top: 2px solid var(--champagne);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .28);
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
    .casapri-menu .sub-menu { transition: opacity 140ms ease-out, transform 140ms ease-out, visibility 140ms; }
}
.casapri-menu li:hover > .sub-menu,
.casapri-menu li:focus-within > .sub-menu,
.casapri-menu li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.casapri-menu .sub-menu li { position: static; }
.casapri-menu .sub-menu a {
    padding: .55rem .7rem;
    white-space: nowrap;
    color: var(--cp-on-dark);
    border-radius: 2px;
}
.casapri-menu .sub-menu a:hover,
.casapri-menu .sub-menu a:focus-visible {
    background: rgba(209, 188, 146, .12);
    color: var(--champagne);
}
.casapri-menu .menu-item-has-children > a {
    display: flex;
    align-items: center;
    gap: .35em;
}
.casapri-menu .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: .35em;
    height: .35em;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform 140ms ease-out;
}
.casapri-menu li:hover > a::after,
.casapri-menu li:focus-within > a::after,
.casapri-menu li.is-open > a::after {
    transform: rotate(225deg) translate(1px, 1px);
}

/* ---- sticky condensado (ver §5.1) ----
   Só no mobile (dentro de @media max-width:899px, mais abaixo): o Pedro
   pediu que o header do desktop fique sempre no tamanho grande, sem versão
   encolhida ao rolar — a transição/classe .is-condensado (header.js) segue
   ligando normalmente, mas sem regra desktop pra reagir a ela. */
@media (prefers-reduced-motion: no-preference) {
    .casapri-header__main,
    .casapri-header__categorias {
        transition: min-height 200ms ease-out, padding 200ms ease-out;
    }
}

/* ---- site wrapper ---- */
.casapri-site { max-width: var(--container); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

/* ---- página estática genérica (page.php) ----
   Cobre qualquer página sem template próprio (carrinho, checkout, minha
   conta, políticas...). Estilo específico do carrinho mora em cart.css,
   escopado sob .casapri-cart-page — aqui só a casca comum a todas. */
.casapri-page__breadcrumb {
    margin: 0 0 1.25rem;
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--body);
}
.casapri-page__breadcrumb .woocommerce-breadcrumb a {
    color: var(--body);
    text-decoration: none;
}
.casapri-page__breadcrumb .woocommerce-breadcrumb a:hover {
    color: var(--ink);
    text-decoration: underline;
}
.casapri-page__title {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.7rem;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 1.75rem;
}
.casapri-page__content {
    font-family: var(--font-body);
    color: var(--body);
    line-height: 1.7;
}

/* ---- footer ---- */
.casapri-footer { border-top: 1px solid var(--border); background: var(--surface); }

/* logo no começo do rodapé (pedido do Pedro) — mesmo componente
   the_custom_logo() do header, só o tamanho é próprio daqui. */
.casapri-footer__logo {
    display: flex;
    justify-content: center;
    padding: 2.5rem 1.25rem 0;
}
.casapri-footer__logo img { display: block; max-height: 64px; width: auto; }
.casapri-footer__logo-texto {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.1rem;
    color: var(--ink);
}
.casapri-footer__inner { max-width: var(--container); margin: 0 auto; padding: 2.5rem 1.25rem; text-align: center; }
.casapri-footer__brand {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--ink);
    margin: 0 0 .35rem;
}
.casapri-footer__note { font-size: .85rem; color: var(--body); margin: 0; }

/* faixa de confiança: parcelamento, frete, troca, segurança (dados reais —
   ver relatório de conversão §"banners de confiança") */
.casapri-footer__trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 2rem;
    margin: 0;
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: .75rem;
    color: var(--ink);
}

/*
 * Colunas de links (Contato/Institucional/Políticas/Links rápidos) — mesma
 * informação que o rodapé em produção (casapri.com.br) já tinha, só
 * reconstruída nos componentes deste tema.
 */
.casapri-footer__colunas-wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 0;
}
.casapri-footer__colunas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem 1.5rem;
}
.casapri-footer__titulo-coluna {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: .8rem;
    color: var(--ink);
    margin: 0 0 1rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--champagne);
    display: inline-block;
}
.casapri-footer__titulo-coluna--redes { margin-top: 1.5rem; }
.casapri-footer__lista,
.casapri-footer__contato {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    font-size: .88rem;
}
.casapri-footer__lista a,
.casapri-footer__contato a { color: var(--body); }
.casapri-footer__lista a:hover,
.casapri-footer__contato a:hover { color: var(--champagne-texto); }
.casapri-footer__contato li { color: var(--body); }

.casapri-footer__redes {
    list-style: none;
    display: flex;
    gap: .6rem;
    margin: 0;
    padding: 0;
}
.casapri-footer__redes a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--white);
    transition: background .15s ease;
}
.casapri-footer__redes a:hover { background: var(--champagne-texto); color: var(--white); }

/* ---- selos de segurança + formas de pagamento, numa linha só ----
   Badge de texto, não logotipo oficial (ver comentário em footer.php).
   Pedido do Pedro: os dois grupos juntos, logo no começo do rodapé (antes
   das colunas), não mais duas seções empilhadas lá embaixo. */
.casapri-footer__selos-pagamento {
    max-width: var(--container);
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem 2.5rem;
}
.casapri-footer__selos-pagamento-grupo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}
.casapri-footer__selos-pagamento-rotulo {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .75rem;
    color: var(--body);
}
.casapri-footer__badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
}
.casapri-footer__badges li {
    font-family: var(--font-body);
    font-size: .76rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: .35rem .7rem;
}

.casapri-footer__topo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 2rem auto 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.casapri-footer__topo:hover { border-color: var(--champagne); color: var(--champagne-texto); }

/* ---- faixa legal: razão social/CNPJ/endereço ---- */
.casapri-footer__legal {
    max-width: var(--container);
    margin: 2rem auto 0;
    padding: 1.5rem 1.25rem 0;
    border-top: 1px solid var(--border);
    text-align: center;
}
.casapri-footer__legal p {
    margin: 0;
    font-size: .78rem;
    color: var(--body);
}

/* ---- mobile (< 900px), ver relatório §5.3: altura total ≤ 64px ---- */
@media (max-width: 899px) {
    body { font-size: 15px; }

    /* faixa 1 some inteira — a porta B2B reaparece como item da nav lateral (abaixo) */
    .casapri-topbar { display: none; }

    /*
     * Duas linhas (pedido do Pedro): hambúrguer + logo + carrinho em cima,
     * busca embaixo, largura cheia. grid-template-areas em vez de depender
     * da ordem do DOM (header.php lista brand → busca → ações → toggle) —
     * áreas nomeadas colocam cada item onde precisa, sem reordenar HTML.
     */
    .casapri-header__main {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "toggle brand acoes"
            "busca  busca busca";
        min-height: auto;
        padding: .6rem .75rem;
        gap: .6rem .5rem;
    }
    .casapri-header__toggle { grid-area: toggle; }
    .casapri-header__brand {
        grid-area: brand;
        justify-self: center;
    }
    /* "Logo grande" (pedido do Pedro) — subiu de 32px pro triplo, mas com
       teto próprio (não herda calc(var(--cp-h-main) - 6px) do desktop: a
       faixa mobile não tem altura fixa, min-height:auto, então usar o token
       do main de 96px deixaria a logo enorme e esticaria a linha toda). */
    .casapri-header__brand img { max-height: 70px; } /* era 32px, depois 52px; +33% a pedido do Pedro */
    .casapri-header__acoes { grid-area: acoes; }

    .casapri-search {
        grid-area: busca;
        max-width: none;
    }
    .casapri-search__input { padding: .55rem .6rem; font-size: .85rem; }

    .casapri-header__acoes { gap: .75rem; }
    .casapri-header__conta { display: none; } /* some do header, continua na nav lateral */
    .casapri-header__carrinho-total { display: none; } /* só o ícone + contador cabem no mobile */

    .casapri-header__toggle { display: inline-flex; }

    /* nav de categorias vira menu lateral em acordeão, fechado por padrão */
    .casapri-header__categorias {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 85vw);
        max-width: none;
        padding: 4rem 1.25rem 2rem;
        background: var(--cp-bg-header);
        border-top: 0;
        overflow-y: auto;
        transform: translateX(100%);
        visibility: hidden;
    }
    @media (prefers-reduced-motion: no-preference) {
        .casapri-header__categorias { transition: transform 200ms ease-out; }
    }
    .casapri-header__categorias.is-aberto {
        transform: translateX(0);
        visibility: visible;
    }

    .casapri-menu { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; }
    .casapri-menu .menu-item-outlet { margin-left: 0; }
    .casapri-menu .menu-item-outlet > a { background: transparent; color: var(--champagne); padding: .6rem 0; }
    .casapri-menu--mobile-extra {
        display: flex;
        flex-direction: column;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }
    .casapri-menu--mobile-extra a { text-transform: none; letter-spacing: normal; font-family: var(--font-body); }

    /* sub-menu vira acordeão: escondido até o item pai receber .is-open (JS).
       Reseta a transição em opacity/transform do desktop — aqui é display puro. */
    .casapri-menu .sub-menu {
        display: none;
        position: static;
        border: 0;
        border-left: 2px solid var(--champagne);
        box-shadow: none;
        padding: 0 0 0 1rem;
        min-width: 0;
        background: transparent;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition: none;
    }
    .casapri-menu li.is-open > .sub-menu { display: block; }
    .casapri-menu .sub-menu a { white-space: normal; }

    .casapri-header.is-condensado .casapri-header__main { min-height: 56px; padding: .5rem .75rem; }
    .casapri-header.is-condensado .casapri-header__categorias { display: none; }
    .casapri-header.is-condensado .casapri-header__brand img { max-height: 32px; }

    .casapri-footer__trust { gap: .5rem 1.25rem; font-size: .7rem; }
    .casapri-footer__colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
}

@media (max-width: 599px) {
    .casapri-footer__colunas { grid-template-columns: 1fr; }
}