/*
Theme Name: Planac Outlet
Theme URI: https://planacdistribuidora.com
Description: Child theme do Storefront com a identidade visual da Planac Distribuidora (tokens extraídos do repositório planacdistribuidora.com, branch dev + vitrine /produtos/). Loja de queima de estoque — Londrina e região.
Author: Planac Distribuidora
Author URI: https://planacdistribuidora.com
Template: storefront
Version: 1.59.0
Text Domain: planac-outlet
*/

/* ==========================================================================
   TOKENS — valores canônicos do DESIGN-SYSTEM.md do site institucional
   ========================================================================== */
:root {
    /* Vermelhos de marca */
    --planac-red: #ED282E;          /* primário de interface */
    --planac-red-hover: #C92227;    /* hover de botões */
    --planac-red-dark: #AA000E;     /* institucional (theme-color) */
    --planac-red-soft: #fff0f0;     /* chip claro */
    --planac-whatsapp: #25D366;
    --planac-whatsapp-hover: #1da851;

    /* Neutros (tema claro do site) */
    --planac-title: #1a1a1a;
    --planac-text: #333;
    --planac-body: #444;
    --planac-muted: #666;
    --planac-faint: #777;
    --planac-icon-muted: #9a9a9a;
    --planac-bg-page: #f6f7f9;      /* fundo da vitrine /produtos/ */
    --planac-bg-alt: #fafafa;
    --planac-bg-input: #eef0f2;
    --planac-border: #e6e8ec;       /* borda de card da vitrine */
    --planac-border-soft: #eee;

    /* Raios */
    --planac-radius-btn: 4px;
    --planac-radius-input: 10px;
    --planac-radius-card: 12px;
    --planac-radius-media: 14px;
    --planac-radius-pill: 999px;

    /* Sombras */
    --planac-shadow-header: 0 1px 3px rgba(0,0,0,.1);
    --planac-shadow-card-hover: 0 10px 26px rgba(0,0,0,.1);
    --planac-shadow-menu: 0 8px 24px rgba(0,0,0,.14);

    /* Chevron para baixo, tracado centrado no viewBox 24x24 */
    --planac-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ==========================================================================
   FONTES — Barlow self-hosted (mesmos arquivos do site)
   ========================================================================== */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/fonts/barlow-800.woff2') format('woff2'); }

/* ==========================================================================
   BASE
   ========================================================================== */
body,
button, input, select, textarea,
.site-header, .main-navigation,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
    background: #fff;
    color: var(--planac-text);
    line-height: 1.6;
}
/* Vitrine (catálogo, categorias, busca) mantém o cinza da vitrine; as demais
   páginas (carrinho, checkout, conta, ficha, institucionais) ficam brancas. */
body.woocommerce-shop,
body.post-type-archive-product,
body.tax-product_cat,
body.search-results,
body.search {
    background: var(--planac-bg-page);
}
/* Rodapé sempre colado no fim, mesmo em página curta — sem faixa cinza flutuando
   sob ele nem "pulo" de posição conforme a altura do conteúdo. */
#page.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#page.site > .site-content {
    flex: 1 0 auto;
}
h1, h2, h3, h4 { color: var(--planac-title); font-weight: 700; }
h1 { font-weight: 800; }
a { color: var(--planac-red); }
a:hover { color: var(--planac-red-hover); }

/* Largura de conteúdo no padrão da vitrine (1240px) */
.col-full { max-width: 1240px; }

/* ==========================================================================
   HEADER — branco, fixo em desktop, filete vermelho de 1.5px (padrão do site)
   ========================================================================== */
.site-header,
.storefront-handheld-footer-bar {
    background-color: #fff;
    color: var(--planac-text);
}
/* Cabecalho fixo, acompanhando a rolagem — como o .header do site.
   A altura real e medida pelo JS e gravada em --planac-header-h, porque ela
   muda quando o menu quebra linha ou quando a barra do admin aparece. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 1.5px solid var(--planac-red);
    box-shadow: var(--planac-shadow-header);
}
body { padding-top: var(--planac-header-h, 84px); }
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .site-header { top: 46px; }
}

/* Cabecalho em uma linha: logo + categorias | tema, carrinho
   ATENCAO: no Storefront real, navegacao, botao de tema e carrinho sao IRMAOS
   do .col-full dentro do <header>, nao filhos dele. Por isso o flex vai no
   proprio header, e o .col-full vira apenas mais um item da linha. */
.site-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* nowrap no desktop: a linha nao pode quebrar. Antes, sobrava espaco que se
       distribuia nas pontas e o carrinho caia para uma segunda linha. */
    flex-wrap: nowrap;
    gap: 10px 28px;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 1;
    /* centraliza o conteudo em 1240px sem precisar de um container extra */
    padding-left: max(20px, calc((100% - 1240px) / 2));
    padding-right: max(20px, calc((100% - 1240px) / 2));
}
.site-header > .col-full {
    order: 1;
    padding: 0;
    line-height: 0;
    align-items: center;
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}
.site-header > .main-navigation { order: 2; flex: 0 1 auto; min-width: 0; margin: 0 auto 0 0; width: auto; }
.site-header > .site-header-cart {
    order: 4;
    flex: none;
    margin: 0;
    display: flex;
    align-items: center;
    position: relative;
    list-style: none;
    padding: 0;
}
.site-header > .site-header-cart > li { list-style: none; margin: 0; }

/* O mini-carrinho precisa FLUTUAR. No fluxo, ele empurrava o carrinho para
   270px de largura e derrubava a linha inteira do cabecalho.
   No HTML real ele e o SEGUNDO <li> da lista, contendo div.widget.woocommerce
   — nao um elemento .widget_shopping_cart, como eu tinha suposto. */
.site-header .site-header-cart > li + li,
.site-header .site-header-cart .widget_shopping_cart {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    max-width: 90vw;
    background: #fff;
    border-radius: var(--planac-radius-card);
    box-shadow: var(--planac-shadow-menu);
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 1002;
}
.site-header .site-header-cart:hover > li + li,
.site-header .site-header-cart:focus-within > li + li,
.site-header .site-header-cart:hover .widget_shopping_cart,
.site-header .site-header-cart:focus-within .widget_shopping_cart {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.site-header > script { display: none; }

/* O Storefront usa clearfix (::before/::after com display:table) no header.
   Num container flex esses pseudo-elementos viram ITENS do flex e ocupam
   espaco real — era o que empurrava a marca e apertava o menu. */
.site-header::before,
.site-header::after { content: none; display: none; }

/* O Storefront larga larguras percentuais e float nos itens do cabecalho com
   .woocommerce-active .site-header .X — tres classes (0-3-0), que vencem um
   .site-header > .X (0-2-0). Igualamos a especificidade em vez de recorrer a
   !important, e como este arquivo carrega depois, a nossa regra prevalece. */
.woocommerce-active .site-header > .col-full,
.woocommerce-active .site-header > .main-navigation,
.woocommerce-active .site-header > .site-header-cart {
    width: auto;
    float: none;
    clear: none;
}
.woocommerce-active .site-header > .main-navigation { flex: 0 1 auto; min-width: 0; }
.woocommerce-active .site-header > .site-header-cart { flex: none; }

/* Sem logo enviado, o Storefront usa o titulo em texto — deixa discreto. */
.site-header .site-title { font-size: 20px; font-weight: 800; margin: 0; line-height: 1.1; white-space: nowrap; }
.site-header .site-description { display: none; }

.site-header .main-navigation ul.menu,
.site-header .main-navigation ul.nav-menu,
.site-header .main-navigation div.menu > ul {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}
/* O menu automatico de paginas sai duplicado; so o primeiro interessa. */
.site-header .main-navigation div.menu ~ div.menu { display: none; }

/* Botao de menu do mobile: some no desktop. */
.site-header .menu-toggle { display: none; }

@media (max-width: 1180px) {
    .site-header .main-navigation ul.menu { gap: 18px; }
}
/* 1120 e nao 900: as seis categorias ocupam 801 px de menu; com o logo e o
   carrinho, a linha so fecha a partir de ~1120 px. Entre 901 e 1120
   "Ferramentas" terminava em 1007 px e o carrinho comecava em 901 — um por
   cima do outro. */
@media (max-width: 1120px) {
    .site-header { flex-wrap: wrap; }
    /* O botao do menu fica na MESMA linha do logo; o menu aberto desce
       sobreposto, para nao empurrar o conteudo nem inflar o cabecalho fixo. */
    /* O botao do menu vai para a DIREITA, junto do tema e do carrinho: com
       "margin-right: auto" ele nascia colado no logo (10 px de folga, parecendo
       sobreposto) enquanto sobravam 44 px vazios do outro lado. */
    .site-header > .main-navigation { order: 2; flex: none; margin: 0 0 0 auto; position: static; }
    .site-header .menu-toggle {
        display: block;
        background: none !important;
        border: none !important;
        color: var(--planac-text) !important;
        padding: 8px !important;
        margin: 0;
    }
    /* No celular o menu fica recolhido atras do botao — aberto, ele dobrava a
       altura do cabecalho fixo e comia a tela. */
    .site-header .main-navigation ul.menu,
    .site-header .main-navigation div.menu { display: none; }
    .site-header .main-navigation.toggled ul.menu,
    .site-header .main-navigation.toggled div.menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: #fff;
        border-top: 1px solid var(--planac-border);
        box-shadow: var(--planac-shadow-menu);
        padding: 8px 20px 16px;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 1001;
    }
    .site-header .main-navigation.toggled ul.menu > li { width: 100%; }
    .site-header .main-navigation.toggled ul.sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding-left: 16px;
    }
}

/* altura fixa e especificidade suficiente: o Storefront tambem dimensiona
   .custom-logo, e sem isso a marca ficava com 74px e inflava o cabecalho */
.site-header .site-branding img.custom-logo {
    height: 48px;
    max-height: 48px;
    width: auto;
    display: block;
}
.site-header .site-branding { display: flex; align-items: center; padding: 0; margin: 0; }
.site-branding .custom-logo-link { display: block; line-height: 0; }
.site-header .site-title a, .site-header .site-description { color: var(--planac-text); }

/* Navegação principal */
.main-navigation ul li a,
.site-title a, ul.menu li a,
.site-branding h1 a {
    color: var(--planac-text);
    font-size: 15px;
    font-weight: 500;
}
/* O padding vertical que o Storefront da aos links era o que inflava o header. */
.site-header .main-navigation ul.menu > li > a,
.site-header .main-navigation ul.nav-menu > li > a { padding-top: 6px; padding-bottom: 6px; }

/* Nivel principal em negrito; submenu sem negrito. */
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a { font-weight: 700; }
.main-navigation ul.sub-menu a,
.main-navigation ul.children a { font-weight: 500; }
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.main-navigation ul li.current-menu-item > a {
    color: var(--planac-red);
}
/* ---- Dropdown do cabecalho: abre no hover, fecha ao sair ---------------
   Mesmo comportamento e mesma transicao do .nav-dropdown do site.        */
.main-navigation ul.menu li,
.main-navigation ul.nav-menu li { position: relative; }

.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: var(--planac-shadow-menu);
    padding: 8px 0;
    margin: 0;
    z-index: 1001;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.main-navigation ul.menu li:hover > ul.sub-menu,
