/*
Theme Name:   Organizadores Recife
Theme URI:    https://organizadoresrecife.com.br
Description:  Tema filho de Hello Elementor. Existe para que ajustes de CSS e de
              PHP sobrevivam as atualizacoes do tema pai. Todo codigo proprio do
              projeto mora aqui - nunca no tema pai, nunca em plugin de terceiro.
Author:       Organizadores Recife
Template:     hello-elementor
Version:      1.8.0
Text Domain:  organizadores-recife
*/

/* ---------------------------------------------------------------------------
   Escala de espacamento e cores da marca, como custom properties.

   Os mesmos valores estao nos Global Colors e no Site Settings do Elementor -
   aqui existem para o CSS proprio do tema, que nao tem acesso aos globais do
   Elementor. Alterar em um lugar exige alterar no outro.
   --------------------------------------------------------------------------- */
:root {
    --org-primary:   #292929;
    --org-secondary: #F5F5F5;
    --org-text:      #7A7A7A;
    --org-accent:    #D1BC92;
    --org-border:    #EAEAEA;
    --org-marca:     #6D080E;

    --org-esp-4:   4px;
    --org-esp-8:   8px;
    --org-esp-12: 12px;
    --org-esp-16: 16px;
    --org-esp-24: 24px;
    --org-esp-32: 32px;
    --org-esp-48: 48px;
    --org-esp-64: 64px;
    --org-esp-80: 80px;
    --org-esp-96: 96px;
}

/* ---------------------------------------------------------------------------
   ESCALA TIPOGRAFICA

   O Hello Elementor define 40/32/28/24/20/16px fixos no reset.css. Os valores
   de desktop estao mantidos - o que muda e que agora encolhem junto com a tela,
   em vez de um titulo de 40px em caixa alta ocupar quatro linhas no celular.

   Cada clamp() vai do tamanho de 390px ate o de 1200px de largura. Acima e
   abaixo disso, trava. O h6 nao escala: 16px ja e o tamanho do corpo.

   A entrelinha e o motivo principal desta secao. Os titulos estavam saindo com
   line-height 1, e titulo em caixa alta que quebra em duas linhas encosta uma
   na outra.
   --------------------------------------------------------------------------- */
h1 { font-size: clamp(1.875rem, 1.574rem + 1.235vw, 2.5rem);  line-height: 1.15; }
h2 { font-size: clamp(1.5rem,   1.259rem + 0.988vw, 2rem);    line-height: 1.2; }
h3 { font-size: clamp(1.3125rem, 1.102rem + 0.864vw, 1.75rem); line-height: 1.25; }
h4 { font-size: clamp(1.1875rem, 1.037rem + 0.617vw, 1.5rem); line-height: 1.3; }
h5 { font-size: clamp(1.0625rem, 0.972rem + 0.370vw, 1.25rem); line-height: 1.35; }
h6 { font-size: 1rem; line-height: 1.4; }

/* ---------------------------------------------------------------------------
   FOCO VISIVEL

   Auditoria de 02/09/2026: nenhum elemento do site mostrava foco de teclado.
   outline:none em tudo, e focar nao acrescentava nada - quem navega por Tab
   nao enxergava onde estava.

   Medicao de 02/09/2026 na producao: links e botoes ja mostravam o anel padrao
   do navegador, mas os CAMPOS nao mostravam nada. O kit do Elementor define
   um box-shadow de foco totalmente transparente, e tres plugins - Premium
   Addons, ElementsKit e DataTables - escrevem outline:0 em :focus com
   especificidade alta. Perseguir cada um com seletor mais forte e briga sem
   fim; para uma garantia de acessibilidade, !important e o remedio certo.

   :focus-visible so aparece para teclado; o clique de mouse continua limpo.
   O anel escuro resolve sobre fundo claro, e o halo branco por fora resolve
   sobre a barra bordo do menu, onde o anel escuro sumiria.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--org-primary) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px #FFFFFF !important;
}

/* ---------------------------------------------------------------------------
   ALVOS DE TOQUE

   Na grade da loja, "Adicionar ao carrinho" e "Ver opcoes" tinham 18px de
   altura - sao a acao principal da pagina e a mais dificil de acertar no
   celular. 44px e o minimo recomendado para o dedo.

   Vale ate 1024px porque tablet tambem e toque. No desktop fica como estava.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .added_to_cart {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding-block: var(--org-esp-12);
    }
}


/* ---------------------------------------------------------------------------
   MOVIMENTO

   Quem pede menos animacao no sistema operacional recebe menos animacao.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ---------------------------------------------------------------------------
   Barra de topo: telefone em uma linha
   O widget icon-list nao tem controle de quebra de linha, e "Atendimento ao
   cliente: (81) 99641-3175" quebrava em telas por volta de 1080px, deixando o
   numero orfao na segunda linha. Abaixo de 768 a barra some, entao nao ha
   risco de estouro.
--------------------------------------------------------------------------- */
.org-atendimento-topo .elementor-icon-list-item,
.org-atendimento-topo .elementor-icon-list-text {
    white-space: nowrap;
}