.main-navigation ul.menu li:focus-within > ul.sub-menu,
.main-navigation ul.menu li.is-open > ul.sub-menu,
.main-navigation ul.nav-menu li:hover > ul.children,
.main-navigation ul.nav-menu li:focus-within > ul.children,
.main-navigation ul.nav-menu li.is-open > ul.children {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* submenu de 3o nivel abre para o lado */
.main-navigation ul.menu ul.sub-menu ul.sub-menu { top: 0; left: 100%; }

.main-navigation ul.menu ul.sub-menu a { padding: 10px 20px; font-size: 14px; color: var(--planac-text); }
.main-navigation ul.menu ul.sub-menu a:hover { background: var(--planac-bg-alt); color: var(--planac-red); }

/* ---- Chevron para baixo em quem tem submenu ---------------------------
   O Storefront ainda aplica margin-left de 15px no ::after; somado ao gap
   davam 21px de distancia do texto. Zerada a margem e com 8px de gap, a
   distancia cai ~62%. */
.main-navigation li.menu-item-has-children > a,
.main-navigation li.page_item_has_children > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* O Storefront usa exatamente este seletor com margin-left:1em (15px).
   Repetimos o seletor para empatar a especificidade — nosso CSS carrega depois. */
.main-navigation ul.menu > li.menu-item-has-children > a::after,
.main-navigation ul.nav-menu > li.menu-item-has-children > a::after,
.main-navigation li.menu-item-has-children > a::after,
.main-navigation li.page_item_has_children > a::after { margin-left: 0; }
/* Chevron por mascara SVG: o tracado ja vem centrado no viewBox, entao nao
   precisa de deslocamento compensatorio como no truque de bordas rotacionadas. */
.main-navigation li.menu-item-has-children > a::after,
.main-navigation li.page_item_has_children > a::after {
    content: '';
    width: 11px;
    height: 11px;
    flex: none;
    background-color: var(--planac-red);
    -webkit-mask: var(--planac-chevron) center / contain no-repeat;
    mask: var(--planac-chevron) center / contain no-repeat;
    transition: transform .2s ease;
}
.main-navigation li.menu-item-has-children:hover > a::after,
.main-navigation li.menu-item-has-children:focus-within > a::after,
.main-navigation li.menu-item-has-children.is-open > a::after,
.main-navigation li.page_item_has_children:hover > a::after,
.main-navigation li.page_item_has_children.is-open > a::after {
    transform: rotate(180deg);
}
/* nivel 3: chevron aponta para o lado */
.main-navigation ul.sub-menu li.menu-item-has-children > a::after {
    transform: rotate(-90deg);
    margin-left: auto;
}

/* Busca do header no padrão da vitrine */
.site-header .widget_product_search input[type="search"],
.site-header .widget_search input[type="search"] {
    background: var(--planac-bg-input);
    border: none;
    border-radius: var(--planac-radius-input);
    padding: 13px 16px;
    font-size: 15px;
    color: var(--planac-title);
}
.site-header .widget_product_search input[type="search"]:focus,
.site-header .widget_search input[type="search"]:focus {
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(237, 40, 46, .35);
}

/* Carrinho no header — icone no lugar da palavra */
.site-header-cart { list-style: none; margin: 0; padding: 0; }
.site-header-cart .cart-contents {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--planac-text);
    /* o Storefront usa padding de 1.618em aqui, o que sozinho jogava o
       cabecalho para 73px de altura */
    padding: 6px 0;
}
.site-header-cart .cart-contents:hover { color: var(--planac-red); }
.planac-cart-icon { width: 24px; height: 24px; flex: none; }
/* O Storefront acrescenta um glifo de cesta pela fonte de icones — sobrava
   um segundo carrinho ao lado do nosso. */
.site-header .cart-contents::after,
.site-header .cart-contents::before { content: none; display: none; }
/* Quantidade como pill vermelha grudada no icone */
.site-header-cart .cart-contents .count {
    background: var(--planac-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: var(--planac-radius-pill);
    margin-left: -14px;
    margin-top: -14px;
}
.site-header-cart .cart-contents .amount { color: var(--planac-red); font-weight: 700; font-size: 14px; }
.site-header-cart .widget_shopping_cart { border-radius: 0 0 10px 10px; box-shadow: var(--planac-shadow-menu); }

/* ==========================================================================
   BOTÕES — vermelho #ED282E, radius 4px, peso 600 (padrão do site)
   ========================================================================== */
/* Vermelho cheio para os botoes de acao do WooCommerce e do Storefront.
   Os controles proprios do tema (chevron da barra lateral, botao de filtro,
   alternador de tema, seta do carrossel) ficam de fora: eles tem desenho
   proprio e sao reconhecidos pelo prefixo "planac-". Sem essa excecao, o
   !important abaixo transformava o chevron num quadrado vermelho. */
.button:not([class*="planac-"]),
button:not([class*="planac-"]),
input[type="button"], input[type="submit"],
.button.alt, .added_to_cart,
.woocommerce-message a.button,
.wc-block-components-button {
    background-color: var(--planac-red) !important;
    border-color: var(--planac-red) !important;
    color: #fff !important;
    border-radius: var(--planac-radius-btn);
    font-weight: 600;
    font-family: 'Barlow', sans-serif;
    transition: background-color .2s;
}
.button:not([class*="planac-"]):hover,
button:not([class*="planac-"]):hover,
input[type="submit"]:hover,
.button.alt:hover, .added_to_cart:hover,
.wc-block-components-button:hover {
    background-color: var(--planac-red-hover) !important;
    border-color: var(--planac-red-hover) !important;
    color: #fff !important;
}
/* Botão secundário (padrão .btn-secondary do site) */
.button.secondary, .button.outline {
    background: #fff !important;
    color: var(--planac-text) !important;
    border: 1px solid #ddd !important;
}

/* Foco visível vermelho (acessibilidade do site) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--planac-red);
    outline-offset: 2px;
}

/* ==========================================================================
   GRID DA LOJA — cards no padrão .shop-card da vitrine /produtos/
   ========================================================================== */
/* Grid igual ao .shop-grid da vitrine do site — substitui o layout em float
   do Storefront, o que tambem iguala a altura dos cards de cada linha. */
ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
}
ul.products::before, ul.products::after { content: none; }

/* O Storefront dimensiona os cards com .site-main ul.products.columns-N
   li.product (0-3-2) — 22% de uma celula do grid dava cards de 50px.
   Igualamos a especificidade; nosso CSS carrega depois e prevalece. */
.woocommerce .site-main ul.products li.product,
.woocommerce-page .site-main ul.products li.product,
.woocommerce .site-main ul.products.columns-1 li.product,
.woocommerce .site-main ul.products.columns-2 li.product,
.woocommerce .site-main ul.products.columns-3 li.product,
.woocommerce .site-main ul.products.columns-4 li.product,
.woocommerce .site-main ul.products.columns-5 li.product,
.woocommerce .site-main ul.products.columns-6 li.product {
    width: auto;
    float: none;
    margin: 0;
    clear: none;
}

ul.products li.product {
    /* zera o float/larguras percentuais que o Storefront aplica */
    float: none;
    width: auto;
    margin: 0;
    clear: none;

    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--planac-border);
    border-radius: var(--planac-radius-card);
    overflow: hidden;
    padding: 0 0 14px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    text-align: left;
}

/* Alinha o botao na base do card: com os cards da linha na mesma altura,
   a sobra vai toda para cima do botao e todos ficam na mesma linha. */
ul.products li.product .button,
ul.products li.product .added_to_cart { margin-top: auto; }
ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--planac-shadow-card-hover);
    border-color: var(--planac-red);
}
/* Area da foto sempre branca (como .prod__media da ficha do site),
   para o card ficar inteiro branco e a foto recortada nao "flutuar" em cinza. */
ul.products li.product a img {
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #fff;
    padding: 12px;
    margin: 0 0 14px;
    border-radius: 0;
}
ul.products li.product .woocommerce-loop-product__title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--planac-title);
    line-height: 1.3;
    padding: 0 14px;
}
ul.products li.product .woocommerce-loop-product__title:hover { color: var(--planac-red); }
ul.products li.product .price {
    padding: 0 14px;
    color: var(--planac-title);
    font-weight: 700;
    font-size: 16px;
}
ul.products li.product .price del {
    color: var(--planac-icon-muted);
    font-weight: 500;
    font-size: 13px;
    opacity: 1;
}
ul.products li.product .price ins { color: var(--planac-red); text-decoration: none; font-weight: 800; }
/* Botao de compra no card = so o icone (carrinho com +), alinhado a direita
   na base. O rotulo continua no DOM para leitor de tela. */
ul.products li.product .button,
ul.products li.product .added_to_cart {
    align-self: flex-end;
    margin: 10px 14px 0;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 8px;
    font-size: 0;
    line-height: 0;

    /* versao outline: fundo branco, contorno e icone vermelhos */
    background-color: #fff !important;
    border: 1.5px solid var(--planac-red) !important;
    color: var(--planac-red) !important;
    transition: background-color .2s, color .2s;
}
/* ao passar o mouse / focar, inverte para solido — deixa claro que e clicavel */
ul.products li.product .button:hover,
ul.products li.product .button:focus-visible,
ul.products li.product .added_to_cart:hover,
ul.products li.product .added_to_cart:focus-visible {
    background-color: var(--planac-red) !important;
    color: #fff !important;
}
ul.products li.product .button svg,
ul.products li.product .added_to_cart svg {
    width: 22px;
    height: 22px;
    flex: none;
}
/* rotulo acessivel, invisivel na tela */
.planac-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* Contagem de resultados / ordenação */
.woocommerce-result-count { color: var(--planac-faint); font-size: 13px; }
.woocommerce-ordering select {
    background: var(--planac-bg-input);
    border: none;
    border-radius: var(--planac-radius-input);
    padding: 10px 14px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--planac-text);
}

/* ==========================================================================
   OUTLET — selo de desconto e escassez de estoque (sem sair da identidade)
   ========================================================================== */
/* Selo -XX% : pill vermelha no canto da foto, mesmo desenho do badge de marca
   da vitrine (rgba(237,40,46,.92), radius 6px, 11px/700) — só que maior */
.onsale,
ul.products li.product .onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    right: auto;
    min-width: 0;
    min-height: 0;
    padding: 4px 10px;
    /* mesmo padrao outline do botao de compra */
    background: #fff;
    border: 1.5px solid var(--planac-red);
    color: var(--planac-red);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.5;
    z-index: 2;
}
ul.products li.product { position: relative; }

/* Badge de marca (gerado via functions.php quando o produto tem atributo Marca) */
.planac-brand-badge {
    display: inline-block;
    margin: 0 14px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--planac-red);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* "Restam só X" — chip no padrão .shop-card__variants (fundo #fff0f0) */
.planac-stock-left {
    display: inline-block;
    align-self: flex-start;
    margin: 8px 14px 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--planac-red);
    background: var(--planac-red-soft);
    border-radius: 6px;
    padding: 3px 8px;
}
.single-product .planac-stock-left { margin: 0 0 14px; font-size: 13px; }

/* Aviso de retirada local */
.planac-pickup-note {
    font-size: 14.5px;
    color: #555;
    line-height: 1.7;
    background: var(--planac-bg-page);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 18px 0;
}
.planac-pickup-note strong { color: var(--planac-title); }

/* ==========================================================================
   PÁGINA DE PRODUTO — no padrão da ficha /produto/{slug}/
   ========================================================================== */

/* Voltar ao catalogo — no topo, antes do produto */
.planac-voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 9px 16px 9px 12px;
    background: #fff;
    border: 1.5px solid var(--planac-border);
    border-radius: var(--planac-radius-input);
    font-size: 14px;
    font-weight: 600;
    color: var(--planac-body);
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}
.planac-voltar:hover,
.planac-voltar:focus-visible {
    border-color: var(--planac-red);
    color: var(--planac-red);
}
.planac-voltar__seta {
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--planac-red);
    border-bottom: 2px solid var(--planac-red);
    transform: rotate(45deg);
    flex: none;
    transition: transform .2s;
}
.planac-voltar:hover .planac-voltar__seta { transform: rotate(45deg) translate(2px, -2px); }

.single-product div.product { background: transparent; }
.single-product div.product .woocommerce-product-gallery {
    position: relative; /* âncora do selo .onsale */
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: var(--planac-radius-media);
    padding: 16px;
}
.single-product div.product .woocommerce-product-gallery img { object-fit: contain; }
.single-product div.product .product_title {
    font-size: clamp(22px, 3.6vw, 30px);
    font-weight: 800;
    color: var(--planac-title);
    line-height: 1.2;
}
.single-product div.product .price {
    font-size: 26px;
    font-weight: 800;
    color: var(--planac-title);
}
.single-product div.product .price del { font-size: 16px; color: var(--planac-icon-muted); }
.single-product div.product .price ins { color: var(--planac-red); text-decoration: none; }
.single-product div.product .woocommerce-product-details__short-description {
    font-size: 15px;
    color: var(--planac-body);
    line-height: 1.7;
}
/* Meta (SKU, categorias) como as metalinhas da ficha */
.single-product div.product .product_meta {
    font-size: 13px;
    color: var(--planac-faint);
    border-top: 1px solid var(--planac-bg-input);
    padding-top: 14px;
}
.single-product div.product .product_meta a { color: var(--planac-red); text-decoration: none; }

/* Abas de descrição/especificações */
.woocommerce-tabs ul.tabs li.active a { color: var(--planac-red); }
.woocommerce-tabs .woocommerce-Tabs-panel h2 { font-size: 15px; font-weight: 700; }
table.woocommerce-product-attributes th { background: var(--planac-bg-page); font-weight: 700; color: var(--planac-title); }
table.woocommerce-product-attributes th, table.woocommerce-product-attributes td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--planac-border-soft);
    font-size: 14.5px;
}

/* Breadcrumb no padrão do site — o fundo/filete full-width fica na faixa externa
   (.storefront-breadcrumb); aqui a nav interna é só o texto, alinhada ao conteúdo. */