/* --- Barra de compra fixa, so no celular ---------------------------------- */
/*
 * Fica fora da tela por padrao e sobe quando o botao real some. Em vez de
 * display:none, usa translate: o navegador anima sem recalcular layout e a
 * barra nunca entra na ordem de tabulacao enquanto esta escondida (o
 * aria-hidden e o visibility cuidam disso).
 */
.org-comprar-fixo {
    position: fixed;
    z-index: 998;                 /* abaixo do menu mobile do Elementor (999) */
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #e6e2dc;
    box-shadow: 0 -2px 12px rgb(0 0 0 / 8%);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .25s ease, visibility .25s;
}

.org-comprar-fixo.esta-visivel {
    transform: translateY(0);
    visibility: visible;
}

.org-comprar-fixo__preco {
    font-size: 18px;
    font-weight: 500;
    color: #292929;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-comprar-fixo__botao {
    flex: 0 0 auto;
    min-height: 48px;             /* alvo de toque confortavel */
    padding: 12px 32px;
    border: 0;
    background: #6D080E;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.org-comprar-fixo__botao:focus-visible {
    outline: 3px solid #D1BC92;
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .org-comprar-fixo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .org-comprar-fixo { transition: none; }
}

/* --- Categorias da home em recorte redondo -------------------------------- */
/*
 * O Elementor oferece raio de borda, mas nao proporcao. Como a largura da
 * imagem acompanha a coluna e a altura estava fixa em px, um raio de 50%
 * geraria elipse. Aqui a altura passa a ser a propria largura (aspect-ratio),
 * e so entao o raio fecha um circulo de verdade, em qualquer tela.
 *
 * object-fit: cover mantem o enquadramento; object-position sobe um pouco o
 * corte, porque nestas fotos o produto esta acima do centro geometrico -
 * centralizar puro cortaria a peca e deixaria a bancada.
 */
.org-categoria-redonda .elementor-image-box-img img {
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 42%;
}

/* Categorias da home em fileira compacta (02/09/2026)
   Os seis cartoes passaram de 3 por linha (circulo de 365px) para 6, e no
   mobile de 1 para 2. O rotulo herdava h3 do tema - 28px, que numa largura
   de ~170px quebrava em quatro linhas. O clamp acompanha a largura do cartao
   em vez de exigir uma media query por breakpoint. O entreletras tambem cai:
   1,6px foi desenhado para 28px, e em 14px separa demais. */
.org-categoria-redonda .elementor-image-box-title {
    font-size: clamp(0.8125rem, 1.02vw, 0.9375rem);
    line-height: 1.3;
    letter-spacing: 0.06em;
    margin-block: 0;
}

/* Reserva a altura de duas linhas para os circulos nao ficarem desalinhados
   entre "Viagem" (uma linha) e "Closet e guarda-roupa" (duas). */
.org-categoria-redonda .elementor-image-box-content {
    min-height: 2.6em;
}

/* Teto no diametro do circulo.
   Sem isto o tablet fica maior que o desktop: em 1024px sao 3 por linha
   (305px de circulo) contra 6 por linha no desktop (171px) - um salto de 2x
   na fronteira do breakpoint. O teto desliga essa descontinuidade sem exigir
   que a largura da coluna mude, e o circulo fica centrado na coluna. */
.org-categoria-redonda .elementor-image-box-img {
    max-width: 200px;
    margin-inline: auto;
}