.woocommerce-breadcrumb {
    background: transparent;
    border: 0;
    font-size: 14px;
    color: var(--planac-muted);
    padding: 0;
}
.woocommerce-breadcrumb a { color: var(--planac-red); text-decoration: none; }
.woocommerce-breadcrumb a:hover { text-decoration: underline; }

/* ==========================================================================
   TÍTULOS DE SEÇÃO / CATEGORIA — régua vermelha da vitrine
   ========================================================================== */
/* Regua vermelha de largura total — igual a .shop-cat__title da vitrine
   (display:block no site; inline-block encurtaria a regua). */
.woocommerce-products-header__title.page-title,
.related.products > h2,
.up-sells > h2,
.cross-sells > h2 {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--planac-title);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--planac-red);
}

/* Sidebar de filtros (widgets) no padrão da sidebar da vitrine */
.widget-area .widget { font-size: 14.5px; }
.widget-area .widget h2.widget-title, .widget-area .widget .widget-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--planac-title);
}
.widget_product_categories ul li a { color: var(--planac-body); font-weight: 500; }
.widget_product_categories ul li a:hover,
.widget_product_categories ul li.current-cat > a { color: var(--planac-red); font-weight: 700; }
.widget_product_categories ul li { border-top: 1px solid #f0f1f3; padding: 8px 0; }
.widget .count { font-size: 12px; font-weight: 700; color: var(--planac-icon-muted); background: #f1f2f4; border-radius: var(--planac-radius-pill); padding: 2px 8px; }

/* ==========================================================================
   CARRINHO / CHECKOUT
   ========================================================================== */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
#customer_details .woocommerce-billing-fields,
#customer_details .woocommerce-shipping-fields {
    background: #fff;
    border: 1px solid var(--planac-border);
    border-radius: var(--planac-radius-card);
    padding: 20px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: var(--planac-radius-btn);
    padding: 12px 14px;
    font-size: 15px;
    font-family: 'Barlow', sans-serif;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--planac-red);
    outline: none;
}
.woocommerce form .form-row label { font-size: 14px; font-weight: 600; color: var(--planac-text); }
#payment .payment_methods li .payment_box { background: var(--planac-bg-page); border-radius: 10px; }
.order-total .amount { color: var(--planac-red); font-weight: 800; }

/* Mensagens/avisos */
.woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner.is-success {
    border-top-color: var(--planac-red);
}
.woocommerce-store-notice, p.demo_store { background: var(--planac-red-dark); color: #fff; }

/* ==========================================================================
   FOOTER — branco com divisória, no padrão do site
   ========================================================================== */
.site-footer {
    background: #fff;
    border-top: 1px solid var(--planac-border-soft);
    color: #555;
}
.site-footer .widget-title, .site-footer h4 { color: var(--planac-title); font-size: 16px; font-weight: 700; }
.site-footer a { color: #555; text-decoration: none; }
.site-footer a:hover { color: var(--planac-red); }
.site-info { color: #595959; font-size: 13px; }

/* Barra fixa mobile do Storefront no padrão do footer fixo do site */
.storefront-handheld-footer-bar {
    border-top: 1px solid var(--planac-border-soft);
    box-shadow: 0 -2px 10px rgba(0,0,0,.1);
}
.storefront-handheld-footer-bar ul li > a { color: var(--planac-red); }

/* ==========================================================================
   BOTÃO FLUTUANTE DE WHATSAPP (gerado via functions.php)
   ========================================================================== */
.planac-whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: var(--planac-whatsapp);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    z-index: 998;
    transition: transform .3s, box-shadow .3s;
}
.planac-whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.planac-whatsapp-float svg { width: 32px; height: 32px; fill: #fff; }
/* (a regra antiga subia o botao 80px por causa da barra fixa do Storefront,
   que foi removida em [65]; a posicao do celular esta mais abaixo.) */

/* ==========================================================================
   BARRA DE FILTROS DO TOPO — botoes com chevron, no padrao .shop-sort do site
   ========================================================================== */
.planac-barra-filtros {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
}
.planac-barra-filtros::before,
.planac-barra-filtros::after { content: none; }

.planac-filtro { position: relative; }

.planac-filtro__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    /* escapa da regra global que pinta todo botao de vermelho */
    color: var(--planac-text) !important;
    background-color: var(--planac-bg-input) !important;
    border: none !important;
    border-radius: var(--planac-radius-input);
    padding: 11px 16px;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.planac-filtro__btn:hover,
.planac-filtro__btn[aria-expanded="true"] {
    background-color: #e4e7ea !important;
    color: var(--planac-red) !important;
}
.planac-filtro__btn.is-ativo {
    background-color: var(--planac-red-soft) !important;
    color: var(--planac-red) !important;
}

/* Chevron: so o "V" vermelho, sem caixa */
.planac-filtro__chevron {
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--planac-red);
    border-bottom: 2px solid var(--planac-red);
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .2s ease;
    flex: none;
}
.planac-filtro__btn[aria-expanded="true"] .planac-filtro__chevron {
    transform: rotate(-135deg) translate(-1px, -1px);
}

.planac-filtro__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 210px;
    max-height: 340px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: #fff;
    border-radius: var(--planac-radius-input);
    box-shadow: var(--planac-shadow-menu);
    z-index: 30;
}
.planac-filtro__menu[hidden] { display: none; }
.planac-filtro__opt {
    display: block;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    color: var(--planac-text);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.planac-filtro__opt:hover { background: var(--planac-bg-page); color: var(--planac-red); }
.planac-filtro__opt.is-ativo { color: var(--planac-red); font-weight: 700; }

/* "So promocoes" — mesmo padrao do botao de carrinho:
   fundo branco, contorno vermelho, texto vermelho. Ligado, inverte. */
.planac-filtro__toggle {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--planac-red);
    background: #fff;
    border: 1.5px solid var(--planac-red);
    border-radius: var(--planac-radius-input);
    padding: 10px 16px;
    text-decoration: none;
    transition: all .2s;
}
.planac-filtro__toggle:hover {
    background: var(--planac-red-soft);
    color: var(--planac-red-hover);
    border-color: var(--planac-red-hover);
}
.planac-filtro__toggle.is-ativo {
    background: var(--planac-red);
    border-color: var(--planac-red);
    color: #fff;
}
.planac-filtro__toggle.is-ativo:hover {
    background: var(--planac-red-hover);
    border-color: var(--planac-red-hover);
    color: #fff;
}

.planac-filtro__limpar {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--planac-red);
    text-decoration: underline;
    padding: 10px 4px;
}
.planac-barra-filtros__resultado {
    margin-left: auto;
    font-size: 13px;
    color: var(--planac-faint);
}
.planac-barra-filtros__resultado .woocommerce-result-count { margin: 0; }

@media (max-width: 560px) {
    .planac-barra-filtros { gap: 8px; }
    .planac-barra-filtros__resultado { margin-left: 0; flex: 1 1 100%; }
    .planac-filtro__menu { min-width: 180px; }
}

/* ==========================================================================
   COMPLETE A INSTALACAO — itens que compoem a mesma obra
   ========================================================================== */
.planac-complementos { margin: 40px 0 0; }
.planac-complementos__titulo {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--planac-title);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--planac-red);
    margin: 0 0 6px;
}
.planac-complementos__sub {
    font-size: 14px;
    color: var(--planac-muted);
    margin: 0 0 18px;
}

/* --- Carrossel: uma fileira so, rolando de lado ------------------------
   Mesmo comportamento dos carrosseis do site (scroll-snap + barra oculta). */
.planac-carrossel { position: relative; }

ul.products.planac-carrossel__trilho {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    margin: 0;
    /* Folga no topo e embaixo: o card sobe 4 px no hover e ganha sombra;
       com só 2 px o overflow-x cortava a borda de cima do card. */
    padding: 12px 4px 22px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* anula a grade que vale na listagem */
    grid-template-columns: none;
}
ul.products.planac-carrossel__trilho::-webkit-scrollbar { display: none; }

/* Arrastar com o mouse. Durante o arrasto a rolagem suave e o snap sao
   desligados, senao eles disputam com o dedo/ponteiro e o movimento trava. */
ul.products.planac-carrossel__trilho { cursor: grab; touch-action: pan-x pan-y; }
ul.products.planac-carrossel__trilho.is-arrastando {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
}
/* (removido: pointer-events:none no arrasto matava tambem o clique simples,
   porque o mousedown deixava de ter o link como alvo. Quem suprime o clique
   depois de arrastar e o JS, que sabe se houve movimento de verdade.) */

ul.products.planac-carrossel__trilho > li.product {
    flex: 0 0 240px;
    max-width: 240px;
    scroll-snap-align: start;
}

/* Setas: so o "V" vermelho girado, sem caixa — mesmo desenho dos chevrons */
.planac-carrossel__seta {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff !important;
    background-color: #fff !important;
    border: 1.5px solid var(--planac-border) !important;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    cursor: pointer;
    padding: 0;
    z-index: 5;
    transition: border-color .2s, transform .2s;
}
.planac-carrossel__seta:hover { border-color: var(--planac-red) !important; }
.planac-carrossel__seta[hidden] { display: none; }
/* O chevron e um SVG com o tracado centrado no viewBox (x e y de 6 a 18,
   centro em 12/12). Assim o flex do botao centraliza de verdade — com bordas
   rotacionadas a tinta fica so em duas arestas e pende para o lado do bico. */
.planac-carrossel__seta svg {
    width: 18px;
    height: 18px;
    display: block;
    color: var(--planac-red);
}
.planac-carrossel__seta--ant { left: -14px; }
.planac-carrossel__seta--prox { right: -14px; }

@media (max-width: 860px) {
    /* Sem setas: aqui se arrasta com o dedo. */
    .planac-carrossel__seta { display: none !important; }
    /* 68vw sozinho era uma armadilha: num tablet de 768 px o card ia a 522 px e
       aparecia UM produto por tela. O teto de 260 px mantém o efeito de "um card
       e um pedaço do seguinte" no celular e mostra dois e meio no tablet. */
    ul.products.planac-carrossel__trilho > li.product {
        flex-basis: min(68vw, 260px);
        max-width: min(68vw, 260px);
    }
}

/* ==========================================================================
   LAYOUT DE DUAS COLUNAS — sidebar de filtros + grade
   Espelha .shop-layout da vitrine: 260px + 1fr, gap 24, sidebar sticky.
   ========================================================================== */
.planac-com-sidebar .site-content .col-full {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
/* Posicionamento EXPLICITO: o WooCommerce insere um div.woocommerce (avisos)
   como primeiro filho, e por ordem de origem ele tomava a coluna de 260px —
   o conteudo ia para a lateral e a lateral para o meio. */
.planac-com-sidebar .site-content .col-full > .woocommerce,
.planac-com-sidebar .site-content .col-full > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
    grid-row: 1;
}
.planac-com-sidebar .site-content .col-full > #secondary,
.planac-com-sidebar .site-content .col-full > .widget-area {
    grid-column: 1;
    grid-row: 2;
}
.planac-com-sidebar .site-content .col-full > #primary,
.planac-com-sidebar .site-content .col-full > .content-area {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
}

/* neutraliza o layout em float do Storefront */
.planac-com-sidebar .content-area,
.planac-com-sidebar .widget-area {
    float: none;
    width: auto;
    margin: 0;
}

/* O sticky precisa respeitar a altura do cabecalho fixo. */
.planac-sidebar { position: sticky; top: calc(var(--planac-header-h, 84px) + 16px); }
.planac-sidebar__toggle { display: none; }

/* Busca no topo da barra lateral */
.planac-sidebar__busca { margin: 0 0 14px; }
.planac-sidebar__busca form { position: relative; margin: 0; }
.planac-sidebar__busca input[type="search"] {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--planac-title);
    background: var(--planac-bg-input);
    border: none;
    border-radius: var(--planac-radius-input);
}
.planac-sidebar__busca input[type="search"]:focus {
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(237, 40, 46, .35);
}
.planac-sidebar__busca input[type="search"]::placeholder { color: #8a9099; }
/* O botao de enviar do formulario do WooCommerce nao precisa aparecer. */
.planac-sidebar__busca button[type="submit"],
.planac-sidebar__busca input[type="submit"] { display: none; }

/* --------------------------------------------------------------------------
   NAVEGACAO DE CATEGORIAS — desenhada pelo tema (inc/categorias-nav.php)
   Categoria principal em negrito, subcategorias sem negrito, chevron vermelho
   sem contorno, ramo aberto quando o visitante esta dentro dele.
   -------------------------------------------------------------------------- */
.planac-catnav__titulo {
    font-size: 15px;
    font-weight: 700;
    color: var(--planac-title);
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--planac-border);
    text-transform: none;
    letter-spacing: 0;
}
.planac-catnav__lista,
.planac-catnav__sub {
    list-style: none;
    margin: 0;
    padding: 0;
}
.planac-catnav__item { margin: 0; }

.planac-catnav__linha {
    display: flex;
    align-items: center;
    gap: 4px;
}
.planac-catnav__link {
    flex: 1 1 auto;
    display: block;
    padding: 9px 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--planac-title);
    text-decoration: none;
    transition: color .15s;
}
.planac-catnav__link:hover,
.planac-catnav__link.is-ativo { color: var(--planac-red); }

/* Chevron: so o "V" vermelho, sem caixa nem contorno. */
.planac-catnav__chevron {
    flex: none;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.planac-catnav__chevron:hover,
.planac-catnav__chevron:focus { background: none; outline: none; }
.planac-catnav__chevron > span {
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--planac-red);
    border-bottom: 2px solid var(--planac-red);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s;
}
.planac-catnav__chevron[aria-expanded="true"] > span {
    transform: translateY(1px) rotate(-135deg);
}

.planac-catnav__sub { padding: 0 0 6px 14px; }
.planac-catnav__sub[hidden] { display: none; }
.planac-catnav__sublink {
    display: block;
    padding: 7px 0;
    font-size: 14px;
    font-weight: 400;   /* submenu sem negrito, como no cabecalho */
    color: var(--planac-body);
    text-decoration: none;
    transition: color .15s;
}
.planac-catnav__sublink:hover,
.planac-catnav__sublink.is-ativo { color: var(--planac-red); }
.planac-catnav__sublink.is-ativo { font-weight: 600; }

/* ==========================================================================
   WIDGETS DA SIDEBAR — visual da .shop-sidebar do site
   ========================================================================== */
.planac-widget { margin: 0 0 4px; padding: 0; }
.planac-widget + .planac-widget {
    border-top: 1px solid var(--planac-border-soft);
    margin-top: 4px;
    padding-top: 8px;
}
.planac-widget__title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--planac-title);
    margin: 0 0 6px;
    padding: 10px 12px 4px;
    text-transform: none;
    letter-spacing: 0;
}

/* Listas (categorias, marcas, tags) */
.planac-widget ul { list-style: none; margin: 0; padding: 0; }
.planac-widget ul li { border: 0; padding: 0; }
.planac-widget ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--planac-body);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.planac-widget ul li a:hover { background: var(--planac-bg-page); color: var(--planac-red); }
.planac-widget ul li.current-cat > a,
.planac-widget ul li.chosen > a { color: var(--planac-red); font-weight: 700; }

/* Categoria principal em negrito; subcategoria sem negrito. */
.planac-widget > ul > li > a { font-weight: 700; }
.planac-widget ul ul li a { font-weight: 500; }

/* Subcategorias recuadas, como as .shop-side-sub do site */
.planac-widget ul li ul.children,
.planac-widget ul li ul.sub-menu { margin: 0 0 4px; }
.planac-widget ul li ul.children li a {
    padding-left: 26px;
    font-size: 13.5px;
    color: var(--planac-muted);
}

/* ---- Accordion: qualquer categoria com filhas ganha chevron -----------
   O JS marca .planac-tem-filhos e injeta o botao; sem JS a lista fica
   aberta e navegavel (por isso o colapso mora na classe, nao no padrao). */
.planac-widget li.planac-tem-filhos { position: relative; }
.planac-widget li.planac-tem-filhos > a { padding-right: 44px; }

/* !important porque a regra global de .button/button pinta todo botao de
   vermelho — os botoes utilitarios (chevron, tema, filtros) precisam escapar. */
.planac-chevron {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    cursor: pointer;
    padding: 0;
}
.planac-chevron:hover { background: none !important; background-color: transparent !important; }
.planac-chevron:hover::after { border-color: var(--planac-red-hover); }
.planac-chevron::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--planac-red);
    border-bottom: 2px solid var(--planac-red);
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .2s ease;
}
.planac-chevron[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-1px, -1px);
}

/* Colapso animado — a altura exata e calculada pelo JS. */
.planac-widget li.planac-tem-filhos > ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
}
.planac-widget li.planac-tem-filhos.is-open > ul { margin-bottom: 6px; }

/* Chevron do menu do cabecalho em telas de toque (injetado pelo JS). */
.planac-chevron--menu {
    position: static;
    width: 32px;
    height: 32px;
    margin-left: 2px;
}
.planac-chevron--menu::after { border-color: currentColor; }

/* Contador em pill */
.planac-widget .count {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--planac-icon-muted);
    background: #f1f2f4;
    border-radius: var(--planac-radius-pill);
    padding: 2px 8px;
    min-width: 24px;
    text-align: center;
}

/* Filtros ativos: chips removiveis */
.widget_layered_nav_filters ul li a {
    background: var(--planac-red-soft);
    color: var(--planac-red);
    font-weight: 600;
    font-size: 13px;
    border-radius: var(--planac-radius-pill);
    padding: 6px 12px;
    margin: 0 0 6px;
}
.widget_layered_nav_filters ul li a::before { content: '\00d7'; margin-right: 6px; font-weight: 700; }
.widget_layered_nav_filters ul li a:hover { background: var(--planac-red); color: #fff; }

/* Filtro de preco */
.widget_price_filter .price_slider_wrapper { padding: 4px 12px 0; }
.widget_price_filter .ui-slider { background: var(--planac-bg-input); border-radius: var(--planac-radius-pill); height: 5px; }
.widget_price_filter .ui-slider .ui-slider-range { background: var(--planac-red); border-radius: var(--planac-radius-pill); }
.widget_price_filter .ui-slider .ui-slider-handle {
    background: var(--planac-red);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    width: 16px; height: 16px;
    top: -6px;
}
.widget_price_filter .price_slider_amount { padding: 12px; font-size: 13px; color: var(--planac-muted); }
.widget_price_filter .price_slider_amount .button { float: right; font-size: 13px; padding: 8px 16px; }

/* Dropdown de categorias (quando o admin escolhe o modo lista suspensa) */
.planac-widget select {
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--planac-text);
    background: var(--planac-bg-input);
    border: none;
    border-radius: var(--planac-radius-input);
}

/* --- Mobile: a sidebar vira gaveta ------------------------------------ */
@media (max-width: 860px) {
    .planac-com-sidebar .site-content .col-full { grid-template-columns: 1fr; }
    .planac-com-sidebar .site-content .col-full > .woocommerce { grid-column: 1; grid-row: 1; }
    .planac-com-sidebar .site-content .col-full > #secondary { grid-column: 1; grid-row: 2; }
    .planac-com-sidebar .site-content .col-full > #primary { grid-column: 1; grid-row: 3; }
    .planac-sidebar { position: static; margin-bottom: 18px; }
    .planac-sidebar__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        /* escapa da regra global de botoes vermelhos */
        color: var(--planac-title) !important;
        background-color: #fff !important;
        border: 1px solid var(--planac-border) !important;
        border-radius: var(--planac-radius-input);
        padding: 13px 16px;
        cursor: pointer;
    }
    .planac-sidebar__caret {
        width: 9px; height: 9px;
        border-right: 2px solid var(--planac-red);
        border-bottom: 2px solid var(--planac-red);
        transform: rotate(45deg);
        transition: transform .2s;
    }
    .planac-sidebar__toggle[aria-expanded="true"] .planac-sidebar__caret { transform: rotate(-135deg); }
    .planac-sidebar__nav { display: none; margin-top: 8px; }
    .planac-sidebar__nav.is-open { display: block; }
}


/* ==========================================================================
   ACESSIBILIDADE / MOVIMENTO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   AVISO DE PRE-VISUALIZACAO
   ========================================================================== */
.planac-previa-aviso {
    background: #1f2937;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    text-align: center;
    padding: 7px 16px;
}

/* ==========================================================================
   AJUSTES DE ESPACO E LARGURA (auditoria 1.9.0)
   ========================================================================== */

/* O cabecalho da loja fica vazio porque escondemos o titulo da pagina.
   Vazio, ele ainda ocupava mais de 100px entre o breadcrumb e a grade. */
.woocommerce-products-header:empty,
.woocommerce-products-header:not(:has(h1)):not(:has(.term-description)) {
    display: none;
}
.woocommerce-products-header { margin: 0; }

/* Breadcrumb mais justo — ele e orientacao, nao secao. Faixa full-width (fundo
   cinza da vitrine + filete embaixo) que separa cabeçalho e conteúdo em qualquer
   página; o texto interno segue alinhado ao conteúdo pela .col-full. */
.storefront-breadcrumb {
    background: var(--planac-bg-page);
    border-bottom: 1px solid var(--planac-border);
    margin-bottom: 20px;
    padding: 12px 0;
}
.storefront-breadcrumb .woocommerce-breadcrumb { margin: 0; }

/* Ficha, carrinho, checkout e conta abrem em largura inteira. */
.planac-largura-inteira .site-content .col-full {
    display: block;
    max-width: 1240px;
}
.planac-largura-inteira .content-area {
    width: 100%;
    max-width: none;
    float: none;
    margin: 0;
}

/* ==========================================================================
   CABECALHO NO CELULAR — 119px era quase um sexto da tela
   ========================================================================== */
@media (max-width: 782px) {
    .site-header {
        padding-top: 8px;
        padding-bottom: 8px;
        gap: 8px 12px;
    }
    .site-header .custom-logo,
    .site-header .planac-marca img { max-height: 34px; }
}

/* ==========================================================================
   PAGINA 404
   ========================================================================== */
.planac-404 { max-width: 760px; margin: 0 auto; padding: 24px 0 48px; }
.planac-404__titulo { font-size: 30px; font-weight: 800; margin: 0 0 10px; }
.planac-404__texto { color: var(--planac-body); margin: 0 0 22px; }
.planac-404__busca { margin: 0 0 34px; }
.planac-404__busca form { position: relative; margin: 0; }
.planac-404__busca input[type="search"] {
    width: 100%;
    padding: 13px 16px;
    font-family: inherit;
    font-size: 15px;
    color: var(--planac-title);
    background: var(--planac-bg-input);
    border: none;
    border-radius: var(--planac-radius-input);
}
.planac-404__busca input[type="search"]:focus {
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(237, 40, 46, .35);
}
.planac-404__busca button[type="submit"],
.planac-404__busca input[type="submit"] { display: none; }

.planac-404__subtitulo { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.planac-404__categorias {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.planac-404__categorias a {
    display: block;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--planac-border);
    border-radius: var(--planac-radius-card);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.planac-404__categorias a:hover { border-color: var(--planac-red); transform: translateY(-2px); }
.planac-404__cat-nome { display: block; font-weight: 700; color: var(--planac-title); font-size: 15px; }
.planac-404__cat-qtd { display: block; font-size: 12.5px; color: var(--planac-faint); margin-top: 2px; }
.planac-404__link { font-weight: 700; }

/* ==========================================================================
   TITULOS DE PAGINA — o Storefront centraliza e risca a largura toda
   ==========================================================================
   O titulo de CATEGORIA nao entra aqui: ele mantem a regua vermelha da vitrine
   do site institucional, definida mais acima em "TITULOS DE SECAO". */
.entry-title,
.page-title:not(.woocommerce-products-header__title) {
    font-size: 24px;
    font-weight: 800;
    color: var(--planac-title);
    text-align: left;
    border: 0;
    padding: 0;
    margin: 0 0 18px;
}
.woocommerce-products-header { padding: 0; }

/* ==========================================================================
   CLEARFIX DO STOREFRONT NA GRADE — comia a primeira vaga
   ==========================================================================
   .woocommerce ul.products::before tem content:"" e display:table. Numa grade
   CSS esse pseudo-elemento vira um ITEM e ocupa a primeira celula: o catalogo
   abria com um buraco e todos os produtos entravam deslocados. A regra sem o
   prefixo .woocommerce perdia na especificidade (0-1-1 contra 0-2-1). */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    content: none;
    display: none;
}

/* ==========================================================================
   AVISOS — o azul e o verde do Storefront nao sao cores da Planac
   ========================================================================== */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
    position: relative;
    background: #fff;
    border: 1px solid var(--planac-border);
    border-left: 4px solid var(--planac-red);
    border-radius: var(--planac-radius-card);
    color: var(--planac-text);
    /* espaco a esquerda para o icone do Storefront, que e posicionado absoluto */
    padding: 16px 20px 16px 52px;
    margin: 0 0 22px;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
    color: var(--planac-red);
    top: 17px;
    left: 20px;
    margin: 0;
}
.woocommerce-message { border-left-color: #17a34a; }
.woocommerce-message::before { color: #17a34a; }
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a { color: var(--planac-red); font-weight: 600; }

/* ==========================================================================
   RODAPE
   ========================================================================== */
.planac-rodape { padding: 8px 0 0; }
.planac-rodape__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 28px 32px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--planac-border);
}
/* Em tela larga o auto-fit abria CINCO trilhas para as quatro colunas que
   existem: a quinta ficava com 0 px e ~150 px sobravam à direita, jogando o
   rodapé para a esquerda. Acima de 1100 px são quatro colunas iguais e ponto. */