/* Contato do menu mobile (02/09/2026)
   Os dois itens viraram link (tel: e mailto:) para discar e escrever com um
   toque. Como link, herdariam o tom claro da marca (#D1BC92), que sobre
   branco da 1,9:1 e reprova WCAG - o telefone ja saia assim. O vinho da marca
   da ~9:1 no mesmo fundo. */
.org-ajuda-menu .elementor-icon-list-text,
.org-ajuda-menu a .elementor-icon-list-text,
.org-ajuda-menu .elementor-icon-list-item a {
    color: #6D080E;
}

/* Alvo de toque de 44px: a linha inteira vira area clicavel, nao so o texto. */
.org-ajuda-menu .elementor-icon-list-item > a {
    display: flex;
    align-items: center;
    min-height: 44px;
}

/* ==========================================================================
   Painel lateral do carrinho - popup 315 (02/09/2026)

   O widget Cart do Elementor Pro desenha a tabela classica do WooCommerce:
   seis colunas, feita para uma pagina de 1200 px. Dentro de um painel de
   400 px a coluna "Produto" ficava com 74 px e o nome do produto quebrava
   uma palavra por linha; o botao de cupom e o Subtotal saiam pela direita.

   O WooCommerce ja traz o empilhamento pronto - e por isso que cada celula
   tem `data-title`. Mas ele so vale sob media query de VIEWPORT, que nunca
   dispara aqui: a janela e larga, quem e estreito e o painel. O empilhamento
   e aplicado pelo contexto (dentro do popup), nao pela largura da tela.
   ========================================================================== */

/* 1. Nada pode ser mais largo que o painel. A coluna interna do widget vinha
      com 425 px dentro de 400 - o `min-width: 0` e o que permite a um item de
      flex/grid encolher abaixo do conteudo. */
#elementor-popup-modal-315 .e-cart__container,
#elementor-popup-modal-315 .e-cart__column-start,
#elementor-popup-modal-315 .e-cart__column-end {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#elementor-popup-modal-315 .e-cart-section,
#elementor-popup-modal-315 .woocommerce-cart-form,
#elementor-popup-modal-315 table.shop_table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: auto;
}

/* 2. A tabela vira lista: o cabecalho some e cada produto vira um cartao. */
#elementor-popup-modal-315 .woocommerce-cart-form thead {
    display: none;
}

#elementor-popup-modal-315 .woocommerce-cart-form tbody {
    display: block;
    width: 100%;
}

/* `tr.cart_item` NAO entra na regra acima de proposito: ela e mais especifica
   (id + duas classes) que a regra de grid abaixo (id + classe), e o
   `display: block` vencia o `display: grid` na cascata. O sintoma era a foto
   sozinha numa linha e o nome embaixo, com espaco morto ao lado. */

#elementor-popup-modal-315 tr.cart_item {
    display: grid;
    grid-template-columns: 56px 1fr 20px;
    grid-template-areas:
        "foto nome remover"
        "foto dados dados";
    gap: 4px 12px;
    align-items: start;
    padding-block: 16px;
    border-bottom: 1px solid #E9E4DC;
}

#elementor-popup-modal-315 tr.cart_item > td {
    display: block;
    padding: 0;
    border: 0;
}

#elementor-popup-modal-315 td.product-thumbnail { grid-area: foto; }
#elementor-popup-modal-315 td.product-name      { grid-area: nome; }
#elementor-popup-modal-315 td.product-remove    { grid-area: remover; text-align: right; }

#elementor-popup-modal-315 td.product-thumbnail img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    display: block;
}

/* O nome ganha a largura toda e para de quebrar palavra por palavra. */
#elementor-popup-modal-315 td.product-name a {
    display: block;
    color: #6D080E;
    line-height: 1.35;
    text-wrap: pretty;
}

/* 3. Preco, quantidade e subtotal viram linhas rotuladas, uma embaixo da
      outra, usando o data-title que o WooCommerce ja escreve. */
#elementor-popup-modal-315 td.product-price,
#elementor-popup-modal-315 td.product-quantity,
#elementor-popup-modal-315 td.product-subtotal {
    grid-area: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
}

#elementor-popup-modal-315 td.product-price::before,
#elementor-popup-modal-315 td.product-quantity::before,
#elementor-popup-modal-315 td.product-subtotal::before {
    content: attr(data-title);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B6157;
    flex: 0 0 auto;
}

/* O 2o e o 3o campo entram na coluna da direita, sob o nome. */
#elementor-popup-modal-315 td.product-price,
#elementor-popup-modal-315 td.product-quantity,
#elementor-popup-modal-315 td.product-subtotal {
    grid-column: 2 / -1;
}

#elementor-popup-modal-315 td.product-quantity .quantity input {
    width: 64px;
    min-height: 36px;
}

/* 4. A linha de acoes e a de cupom param de estourar. */
#elementor-popup-modal-315 td.actions,
#elementor-popup-modal-315 .coupon {
    display: block;
    width: 100%;
    padding-inline: 0;
}

#elementor-popup-modal-315 .coupon .form-row,
#elementor-popup-modal-315 .coupon .coupon-col {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#elementor-popup-modal-315 .coupon input#coupon_code {
    width: 100%;
    box-sizing: border-box;
}

#elementor-popup-modal-315 td.actions button,
#elementor-popup-modal-315 .coupon button {
    width: 100%;
}

/* 5. A tabela de totais tambem e de duas colunas - aqui ela cabe, so precisa
      nao vazar. */
#elementor-popup-modal-315 .cart_totals table,
#elementor-popup-modal-315 .cart_totals table td,
#elementor-popup-modal-315 .cart_totals table th {
    max-width: 100%;
    word-break: normal;
    overflow-wrap: anywhere;
}

#elementor-popup-modal-315 .cart_totals .woocommerce-shipping-methods label {
    line-height: 1.4;
}

/* 6. Alvo de toque no botao de remover - 20px era pequeno demais para o dedo. */
#elementor-popup-modal-315 td.product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -6px -6px 0 0;
}

/* 7. Abaixo de 768 px o CSS responsivo do WooCommerce tambem entra em acao -
      ele empilha a mesma tabela, com regras proprias. As duas somadas davam
      "Produto:" duplicado, um ":" solto sobre a miniatura e tudo alinhado a
      direita. Dentro do painel quem manda e o empilhamento daqui. */
@media (max-width: 767px) {
    #elementor-popup-modal-315 .woocommerce-cart-form td.product-name::before,
    #elementor-popup-modal-315 .woocommerce-cart-form td.product-remove::before,
    #elementor-popup-modal-315 .woocommerce-cart-form td.product-thumbnail::before {
        content: none;
    }

    #elementor-popup-modal-315 .woocommerce-cart-form td,
    #elementor-popup-modal-315 .woocommerce-cart-form td.product-name {
        text-align: left;
    }

    #elementor-popup-modal-315 .woocommerce-cart-form td.product-price,
    #elementor-popup-modal-315 .woocommerce-cart-form td.product-quantity,
    #elementor-popup-modal-315 .woocommerce-cart-form td.product-subtotal {
        text-align: right;
    }

    /* o cartao tem mais espaco aqui: a foto pode crescer */
    #elementor-popup-modal-315 tr.cart_item {
        grid-template-columns: 72px 1fr 24px;
    }

    #elementor-popup-modal-315 td.product-thumbnail img {
        width: 72px;
        height: 72px;
    }
}

/* 8. O nome do produto herdava `text-align: right` da tabela do WooCommerce.
      Ao lado de uma foto alinhada a esquerda, isso lia como erro de montagem. */
#elementor-popup-modal-315 .woocommerce-cart-form td.product-name,
#elementor-popup-modal-315 .woocommerce-cart-form td.product-name a {
    text-align: left;
}

/* 9. Os botoes secundarios do painel - "Atualizar carrinho" e "Aplicar cupom" -
      vinham no azul padrao do WooCommerce (#5BC0DE). Sobre branco isso da
      ~2,1:1, abaixo do minimo de 4,5:1, e a cor nao existe em lugar nenhum do
      resto do site. Ficam no vinho da marca, em contorno, para nao competir
      com o "Finalizar compra", que e a acao principal. */
#elementor-popup-modal-315 .woocommerce-cart-form td.actions button,
#elementor-popup-modal-315 .coupon button {
    background: transparent;
    color: #6D080E;
    border: 1px solid #6D080E;
    min-height: 44px;
}