@media (min-width: 1100px) {
    .planac-rodape__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.planac-rodape__titulo {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--planac-title);
    margin: 0 0 10px;
}
.planac-rodape__coluna p {
    margin: 0 0 7px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--planac-body);
}
.planac-rodape__horario { color: var(--planac-muted); }
.planac-rodape__zap { font-weight: 700; color: var(--planac-whatsapp); text-decoration: none; }
.planac-rodape__zap:hover { color: var(--planac-whatsapp-hover); }
.planac-rodape__links { list-style: none; margin: 0; padding: 0; }
.planac-rodape__links li { margin: 0 0 7px; }
.planac-rodape__links a {
    font-size: 14px;
    color: var(--planac-body);
    text-decoration: none;
}
.planac-rodape__links a:hover { color: var(--planac-red); }
.planac-rodape__legal {
    padding: 18px 0 4px;
    font-size: 12.5px;
    color: var(--planac-faint);
}

/* ==========================================================================
   MINHA CONTA — a navegacao vira cartao, como o resto da loja
   ========================================================================== */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid var(--planac-border);
}
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 4px;
    font-weight: 600;
    color: var(--planac-title);
    text-decoration: none;
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a { color: var(--planac-red); }

/* ==========================================================================
   CHECKOUT — campos fiscais condicionais
   ========================================================================== */
/* CPF, CNPJ e Inscricao Estadual entram no WooCommerce como nao obrigatorios,
   porque a exigencia depende de pessoa fisica ou juridica — quem decide isso e
   a validacao no PHP e o script que liga/desliga o asterisco. Sem esta regra o
   rotulo saia contraditorio: "CPF (opcional) *". */
.planac-se-fisica > label .optional,
.planac-se-juridica > label .optional,
.planac-se-contribuinte > label .optional { display: none; }

/* O select de estado do WooCommerce (select2) precisa acompanhar os demais. */
.woocommerce form .form-row .select2-container .select2-selection--single {
    height: 44px;
    border: 1px solid var(--planac-border);
    border-radius: var(--planac-radius-input);
}
.woocommerce form .form-row .select2-container .select2-selection__rendered {
    line-height: 42px;
    padding-left: 12px;
}

/* ==========================================================================
   CABECALHO NO CELULAR — uma linha so, botao de menu com icone
   ==========================================================================
   Antes: logo, a palavra "Menu" sem estilo e o alternador de tema na primeira
   linha, e o carrinho sozinho na segunda — 109px de cabecalho fixo comendo a
   tela. Agora os quatro cabem lado a lado. */
@media (max-width: 900px) {
    .site-header {
        flex-wrap: nowrap;
        gap: 4px 8px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .site-header > .col-full { flex: 0 1 auto; min-width: 0; }
    .site-header .custom-logo { max-height: 30px; width: auto; }
    .site-header > .main-navigation { order: 2; flex: none; margin: 0 0 0 auto; }
    .site-header > .site-header-cart { order: 4; }
}

@media (max-width: 1120px) {
    /* Hamburguer desenhado no proprio botao: o rotulo continua no DOM para
       leitor de tela, mas some visualmente. */
    .site-header .menu-toggle {
        width: 40px;
        height: 40px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 0 !important;
        line-height: 0;
        padding: 0 !important;
    }
    .site-header .menu-toggle::before {
        content: '';
        width: 20px;
        height: 2px;
        background: var(--planac-title);
        box-shadow: 0 -6px 0 var(--planac-title), 0 6px 0 var(--planac-title);
        transition: none;
    }
    .site-header .main-navigation.toggled .menu-toggle::before {
        box-shadow: none;
        transform: rotate(45deg);
    }
    .site-header .main-navigation.toggled .menu-toggle::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 2px;
        background: var(--planac-title);
        transform: rotate(-45deg);
    }
    .site-header .menu-toggle { position: relative; }
}

/* Em telas bem estreitas o valor do carrinho sai; fica so o icone. */
@media (max-width: 460px) {
    .site-header .site-header-cart .amount { display: none; }
}

/* No celular o carrinho do cabecalho sai: o Storefront ja mostra carrinho,
   busca e conta na barra fixa de baixo, e no topo ele era espremido a zero. */
@media (max-width: 900px) {
    .site-header > .site-header-cart { display: none; }
}

/* Rede de seguranca: se o Storefront mudar o gancho da paginacao de produto,
   as miniaturas presas na borda continuam fora da tela. */
.storefront-product-pagination { display: none; }

/* ==========================================================================
   FOCO — sem contorno no clique de mouse
   ==========================================================================
   O Storefront desenha o contorno no `:focus` puro, que dispara tambem no
   clique. Resultado: um retângulo vermelho piscando ao clicar num menu.
   `:focus-visible` continua valendo — quem navega pelo teclado precisa ver
   onde está. `:focus:not(:focus-visible)` cobre só o clique de ponteiro. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
.main-navigation a:focus:not(:focus-visible),
.main-navigation ul.menu a:focus:not(:focus-visible),
.main-navigation ul.menu ul.sub-menu a:focus:not(:focus-visible),
.planac-catnav a:focus:not(:focus-visible),
.woocommerce-tabs ul.tabs li a:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* A seleção continua marcada só pela cor do texto. */
.main-navigation ul.menu a:focus,
.planac-catnav__link:focus,
.planac-catnav__sublink:focus { color: var(--planac-red); }

/* ==========================================================================
   FICHA TECNICA — um bloco só, com abas no topo
   ==========================================================================
   O Storefront empilha a lista de abas à esquerda e o conteúdo à direita, em
   duas colunas soltas. Aqui vira um cartão único: abas em linha no topo,
   conteúdo embaixo. Todos os painéis continuam no HTML — o WooCommerce apenas
   esconde os inativos —, então buscadores e leitores automáticos enxergam a
   descrição, a ficha técnica e as avaliações da mesma forma. */
.woocommerce-tabs.wc-tabs-wrapper {
    display: block;
    background: #fff;
    border: 1px solid var(--planac-border);
    border-radius: var(--planac-radius-card);
    overflow: hidden;
    margin: 34px 0 0;
    padding: 0;
}

.woocommerce-tabs ul.tabs.wc-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    list-style: none;
    width: auto;
    float: none;
    margin: 0;
    padding: 0 6px;
    background: var(--planac-bg-alt);
    border: 0;
    border-bottom: 1px solid var(--planac-border);
}
.woocommerce-tabs ul.tabs.wc-tabs::-webkit-scrollbar { display: none; }
/* O Storefront desenha as "orelhas" da aba com pseudo-elementos. */
.woocommerce-tabs ul.tabs.wc-tabs::before,
.woocommerce-tabs ul.tabs.wc-tabs::after,
.woocommerce-tabs ul.tabs.wc-tabs li::before,
.woocommerce-tabs ul.tabs.wc-tabs li::after { content: none; display: none; }

.woocommerce-tabs ul.tabs.wc-tabs li {
    flex: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.woocommerce-tabs ul.tabs.wc-tabs li a {
    display: block;
    padding: 15px 18px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--planac-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.woocommerce-tabs ul.tabs.wc-tabs li a:hover { color: var(--planac-title); }
.woocommerce-tabs ul.tabs.wc-tabs li.active a {
    color: var(--planac-red);
    border-bottom-color: var(--planac-red);
}

/* A classe `.panel` entra no seletor de proposito: o Storefront usa
   ".storefront-full-width-content .woocommerce-tabs .panel" (tres classes) para
   deixar o painel com 65% e flutuando a direita — sobra do layout em duas
   colunas. Com duas classes o nosso empate se perdia. */
.woocommerce-tabs .panel.woocommerce-Tabs-panel {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 26px 28px 30px;
}
/* O título dentro do painel repete o nome da aba, que já está visível logo
   acima. Ele CONTINUA no HTML, como cabeçalho de seção — some só da tela. */
.woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.woocommerce-tabs .woocommerce-Tabs-panel p { margin: 0 0 14px; }
.woocommerce-tabs .woocommerce-Tabs-panel p:last-child { margin-bottom: 0; }

/* Tabela da ficha técnica */
.woocommerce-tabs .shop_attributes {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.woocommerce-tabs .shop_attributes th,
.woocommerce-tabs .shop_attributes td {
    padding: 11px 0;
    /* o Storefront pinta a coluna da esquerda de cinza; aqui a separacao e a
       propria linha, como no restante da loja */
    background: none;
    border: 0;
    border-bottom: 1px solid var(--planac-border-soft);
    text-align: left;
    font-size: 14.5px;
    vertical-align: top;
}
.woocommerce-tabs .shop_attributes tr,
.woocommerce-tabs .shop_attributes tbody tr:nth-child(odd),
.woocommerce-tabs .shop_attributes tbody tr:nth-child(even) { background: none; }
.woocommerce-tabs .shop_attributes th { font-weight: 700; color: var(--planac-title); width: 34%; }
.woocommerce-tabs .shop_attributes td { color: var(--planac-body); }
.woocommerce-tabs .shop_attributes tr:last-child th,
.woocommerce-tabs .shop_attributes tr:last-child td { border-bottom: 0; }
.woocommerce-tabs .shop_attributes td p { margin: 0; }

@media (max-width: 560px) {
    .woocommerce-tabs ul.tabs.wc-tabs li a { padding: 13px 14px; font-size: 14px; }
    .woocommerce-tabs .woocommerce-Tabs-panel { padding: 20px 18px 24px; }
}

/* Aviso do desconto por retirar na loja (carrinho e fechamento) */
.planac-dica-retirada td {
    background: var(--planac-red-soft);
    border-left: 3px solid var(--planac-red);
    font-size: 14px;
    color: var(--planac-text);
    padding: 12px 16px;
}

/* ==========================================================================
   PERGUNTAS FREQUENTES
   ========================================================================== */
.planac-faq {
    max-width: 760px;
    border: 1px solid var(--planac-border);
    border-radius: var(--planac-radius-card);
    background: #fff;
    overflow: hidden;
}
.planac-faq__item { border-bottom: 1px solid var(--planac-border-soft); }
.planac-faq__item:last-child { border-bottom: 0; }

.planac-faq__pergunta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--planac-title);
    cursor: pointer;
    list-style: none;
}
.planac-faq__pergunta::-webkit-details-marker { display: none; }
.planac-faq__pergunta::after {
    content: '';
    flex: none;
    width: 9px;
    height: 9px;
    margin-top: 7px;
    border-right: 2px solid var(--planac-red);
    border-bottom: 2px solid var(--planac-red);
    transform: rotate(45deg);
    transition: transform .2s;
}
.planac-faq__item[open] > .planac-faq__pergunta::after { transform: translateY(3px) rotate(-135deg); }
.planac-faq__pergunta:hover { color: var(--planac-red); }

.planac-faq__resposta { padding: 0 20px 18px; }
.planac-faq__resposta p {
    margin: 0;
    color: var(--planac-body);
    line-height: 1.65;
    max-width: 68ch;
}

/* Páginas de texto (termos, como comprar, políticas) */
.planac-largura-inteira .entry-content h2,
.page .entry-content h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 32px 0 10px;
}
.page .entry-content p,
.page .entry-content li { max-width: 68ch; }
.planac-rodape__legal a { color: var(--planac-faint); text-decoration: none; }
.planac-rodape__legal a:hover { color: var(--planac-red); }
.planac-rodape__redes {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    gap: 14px;
}
.planac-rodape__redes a { font-size: 13.5px; font-weight: 600; color: var(--planac-red); text-decoration: none; }
.planac-rodape__redes a:hover { color: var(--planac-red-hover); }

/* ==========================================================================
   AJUSTES DA AUDITORIA DE 08/09/2026
   Ficam juntos e no fim de proposito: sao correcoes de achados numerados
   (preview/auditoria/ledger.json), e regra posterior vence a anterior sem
   precisar cacar cada bloco la em cima.
   ========================================================================== */

/* [173] Cinza de apoio: #777 dava 4,18:1 em texto de 12-13px; #666 passa de 5:1. */
:root { --planac-faint: #666; }

/* [31][181] No celular o WhatsApp flutuante cobria o botao de compra dos cards
   da direita. Vai para a esquerda, onde nao ha botao; e some nos formularios
   de largura inteira, onde nao sobra lado nenhum e o rodape ja tem o WhatsApp. */
/* Ate 599px (celular) ele vai para a ESQUERDA: a direita e onde fica o botao
   de comprar do card, e um cobria o outro. De 600px em diante volta ao canto
   direito, o lugar de sempre — no tablet ele estava por cima do primeiro card
   de "Complete a instalacao". */
@media (max-width: 599px) {
    .planac-whatsapp-float { left: 16px; right: auto; bottom: 20px; }
}
@media (max-width: 768px) {
    .planac-whatsapp-float { width: 52px; height: 52px; }
    .planac-whatsapp-float svg { width: 28px; height: 28px; }
    body.woocommerce-checkout .planac-whatsapp-float,
    body.woocommerce-account .planac-whatsapp-float { display: none; }
}

/* [65] A barra fixa do Storefront (conta / busca / carrinho) somava 129px com
   o WhatsApp no rodape do celular e cobria conteudo. O cabecalho ja tem busca
   e carrinho; a barra sai. */
.storefront-handheld-footer-bar { display: none !important; }

/* [171] No celular o hamburguer abria so uma fila cortada: o Storefront poe
   .primary-navigation em display:none abaixo de 768px e o tema so abria o ul. */
@media (max-width: 768px) {
    .site-header .main-navigation.toggled .primary-navigation { display: block; }
}

/* [41] As fotos sao quadradas; a caixa 4:3 deixava a foto com 60% da largura
   do card. Caixa quadrada, foto inteira. */
ul.products li.product a img { aspect-ratio: 1 / 1; padding: 8px; }

/* [45] Nome do produto em ate 3 linhas no card: no celular, 4-5 linhas deixavam
   uma fileira so por tela. O nome inteiro segue no title e na ficha. */
ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* [178] O anel de foco do link do card era cortado pelo overflow do card.
   Anel para dentro, sempre visivel. */
ul.products li.product a.woocommerce-LoopProduct-link:focus-visible {
    outline: 2px solid var(--planac-red);
    outline-offset: -3px;
    border-radius: 6px;
}

/* [179] Campos de busca tiravam o outline e usavam um anel com 35% de opacidade
   — invisivel no fundo claro. Anel solido, mesmo padrao do resto da loja. */
.site-header .widget_product_search input[type="search"]:focus-visible,
.site-header .widget_search input[type="search"]:focus-visible,
.planac-sidebar__busca input[type="search"]:focus-visible,
.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row select:focus-visible,
.woocommerce form .form-row textarea:focus-visible {
    outline: 2px solid var(--planac-red);
    outline-offset: 1px;
    box-shadow: none;
}

/* [177] Chevrons da barra lateral sem foco de teclado. */
.planac-sidebar button:focus-visible { outline: 2px solid var(--planac-red); outline-offset: 2px; }

/* [183][64] Alvos de toque de 17px no breadcrumb e nos links legais do rodape. */
@media (max-width: 768px) {
    .woocommerce-breadcrumb a, .site-info a { display: inline-block; padding: 10px 4px; }
}

/* [55] Clicar na seta do carrossel deslocava o conteudo 14px: a seta ficava
   fora da secao (left:-14px) e o foco puxava a pagina. Setas para dentro e a
   secao recorta o que sobra sem virar area de rolagem. */
.planac-complementos { overflow-x: clip; }
.planac-carrossel__seta--ant { left: 0; }
.planac-carrossel__seta--prox { right: 0; }

/* [52] No celular a ficha comecava em y=823: busca, gaveta de categorias e
   "Voltar" vinham antes do produto. Na ficha, a barra lateral some no celular
   — o breadcrumb e o "Voltar" ja levam de volta ao catalogo. */
@media (max-width: 782px) {
    body.single-product #secondary.planac-sidebar { display: none; }
}

/* [36][161] Estado vazio com saida. */
.planac-vazio { padding: 40px 20px; text-align: center; max-width: 560px; margin: 0 auto; }
.planac-vazio__titulo { font-size: 20px; font-weight: 700; color: var(--planac-title); margin: 0 0 8px; }
.planac-vazio__dica { color: var(--planac-faint); margin: 0 0 18px; }
.planac-vazio__acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0; }
.planac-vazio__zap { background: var(--planac-whatsapp) !important; border-color: var(--planac-whatsapp) !important; color: #fff !important; }

/* [53][59][164] Linhas novas do resumo da ficha: unidade de venda, botao de
   orcamento pelo WhatsApp. */
.planac-unidade { color: var(--planac-faint); font-size: 14px; margin: -6px 0 14px; }
.planac-orcamento {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 6px 0 18px; padding: 12px 18px; border-radius: 8px;
    background: var(--planac-whatsapp); color: #fff !important; font-weight: 700; text-decoration: none;
}
.planac-orcamento:hover { filter: brightness(.93); }
.planac-orcamento svg { width: 20px; height: 20px; fill: currentColor; }
.planac-sem-preco { color: var(--planac-title); font-weight: 700; font-size: 17px; margin: 0 0 6px; }

/* [124] Aviso de volume nas fichas de chapa, perfil e forro longo. */
.planac-aviso-volume { font-size: 13.5px; color: var(--planac-faint); border-left: 3px solid var(--planac-red); padding: 6px 12px; margin: 0 0 16px; }

/* Lupa dentro do campo de busca (pedido do Rodrigo, 09/09/2026): icone de
   linha, vermelho, sem caixa. O botao continua sendo o que envia. */
.planac-sidebar__busca button[type="submit"].planac-busca__lupa,
.planac-sidebar__busca .planac-busca__lupa {
    display: flex;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--planac-red) !important;
    cursor: pointer;
}
.planac-busca__lupa svg { width: 20px; height: 20px; display: block; }
.planac-busca__lupa:hover svg { transform: scale(1.08); }
.planac-sidebar__busca input[type="search"] { padding-right: 44px; }