#elementor-popup-modal-315 .woocommerce-cart-form td.actions button:hover,
#elementor-popup-modal-315 .coupon button:hover {
    background: #6D080E;
    color: #FFFFFF;
}

/* Desabilitado precisa PARECER desabilitado, sem sumir: o WooCommerce desliga
   "Atualizar carrinho" ate a quantidade mudar. */
#elementor-popup-modal-315 .woocommerce-cart-form td.actions button[disabled] {
    color: #9A9089;
    border-color: #D8D2CA;
    background: transparent;
    cursor: not-allowed;
}

#elementor-popup-modal-315 .woocommerce-cart-form td.actions button[disabled]:hover {
    background: transparent;
    color: #9A9089;
}

/* 10. O empilhamento responsivo do WooCommerce alinha TUDO a direita com
       `!important` (woocommerce-smallscreen.css, regra
       `table.shop_table_responsive tr td`). Nao ha especificidade que vença
       isso -
       aqui se responde na mesma moeda, e so para as duas celulas em que o
       alinhamento a direita atrapalha a leitura ao lado da foto. */
@media (max-width: 767px) {
    #elementor-popup-modal-315 .woocommerce-cart-form td.product-name,
    #elementor-popup-modal-315 .woocommerce-cart-form td.product-name a {
        text-align: left !important;
    }
}

/* --- Botao de WhatsApp com horario de atendimento (Fase B, 14/09/2026) ---
 *
 * Fixo no canto inferior direito. Dentro do horario e so o icone; fora dele,
 * aparece ao lado o aviso de quando o atendimento volta. O aviso faz parte do
 * link: tocar nele tambem abre o WhatsApp, e a mensagem fica esperando.
 *
 * Duas coisas tambem ficam fixas no rodape e o botao desvia delas:
 *   - o aviso de cookies, ate ser aceito - a altura vem do JS, porque o texto
 *     quebra em mais ou menos linhas conforme a largura;
 *   - a barra "Comprar" da pagina de produto, so no celular - altura fixa.
 */
.orgrecife-whats {
    --orgrecife-whats-margem: 20px;
    position: fixed;
    z-index: 997;                 /* abaixo da barra Comprar (998), do menu mobile (999) e dos popups */
    right: var(--orgrecife-whats-margem);
    bottom: calc(var(--orgrecife-whats-margem) + var(--orgrecife-whats-cookie, 0px) + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: bottom .25s ease;
}

.orgrecife-whats__icone {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* #128C7E e o verde escuro do proprio WhatsApp: branco sobre ele da 4,1:1.
       O verde claro (#25D366) daria 2:1 e reprovaria o icone (minimo 3:1). */
    background: #128C7E;
    color: #fff;
    box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
    transition: background-color .2s ease;
}

.orgrecife-whats__icone svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.orgrecife-whats:hover .orgrecife-whats__icone {
    background: #0E7266;
}

.orgrecife-whats:focus-visible {
    outline: none;
}

.orgrecife-whats:focus-visible .orgrecife-whats__icone {
    outline: 3px solid var(--org-marca, #6D080E);
    outline-offset: 3px;
}

.orgrecife-whats__aviso {
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - 56px - 10px - 2 * var(--orgrecife-whats-margem));
    padding: 8px 12px;
    background: #fff;
    color: #292929;
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
    border: 1px solid #E6E2DC;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
}

.orgrecife-whats__aviso strong {
    font-weight: 600;
}

/* o display do componente nao pode vencer o atributo hidden */
.orgrecife-whats__aviso[hidden] {
    display: none;
}

.orgrecife-whats__sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    .orgrecife-whats {
        --orgrecife-whats-margem: 16px;
    }

    /* barra Comprar: 75px medidos no Chrome em 390px de largura (a conta
       12 + 48 + 12 + 1 de borda da 73 - a fonte do botao acrescenta 2). A area
       segura do iPhone ela ja soma no proprio padding. */
    body:has(.org-comprar-fixo.esta-visivel) .orgrecife-whats {
        bottom: calc(var(--orgrecife-whats-margem) + 75px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .orgrecife-whats,
    .orgrecife-whats__icone {
        transition: none;
    }
}

@media print {
    .orgrecife-whats {
        display: none;
    }
}