/* Revenda (inc/revenda.php): etiqueta no preco, aviso em Minha conta, dica do CNPJ no checkout. */
.planac-etiqueta-revenda { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 99px; background: var(--planac-red); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.planac-aviso-revenda { padding: 12px 16px; border-radius: 8px; background: #f6f7f9; border-left: 4px solid var(--planac-red); }
.planac-aviso-revenda--sim { border-left-color: var(--planac-whatsapp); }
.planac-cnpj-dica { margin: 6px 0 0; font-size: 13px; color: var(--planac-faint); }
.planac-cnpj-dica.is-revenda { color: var(--planac-title); font-weight: 600; }

/* Catalogo (raiz), pedido do Rodrigo em 09/09/2026: sem o titulo "Catalogo" e sem a
   regua vermelha, e a barra de filtros nivelada com o campo de busca da barra
   lateral. O H1 continua no DOM — buscador e leitor de tela precisam dele — mas
   fica fora da tela. Nas categorias o titulo permanece: "Chapas" e o que confirma
   o que foi filtrado. */
body.woocommerce-shop .woocommerce-products-header {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* A busca da barra lateral tem ~44px de altura; a barra de filtros ganha a mesma
   altura e comeca no mesmo ponto, entao os dois ficam alinhados pelo centro. */
body.woocommerce-shop .planac-barra-filtros { min-height: 44px; margin-top: 0; }

/* Padrao de foto, pedido do Rodrigo em 09/09/2026 ("a altura das imagens esta
   variando demais"). A caixa do card ja era quadrada, mas a foto so ocupava a
   sua largura natural: um arquivo de 170 px ficava com 170 px dentro de uma
   coluna de 213 px, e o card parecia menor que o vizinho. Agora toda foto de
   card preenche a caixa quadrada inteira, seja qual for o tamanho do arquivo.
   object-fit: contain mantem a foto inteira (sem o corte que comeu a Tytan);
   foto larga, como um perfil metalico, continua com faixa branca em cima e
   embaixo — e a forma do produto, nao um defeito. */
ul.products li.product a img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* O mesmo padrao na ficha: a foto principal vive numa caixa quadrada da largura
   da coluna, entao a ficha de um perfil e a de um cartucho tem a mesma altura.
   So a foto dentro do link (o zoom do WooCommerce injeta outra img no mesmo
   bloco e ela precisa ficar livre). */
.single-product div.product .woocommerce-product-gallery__image > a > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* [49] No celular o botao "Categorias" abre a gaveta; o titulo dentro dela
   repetia a mesma palavra logo abaixo. */
@media (max-width: 860px) {
    .planac-sidebar__nav .planac-catnav__titulo { display: none; }
}

/* ==========================================================================
   FICHA V2 — o desenho da ficha do site institucional (src/produto.njk e
   .prod__* de styles.css no repo planacdistribuidora.com). Entra por produto
   (meta _planac_ficha_v2, inc/ficha-v2.php), a partir da Chapa Cimenticia
   Infibra NTF 10 mm. Tudo escopado em body.planac-ficha-v2.
   ========================================================================== */
body.planac-ficha-v2 { background: #fff; }

/* Breadcrumb do site: texto cinza, links vermelhos, barra "/" e linha fina embaixo. */
body.planac-ficha-v2 .woocommerce-breadcrumb {
    background: #fff;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #666;
    padding: 16px 0;
}
body.planac-ficha-v2 .woocommerce-breadcrumb a { color: var(--planac-red); }
body.planac-ficha-v2 .breadcrumb-sep { margin: 0 8px; color: #767676; }

/* Duas colunas como .prod do site: foto 1fr, texto 1.15fr. O Storefront usa
   float com larguras fixas; aqui vira grade, e o que vem depois (abas, caixas)
   ocupa a linha inteira. Os clearfix do Storefront sairiam como celulas vazias.

   Linha 1: foto | resumo (titulo, preco, orcamento, retirada)
   Linha 2: Especificacoes e Aplicacoes, embaixo da foto — o resumo desce e
            ocupa as duas linhas, entao as duas colunas terminam juntas em vez
            de uma tira comprida a direita e um vazio a esquerda.
   Linha 3+: abas e as duas caixas de produtos, na largura inteira.
   No HTML o bloco de dados vem DEPOIS do resumo (ordem de leitura), e e a
   grade que o traz para cima — por isso as posicoes sao explicitas. */
/* Quem decide se cabem duas colunas é o ESPAÇO DA FICHA, não o tamanho da
   janela. Com a barra lateral de 260 px ao lado, uma tela de 900 px deixava só
   517 px para o produto: a foto ficava com 188 px (menor que a miniatura do
   catálogo), o botão de orçamento quebrava em duas linhas e "Fibrocimento NTF
   (cimento + fibras vegetais mineralizadas)" saía em três. Por isso a medida é
   do container (#primary), e não da tela.

   Larguras reais medidas em 10/09/2026: tela 900 -> ficha 517 · 1024 -> 641 ·
   1200 -> 817 · 1440 -> 956. Abaixo de 700 a ficha empilha.

   O padrão é UMA coluna; as duas colunas só entram dentro do @container. Assim
   um navegador que não entenda container query mostra a versão empilhada, que
   funciona em qualquer largura. */
body.planac-ficha-v2 #primary {
    container-type: inline-size;
    container-name: ficha;
}
body.planac-ficha-v2.single-product div.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 40px;
    row-gap: 24px;
    align-items: start;
}
body.planac-ficha-v2.single-product div.product::before,
body.planac-ficha-v2.single-product div.product::after { display: none; }
body.planac-ficha-v2.single-product div.product > .woocommerce-product-gallery,
body.planac-ficha-v2.single-product div.product > .summary { float: none; width: auto; margin: 0; }
/* Empilhada, a foto ocupa a coluna inteira: em ficha estreita ela É o conteúdo,
   e centralizá-la com sobra dos dois lados quebraria o eixo do texto. */
body.planac-ficha-v2.single-product div.product > .woocommerce-product-gallery {
    max-width: none;
    margin-inline: 0;
}
body.planac-ficha-v2.single-product div.product > .prod__dados {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
}
body.planac-ficha-v2 .prod__dados .prod__norma { grid-column: 1 / -1; }
body.planac-ficha-v2 .prod__bloco { min-width: 0; }
/* Ficha estreita: o botão vira barra de largura inteira, como em app. */
body.planac-ficha-v2 .prod__cta { display: block; text-align: center; }

/* Faixa do meio (620 a 699 px de ficha): foto e texto lado a lado em colunas
   IGUAIS. Com 0.85fr para a foto, uma ficha de 641 px deixava a imagem com
   222 px — menor que a miniatura do catálogo. Meio a meio, ela fica com 268 px.
   Especificações e Aplicações seguem empilhadas: em 300 px por coluna,
   "Fibrocimento NTF (cimento + fibras vegetais mineralizadas)" sai em três
   linhas. */
@container ficha (min-width: 620px) {
    body.planac-ficha-v2.single-product div.product {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        row-gap: 0;
    }
    body.planac-ficha-v2.single-product div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
    body.planac-ficha-v2.single-product div.product > .summary { grid-column: 2; grid-row: 1; }
    /* As listas seguem as MESMAS colunas do topo, senão "Especificações"
       começaria embaixo da foto mas com o dobro da largura dela. */
    body.planac-ficha-v2.single-product div.product > .prod__dados {
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        margin: 30px 0 0;
    }
    body.planac-ficha-v2 .prod__cta { display: inline-block; text-align: left; }
}

/* Ficha larga: a foto volta a 1fr e as duas listas ficam lado a lado, nas MESMAS
   medidas da linha de cima — é isso que alinha "Especificações" com a foto e
   "Aplicações" com o título. */
@container ficha (min-width: 700px) {
    body.planac-ficha-v2.single-product div.product {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }
}

/* Ficha larga (desktop): Especificações, Aplicações e Informativo em 3 colunas
   iguais. 900 px porque a barra lateral de categorias deixa a ficha em ~956 px
   numa janela de 1560; abaixo disso caem para 2 e, no celular, 1. */
@container ficha (min-width: 900px) {
    body.planac-ficha-v2.single-product div.product > .prod__dados {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 28px;
    }
}

/* Secao visivel "Sobre o produto" + FAQ (texto unico para SEO). Largura livre:
   ao abrir um chevron o texto ocupa a largura da ficha; a leitura continua
   confortavel porque os paragrafos tem limite proprio (72ch, mais abaixo). */
body.planac-ficha-v2 .prod__sobre { grid-column: 1 / -1; margin: 0; }
body.planac-ficha-v2 .prod__sobre__corpo p { font-size: 15px; color: var(--planac-text); margin: 0 0 14px; }
body.planac-ficha-v2 .prod__sobre__corpo h3 { font-size: 16px; color: var(--planac-red); margin: 18px 0 4px; }
/* "Sobre o produto" e "Perguntas frequentes" sao chevrons irmaos, cabecalho de
   15px/700. So o filete de baixo (regra base .prod__faq) os separa. "Sobre" NAO
   leva filete em cima: a linha inteirica acima dele era ruido visual (pedido do
   Rodrigo). "Perguntas" so ganha filete em cima quando NAO vem logo apos "Sobre"
   (que ja o separa por baixo). */
body.planac-ficha-v2 .prod__faq--perguntas { border-top: 1px solid var(--planac-border-soft); }
body.planac-ficha-v2 .prod__faq--sobre + .prod__faq--perguntas { border-top: 0; }
/* Mesmo reset que os chevrons de Especificacoes/Aplicacoes (.prod__faq--dados):
   sem ele a margem de topo do .prod__h2 afastaria o cabecalho do filete e o
   padrao ficaria diferente do "dos outros". */
body.planac-ficha-v2 .prod__faq--sobre > .prod__faq__titulo,
body.planac-ficha-v2 .prod__faq--perguntas > .prod__faq__titulo { margin: 0; }
/* Dentro de "Perguntas frequentes" cada pergunta ja nasce aberta. O corpo do pai
   dispensa a folga de baixo (as perguntas trazem a sua) e a ultima pergunta
   perde o filete para nao duplicar com o do pai. */
body.planac-ficha-v2 .prod__faq--perguntas > .prod__faq__corpo { padding-bottom: 2px; }
body.planac-ficha-v2 .prod__faq--perguntas .prod__faq--q:last-child { border-bottom: 0; }

/* Na FICHA, entre 861 e 1180 px de tela, a barra lateral sai da frente.
   Ela custa 260 px fixos: numa janela de 1024 px sobravam 641 px para o
   produto, e a foto caía para 222 px. Sem ela a ficha fica com ~940 px e a foto
   volta a ~390 px. Quem navega continua com o caminho no topo, o menu do
   cabeçalho, o "Voltar ao catálogo" e as duas caixas de produtos no pé — e
   abaixo de 861 px a barra já virava gaveta de qualquer forma.
   No CATÁLOGO a barra continua em todas as larguras: lá ela é o filtro. */
@media (min-width: 861px) and (max-width: 1180px) {
    body.planac-ficha-v2.planac-com-sidebar .site-content .col-full { grid-template-columns: minmax(0, 1fr); }
    body.planac-ficha-v2.planac-com-sidebar .site-content .col-full > #secondary { display: none; }
    body.planac-ficha-v2.planac-com-sidebar .site-content .col-full > #primary { grid-column: 1; }
}

/* Ficha muito larga (monitor grande): linha de texto tem limite de leitura.
   Sem isto a descrição dentro da sanfona passava de 120 caracteres por linha. */
@container ficha (min-width: 900px) {
    body.planac-ficha-v2 .prod__faq__corpo p,
    body.planac-ficha-v2 .prod__faq__corpo ul,
    body.planac-ficha-v2 .prod__faq__corpo ol { max-width: 72ch; }
}
/* min-width: 0 e obrigatorio: sem ele a celula da grade cresce ate caber o item
   mais largo (o trilho do carrossel das duas caixas), e no celular a coluna
   chegou a 2170px — a foto, em 4:3, virava um bloco de 1636px de altura. */
body.planac-ficha-v2.single-product div.product > :not(.woocommerce-product-gallery):not(.summary):not(.prod__dados) {
    grid-column: 1 / -1;
    min-width: 0;
}
/* O primeiro titulo do bloco nao precisa do respiro de cima: a foto ja separa. */
body.planac-ficha-v2 .prod__dados .prod__h2:first-child { margin-top: 0; }

/* Foto como .prod__media: caixa 4:3 branca, borda #e6e8eb, raio 14, foto inteira. */
body.planac-ficha-v2.single-product div.product .woocommerce-product-gallery {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 16px;
}
body.planac-ficha-v2.single-product div.product .woocommerce-product-gallery__image > a > img { aspect-ratio: 4 / 3; }

/* Titulo (.prod__title ja e o mesmo clamp/800) e linhas de metadados. */
body.planac-ficha-v2.single-product div.product .product_title { margin: 0 0 8px; }
body.planac-ficha-v2 .prod__metalines { margin: 0 0 18px; }
body.planac-ficha-v2 .prod__metalines p { font-size: 13px; color: #777; margin: 0 0 4px; line-height: 1.5; }
body.planac-ficha-v2 .prod__metalines a,
body.planac-ficha-v2 .prod__lbl { color: var(--planac-red); text-decoration: none; }
body.planac-ficha-v2 .prod__metalines a:hover { text-decoration: underline; }

/* Descricao curta (.prod__desc), titulos de bloco (.prod__h2) e listas (.spec-list). */
body.planac-ficha-v2 .woocommerce-product-details__short-description p { font-size: 15px; color: #444; line-height: 1.7; margin: 6px 0 4px; }
body.planac-ficha-v2 .prod__h2 { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 20px 0 8px; }
body.planac-ficha-v2 .spec-list { list-style: none; padding: 0; margin: 0 0 4px; }
body.planac-ficha-v2 .spec-list li {
    position: relative;
    padding: 6px 0 6px 18px;
    margin: 0;
    font-size: 14px;
    color: #444;
    border-bottom: 1px solid #eef0f2;
}
body.planac-ficha-v2 .spec-list li:last-child { border-bottom: 0; }
body.planac-ficha-v2 .spec-list li::before { content: "•"; color: var(--planac-red); position: absolute; left: 2px; }
body.planac-ficha-v2 .prod__norma { font-size: 13px; color: #777; margin: 14px 0 0; }
/* Norma como legenda logo abaixo da foto, dentro da moldura da galeria: um
   filete separa da imagem e o texto fica pequeno e discreto, como etiqueta. */
body.planac-ficha-v2.single-product div.product .woocommerce-product-gallery .prod__norma--foto {
    margin: 14px 0 0;
    padding: 12px 2px 0;
    border-top: 1px solid var(--planac-border-soft);
    font-size: 13px;
    color: #777;
    line-height: 1.5;
}

/* Preco (quando vier do ERP) e compra ficam entre as listas e o botao de orcamento. */
body.planac-ficha-v2.single-product div.product .summary .price { margin: 0 0 10px; }
body.planac-ficha-v2.single-product div.product form.cart { margin: 18px 0 0; }

/* Botao vermelho do site (.btn-hero) + ficha tecnica + voltar. */
body.planac-ficha-v2 .prod__acoes { margin: 18px 0 0; }
body.planac-ficha-v2 .prod__cta {
    display: inline-block;
    background: var(--planac-red);
    color: #fff;
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background .3s;
}
body.planac-ficha-v2 .prod__cta:hover,
body.planac-ficha-v2 .prod__cta:focus-visible { background: #C92227; color: #fff; }
body.planac-ficha-v2 .prod__pdf { display: block; margin: 12px 0 0; font-size: 14px; color: var(--planac-red); text-decoration: none; }
body.planac-ficha-v2 .prod__pdf:hover { text-decoration: underline; }
body.planac-ficha-v2 .prod__back { display: inline-block; margin: 0 0 14px; color: #666; font-size: 14px; text-decoration: none; }
body.planac-ficha-v2 .prod__back:hover { color: var(--planac-red); }

/* Nota de retirada como .prod__note do site; aviso de volume logo abaixo. */
body.planac-ficha-v2 .planac-pickup-note {
    font-size: 14.5px;
    color: #555;
    line-height: 1.7;
    background: #f6f7f9;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 18px 0 0;
}
body.planac-ficha-v2 .planac-aviso-volume { margin: 10px 0 0; }

/* As abas continuam; so ganham respiro. */
body.planac-ficha-v2.single-product div.product .woocommerce-tabs { margin-top: 40px; }

/* A decisão de uma ou duas colunas mudou para @container (ver acima); esta
   media query cuida só do que depende mesmo do tamanho da TELA. */
@media (max-width: 782px) {
    body.planac-ficha-v2 .prod__back { display: block; }
}

/* ==========================================================================
   PAGINACAO DO CATALOGO — alvos de dedo e um "Seguinte" que se ve
   Pedido do Rodrigo em 10/09/2026: "no celular adotar uma distribuicao
   parecida com o Mercado Livre". Ver inc/shop.php (textos e reticencias).
   ========================================================================== */
.planac-pag__contexto {
    margin: 26px 0 10px;
    text-align: center;
    font-size: 13px;
    color: var(--planac-faint);
}
.woocommerce-pagination { margin: 0 0 8px; }
.woocommerce-pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
.woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; overflow: visible; }
.woocommerce-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--planac-border);
    border-radius: var(--planac-radius-input);
    background: #fff;
    color: var(--planac-title);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.woocommerce-pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:focus-visible { border-color: var(--planac-red); color: var(--planac-red); }
.woocommerce-pagination .page-numbers.current {
    background: var(--planac-red);
    border-color: var(--planac-red);
    color: #fff;
}
/* Reticencia nao e botao: sem caixa e sem alvo. */
.woocommerce-pagination .page-numbers.dots {
    min-width: 20px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--planac-faint);
    font-weight: 400;
}
/* "Anterior" e "Seguinte" com palavra, nao so seta.
   O Storefront joga o texto para fora da tela (text-indent: -9999px, overflow
   hidden) e desenha uma seta de icone no ::after — o botao virava um quadrado
   mudo. Aqui o texto volta e a seta de icone sai. Os seletores repetem a
   estrutura (ul.page-numbers li a) para ganhar do CSS do pai sem !important. */
.woocommerce-pagination ul.page-numbers li a.prev,
.woocommerce-pagination ul.page-numbers li a.next,
.woocommerce-pagination ul.page-numbers li span.prev,
.woocommerce-pagination ul.page-numbers li span.next {
    text-indent: 0;
    overflow: visible;
    font-weight: 700;
    font-size: 15px;
}
.woocommerce-pagination ul.page-numbers li a.prev::after,
.woocommerce-pagination ul.page-numbers li a.next::after,
.woocommerce-pagination ul.page-numbers li a.prev::before,
.woocommerce-pagination ul.page-numbers li a.next::before { content: none; display: none; }
/* A cor do texto precisa vencer um estilo que o Storefront imprime no <head>:
   ".woocommerce-pagination .page-numbers li .page-numbers:not(.current)" em
   cinza #6d6d6d — que deixava "Seguinte" cinza sobre vermelho. O :not(.dots)
   a mais e o que desempata; nenhum !important e preciso. */
.woocommerce-pagination .page-numbers li .page-numbers:not(.current):not(.dots) { color: var(--planac-title); }
/* A pagina atual vinha cinza sobre cinza pelo mesmo estilo embutido. */
.woocommerce-pagination .page-numbers li .page-numbers.current:not(.dots) {
    background: var(--planac-red);
    border-color: var(--planac-red);
    color: #fff;
}
.woocommerce-pagination .page-numbers li .page-numbers.next:not(.current) {
    background: var(--planac-red);
    border-color: var(--planac-red);
    color: #fff;
}
.woocommerce-pagination .page-numbers li .page-numbers.next:not(.current):hover,
.woocommerce-pagination .page-numbers li .page-numbers.next:not(.current):focus-visible { background: #C92227; border-color: #C92227; color: #fff; }
.woocommerce-pagination .page-numbers li a.page-numbers:not(.current):not(.next):hover,
.woocommerce-pagination .page-numbers li a.page-numbers:not(.current):not(.next):focus-visible { color: var(--planac-red); }
.woocommerce-pagination .planac-pag__seta { font-size: 16px; line-height: 1; }

@media (max-width: 782px) {
    /* Os numeros ficam na primeira fileira; "Anterior" e "Seguinte" descem para
       uma faixa propria, cada um com metade da largura — o polegar acha sem mirar.
       Sem :has() (navegador antigo) tudo fica numa fileira so, que ainda funciona. */
    .woocommerce-pagination ul.page-numbers li:has(> .prev),
    .woocommerce-pagination ul.page-numbers li:has(> .next) {
        order: 2;
        flex: 1 1 calc(50% - 4px);
    }
    .woocommerce-pagination ul.page-numbers li:has(> .prev) .page-numbers,
    .woocommerce-pagination ul.page-numbers li:has(> .next) .page-numbers { width: 100%; }
    .woocommerce-pagination .page-numbers { min-width: 42px; padding: 0 10px; }
}

/* Sanfona no lugar das abas (ficha v2) — mesmo chevron da barra lateral.
   <details>/<summary> nativos: abrem sem JavaScript e o texto de dentro fica no
   código-fonte mesmo fechado, entao o buscador continua lendo. */
body.planac-ficha-v2 .prod__sanfona {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 34px 0 0;
    border-top: 1px solid var(--planac-border-soft);
}
body.planac-ficha-v2 .prod__faq { border-bottom: 1px solid var(--planac-border-soft); }
body.planac-ficha-v2 .prod__faq__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 2px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 700;
    color: var(--planac-title);
    cursor: pointer;
    list-style: none;
}
/* O triangulo padrao do navegador sai; quem indica e o chevron vermelho. */
body.planac-ficha-v2 .prod__faq__titulo::-webkit-details-marker { display: none; }
body.planac-ficha-v2 .prod__faq__titulo::marker { content: ""; }
body.planac-ficha-v2 .prod__faq__titulo:hover { color: var(--planac-red); }
body.planac-ficha-v2 .prod__faq__titulo:focus-visible {
    outline: 2px solid var(--planac-red);
    outline-offset: 2px;
    border-radius: 4px;
}
body.planac-ficha-v2 .prod__faq__chevron {
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--planac-red);
    border-bottom: 2px solid var(--planac-red);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s;
}
/* Filho direto: sem o ">", abrir "Perguntas frequentes" (pai) rodaria tambem os
   chevrons das perguntas de dentro, mesmo as fechadas. Cada chevron segue so o
   proprio <details>. */
body.planac-ficha-v2 .prod__faq[open] > .prod__faq__titulo > .prod__faq__chevron { transform: translateY(2px) rotate(-135deg); }
body.planac-ficha-v2 .prod__faq__corpo { padding: 0 2px 22px; }
body.planac-ficha-v2 .prod__faq__corpo > *:first-child { margin-top: 0; }
body.planac-ficha-v2 .prod__faq__corpo p { font-size: 14.5px; color: #444; line-height: 1.7; }
body.planac-ficha-v2 .prod__faq__corpo table.woocommerce-product-attributes { margin: 0 0 18px; }
body.planac-ficha-v2 .prod__faq__corpo .planac-pickup-note { margin: 0 0 12px; }
body.planac-ficha-v2 .prod__faq__corpo .planac-aviso-volume { margin: 0; }

/* Especificações e Aplicações: sanfona no celular, título com a lista aberta no
   computador (10/09/2026). O mesmo <details> serve aos dois — quem abre e fecha
   é o script em inc/ficha-v2.php, que mede a ficha, não a tela. */
body.planac-ficha-v2 .prod__dados { border-top: 1px solid var(--planac-border-soft); margin-top: 22px; }
body.planac-ficha-v2 .prod__faq--dados { border-bottom: 1px solid var(--planac-border-soft); }
body.planac-ficha-v2 .prod__faq--dados > summary { margin: 0; }
body.planac-ficha-v2 .prod__faq--dados > .spec-list { padding-bottom: 14px; }
body.planac-ficha-v2 .prod__dados .prod__norma { margin: 14px 0 0; }

@container ficha (min-width: 620px) {
    /* Ficha larga: duas colunas, cada bloco um chevron fechado. Usa a mesma
       linha confortável (44 px, chevron centrado) da sanfona, que já fica bem —
       sem apertar a linha, o que desalinhava e cortava o chevron. */
    body.planac-ficha-v2 .prod__dados { border-top: 0; margin-top: 30px; }
}

/* ===================================================================
   Modo "Lista de material" (hibrido) — inc/lista-material.php
   Produto COM preco: compra normal (total, checkout, pagamento).
   Produto SEM preco: entra na lista enviada pelo WhatsApp para orcamento.
   As regras abaixo escondem preco/total/checkout SO no carrinho de orcamento
   (sem a classe .planac-cart-compra); no carrinho de compra pura, tudo volta.
   =================================================================== */

/* Colunas de preco e subtotal saem da tabela SO no carrinho de orcamento. */
body.planac-lista-material.woocommerce-cart:not(.planac-cart-compra) .shop_table .product-price,
body.planac-lista-material.woocommerce-cart:not(.planac-cart-compra) .shop_table .product-subtotal { display: none; }

/* Totais, cupom e venda-cruzada: escondidos so no carrinho de orcamento. */
body.planac-lista-material.woocommerce-cart:not(.planac-cart-compra) .cart-collaterals,
body.planac-lista-material.woocommerce-cart:not(.planac-cart-compra) .cart .actions .coupon { display: none; }
body.planac-lista-material.woocommerce-cart:not(.planac-cart-compra) .cart .actions { text-align: right; }

/* Cabecalho: esconde o valor/checkout so quando o carrinho NAO e compra pura. */
body.planac-lista-material:not(.planac-cart-compra) .site-header-cart .cart-contents .amount,
body.planac-lista-material:not(.planac-cart-compra) .site-header-cart .widget_shopping_cart .total,
body.planac-lista-material:not(.planac-cart-compra) .site-header-cart .widget_shopping_cart .buttons .checkout { display: none; }

/* Bloco de envio: botao verde grande do WhatsApp + observacao. */
body.planac-lista-material .planac-lista-envio { margin: 24px 0 0; }
body.planac-lista-material .planac-lista-whats {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    padding: 15px 26px;
    border-radius: 8px;
    text-decoration: none;
}
body.planac-lista-material .planac-lista-whats:hover { background: #1eb257; color: #fff; }
body.planac-lista-material .planac-lista-whats svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
body.planac-lista-material .planac-lista-obs { margin: 10px 0 0; font-size: 13px; color: #6b6b6b; max-width: 60ch; }

/* --- Ficha do produto (single) em modo lista ------------------------ */
/* Area de acao compacta: quantidade (com setas chevron ↑/↓) + "Adicionar a
   lista", e o WhatsApp por produto como botao secundario. Mesma altura (44px) e
   larguras naturais — nada estica na largura toda. */
body.planac-lista-material.single-product form.cart:not(.variations_form),
body.planac-lista-material.single-product .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin: 12px 0 0;
}
body.planac-lista-material.planac-single-sem-preco.single-product .single_variation .woocommerce-variation-price { display: none; }

/* Quantidade: uma caixa so, com o numero e, a direita, as setas em chevron
   (mesmo desenho vermelho dos chevrons da ficha). As setas nativas do navegador
   saem. */
body.planac-lista-material.single-product form.cart .quantity {
    display: inline-flex;
    align-items: stretch;
    height: 38px;
    border: 1px solid var(--planac-border);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
body.planac-lista-material.single-product form.cart .quantity .qty {
    width: 42px;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 14px;
    -moz-appearance: textfield;
    appearance: textfield;
}
body.planac-lista-material.single-product form.cart .quantity .qty::-webkit-outer-spin-button,
body.planac-lista-material.single-product form.cart .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
body.planac-lista-material .planac-qty-nav {
    display: flex;
    flex-direction: column;
    width: 24px;
    border-left: 1px solid var(--planac-border);
}
body.planac-lista-material .planac-qty-btn {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: var(--planac-bg-alt);
    cursor: pointer;
}
body.planac-lista-material .planac-qty-btn + .planac-qty-btn { border-top: 1px solid var(--planac-border); }
body.planac-lista-material .planac-qty-btn:hover { background: var(--planac-red-soft); }
body.planac-lista-material .planac-qty-btn:focus-visible { outline: 2px solid var(--planac-red); outline-offset: -2px; }
body.planac-lista-material .planac-qty-chevron {
    display: block;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--planac-red);
    border-bottom: 2px solid var(--planac-red);
}
body.planac-lista-material .planac-qty-up .planac-qty-chevron { transform: translateY(1px) rotate(-135deg); }
body.planac-lista-material .planac-qty-down .planac-qty-chevron { transform: translateY(-1px) rotate(45deg); }

/* "Adicionar à lista": vermelho, compacto (38px), largura natural. */
body.planac-lista-material.single-product form.cart .single_add_to_cart_button {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 18px;
    background: var(--planac-red);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
}
body.planac-lista-material.single-product form.cart .single_add_to_cart_button:hover { background: var(--planac-red-hover); }

/* "Orçamento no WhatsApp": secundário (contorno), AO LADO do "Adicionar à
   lista", mesma altura compacta. Renderizado dentro do formulário. */
body.planac-lista-material.single-product .prod__cta--whats {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    background: transparent;
    color: var(--planac-red);
    border: 1.5px solid var(--planac-red);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}
body.planac-lista-material.single-product .prod__cta--whats:hover {
    background: var(--planac-red);
    color: #fff;
}

/* Seletores de variação (produto variável) no padrão da ficha — modo lista. */
body.planac-lista-material.single-product form.cart .variations { margin: 0 0 14px; border: 0; }
/* Cada atributo numa linha: rótulo à esquerda (alinhado) e os chips ao lado,
   ambos centralizados verticalmente na mesma altura dos chips (~33px). */
body.planac-lista-material.single-product form.cart .variations tr { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 12px; padding: 0; border: 0; margin: 0 0 10px; }
body.planac-lista-material.single-product form.cart .variations td,
body.planac-lista-material.single-product form.cart .variations th { display: flex; align-items: center; padding: 0; border: 0; text-align: left; }
body.planac-lista-material.single-product form.cart .variations th.label { min-width: 92px; min-height: 33px; }
body.planac-lista-material.single-product form.cart .variations th.label label { font-weight: 700; font-size: 13px; color: var(--planac-title); margin: 0; }
body.planac-lista-material.single-product form.cart .variations select {
    width: 100%;
    max-width: 320px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--planac-border);
    border-radius: 6px;
    font-size: 15px;
    background: #fff;
    cursor: pointer;
}
body.planac-lista-material.single-product form.cart .variations select:focus-visible { outline: 2px solid var(--planac-red); outline-offset: 1px; }
body.planac-lista-material.single-product form.cart .reset_variations { display: inline-block; margin: 4px 0 0; font-size: 13px; color: var(--planac-red); text-decoration: none; }

/* Variações no padrão Mercado Livre: subtítulo "Opções" + chips clicáveis. */
body.planac-lista-material .planac-opcoes-titulo { margin: 4px 0 8px; font-size: 15px; font-weight: 700; color: var(--planac-title); }
body.planac-lista-material .planac-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
body.planac-lista-material .planac-swatch {
    min-height: 30px; padding: 4px 11px;
    border: 1.5px solid var(--planac-border); border-radius: 6px;
    background: #fff; color: var(--planac-title);
    font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
body.planac-lista-material .planac-swatch:hover { border-color: var(--planac-red); }
body.planac-lista-material .planac-swatch.is-selected {
    border-color: var(--planac-red); background: var(--planac-red-soft); color: var(--planac-red);
    box-shadow: inset 0 0 0 1px var(--planac-red);
}
body.planac-lista-material .planac-swatch.is-disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
body.planac-lista-material .planac-swatch:focus-visible { outline: 2px solid var(--planac-red); outline-offset: 2px; }