/* ══════════════════════════════════════════════════════════════════════
   THE WOO PREMIUM — Main Stylesheet
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Organização por BLOCK:nome:START/END (porte do padrão Legado public).
   Tokens DS vêm do style.css (:root). Sempre var(--token, fallback).
   ZERO Tailwind, ZERO cor hardcoded fora de fallbacks.

   Blocos nesta fase (1 + 2):
     - container-base
     - skip-link (a11y)
     - breadcrumb
     - page-hero
     - site-header (logo + nav + actions)
     - site-nav (dropdowns desktop)
     - site-mobile (drawer mobile)
     - mini-cart (trigger + drawer + overlay)
     - site-footer

   Blocos das fases futuras (entram quando a fase chegar):
     - listing (cards de blog/produto/serviço)
     - product-info (single product)
     - cart-checkout
     - shop-filters
     - slider
     - ask-expert
     - product-categories-public
═══════════════════════════════════════════════════════════════════════ */


/* === BLOCK:container-base:START === */
.container {
    width: 100%;
    max-width: var(--container-max, min(1500px, 96vw));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding, clamp(12px, 2.5vw, 28px));
    padding-right: var(--container-padding, clamp(12px, 2.5vw, 28px));
    box-sizing: border-box;
}
/* === BLOCK:container-base:END === */


/* === BLOCK:skip-link:START === */
/* Skip-to-content para usuários de teclado (WP best practice). */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    z-index: var(--z-modal, 500);
    padding: 0.5rem 1rem;
    background: var(--color-secondary, #000000);
    color: #FFFFFF;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-100%);
    transition: transform 0.2s ease;
}
.skip-link:focus {
    transform: translateY(40px);
    outline: 2px solid var(--color-accent, #FFFFFF);
}
/* === BLOCK:skip-link:END === */


/* === BLOCK:breadcrumb:START === */
.breadcrumb-wrapper {
    background: var(--color-surface, #F8F8F8);
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    padding: 0.625rem 0;
}
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
}
.breadcrumb::-webkit-scrollbar { display: none; }

.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item span,         /* current usa <span> direto sem <a> parent */
.breadcrumb-sep {
    white-space: nowrap;
    flex-shrink: 0;
    font-family: var(--font-body, sans-serif);
    font-size: var(--font-label, 0.75rem);
    font-weight: 500;
    line-height: 1.4;
    /* text-transform NÃO é setado aqui — o título já vem capitalizado
       via the_woo_premium_titlecase() no PHP. */
    text-transform: none;
    letter-spacing: 0;
}

.breadcrumb-item {
    color: var(--color-text-muted, #565758);
}
.breadcrumb-item a {
    color: var(--color-primary, #E22421);
    text-decoration: none;
}
.breadcrumb-item a:hover { text-decoration: underline; }

.breadcrumb-item--current,
.breadcrumb-item--current span {
    color: var(--color-secondary, #000000);
    font-weight: 600;
}

.breadcrumb-sep {
    padding: 0 0.375rem;
    opacity: 0.5;
    color: var(--color-text-muted, #565758);
}
/* === BLOCK:breadcrumb:END === */


/* === BLOCK:page-hero:START === */
/* Hero compacto/médio usado em arquivos, single de página, sobre. */
.page-hero {
    padding: var(--spacing-section, clamp(2.5rem, 6vw, 5rem)) 0;
    background: var(--color-surface, #F8F8F8);
    color: var(--color-text, #000000);
}
.page-hero--text { /* variante sem mídia, só texto */ }
.page-hero--auto { padding-block: clamp(1.75rem, 4vw, 2.75rem); } /* compacto */

.page-hero__inner {
    width: 100%;
    max-width: var(--container-max, min(1500px, 96vw));
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    box-sizing: border-box;
    text-align: center;
}

.page-hero__eyebrow {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: color-mix(in srgb, var(--color-primary, #E22421) 18%, transparent);
    color: var(--color-primary, #E22421);
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--rounded-full, 50px);
    margin-bottom: 0.75rem;
}

.page-hero__title {
    margin: 0 0 0.75rem;
    font-family: var(--font-heading, sans-serif);
    font-size: var(--font-h1, clamp(2rem, 4.5vw, 3rem));
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-secondary, #000000);
}

.page-hero__excerpt {
    margin: 0 auto;
    max-width: 640px;
    color: var(--color-text-muted, #565758);
    font-family: var(--font-body, sans-serif);
    font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
    line-height: 1.55;
}
/* === BLOCK:page-hero:END === */


/* === BLOCK:site-header:START === */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 10);
    background: var(--color-header-bg, #FFFFFF);
    border-bottom: 1px solid var(--color-header-border, #E5E5E5);
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
}
body:has(.site-header) { overflow-x: hidden; }

.site-header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(8px, 1.8vw, 24px);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0.875rem var(--container-padding);
    box-sizing: border-box;
}
.site-header__inner > * { min-width: 0; }

/* Topbar (linha 1): 2 colunas — branding | actions (sem nav central).
   Nav vai pra LINHA 2 abaixo, na .twp-mega-nav. */
.site-header__topbar {
    grid-template-columns: auto 1fr;
    justify-content: space-between;
}
.site-header__topbar .site-header__actions {
    justify-self: end;
}

/* Logo / branding */
.site-branding {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}
.site-branding__logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    text-decoration: none;
    color: var(--color-header-text, #000000);
}
.site-branding__logo img {
    height: clamp(36px, 5vw, 52px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
.site-branding__name {
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-header-text, #000000);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cluster de ações à direita (search + user + cart) */
.site-header__actions {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 1vw, 12px);
    flex-shrink: 0;
}
.site-header__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-header-text, #000000);
    cursor: pointer;
    border-radius: var(--rounded-sm, 4px);
    transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
    position: relative;
    text-decoration: none;
}
.site-header__icon-btn:hover {
    background: color-mix(in srgb, var(--color-header-hover, #E22421) 8%, transparent);
    color: var(--color-header-hover, #E22421);
}
.site-header__icon-btn:active { transform: scale(0.95); }
.site-header__icon-btn:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 2px;
}

/* Botão lupa — abre o painel de busca (twp-search-panel) */
.site-header__search-toggle { /* herda .site-header__icon-btn */ }

/* Burger (visível só em mobile) — agora à ESQUERDA do logo com label "MENU" */
.site-burger {
    display: none;
    align-items: center;
    gap: 0.4375rem;
    padding: 0 0.5rem;
    height: 40px;
    background: transparent;
    border: 0;
    color: var(--color-header-text, #000000);
    cursor: pointer;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.site-burger__icon { flex-shrink: 0; }
.site-burger__label { line-height: 1; }
.site-burger:active { transform: scale(0.95); }

@media (max-width: 900px) {
    /* ── Layout mobile premium ─────────────────────────────────────
     * 3 colunas: [burger 44px] [logo 1fr — ocupa todo o restante] [actions auto]
     * - Burger e ícones de ação têm o mesmo tamanho (44×44) → área touch HIG.
     * - Logo expande para preencher o espaço entre eles, alinhada à esquerda
     *   (logo encosta no burger, sem flutuar no centro).
     * - Header com altura confortável (~68px) — espaço de 12px acima/abaixo
     *   dos elementos de 44px.
     * ────────────────────────────────────────────────────────────── */
    .site-header__inner {
        padding: 0.75rem var(--container-padding);
        gap: 0.5rem;
    }
    .site-header__topbar {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 0.5rem;
        align-items: center;
    }
    .site-burger {
        display: inline-flex;
        justify-self: start;
        width: 44px;
        height: 44px;
        padding: 0;
        gap: 0;
        justify-content: center;
    }
    .site-burger__label { display: none; }

    .site-branding {
        justify-self: stretch;
        align-self: stretch;
        max-width: 100%;
    }
    .site-branding__logo {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
    }
    .site-branding__logo img {
        height: 52px;
        max-height: 52px;
        width: 100%;
        max-width: 100%;
        object-fit: contain;
        object-position: left center;
    }
    .site-branding__name {
        font-size: 1.125rem;
    }

    .site-header__topbar .site-header__actions {
        justify-self: end;
        gap: 2px;
    }
    .site-header__icon-btn { width: 44px; height: 44px; }

    .site-nav { display: none; } /* esconde nav desktop legacy */
}

/* Mobile estreito (<420px): aperta o gap entre ícones e shrinks na faixa do cart */
@media (max-width: 420px) {
    .site-header__topbar { gap: 0.375rem; }
    .site-header__topbar .site-header__actions { gap: 0; }
}

/* ── PAINEL DE BUSCA — full-width abaixo do header (todas as larguras) ─
 * Abre via Alpine searchOpen=true (botão lupa). Persistente:
 * só fecha no ✕. Não fecha em submit (form GET normal).
 * Em /search auto-abre via x-init no <header>.
 * ─────────────────────────────────────────────────────────────────── */
.twp-search-panel {
    background: var(--color-bg, #FFFFFF);
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.18);
}
.twp-search-panel__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
}
.twp-search-panel__form {
    flex: 1;
    display: flex;
    align-items: stretch;
    border: 2px solid var(--color-primary, #E22421);
    background: var(--color-bg, #FFFFFF);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.twp-search-panel__form:focus-within {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #E22421) 12%, transparent);
}
.twp-search-panel__input {
    flex: 1;
    min-width: 0;
    padding: 0.875rem 1rem;
    border: 0;
    background: transparent;
    font-family: var(--font-body, sans-serif);
    font-size: 1rem;
    color: var(--color-secondary, #000000);
    outline: none;
}
.twp-search-panel__input::placeholder { color: var(--color-text-muted, #565758); }
.twp-search-panel__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.twp-search-panel__submit {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0 1.5rem;
    background: var(--color-secondary, #000000);
    color: #fff;
    border: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease;
}
.twp-search-panel__submit:hover {
    background: var(--color-primary, #E22421);
}
.twp-search-panel__submit svg { flex-shrink: 0; }

.twp-search-panel__close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--color-text-muted, #565758);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.18s ease, color 0.18s ease;
}
.twp-search-panel__close:hover {
    background: var(--color-surface, #F8F8F8);
    color: var(--color-secondary, #000000);
}

@media (max-width: 640px) {
    .twp-search-panel__inner { padding: 0.75rem 0; gap: 0.5rem; }
    .twp-search-panel__input { font-size: 0.9375rem; padding: 0.75rem 0.875rem; }
    .twp-search-panel__submit { padding: 0 1rem; font-size: 0; gap: 0; }
    .twp-search-panel__submit svg { width: 18px; height: 18px; }
}

/* ── AUTOCOMPLETE — dropdown de sugestões dentro do search panel ──── */
.twp-search-panel__container {
    position: relative;
    /* container é referência pra dropdown se for absolute, mas usamos flow */
}
.twp-search-suggest {
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-top: 0;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.22);
    margin-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border, #E5E5E5) transparent;
}
.twp-search-suggest::-webkit-scrollbar { width: 6px; }
.twp-search-suggest::-webkit-scrollbar-thumb { background: var(--color-border, #E5E5E5); border-radius: 3px; }

/* Estados (loading / empty) */
.twp-search-suggest__state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1.5rem 1rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    color: var(--color-text-muted, #565758);
}
.twp-search-suggest__state--empty { color: var(--color-text-muted, #565758); font-style: italic; }
.twp-search-suggest__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border, #E5E5E5);
    border-top-color: var(--color-primary, #E22421);
    border-radius: 50%;
    animation: twpSpin 0.8s linear infinite;
    display: inline-block;
}
@keyframes twpSpin { to { transform: rotate(360deg); } }

/* Lista de sugestões */
.twp-search-suggest__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.twp-search-suggest__item {
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.twp-search-suggest__item:last-child { border-bottom: 0; }
.twp-search-suggest__link {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0.875rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
    min-width: 0;
}
.twp-search-suggest__link:hover,
.twp-search-suggest__link:focus-visible {
    background: var(--color-surface, #F8F8F8);
    outline: none;
}

/* ── Item OUT OF STOCK — visual informativo, MAS clicável ───────────
   bg cinza + opacity reduzida + imagem em escala de cinza apenas como
   sinal visual de indisponibilidade. O link permanece navegável
   (clique leva ao single). Badge "Indisponível" sobreposta na thumb. */
.twp-search-suggest__item--oos {
    background: color-mix(in srgb, var(--color-text-muted, #565758) 5%, transparent);
}
.twp-search-suggest__item--oos .twp-search-suggest__link {
    opacity: 0.7;
    cursor: pointer;
}
.twp-search-suggest__item--oos .twp-search-suggest__media {
    position: relative;
}
.twp-search-suggest__item--oos .twp-search-suggest__media img {
    filter: grayscale(1) brightness(0.85);
}
.twp-search-suggest__oos-badge {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.1875rem 0.25rem;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-family: var(--font-body, sans-serif);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    pointer-events: none;
}

/* Imagem do produto */
.twp-search-suggest__media {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.twp-search-suggest__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Corpo textual */
.twp-search-suggest__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.twp-search-suggest__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--color-secondary, #000000);
    /* 2 linhas máx — clamp para não quebrar layout */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.twp-search-suggest__meta {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
    line-height: 1.35;
}
.twp-search-suggest__meta-row {
    display: flex;
    gap: 0.3125rem;
    align-items: baseline;
    min-width: 0;
}
.twp-search-suggest__meta-row dt {
    margin: 0;
    font-weight: 600;
    flex-shrink: 0;
}
.twp-search-suggest__meta-row dd {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-secondary, #000000);
}

/* Preço */
.twp-search-suggest__price {
    margin: 0.1875rem 0 0;
    display: flex;
    gap: 0.3125rem;
    align-items: baseline;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
}
.twp-search-suggest__price-label { font-weight: 600; }
.twp-search-suggest__price-value {
    font-family: var(--font-heading, sans-serif);
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--color-primary, #E22421);
    letter-spacing: -0.005em;
}
.twp-search-suggest__price-value del { color: var(--color-text-muted, #565758); font-weight: 500; opacity: 0.7; margin-right: 0.25rem; }
.twp-search-suggest__price-value ins { text-decoration: none; }
.twp-search-suggest__price-value .woocommerce-Price-amount { font-weight: 800; }

/* Footer com "Ver todos os resultados" */
.twp-search-suggest__footer {
    position: sticky;
    bottom: 0;
    background: var(--color-bg, #FFFFFF);
    border-top: 1px solid var(--color-border, #E5E5E5);
    padding: 0.625rem 0.875rem;
}
.twp-search-suggest__all {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    padding: 0.5625rem 0.875rem;
    background: transparent;
    color: var(--color-secondary, #000000);
    border: 1px dashed var(--color-border, #E5E5E5);
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.twp-search-suggest__all:hover {
    background: var(--color-primary, #E22421);
    border-color: var(--color-primary, #E22421);
    color: #fff;
}
.twp-search-suggest__all strong { font-weight: 800; color: var(--color-primary, #E22421); }
.twp-search-suggest__all:hover strong { color: #fff; }
.twp-search-suggest__all svg { flex-shrink: 0; }

/* Mobile (<=640px) — apertar tudo */
@media (max-width: 640px) {
    .twp-search-suggest { max-height: 60vh; margin-bottom: 0.75rem; }
    .twp-search-suggest__link {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 0.625rem;
        padding: 0.625rem 0.75rem;
    }
    .twp-search-suggest__media { width: 52px; height: 52px; }
    .twp-search-suggest__title { font-size: 0.8125rem; -webkit-line-clamp: 2; }
    .twp-search-suggest__meta { font-size: 0.6875rem; }
    .twp-search-suggest__meta-row dd { font-size: 0.6875rem; }
    .twp-search-suggest__price-value { font-size: 0.8125rem; }
    .twp-search-suggest__footer { padding: 0.5rem 0.625rem; }
    .twp-search-suggest__all { font-size: 0.75rem; padding: 0.5rem 0.625rem; }
}

/* Telas muito estreitas (<=380px) — esconde rótulos longos pra caber */
@media (max-width: 380px) {
    .twp-search-suggest__price-label { display: none; }
    .twp-search-suggest__price { gap: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .twp-search-suggest__spinner { animation-duration: 1.5s; }
}
/* === BLOCK:site-header:END === */


/* === BLOCK:mega-nav:START === */
/* ════════════════════════════════════════════════════════════════════════
   MEGA-NAV — barra de navegação fullwidth com scroll horizontal +
   dropdown FIXED (porte do padrão rsperformance.com.br).

   Estrutura:
     .twp-mega-nav                       wrapper full-width
       .twp-mega-inner                   container max-width + flex
         .twp-mega-scroll-btn--left      seta prev (oculta se sem overflow)
         .twp-mega-scroll                viewport scroll horizontal
           .twp-mega-list                <ul> com items inline
             .twp-mega-item              <li>
               .twp-mega-top-link        <a> top com underline animado
               .twp-mega-dropdown        painel FIXED (JS posiciona)
                 .twp-mega-drop-head     header escuro com nome categoria
                 .twp-mega-drop-body     body com colunas
                   .twp-mega-columns     grid 4 cols
                     .twp-mega-col       coluna por grupo
                       .twp-mega-col-title
                       .twp-mega-col-items
                         .twp-mega-link  link da subcategoria
         .twp-mega-scroll-btn--right     seta next

   Variáveis (override fácil sem editar regras):
   ════════════════════════════════════════════════════════════════════════ */

.twp-mega-nav {
    /* Tokens locais — fácil customizar */
    --twp-nav-bg:        var(--color-megamenu-bg, var(--color-secondary, #000000));
    --twp-nav-fg:        var(--color-megamenu-link, #fff);
    --twp-nav-accent:    var(--color-megamenu-link-hover, #E22421);     /* underline + hover */
    --twp-nav-height:    48px;
    --twp-nav-pad-x:     14px;
    --twp-nav-font-size: clamp(0.6875rem, 0.9vw, 0.8125rem);

    /* Dropdown — width/height base (desktop largo).
       Media queries abaixo ajustam por breakpoint pra responsividade real. */
    --twp-drop-w:        min(1400px, calc(100vw - 48px));
    --twp-drop-h:        auto;   /* content-driven; teto via max-height do .twp-mega-dropdown */
    --twp-drop-bg:       var(--color-megamenu-dropdown-bg, #fff);
    --twp-drop-head-bg:  var(--color-surface, #F8F8F8);
    --twp-drop-head-fg:  var(--color-secondary, #000000);
    --twp-drop-border:   3px solid var(--twp-nav-accent);
    --twp-drop-shadow:   0 16px 48px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);

    background: var(--twp-nav-bg);
    color: var(--twp-nav-fg);
    position: relative;
    z-index: 90;
    width: 100%;
}

.twp-mega-inner {
    display: flex;
    align-items: stretch;
    max-width: var(--container-max, 1800px);
    margin: 0 auto;
    padding: 0;
    height: var(--twp-nav-height);
    overflow: visible;
}

/* SETAS de scroll (esconde por default — JS mostra se há overflow) */
.twp-mega-scroll-btn {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    border: 0;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    position: relative;
    z-index: 5;
}
.twp-mega-scroll-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.twp-mega-scroll-btn:disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}
.twp-mega-scroll-btn.is-visible {
    display: inline-flex;
}
.twp-mega-scroll-btn--left  { border-right: 1px solid rgba(255, 255, 255, 0.07); }
.twp-mega-scroll-btn--right { border-left:  1px solid rgba(255, 255, 255, 0.07); }

/* VIEWPORT scrollável (oculta scrollbar visualmente) */
.twp-mega-scroll {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 100%;
    display: flex;
    align-items: stretch;
    scroll-behavior: smooth;
}
.twp-mega-scroll::-webkit-scrollbar { display: none; }

/* LISTA de items top — inline */
.twp-mega-list {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0 8px;
    white-space: nowrap;
    height: 100%;
    min-width: max-content;
}

.twp-mega-item {
    position: relative;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}

/* TOP LINK — uppercase, underline animado no hover */
.twp-mega-top-link {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--twp-nav-pad-x);
    height: 100%;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--twp-nav-font-size);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--twp-nav-fg);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease;
    position: relative;
}
.twp-mega-top-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--twp-nav-accent);
    transition: width 0.18s ease;
    border-radius: 2px 2px 0 0;
}
.twp-mega-item:hover > .twp-mega-top-link,
.twp-mega-item.current-menu-item > .twp-mega-top-link,
.twp-mega-item.current-menu-ancestor > .twp-mega-top-link {
    color: var(--twp-nav-accent);
    background: rgba(0, 0, 0, 0.25);
}
.twp-mega-item:hover > .twp-mega-top-link::after,
.twp-mega-item.current-menu-item > .twp-mega-top-link::after,
.twp-mega-item.current-menu-ancestor > .twp-mega-top-link::after {
    width: calc(100% - var(--twp-nav-pad-x) * 1.4);
}

/* ── DROPDOWN — 1100×500 com responsividade adaptativa ─────────────
   1100 só "cabe" em viewports ≥1140 (1100 + 40 margem confortável).
   Em viewports menores, cai pra calc(100vw - margem) pra não estourar.

     ≥1140px (desktops + laptops grandes)            → 1100×500 fixo
     1024-1139px (laptops menores, tablet landscape) → calc(100vw-40) × 500
     768-1023px  (tablet portrait iPad)              → calc(100vw-32) × 460
     <768px      (smartphones)                       → drawer mobile assume

   Query extra `max-height: 700px` reduz altura em laptops 1366×768
   (Lenovo, Dell 14"/15") pra não cortar conteúdo abaixo do dropdown. */

/* Desktop e laptop grande (≥1140px): largura adaptativa em vez de 1100px fixo.
   min(1400px, calc(100vw - 80px)) = usa toda a viewport até o cap 1400,
   sempre com margem de 40px em cada lado. Resolve o caso de títulos longos
   na 4ª coluna (ex.: "SEGURANÇA & PERFORMANCE EXTRA") que ficavam apertados
   nos 275px que 1100/4 produzia. */
@media (min-width: 1140px) {
    .twp-mega-nav {
        --twp-drop-w: min(1400px, calc(100vw - 80px));
        /* height: auto → o painel encolhe pro tamanho do conteúdo (fim do
           "caixão" vazio quando a categoria tem poucos itens). O teto de
           segurança vem do max-height: calc(100vh - 100px) no .twp-mega-dropdown:
           se algum item tiver MUITAS subcategorias, o body rola. */
        --twp-drop-h: auto;
    }
}

/* Laptop pequeno + tablet landscape (1024-1139px):
   1100 estouraria → cai pra calc viewport com margem 40 */
@media (min-width: 1024px) and (max-width: 1139px) {
    .twp-mega-nav {
        --twp-drop-w: calc(100vw - 40px);
        --twp-drop-h: auto;
    }
}

/* Tablet portrait (768-1023px): calc viewport, altura pelo conteúdo */
@media (min-width: 768px) and (max-width: 1023px) {
    .twp-mega-nav {
        --twp-drop-w: calc(100vw - 32px);
        --twp-drop-h: auto;
    }
}

.twp-mega-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--twp-drop-w);
    /* max-width defensivo — JS centraliza, mas garante que NUNCA passa
       da viewport mesmo se o token for setado errado. */
    max-width: calc(100vw - 24px);
    height: var(--twp-drop-h);
    /* max-height defensivo idem (ex.: monitor em portrait com pouca altura) */
    max-height: calc(100vh - 100px);
    background: var(--twp-drop-bg);
    border-top: var(--twp-drop-border);
    border-radius: 0 0 10px 10px;
    box-shadow: var(--twp-drop-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.twp-mega-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0s;
    pointer-events: auto;
}

/* HEADER do dropdown (nome da categoria — eyebrow escuro) */
.twp-mega-drop-head {
    display: flex;
    align-items: center;
    padding: 12px 28px;
    background: var(--twp-drop-head-bg);
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    flex-shrink: 0;
}
.twp-mega-drop-cat {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--twp-drop-head-fg);
}

/* BODY scrollável */
.twp-mega-drop-body {
    flex: 1;
    /* min-height:0 = deixa o body ENCOLHER abaixo do seu conteúdo quando o
       dropdown bate no max-height (senão flex-item com min-height:auto trava
       e o scroll não ativa). Só entra em ação em categorias muito longas. */
    min-height: 0;
    overflow-y: auto;
    /* overflow-x explícito = hidden — defesa contra qualquer conteúdo filho que
       tente furar a largura do dropdown (ex.: título de categoria sem espaço de
       quebra natural). Sem isso, browsers ativam scrollbar horizontal quando
       qualquer descendente estoura, mesmo com minmax(0,1fr) no grid. */
    overflow-x: hidden;
    padding: 22px 28px;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}
.twp-mega-drop-body::-webkit-scrollbar { width: 4px; }
.twp-mega-drop-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* GRID de colunas — MODO PADRÃO (categorias-pai → coluna com header + lista de netas).
   Cada coluna tem 1 título (categoria filha) + ul de subcategorias (netas). */
.twp-mega-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    align-items: start;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 1100px) { .twp-mega-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .twp-mega-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* MODO COMPACTO — quando NENHUMA categoria filha tem netas (.twp-mega-col-items),
   os títulos viram links simples e distribuímos em colunas auto-fill com min 220px.
   Evita o bug visual de 12 títulos isolados em 4 colunas (texto longo se sobrepondo).
   :has() é suportado em Chrome 105+/Safari 15.4+/Firefox 121+ (>95% dos usuários). */
.twp-mega-dropdown:not(:has(.twp-mega-col-items)) .twp-mega-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    column-gap: clamp(8px, 1.2vw, 16px);
    row-gap: 0;
    align-items: start;
}
.twp-mega-dropdown:not(:has(.twp-mega-col-items)) .twp-mega-col {
    margin: 0;
}
/* No modo compacto o título VIRA link normal (sem border-bottom + sem uppercase). */
.twp-mega-dropdown:not(:has(.twp-mega-col-items)) .twp-mega-col-title {
    display: block;
    margin: 0;
    padding: 8px 10px;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 0;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.18s ease;
}
.twp-mega-dropdown:not(:has(.twp-mega-col-items)) .twp-mega-col-title a {
    display: block;
    color: inherit;
    text-decoration: none;
}
.twp-mega-dropdown:not(:has(.twp-mega-col-items)) .twp-mega-col-title:hover,
.twp-mega-dropdown:not(:has(.twp-mega-col-items)) .twp-mega-col-title:has(a:hover) {
    /* Cor do título da coluna no hover (mesmo token usado quando a coluna
       tem items aninhados — consistência via ACF Mega Menu). */
    background: color-mix(in srgb, var(--color-megamenu-col-title-hover, var(--twp-nav-accent)) 8%, transparent);
    color: var(--color-megamenu-col-title-hover, var(--twp-nav-accent));
    padding-left: 14px;
}

.twp-mega-col {
    /* min-width:0 = REQUISITO em grid items para que minmax(0,1fr) funcione.
       Sem isso o conteúdo intrínseco (texto longo + uppercase) força a coluna
       a expandir além de 1fr e fura a largura do grid. */
    min-width: 0;
    /* max-width:100% força o item a NUNCA exceder o slot do grid. Combinado
       com min-width:0 garante shrink + clamp. */
    max-width: 100%;
}

/* HEADER da coluna (categoria pai — clicável).
   Cor controlada via ACF Mega Menu → "Dropdown — Título da coluna".
   Default cai em --color-secondary pra compat com tema sem cor customizada. */
.twp-mega-col-title {
    display: block;
    /* width:100% + max-width:100% — força o <strong> a se ajustar à largura
       do .col (em vez de assumir max-content baseado no texto interno).
       Sem isso, navegadores podem dar largura intrínseca (max-content) ao
       <strong> quando o filho <a> não tem display: block. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding-bottom: 8px;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--color-megamenu-col-title, var(--color-secondary, #000000));
    text-transform: uppercase;
    border-bottom: 1px solid #f0f0f0;
    /* Quebra natural — `anywhere` é mais agressivo que `break-word`:
       quebra ATÉ dentro de palavras quando uma palavra (ex.: "PERFORMANCE")
       é maior que a linha. */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.twp-mega-col-title a {
    /* `display: block` + `width: 100%` = `<a>` ocupa toda largura do <strong>
       em vez de inline (que poderia colapsar pra max-content). Esse é o ponto
       crítico — sem display:block, o <a> ficava com largura natural do texto
       e overflow-wrap nem chegava a aplicar porque a "linha" era infinita. */
    display: block;
    width: 100%;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.twp-mega-col-title a:hover {
    /* Cor controlada via ACF Mega Menu → "Dropdown — Título coluna hover". */
    color: var(--color-megamenu-col-title-hover, var(--twp-nav-accent));
}

/* LISTA de subcategorias */
.twp-mega-col-items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.twp-mega-col-items > li { margin: 0; }

.twp-mega-link {
    display: block;
    /* Vira "pill": padding horizontal dá área de clique maior e respiro pro
       fundo no hover; a margem NEGATIVA (-12px) puxa o box de volta pra que o
       TEXTO continue alinhado com o título da coluna (x=0), enquanto o fundo
       do hover se estende pra dentro do gap. Padrão Linear/Vercel. */
    padding: 7px 12px;
    margin: 1px -12px;
    border-radius: 6px;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-megamenu-dropdown-link, var(--color-text, #000000));
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease, padding-left 0.15s ease;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}
.twp-mega-link:hover,
.twp-mega-leaf.is-current > .twp-mega-link {
    color: var(--color-megamenu-dropdown-hover, var(--twp-nav-accent));
    /* Fundo suave = alvo de hover claro entre um item e outro. Usa o mesmo
       token/opacidade do hover dos títulos no modo compacto (consistência). */
    background: color-mix(in srgb, var(--color-megamenu-dropdown-hover, var(--twp-nav-accent)) 8%, transparent);
    padding-left: 16px;   /* texto desliza 4px à direita — micro-interação */
}

/* SUB-níveis (3+) */
.twp-mega-sub {
    list-style: none;
    margin: 2px 0 8px;
    padding: 0 0 0 8px;
    border-left: 2px solid #f0f0f0;
}
.twp-mega-sub .twp-mega-link {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted, #565758);
    /* Pill menor, ancorado à direita do border-left do .twp-mega-sub. */
    padding: 5px 10px;
    margin: 0 -10px;
}
.twp-mega-sub .twp-mega-link:hover,
.twp-mega-sub .twp-mega-leaf.is-current > .twp-mega-link {
    padding-left: 13px;   /* desliza 3px (sem herdar os 16px do nível 1) */
}

/* ── MOBILE (<768px): esconde mega-nav, drawer mobile assume ───────
   Threshold 768 = padrão Bootstrap/Tailwind pra mobile. Cobre:
     - Smartphones (até 430px = iPhone 14 Pro Max)
     - Phablets em landscape (≤767px de width)
     - Tablets pequenos em portrait (alguns Android <768)
   Tablets ≥768px (iPad portrait/landscape) mantêm o mega-nav. */
@media (max-width: 767px) {
    .twp-mega-nav { display: none; }
}
/* === BLOCK:mega-nav:END === */


/* === BLOCK:mobile-drawer:START === */
/* ════════════════════════════════════════════════════════════════════════
   MOBILE DRAWER — fullscreen com painéis empilhados estilo iOS push.

   Painéis siblings dentro de .twp-mobile-panels. JS controla quais
   estão visíveis via classes is-active / slide-left. Hierarquia
   ilimitada — cada categoria com children vira um painel sibling.
   ════════════════════════════════════════════════════════════════════════ */

.twp-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1090;
}

.twp-mobile-menu {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    max-width: 100vw;
    height: 100dvh;
    background: #fff;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.18);
}
.twp-mobile-menu.is-open { transform: translateX(0); }

/* HEADER (✕ FECHAR + LOGIN) */
.twp-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 60px;
    background: var(--color-surface, #F8F8F8);
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    flex-shrink: 0;
}
.twp-mobile-menu-close {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    background: transparent;
    border: 0;
    color: var(--color-secondary, #000000);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1;
    transition: color 0.18s ease;
}
.twp-mobile-menu-close:hover { color: #E22421; }
.twp-mobile-menu-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}
.twp-mobile-menu-header-action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem;
    color: var(--color-secondary, #000000);
    text-decoration: none;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.18s ease;
}
.twp-mobile-menu-header-action:hover { color: var(--color-primary, #E22421); }

/* ÁREA dos painéis */
.twp-mobile-panels {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* PAINEL individual — absolute, fora da viewport por padrão */
.twp-mobile-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    transform: translateX(100%);
    transition: transform 0.27s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
    z-index: 1;
}
.twp-mobile-panel.is-active  { transform: translateX(0);   z-index: 3; }
.twp-mobile-panel.slide-left { transform: translateX(-15%); z-index: 2; }

/* HEADER do sub-painel (botão voltar + título) */
.twp-mobile-panel-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 1rem;
    height: 60px;
    background: #fafafa;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    flex-shrink: 0;
}
.twp-mobile-panel-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: #fff;
    border: 1.5px solid var(--color-border, #E5E5E5);
    color: var(--color-secondary, #000000);
    border-radius: var(--rounded-sm, var(--radius-sm, 4px));
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease;
    flex-shrink: 0;
}
.twp-mobile-panel-back:hover {
    border-color: #E22421;
    color: #E22421;
}
.twp-mobile-panel-title {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-secondary, #000000);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* HERO CARD (imagem da categoria) */
.twp-mobile-panel-hero {
    display: block;
    position: relative;
    margin: 0.75rem 1rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--rounded-md, var(--radius-md, 8px));
    text-decoration: none;
    color: #fff;
}
.twp-mobile-panel-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.twp-mobile-panel-hero:active img { transform: scale(1.03); }
.twp-mobile-panel-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.7) 100%);
}
.twp-mobile-panel-hero__title {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* LISTA de items */
.twp-mobile-panel-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0.5rem 2rem;
}
.twp-mobile-panel-li { margin: 0 0 4px; }

.twp-mobile-panel-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #fff;
    border: 1px solid var(--color-border, #E5E5E5);
    border-left: 3px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.twp-mobile-panel-row:hover,
.twp-mobile-panel-row:focus-within {
    background: var(--color-surface, #F8F8F8);
    border-left-color: var(--color-primary, #E22421);
}

.twp-mobile-panel-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    min-height: 52px;
    background: transparent;
    border: 0;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-secondary, #000000);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
}
.twp-mobile-panel-link {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.twp-mobile-panel-trigger {
    flex: 0 0 52px;
    justify-content: center;
    padding: 0;
    border-left: 1px solid var(--color-border, #E5E5E5);
    color: var(--color-text-muted, #565758);
}
.twp-mobile-panel-trigger:hover { color: var(--color-primary, #E22421); }

/* Em telas wide (≥768px) o drawer mobile fica oculto — mega-nav assume */
@media (min-width: 768px) {
    .twp-mobile-overlay,
    .twp-mobile-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .twp-mobile-menu,
    .twp-mobile-panel,
    .twp-mobile-panel-hero img,
    .twp-mobile-panel-row { transition: none !important; }
}
/* === BLOCK:mobile-drawer:END === */


/* === BLOCK:mini-cart:START === */
/* Trigger (ícone com badge) + drawer (slide direita) + overlay */
.mini-cart-trigger {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-header-text, var(--color-secondary, #000000));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rounded-sm, 4px);
    transition: background 0.18s ease, color 0.18s ease;
}
.mini-cart-trigger:hover {
    background: color-mix(in srgb, var(--color-header-hover, var(--color-primary, #E22421)) 10%, transparent);
    color: var(--color-header-hover, var(--color-primary, #E22421));
}
.mini-cart-trigger:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 2px;
}

.mini-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--color-primary, #E22421);
    color: #FFFFFF;
    border-radius: var(--rounded-full, 50px);
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px #FFFFFF, 0 1px 3px rgba(0, 0, 0, 0.15);
}

.mini-cart-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--color-secondary, #000000) 55%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: calc(var(--z-drawer, 200) - 1);
    transition: opacity 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mini-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    background: var(--color-bg, #FFFFFF);
    z-index: var(--z-drawer, 200);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: -4px 0 22px rgba(0, 0, 0, 0.18);
}

.mini-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.mini-cart-header__title {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-body, sans-serif);
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--color-secondary, #000000);
    text-transform: uppercase;
}
.mini-cart-header__count {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #565758);
    font-weight: 600;
    text-transform: none;
}
.mini-cart-close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    color: var(--color-secondary, #000000);
    cursor: pointer;
}

.mini-cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0;
}
.mini-cart-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 50%, transparent);
}
.mini-cart-item__avatar {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface, #F8F8F8);
    color: var(--color-primary, #E22421);
    border: 1px solid var(--color-border, #E5E5E5);
}
.mini-cart-item__info { min-width: 0; }
.mini-cart-item__name {
    display: block;
    margin: 0 0 0.25rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-secondary, #000000);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-cart-item__price {
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #565758);
}
.mini-cart-item__remove {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 0;
    color: var(--color-text-muted, #565758);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.18s ease, background 0.18s ease;
}
.mini-cart-item__remove:hover {
    color: var(--color-cart-remove, var(--color-danger, #E22421));
    background: color-mix(in srgb, var(--color-cart-remove, var(--color-danger, #E22421)) 8%, transparent);
}

.mini-cart-empty {
    text-align: center;
    padding: 2rem 1.25rem;
}
.mini-cart-empty__icon {
    display: inline-flex;
    color: var(--color-text-muted, #565758);
    margin-bottom: 0.75rem;
}
.mini-cart-empty p {
    margin: 0 0 0.75rem;
    color: var(--color-text-muted, #565758);
    font-size: 0.875rem;
}

.mini-cart-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-border, #E5E5E5);
    background: var(--color-surface, #F8F8F8);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
/* Diferenciação de cores entre os 2 CTAs do mini-cart */
.mini-cart-footer > a.commerce-cta {
    margin-top: 0; /* anula margin-top: 0.5rem do --ghost */
}
.mini-cart-footer > a.commerce-cta.commerce-cta--ghost {
    background: transparent !important;
    color: var(--color-secondary, #000000) !important;
    border: 1.5px solid var(--color-secondary, #000000) !important;
}
.mini-cart-footer > a.commerce-cta.commerce-cta--ghost:hover {
    background: var(--color-secondary, #000000) !important;
    color: #FFFFFF !important;
}
.mini-cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.mini-cart-total__label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #565758);
}
.mini-cart-total__value {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-primary, #E22421);
}

.commerce-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: var(--color-btn-primary-bg, var(--color-primary, #E22421));
    color: var(--color-btn-primary-text, #FFFFFF);
    border: 0;
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.commerce-cta:hover {
    background: var(--color-btn-primary-hover, var(--color-secondary, #000000));
    transform: translateY(-1px);
    color: var(--color-btn-primary-text, #FFFFFF);
}
.commerce-cta--ghost {
    background: var(--color-btn-secondary-bg, transparent);
    color: var(--color-btn-secondary-text, var(--color-secondary, #000000));
    border: 1px solid var(--color-border, #E5E5E5);
    margin-top: 0.5rem;
}
.commerce-cta--ghost:hover {
    background: var(--color-surface, #F8F8F8);
    color: var(--color-btn-secondary-text, var(--color-secondary, #000000));
}

/* Override agressivo das classes default WC (.button.alt, .checkout-button)
 * que herdam cor "purple" do default theme — força nosso primary verde. */
.commerce-cta.button,
.commerce-cta.button.alt,
.commerce-cta.checkout-button,
a.commerce-cta,
button.commerce-cta {
    background: var(--color-btn-primary-bg, var(--color-primary, #E22421)) !important;
    color: var(--color-btn-primary-text, #FFFFFF) !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    text-shadow: none !important;
}
.commerce-cta.button:hover,
.commerce-cta.button.alt:hover,
.commerce-cta.checkout-button:hover,
a.commerce-cta:hover {
    background: var(--color-btn-primary-hover, var(--color-secondary, #000000)) !important;
    color: var(--color-btn-primary-text, #FFFFFF) !important;
}
/* Override específico do botão "Finalizar compra" do cart/checkout */
.commerce-cta.checkout-button,
a.commerce-cta.checkout-button {
    background: var(--color-cart-checkout-btn, var(--color-btn-primary-bg, var(--color-primary, #E22421))) !important;
}
.commerce-cta--ghost.button,
.commerce-cta--ghost.button.alt {
    background: transparent !important;
    color: var(--color-secondary, #000000) !important;
    border: 1px solid var(--color-border, #E5E5E5) !important;
}
/* === BLOCK:mini-cart:END === */


/* === BLOCK:site-footer:START =====================================
 * Footer premium 4-cols com SOBRE/REDES, INFORMAÇÕES, INSTITUCIONAL+
 * CONTATO, LOCALIZAÇÃO+HORÁRIO. Cores do DS Starbucks (secondary
 * dark teal bg + accent dourado nos títulos).
 *
 * Hierarquia visual (referência ANCONA):
 *   - Títulos uppercase pequenos com "—" gold antes (::before)
 *   - Separadores verticais sutis entre cols (gradient line)
 *   - Box destacado HORÁRIO com gradient soft
 *   - Linha FORMAS DE PAGAMENTO no fim
 *   - Bottom bar: empresa + CNPJ + © + developer
 * ================================================================ */
.site-footer {
    background:
        radial-gradient(ellipse at top right, color-mix(in srgb, var(--color-primary, #E22421) 8%, transparent) 0%, transparent 60%),
        var(--color-footer-bg, #000000);
    color: var(--color-footer-text, #F8F8F8);
    padding: clamp(2.5rem, 5vw, 4rem) 0 1rem;
    margin-top: var(--spacing-section, clamp(2.5rem, 6vw, 5rem));
    border-top: 1px solid color-mix(in srgb, var(--color-footer-border, var(--color-accent, #FFFFFF)) 22%, transparent);
}

/* Grid 4 cols → 2 cols → 1 col (responsivo) */
.site-footer__cols {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.2fr 1.1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: 2rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFFFFF) 20%, transparent);
}
@media (max-width: 1024px) {
    .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .site-footer__cols { grid-template-columns: 1fr; gap: 1.75rem; }
}

.site-footer__col { min-width: 0; }

/* Separador vertical entre cols (apenas desktop ≥ 1025px) */
@media (min-width: 1025px) {
    .site-footer__col + .site-footer__col {
        padding-left: clamp(1.5rem, 3vw, 2.5rem);
        background:
            linear-gradient(
                180deg,
                transparent 0%,
                color-mix(in srgb, var(--color-accent, #FFFFFF) 30%, transparent) 15%,
                color-mix(in srgb, var(--color-accent, #FFFFFF) 30%, transparent) 85%,
                transparent 100%
            ) left / 1px 100% no-repeat;
    }
}

/* Títulos das seções — "— TÍTULO" com traço gold antes */
.site-footer__col-title {
    margin: 0 0 1rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-footer-heading, #FFFFFF);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.site-footer__col-title::before {
    content: '';
    width: 14px;
    height: 2px;
    background: var(--color-accent, #FFFFFF);
}
.site-footer__col-title--sub { margin-top: 1.75rem; }

/* SOBRE — logo + título + descrição */
.site-footer__logo {
    display: inline-block;
    margin: 0 0 0.875rem;
    line-height: 0;
}
.site-footer__logo img {
    max-width: 180px;
    height: auto;
    display: block;
    filter: brightness(0) invert(1); /* deixa monocromático branco caso logo seja colorida; remova se quiser cor original */
    transition: opacity 0.18s ease;
}
.site-footer__logo:hover img { opacity: 0.85; }

.site-footer__brand {
    margin: 0 0 0.5rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--color-bg, #FFFFFF);
}
.site-footer__about {
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-surface, #F8F8F8) 85%, transparent);
    max-width: 320px;
}

/* Redes Sociais */
.site-footer__social {
    display: inline-flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: color-mix(in srgb, var(--color-surface, #F8F8F8) 8%, transparent);
    color: var(--color-bg, #FFFFFF);
    border: 1px solid color-mix(in srgb, var(--color-accent, #FFFFFF) 30%, transparent);
    border-radius: 4px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
.site-footer__social a:hover {
    background: var(--color-accent, #FFFFFF);
    color: var(--color-secondary, #000000);
    border-color: var(--color-accent, #FFFFFF);
    transform: translateY(-2px);
}

/* Menus (Informações / Institucional) — lista vertical com separadores */
.site-footer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.site-footer__menu li {
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFFFFF) 12%, transparent);
}
.site-footer__menu li:last-child { border-bottom: 0; }
.site-footer__menu a {
    display: block;
    padding: 0.625rem 0;
    color: var(--color-footer-link, color-mix(in srgb, var(--color-surface, #F8F8F8) 88%, transparent));
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.18s ease, padding-left 0.2s ease;
}
.site-footer__menu a:hover {
    color: var(--color-footer-link-hover, var(--color-accent, #FFFFFF));
    padding-left: 0.375rem;
}

/* CONTATO + LOCALIZAÇÃO — dt/dd com ícone */
.site-footer__contact,
.site-footer__address {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.site-footer__contact-row,
.site-footer__address-row { margin: 0; }
.site-footer__contact dt,
.site-footer__address dt {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    margin: 0 0 0.1875rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent, #FFFFFF);
}
.site-footer__contact dt svg,
.site-footer__address dt svg {
    flex-shrink: 0;
    color: var(--color-accent, #FFFFFF);
}
.site-footer__contact dd,
.site-footer__address dd {
    margin: 0;
    padding-left: 1.375rem; /* alinha com o texto do dt (depois do ícone) */
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--color-surface, #F8F8F8) 92%, transparent);
}
.site-footer__contact dd a {
    color: inherit;
    text-decoration: none;
    transition: color 0.18s ease;
}
.site-footer__contact dd a:hover { color: var(--color-accent, #FFFFFF); }

/* Box do HORÁRIO DE ATENDIMENTO */
/* Card "Horário de atendimento" — cores controladas via ACF Footer
   ("Horário — Fundo/Borda/Label/Texto"). Fallback: gradiente vermelho-preto
   da paleta RS Performance. */
.site-footer__schedule {
    margin-top: 1.5rem;
    padding: 1rem 1.125rem;
    background:
        var(--color-footer-schedule-bg,
            linear-gradient(
                135deg,
                color-mix(in srgb, var(--color-primary, #E22421) 22%, transparent) 0%,
                color-mix(in srgb, var(--color-secondary, #000000) 80%, transparent) 100%
            )
        );
    border: 1px solid color-mix(in srgb, var(--color-footer-schedule-border, var(--color-accent, #FFFFFF)) 35%, transparent);
    border-radius: 4px;
    box-shadow: 0 0 16px -6px color-mix(in srgb, var(--color-footer-schedule-bg, var(--color-primary, #E22421)) 35%, transparent);
}
.site-footer__schedule-head {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    margin-bottom: 0.375rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-footer-schedule-label, var(--color-accent, #FFFFFF));
}
.site-footer__schedule-head svg { flex-shrink: 0; }
.site-footer__schedule-text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-footer-schedule-text, var(--color-bg, #FFFFFF));
}

.site-footer__empty {
    margin: 0;
    font-size: 0.75rem;
    font-style: italic;
    color: color-mix(in srgb, var(--color-surface, #F8F8F8) 55%, transparent);
}

/* ── FORMAS DE PAGAMENTO ────────────────────────────────────────── */
.site-footer__pay {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1.25rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #FFFFFF) 20%, transparent);
}
.site-footer__pay-title {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-bg, #FFFFFF);
    flex-shrink: 0;
}
.site-footer__pay-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.site-footer__pay-list li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3125rem 0.5rem;
    background: var(--color-bg, #FFFFFF);
    border-radius: 4px;
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.3);
}
.site-footer__pay-list img {
    height: 22px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* ── BARRA INFERIOR ─────────────────────────────────────────────── */
.site-footer__bottom {
    background: var(--color-footer-bottom-bg, transparent);
    margin: 0 calc(var(--container-padding, 16px) * -1);
    padding-left: var(--container-padding, 16px);
    padding-right: var(--container-padding, 16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding: 1rem 0;
}
.site-footer__copy {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-surface, #F8F8F8) 75%, transparent);
}
.site-footer__copy strong {
    color: var(--color-bg, #FFFFFF);
    font-weight: 800;
}
.site-footer__dot {
    display: inline-block;
    margin: 0 0.4375rem;
    color: var(--color-accent, #FFFFFF);
    opacity: 0.7;
}
.site-footer__dev {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-surface, #F8F8F8) 70%, transparent);
    text-decoration: none;
    transition: color 0.18s ease;
}
.site-footer__dev:hover { color: var(--color-accent, #FFFFFF); }

@media (max-width: 600px) {
    .site-footer__bottom { justify-content: center; text-align: center; }
    .site-footer__pay { justify-content: center; text-align: center; }
    .site-footer__pay-title { width: 100%; text-align: center; }

    /* Mobile: nome empresa em linha PRÓPRIA, depois CNPJ + © na segunda linha.
       Sem isso a UNA linha quebrava feio com hífens forçados. */
    .site-footer__copy {
        line-height: 1.6;
    }
    .site-footer__copy strong {
        display: block;
        width: 100%;
        margin-bottom: 0.25rem;
    }
    /* O 1º dot (entre nome e CNPJ) some — não há mais separador necessário
       agora que o nome quebrou pra cima. Demais dots (CNPJ · ©) ficam. */
    .site-footer__copy strong + .site-footer__dot {
        display: none;
    }
}
/* === BLOCK:site-footer:END ====================================== */


/* === BLOCK:reveal:START === */
/* Scroll-triggered reveal (data-reveal). JS está inline em front-page.php
   e em outras pages quando necessário. Aqui só os estilos. */
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* === BLOCK:reveal:END === */


/* === BLOCK:home-cta:START === */
/* Botões CTA usados na home (home-cta--primary/secondary/outline/ghost/lg).
   Coexistem com .commerce-cta (mais focado em e-commerce). */
.home-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: var(--rounded-sm, 4px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    line-height: 1.1;
}
.home-cta--lg {
    padding: 0.9375rem 1.5rem;
    font-size: 0.9375rem;
}
.home-cta:hover { transform: translateY(-1px); }

.home-cta--primary {
    background: var(--color-primary, #E22421);
    color: var(--color-bg, #FFFFFF);
    border-color: var(--color-primary, #E22421);
}
.home-cta--primary:hover {
    background: var(--color-secondary, #000000);
    border-color: var(--color-secondary, #000000);
    color: var(--color-bg, #FFFFFF);
}

.home-cta--secondary {
    background: var(--color-secondary, #000000);
    color: var(--color-bg, #FFFFFF);
    border-color: var(--color-secondary, #000000);
}
.home-cta--secondary:hover {
    background: var(--color-primary, #E22421);
    border-color: var(--color-primary, #E22421);
}

.home-cta--outline {
    background: transparent;
    color: var(--color-secondary, #000000);
    border-color: var(--color-secondary, #000000);
}
.home-cta--outline:hover {
    background: var(--color-secondary, #000000);
    color: var(--color-bg, #FFFFFF);
}

.home-cta--ghost {
    background: transparent;
    color: var(--color-secondary, #000000);
    border-color: var(--color-border, #E5E5E5);
}
.home-cta--ghost:hover {
    background: var(--color-surface, #F8F8F8);
    color: var(--color-secondary, #000000);
}

.home-cta:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 3px;
}
/* === BLOCK:home-cta:END === */


/* === BLOCK:home-section-head:START === */
/* Header padrão das seções da home (eyebrow + h2 + lead). */
.home-section-head {
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
    max-width: 720px;
}
.home-section-head--centered {
    margin-inline: auto;
    text-align: center;
}
.home-section-head__eyebrow {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: color-mix(in srgb, var(--color-primary, #E22421) 14%, transparent);
    color: var(--color-primary, #E22421);
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--rounded-full, 50px);
    margin-bottom: 0.875rem;
}
.home-section-head__title {
    margin: 0 0 0.875rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.625rem, 3.4vw, 2.25rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-secondary, #000000);
}
.home-section-head__title em {
    font-style: normal;
    color: var(--color-primary, #E22421);
    background: linear-gradient(180deg, transparent 65%, color-mix(in srgb, var(--color-accent, #FFFFFF) 35%, transparent) 65%);
    padding: 0 0.125em;
}
.home-section-head__lead {
    margin: 0;
    color: var(--color-text-muted, #565758);
    font-family: var(--font-body, sans-serif);
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    line-height: 1.6;
}
.home-section-foot {
    margin-top: clamp(2rem, 4vw, 2.75rem);
    text-align: center;
}
/* === BLOCK:home-section-head:END === */


/* === BLOCK:home-hero:START === */
.home-hero {
    position: relative;
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem);
    background: var(--color-surface, #F8F8F8);
    color: var(--color-secondary, #000000);
    overflow: hidden;
    isolation: isolate;
}

.home-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.home-hero__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--color-secondary, #000000);
    opacity: 0.6;
}
.home-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    will-change: transform;
}
.home-hero__orb--1 { top: -120px; left: -80px;  width: 360px; height: 360px;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary, #E22421) 60%, transparent), transparent 70%); }
.home-hero__orb--2 { bottom: -140px; right: -60px; width: 420px; height: 420px;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-accent, #FFFFFF) 50%, transparent), transparent 70%); }
.home-hero__orb--3 { top: 40%; right: 30%; width: 280px; height: 280px;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-secondary, #000000) 30%, transparent), transparent 70%);
    opacity: 0.2; }

.home-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
@media (max-width: 980px) {
    .home-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .home-hero__aside { order: -1; max-width: 460px; margin: 0 auto; }
}

.home-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--color-bg, #FFFFFF);
    color: var(--color-primary, #E22421);
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--rounded-full, 50px);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.125rem;
}
.home-hero__eyebrow-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-primary, #E22421);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #E22421) 25%, transparent);
    animation: twpPulse 2s ease-in-out infinite;
}
@keyframes twpPulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.7; }
}

.home-hero__title {
    margin: 0 0 1.125rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--color-secondary, #000000);
}
.home-hero__title-line   { display: block; }
.home-hero__title-accent {
    display: block;
    color: var(--color-primary, #E22421);
    background: linear-gradient(180deg, transparent 70%, color-mix(in srgb, var(--color-accent, #FFFFFF) 30%, transparent) 70%);
    padding: 0 0.1em;
}

.home-hero__lead {
    margin: 0 0 1.5rem;
    font-family: var(--font-body, sans-serif);
    font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
    line-height: 1.6;
    color: var(--color-text-muted, #565758);
    max-width: 540px;
}

.home-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 1.75rem;
}

.home-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.home-hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted, #565758);
}
.home-hero__trust-item span {
    color: var(--color-primary, #E22421);
    font-weight: 800;
}

/* Card decorativo lateral */
.home-hero__aside {
    position: relative;
    isolation: isolate;
}
.home-hero-card {
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: var(--rounded-lg, 12px);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-lg);
}
.home-hero-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 60%, transparent);
}
.home-hero-card__url {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
}
.home-hero-card__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-primary, #E22421);
}
.home-hero-card__score {
    font-family: var(--font-heading, sans-serif);
    font-size: 0.875rem;
    color: var(--color-primary, #E22421);
}
.home-hero-card__score strong { font-size: 1.25rem; font-weight: 800; }

.home-hero-card__bar {
    height: 6px;
    background: var(--color-surface, #F8F8F8);
    border-radius: var(--rounded-full, 50px);
    overflow: hidden;
    margin-bottom: 1.125rem;
}
.home-hero-card__bar-fill {
    display: block;
    width: 96%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary, #E22421), var(--color-accent, #FFFFFF));
}

.home-hero-card__checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.home-hero-card__check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-secondary, #000000);
}
.home-hero-card__check-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    background: var(--color-primary, #E22421);
    color: #FFFFFF;
    border-radius: 50%;
}

.home-hero__sticker {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--color-bg, #FFFFFF);
    border-radius: var(--rounded-md, 8px);
    box-shadow: var(--shadow-md);
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-secondary, #000000);
}
.home-hero__sticker--top    { top: -16px; right: -16px; }
.home-hero__sticker--bottom { bottom: -16px; left: -16px; }
.home-hero__sticker strong  {
    font-family: var(--font-heading, sans-serif);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-primary, #E22421);
}
.home-hero__sticker-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-primary, #E22421);
    animation: twpPulse 2s ease-in-out infinite;
}

.home-hero__wave {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    width: 100%;
    height: 60px;
    color: var(--color-bg, #FFFFFF);
}
/* === BLOCK:home-hero:END === */


/* === BLOCK:home-stats:START === */
.home-stats {
    padding: clamp(2rem, 5vw, 3rem) 0;
    background: var(--color-bg, #FFFFFF);
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.home-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.home-stats__item {
    text-align: center;
    padding: 1rem 0.5rem;
}
.home-stats__num {
    display: block;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(2rem, 4.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-primary, #E22421);
    margin-bottom: 0.375rem;
}
.home-stats__num-unit {
    font-size: 0.7em;
    color: var(--color-accent, #FFFFFF);
}
.home-stats__label {
    display: block;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #565758);
}
/* === BLOCK:home-stats:END === */


/* === BLOCK:home-services:START === */
.home-services {
    padding: var(--spacing-section, clamp(2.5rem, 6vw, 5rem)) 0;
    background: var(--color-bg, #FFFFFF);
}
.home-services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
}
.home-service-card {
    padding: 1.5rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: var(--rounded-md, 8px);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.home-service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.home-service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: var(--color-bg, #FFFFFF);
    color: var(--color-primary, #E22421);
    border: 1px solid var(--color-border, #E5E5E5);
    margin-bottom: 1rem;
}
.home-service-card__title {
    margin: 0 0 0.625rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-secondary, #000000);
}
.home-service-card__title a {
    color: inherit;
    text-decoration: none;
}
.home-service-card__title a:hover { color: var(--color-primary, #E22421); }
.home-service-card__excerpt {
    margin: 0 0 1rem;
    color: var(--color-text-muted, #565758);
    font-size: 0.875rem;
    line-height: 1.5;
}
.home-service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-primary, #E22421);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
}
.home-service-card__link:hover { gap: 0.625rem; }
/* === BLOCK:home-services:END === */


/* === BLOCK:home-method:START === */
.home-method {
    padding: var(--spacing-section, clamp(2.5rem, 6vw, 5rem)) 0;
    background: var(--color-surface, #F8F8F8);
}
.home-method__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.home-method__step {
    position: relative;
    padding-top: 0.5rem;
}
.home-method__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    background: var(--color-primary, #E22421);
    color: var(--color-bg, #FFFFFF);
    font-family: var(--font-heading, sans-serif);
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    border-radius: var(--rounded-sm, 4px);
}
.home-method__step-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.1875rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.home-method__step-lead {
    margin: 0 0 0.875rem;
    color: var(--color-text-muted, #565758);
    font-size: 0.875rem;
    line-height: 1.55;
}
.home-method__step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.home-method__step-tags li {
    padding: 0.25rem 0.5rem;
    background: var(--color-bg, #FFFFFF);
    color: var(--color-secondary, #000000);
    border: 1px solid var(--color-border, #E5E5E5);
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
/* === BLOCK:home-method:END === */


/* === BLOCK:home-authority:START === */
.home-authority {
    padding: var(--spacing-section, clamp(2.5rem, 6vw, 5rem)) 0;
    background: var(--color-bg, #FFFFFF);
}
.home-authority__inner {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}
@media (max-width: 900px) {
    .home-authority__inner { grid-template-columns: 1fr; text-align: center; }
    .home-authority__visual { margin: 0 auto; }
}

.home-authority__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.home-authority__avatar {
    position: relative;
    width: 220px; height: 220px;
}
.home-authority__ring {
    position: absolute; inset: -12px;
    border: 2px dashed color-mix(in srgb, var(--color-accent, #FFFFFF) 50%, transparent);
    border-radius: 50%;
    animation: twpSpin 30s linear infinite;
}
@keyframes twpSpin { to { transform: rotate(360deg); } }
.home-authority__glow {
    position: absolute; inset: -32px;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary, #E22421) 25%, transparent), transparent 70%);
    filter: blur(20px);
    z-index: -1;
}
.home-authority__avatar-inner {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-secondary, #000000);
    border: 3px solid var(--color-bg, #FFFFFF);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-authority__avatar-inner img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.home-authority__initials {
    font-family: var(--font-heading, sans-serif);
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-accent, #FFFFFF);
}

.home-authority__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--color-primary, #E22421);
    color: var(--color-bg, #FFFFFF);
    border-radius: var(--rounded-full, 50px);
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
}
.home-authority__badge-dot {
    width: 8px; height: 8px;
    background: var(--color-accent, #FFFFFF);
    border-radius: 50%;
    animation: twpPulse 2s ease-in-out infinite;
}
.home-authority__signature {
    font-family: var(--font-heading, sans-serif);
    font-size: 0.9375rem;
    color: var(--color-text-muted, #565758);
}

.home-authority__title {
    margin: 0.5rem 0 0.875rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.625rem, 3.4vw, 2.25rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-secondary, #000000);
}
.home-authority__title em {
    font-style: normal;
    color: var(--color-primary, #E22421);
}
.home-authority__tagline {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text, #000000);
}
.home-authority__bio {
    margin: 0 0 1.5rem;
    color: var(--color-text-muted, #565758);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.home-authority__pillars {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.home-authority__pillar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.875rem;
    align-items: start;
    text-align: left;
}
.home-authority__pillar-num {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-accent, #FFFFFF);
}
.home-authority__pillar-title {
    margin: 0 0 0.25rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.home-authority__pillar-text {
    margin: 0;
    color: var(--color-text-muted, #565758);
    font-size: 0.8125rem;
    line-height: 1.55;
}

.home-authority__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}
@media (max-width: 900px) {
    .home-authority__pillar { text-align: left; }
    .home-authority__ctas   { justify-content: center; }
}
/* === BLOCK:home-authority:END === */


/* === BLOCK:home-articles:START === */
.home-articles {
    padding: var(--spacing-section, clamp(2.5rem, 6vw, 5rem)) 0;
    background: var(--color-surface, #F8F8F8);
}
.home-articles__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}
.home-articles__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.75rem;
    background: var(--color-bg, #FFFFFF);
    color: var(--color-secondary, #000000);
    border: 1px solid var(--color-border, #E5E5E5);
    border-left: 3px solid var(--cat-color, var(--color-primary, #E22421));
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.home-articles__cat:hover {
    background: var(--cat-color, var(--color-primary, #E22421));
    color: var(--color-bg, #FFFFFF);
}
.home-articles__cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 0.375rem;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    border-radius: var(--rounded-full, 50px);
    font-size: 0.6875rem;
    font-weight: 700;
}
.home-articles__cat:hover .home-articles__cat-count {
    background: rgba(255, 255, 255, 0.25);
}

.home-articles__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
}
.home-articles__grid .home-article-card--feat {
    grid-column: span 2;
}
@media (max-width: 900px) {
    .home-articles__grid { grid-template-columns: 1fr; }
    .home-articles__grid .home-article-card--feat { grid-column: auto; }
}

.home-article-card {
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: var(--rounded-md, 8px);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.home-article-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.home-article-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.home-article-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-surface, #F8F8F8);
}
.home-article-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.home-article-card:hover .home-article-card__media img {
    transform: scale(1.04);
}
.home-article-card__cat {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    padding: 0.3125rem 0.625rem;
    color: var(--color-bg, #FFFFFF);
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--rounded-sm, 4px);
}
.home-article-card__body { padding: 1.25rem; }
.home-article-card__title {
    margin: 0 0 0.625rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-secondary, #000000);
}
.home-article-card--feat .home-article-card__title { font-size: 1.375rem; }
.home-article-card__excerpt {
    margin: 0 0 1rem;
    color: var(--color-text-muted, #565758);
    font-size: 0.875rem;
    line-height: 1.55;
}
.home-article-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.875rem;
    border-top: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 60%, transparent);
}
.home-article-card__foot time {
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
}
.home-article-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-primary, #E22421);
    font-size: 0.75rem;
    font-weight: 700;
}
/* === BLOCK:home-articles:END === */


/* === BLOCK:home-why:START === */
.home-why {
    padding: var(--spacing-section, clamp(2.5rem, 6vw, 5rem)) 0;
    background: var(--color-bg, #FFFFFF);
}
.home-why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
}
.home-why-card {
    padding: 1.5rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    text-align: left;
}
.home-why-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: var(--color-primary, #E22421);
    color: var(--color-bg, #FFFFFF);
    margin-bottom: 1rem;
}
.home-why-card__title {
    margin: 0 0 0.625rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.home-why-card__text {
    margin: 0;
    color: var(--color-text-muted, #565758);
    font-size: 0.875rem;
    line-height: 1.55;
}
/* === BLOCK:home-why:END === */


/* === BLOCK:home-cta-final:START === */
.home-cta-final {
    position: relative;
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: var(--color-secondary, #000000);
    color: var(--color-bg, #FFFFFF);
    overflow: hidden;
    isolation: isolate;
}
.home-cta-final__bg {
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
}
.home-cta-final__orb {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary, #E22421) 30%, transparent), transparent 70%);
    filter: blur(60px);
}
.home-cta-final__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 720px;
}
.home-cta-final__eyebrow {
    display: inline-block;
    padding: 0.4375rem 0.875rem;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-accent, #FFFFFF);
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--rounded-full, 50px);
    margin-bottom: 1rem;
}
.home-cta-final__title {
    margin: 0 0 0.875rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.875rem, 4.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--color-bg, #FFFFFF);
}
.home-cta-final__title em {
    font-style: normal;
    color: var(--color-accent, #FFFFFF);
}
.home-cta-final__lead {
    margin: 0 0 1.75rem;
    color: color-mix(in srgb, var(--color-surface, #F8F8F8) 88%, transparent);
    font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
    line-height: 1.6;
    max-width: 540px;
    margin-inline: auto;
}
.home-cta-final__buttons {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.home-cta-final__note {
    margin: 0;
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--color-surface, #F8F8F8) 70%, transparent);
}
/* Em dark bg, ghost vira branco-on-translúcido */
.home-cta-final .home-cta--outline {
    color: var(--color-bg, #FFFFFF);
    border-color: rgba(255, 255, 255, 0.4);
}
.home-cta-final .home-cta--outline:hover {
    background: var(--color-bg, #FFFFFF);
    color: var(--color-secondary, #000000);
}
/* === BLOCK:home-cta-final:END === */


/* === BLOCK:faq:START === */
.faq-section {
    padding: var(--spacing-section, clamp(2.5rem, 6vw, 5rem)) 0;
    background: var(--color-bg, #FFFFFF);
}
.faq-header {
    text-align: center;
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.faq-eyebrow {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: color-mix(in srgb, var(--color-primary, #E22421) 14%, transparent);
    color: var(--color-primary, #E22421);
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--rounded-full, 50px);
    margin-bottom: 0.875rem;
}
.faq-title {
    margin: 0 0 0.625rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.625rem, 3.4vw, 2.25rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-secondary, #000000);
}
.faq-subtitle {
    margin: 0 auto;
    max-width: 540px;
    color: var(--color-text-muted, #565758);
    font-size: 0.9375rem;
    line-height: 1.55;
}
.faq-subtitle strong { color: var(--color-secondary, #000000); }

.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.faq-item {
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    transition: background 0.18s ease;
}
.faq-item--open {
    background: var(--color-bg, #FFFFFF);
    border-color: var(--color-primary, #E22421);
}
.faq-question-heading { margin: 0; }
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-heading, sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-secondary, #000000);
}
.faq-question:hover     { background: color-mix(in srgb, var(--color-primary, #E22421) 4%, transparent); }
.faq-question:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: -2px;
}
.faq-question__text { flex: 1; }
.faq-question__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    color: var(--color-primary, #E22421);
}
.faq-chevron {
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq-item--open .faq-chevron { transform: rotate(180deg); }

.faq-answer {
    padding: 0 1.25rem 1rem;
}
.faq-answer__text {
    margin: 0;
    color: var(--color-text-muted, #565758);
    font-size: 0.9375rem;
    line-height: 1.6;
}
/* === BLOCK:faq:END === */


/* === BLOCK:page-article:START === */
/* page.php — wrapper de página estática (Sobre, Contato, etc) */
.page-article {
    padding: clamp(1.5rem, 4vw, 3rem) 0 var(--spacing-section, 4rem);
}
.page-article__thumbnail {
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    overflow: hidden;
    border-radius: var(--rounded-md, 8px);
}
.page-article__thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
.page-article__content.prose {
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--font-body, sans-serif);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text, #000000);
}
.page-article__content.prose h2 {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.625rem;
    font-weight: 800;
    margin: 2rem 0 1rem;
    color: var(--color-secondary, #000000);
}
.page-article__content.prose h3 {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    margin: 1.75rem 0 0.875rem;
    color: var(--color-secondary, #000000);
}
.page-article__content.prose p   { margin: 0 0 1.125rem; }
.page-article__content.prose ul,
.page-article__content.prose ol  { margin: 0 0 1.125rem; padding-left: 1.5rem; }
.page-article__content.prose li  { margin-bottom: 0.5rem; }
.page-article__content.prose a   {
    color: var(--color-primary, #E22421);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.page-article__content.prose a:hover { color: var(--color-secondary, #000000); }
.page-article__content.prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: var(--color-surface, #F8F8F8);
    border-left: 4px solid var(--color-accent, #FFFFFF);
    font-style: italic;
    color: var(--color-text-muted, #565758);
}
.page-article__content.prose code {
    background: var(--color-surface, #F8F8F8);
    padding: 0.125rem 0.375rem;
    border-radius: var(--rounded-sm, 4px);
    font-family: ui-monospace, monospace;
    font-size: 0.875em;
}
.page-article__content.prose pre {
    background: var(--color-secondary, #000000);
    color: var(--color-bg, #FFFFFF);
    padding: 1rem 1.25rem;
    border-radius: var(--rounded-md, 8px);
    overflow-x: auto;
    margin: 1.25rem 0;
}
.page-article__content.prose pre code { background: transparent; padding: 0; }
/* === BLOCK:page-article:END === */


/* === BLOCK:error-404:START === */
.error-404 {
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: var(--color-surface, #F8F8F8);
    min-height: 60vh;
    display: flex;
    align-items: center;
}
.error-404__inner {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}
.error-404__code {
    display: block;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(5rem, 14vw, 9rem);
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary, #E22421);
    letter-spacing: -0.04em;
    opacity: 0.9;
}
.error-404__title {
    margin: 0.75rem 0 1rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.error-404__lead {
    margin: 0 0 1.5rem;
    color: var(--color-text-muted, #565758);
    font-size: 1rem;
    line-height: 1.55;
}
.error-404__search {
    display: flex;
    gap: 0.5rem;
    max-width: 460px;
    margin: 0 auto 1.5rem;
}
.error-404__search input {
    flex: 1;
    padding: 0.75rem 0.875rem;
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    color: var(--color-secondary, #000000);
}
.error-404__search-btn { width: auto; padding: 0.75rem 1.25rem; }
.error-404__ctas {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
}
/* === BLOCK:error-404:END === */


/* === BLOCK:search-results:START === */
/* Barra fina de contexto — começa direto abaixo do mega-menu.
 * Sem page-hero, sem breadcrumb. Apenas summary + segmentos por tipo.
 * IMPORTANTE: .search-main e seu primeiro filho colam no header (zero gap). */
.search-main,
.search-main > * { margin-top: 0 !important; }
.search-main { padding-top: 0; }
body.search .site-main > *:first-child { margin-top: 0; }
.search-bar {
    background: var(--color-surface, #F8F8F8);
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    padding: 0.875rem 0;
    margin: 0;
}
.search-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
}
.search-bar__summary {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    color: var(--color-text-muted, #565758);
    line-height: 1.4;
}
.search-bar__summary strong {
    color: var(--color-secondary, #000000);
    font-weight: 800;
}
.search-bar__summary em {
    font-style: normal;
    color: var(--color-primary, #E22421);
    font-weight: 700;
}
@media (max-width: 640px) {
    .search-bar { padding: 0.75rem 0; }
    .search-bar__summary { font-size: 0.8125rem; }
}

/* Segmentos de tipo (Todos | Produtos | Artigos | Páginas) */
.search-segments {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0;
}
.search-segments__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.875rem;
    background: var(--color-bg, #FFFFFF);
    color: var(--color-secondary, #000000);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 999px;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.search-segments__chip:hover {
    border-color: var(--color-primary, #E22421);
    color: var(--color-primary, #E22421);
}
.search-segments__chip.is-active {
    background: var(--color-secondary, #000000);
    border-color: var(--color-secondary, #000000);
    color: #fff;
}
.search-segments__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0 0.4375rem;
    height: 1.25rem;
    background: color-mix(in srgb, var(--color-secondary, #000000) 8%, transparent);
    color: var(--color-secondary, #000000);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.search-segments__chip.is-active .search-segments__count {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.search-results {
    padding: 20px 0 var(--spacing-section, 4rem);
}

/* Seções (Produtos / Conteúdo) com header próprio */
.search-section { margin-bottom: clamp(2rem, 4vw, 3rem); }
.search-section:last-of-type { margin-bottom: 0; }
.search-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.625rem;
    border-bottom: 2px solid var(--color-secondary, #000000);
}
.search-section__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 800;
    color: var(--color-secondary, #000000);
    letter-spacing: -0.005em;
}
.search-section__count {
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}

/* Grid de produtos na busca (mesma densidade do shop) */
/* IMPORTANTE: selector composto `.listing-grid.search-products-grid`
 * para vencer cascade — `.listing-grid` base (definida mais abaixo)
 * teria `auto-fill, minmax(280px, 1fr)` o que daria 1 col em mobile. */
.listing-grid.search-products-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.875rem, 1.6vw, 1.25rem);
}
@media (max-width: 1280px) {
    .listing-grid.search-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px)  {
    .listing-grid.search-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
}
@media (max-width: 360px)  {
    .listing-grid.search-products-grid { gap: 0.5rem; }
}
.search-products-grid__item { display: flex; }
.search-products-grid__item > .listing-card,
.search-products-grid__item > .product { width: 100%; margin: 0; }

/* Pagination wrapper — espaço acima */
.search-pagination { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Lista de conteúdo (posts/pages) — cards horizontais */
.search-results__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    max-width: 880px;
    margin-inline: auto;
}
.search-result-card {
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.search-result-card:hover {
    border-color: var(--color-primary, #E22421);
    transform: translateY(-1px);
}
.search-result-card__link {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    padding: 1rem;
    color: inherit;
    text-decoration: none;
}
.search-result-card:not(:has(.search-result-card__media)) .search-result-card__link {
    grid-template-columns: 1fr;
}
.search-result-card__media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-surface, #F8F8F8);
}
.search-result-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.search-result-card__type {
    display: inline-block;
    padding: 0.1875rem 0.5rem;
    background: color-mix(in srgb, var(--color-primary, #E22421) 12%, transparent);
    color: var(--color-primary, #E22421);
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.375rem;
}
.search-result-card__title {
    margin: 0 0 0.375rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
    line-height: 1.3;
}
.search-result-card__excerpt {
    margin: 0 0 0.5rem;
    color: var(--color-text-muted, #565758);
    font-size: 0.875rem;
    line-height: 1.5;
}
.search-result-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-family: ui-monospace, monospace;
    font-size: 0.6875rem;
    color: var(--color-text-muted, #565758);
}
.search-result-card__url {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.search-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-muted, #565758);
    max-width: 480px;
    margin: 0 auto;
}
.search-empty svg     { color: var(--color-text-muted, #565758); opacity: 0.5; margin-bottom: 1rem; }
.search-empty__title  {
    margin: 0 0 0.625rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.search-empty__lead   { margin: 0 0 1.25rem; font-size: 0.9375rem; line-height: 1.55; }
.search-empty__ctas   {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
}

/* Sugestões: categorias populares no empty state */
.search-empty__suggestions { margin: 0.5rem 0 1.5rem; }
.search-empty__suggestions-label {
    display: block;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
    margin-bottom: 0.625rem;
}
.search-empty__cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
}
.search-empty__cat-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--color-surface, #F8F8F8);
    color: var(--color-secondary, #000000);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease;
}
.search-empty__cat-list a:hover {
    background: var(--color-bg, #FFFFFF);
    border-color: var(--color-primary, #E22421);
}
.search-empty__cat-list a span {
    color: var(--color-text-muted, #565758);
    font-size: 0.6875rem;
    font-weight: 700;
}
/* === BLOCK:search-results:END === */


/* === BLOCK:listing:START === */
/* Grid de cards genérico — usado por blog (home.php, archive.php, single
   related-posts) e mais tarde por products/services. */
.listing-section {
    padding: clamp(1.5rem, 4vw, 3rem) 0 var(--spacing-section, 4rem);
}

.listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
}

.listing-card {
    position: relative;
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: var(--rounded-md, 8px);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    display: flex;
    flex-direction: column;
}
.listing-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--color-primary, #E22421) 35%, var(--color-border, #E5E5E5));
}

.listing-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.listing-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-surface, #F8F8F8);
}
.listing-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.listing-card:hover .listing-card__media img { transform: scale(1.04); }

.listing-card__body {
    padding: clamp(0.875rem, 2vw, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.listing-card__type,
.post-card__category {
    align-self: flex-start;
    padding: 0.1875rem 0.5rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
}
.listing-card__type {
    background: var(--color-surface, #F8F8F8);
    color: var(--color-text-muted, #565758);
    border: 1px solid var(--color-border, #E5E5E5);
}

.listing-card__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-secondary, #000000);
}

.listing-card__excerpt {
    margin: 0;
    color: var(--color-text-muted, #565758);
    font-size: 0.875rem;
    line-height: 1.55;
}

.listing-card__date {
    margin-top: auto;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
}

.post-card__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    padding-top: 0.625rem;
    border-top: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 50%, transparent);
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
}
.post-card__metrics span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.post-card__metrics svg {
    color: var(--color-primary, #E22421);
    flex-shrink: 0;
}

.listing-empty {
    text-align: center;
    padding: clamp(2rem, 5vw, 3.5rem) 1rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px dashed var(--color-border, #E5E5E5);
    color: var(--color-text-muted, #565758);
}
.listing-empty p { margin: 0 0 0.75rem; }
.listing-empty a {
    color: var(--color-primary, #E22421);
    font-weight: 700;
}

/* ── PAGINAÇÃO premium — números circulares com hover lift ───────────
   Estilo moderno: pílulas redondas com border sutil, current preenchido
   verde primary, hover suave com micro-elevação. Setas Anterior/Próximo
   ficam como pill alongada com texto. */
.listing-pagination {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    display: flex;
    justify-content: center;
}
.listing-pagination .nav-links,
.wp-pagenavi {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4375rem;
}
.listing-pagination .page-numbers,
.listing-pagination a,
.listing-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.875rem;
    background: #fff;
    color: var(--color-secondary, #000000);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
                transform 0.18s ease, box-shadow 0.18s ease;
}
.listing-pagination a:hover {
    background: color-mix(in srgb, var(--color-primary, #E22421) 8%, #fff);
    color: var(--color-primary, #E22421);
    border-color: var(--color-primary, #E22421);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--color-primary, #E22421) 28%, transparent);
}
.listing-pagination a:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 3px;
}
/* Página ATIVA — preenchida primary, sem hover lift */
.listing-pagination .current,
.listing-pagination span.current {
    background: var(--color-shop-pagination-active, var(--color-primary, #E22421));
    color: #fff;
    border-color: var(--color-shop-pagination-active, var(--color-primary, #E22421));
    font-weight: 700;
    cursor: default;
}
.listing-pagination .dots {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-muted, #565758);
    min-width: 24px;
    padding: 0;
}
/* Setas Anterior / Próximo — pílula alongada com texto */
.listing-pagination .prev,
.listing-pagination .next {
    padding: 0 1.125rem;
    gap: 0.375rem;
    font-weight: 700;
}
.listing-pagination .prev::before {
    content: '←';
    margin-right: 0.25rem;
    font-weight: 400;
}
.listing-pagination .next::after {
    content: '→';
    margin-left: 0.25rem;
    font-weight: 400;
}

/* Mobile: pagination compacta, prev/next sem texto */
@media (max-width: 640px) {
    .listing-pagination .page-numbers,
    .listing-pagination a,
    .listing-pagination span.page-numbers {
        min-width: 36px;
        height: 36px;
        padding: 0 0.625rem;
        font-size: 0.75rem;
    }
    .listing-pagination .prev,
    .listing-pagination .next {
        padding: 0 0.875rem;
        font-size: 0;       /* esconde texto */
    }
    .listing-pagination .prev::before { font-size: 1rem; margin: 0; }
    .listing-pagination .next::after  { font-size: 1rem; margin: 0; }
}

/* Wrap + summary line (gerados pelo helper the_woo_premium_pagination) */
.listing-pagination-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.listing-pagination-wrap .listing-pagination { margin-top: 0; }
.listing-pagination__summary {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted, #565758);
    letter-spacing: 0.02em;
}
.listing-pagination__summary strong {
    color: var(--color-secondary, #000000);
    font-weight: 800;
}
/* === BLOCK:listing:END === */


/* === BLOCK:category-filter:START === */
.category-filter {
    padding: clamp(0.875rem, 2vw, 1.25rem) 0;
    background: var(--color-bg, #FFFFFF);
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.category-filter::-webkit-scrollbar { display: none; }

.category-filter__list {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 100%;
}
.category-filter__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.875rem;
    background: var(--color-surface, #F8F8F8);
    color: var(--color-secondary, #000000);
    border: 1px solid var(--color-border, #E5E5E5);
    border-left: 3px solid var(--cat-color, var(--color-primary, #E22421));
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.category-filter__chip:hover {
    background: var(--cat-color, var(--color-primary, #E22421));
    color: var(--color-bg, #FFFFFF);
}
.category-filter__chip--active {
    background: var(--color-secondary, #000000);
    color: var(--color-bg, #FFFFFF);
    border-color: var(--color-secondary, #000000);
}
.category-filter__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 0.375rem;
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--rounded-full, 50px);
    font-size: 0.6875rem;
    font-weight: 700;
}
.category-filter__chip:hover .category-filter__count,
.category-filter__chip--active .category-filter__count {
    background: rgba(255, 255, 255, 0.22);
}
/* === BLOCK:category-filter:END === */


/* === BLOCK:page-hero-image:START === */
/* Variante do page-hero com imagem de background + overlay. */
.page-hero--image {
    position: relative;
    color: var(--color-bg, #FFFFFF);
    min-height: clamp(280px, 36vw, 440px);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}
.page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.page-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-secondary, #000000) 60%, transparent) 0%,
        color-mix(in srgb, var(--color-secondary, #000000) 85%, transparent) 100%
    );
}
.page-hero--image .page-hero__inner {
    position: relative;
    z-index: 1;
    text-align: left;
}
.page-hero--image .page-hero__title,
.page-hero--image .page-hero__excerpt {
    color: var(--color-bg, #FFFFFF);
}
.page-hero--image .page-hero__excerpt {
    max-width: 640px;
    opacity: 0.94;
}

.page-hero__eyebrow--pill {
    text-decoration: none;
    transition: background 0.15s ease;
}
.page-hero__eyebrow--pill:hover {
    background: var(--color-accent, #FFFFFF) !important;
    color: var(--color-secondary, #000000) !important;
}

.listing-hero {
    padding-bottom: clamp(2rem, 4vw, 3rem);
}
/* === BLOCK:page-hero-image:END === */


/* === BLOCK:author-byline:START === */
.author-byline {
    background: var(--color-surface, #F8F8F8);
    padding: clamp(1rem, 2.5vw, 1.5rem) 0;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.author-byline__card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 2vw, 1.25rem);
}
.author-byline__avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-bg, #FFFFFF);
    box-shadow: var(--shadow-sm);
    background: var(--color-secondary, #000000);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.author-byline__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-byline__initials {
    color: var(--color-accent, #FFFFFF);
    font-family: var(--font-heading, sans-serif);
    font-size: 1.125rem;
    font-weight: 800;
}

.author-byline__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.author-byline__label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
    margin-bottom: 2px;
}
.author-byline__name {
    font-family: var(--font-heading, sans-serif);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
    text-decoration: none;
    transition: color 0.15s ease;
}
.author-byline__name:hover { color: var(--color-primary, #E22421); }
.author-byline__tagline {
    display: inline;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #565758);
    font-weight: 500;
}

.author-byline__date {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #565758);
}
.author-byline__date svg { color: var(--color-primary, #E22421); flex-shrink: 0; }
.author-byline__reading { opacity: 0.85; }

@media (max-width: 600px) {
    .author-byline__date { margin-left: 0; width: 100%; }
}
/* === BLOCK:author-byline:END === */


/* === BLOCK:content-body:START === */
/* .content-section + .content-body.prose — single post + serviços */
.content-section {
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    background: var(--color-bg, #FFFFFF);
}
.content-body.prose,
.page-article__content.prose {
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--font-body, sans-serif);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text, #000000);
}
.content-body.prose h2 {
    margin: 2rem 0 1rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-secondary, #000000);
}
.content-body.prose h3 {
    margin: 1.75rem 0 0.875rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.content-body.prose h4 {
    margin: 1.5rem 0 0.75rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.content-body.prose p   { margin: 0 0 1.125rem; }
.content-body.prose ul,
.content-body.prose ol  { margin: 0 0 1.125rem; padding-left: 1.5rem; }
.content-body.prose li  { margin-bottom: 0.5rem; }
.content-body.prose a   {
    color: var(--color-primary, #E22421);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.content-body.prose a:hover { color: var(--color-secondary, #000000); }
.content-body.prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: var(--color-surface, #F8F8F8);
    border-left: 4px solid var(--color-accent, #FFFFFF);
    font-style: italic;
    color: var(--color-text-muted, #565758);
}
.content-body.prose blockquote p:last-child { margin-bottom: 0; }
.content-body.prose code {
    background: var(--color-surface, #F8F8F8);
    padding: 0.125rem 0.375rem;
    border-radius: var(--rounded-sm, 4px);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875em;
}
.content-body.prose pre {
    background: var(--color-secondary, #000000);
    color: var(--color-bg, #FFFFFF);
    padding: 1rem 1.25rem;
    border-radius: var(--rounded-md, 8px);
    overflow-x: auto;
    margin: 1.25rem 0;
}
.content-body.prose pre code { background: transparent; padding: 0; }
.content-body.prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--rounded-md, 8px);
    margin: 1.25rem auto;
    display: block;
}
.content-body.prose figure { margin: 1.5rem 0; }
.content-body.prose figcaption {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #565758);
    font-style: italic;
}
.content-body.prose hr {
    margin: 2rem auto;
    border: 0;
    border-top: 1px solid var(--color-border, #E5E5E5);
    max-width: 200px;
}

/* Tags do post (chips abaixo do conteúdo) */
.post-tags {
    max-width: 760px;
    margin: 1.5rem auto 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.post-tags__label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
    margin-right: 0.25rem;
}
.post-tags__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.post-tag {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    background: var(--color-surface, #F8F8F8);
    color: var(--color-text-muted, #565758);
    border: 1px solid var(--color-border, #E5E5E5);
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.post-tag:hover {
    background: var(--color-primary, #E22421);
    color: var(--color-bg, #FFFFFF);
    border-color: var(--color-primary, #E22421);
}

.page-links {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, #E5E5E5);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
}
.page-links a, .page-links > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.5rem;
    background: var(--color-surface, #F8F8F8);
    color: var(--color-secondary, #000000);
    border: 1px solid var(--color-border, #E5E5E5);
    text-decoration: none;
    font-weight: 700;
}
/* === BLOCK:content-body:END === */


/* === BLOCK:social-bar:START === */
.social-bar {
    padding: clamp(1rem, 2.5vw, 1.5rem) 0;
    background: var(--color-bg, #FFFFFF);
    border-top: 1px solid var(--color-border, #E5E5E5);
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.social-bar__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.875rem;
    max-width: 760px;
    margin: 0 auto;
}

.social-stat,
.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.75rem;
    background: var(--color-surface, #F8F8F8);
    color: var(--color-secondary, #000000);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: default;
    text-decoration: none;
}
.social-btn {
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.social-btn:hover {
    background: var(--color-primary, #E22421);
    color: var(--color-bg, #FFFFFF);
    border-color: var(--color-primary, #E22421);
}
.social-btn:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 2px;
}
.social-btn--comment { margin-left: auto; }
.social-btn__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(0, 0, 0, 0.12);
    border-radius: var(--rounded-full, 50px);
    font-size: 0.6875rem;
    font-weight: 700;
}
.social-btn:hover .social-btn__badge { background: rgba(255, 255, 255, 0.22); }

/* Share dropdown */
.social-share { position: relative; }
.share-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: var(--z-dropdown, 50);
    min-width: 180px;
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
}
.share-item {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: transparent;
    border: 0;
    text-align: left;
    color: var(--color-secondary, #000000);
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.share-item:hover {
    background: var(--color-surface, #F8F8F8);
    color: var(--color-primary, #E22421);
}
.share-item--copied { color: var(--color-primary, #E22421); font-weight: 700; }

@media (max-width: 600px) {
    .social-btn--comment { margin-left: 0; }
}
/* === BLOCK:social-bar:END === */


/* === BLOCK:related-posts:START === */
.related-posts {
    padding: var(--spacing-section, clamp(2.5rem, 6vw, 5rem)) 0;
    background: var(--color-surface, #F8F8F8);
    border-top: 1px solid var(--color-border, #E5E5E5);
}
.related-posts__head {
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.related-posts__eyebrow {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: color-mix(in srgb, var(--color-primary, #E22421) 14%, transparent);
    color: var(--color-primary, #E22421);
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--rounded-full, 50px);
    margin-bottom: 0.625rem;
}
.related-posts__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.375rem, 2.8vw, 1.875rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-secondary, #000000);
}
.related-posts__title em {
    font-style: normal;
    color: var(--color-primary, #E22421);
}
/* === BLOCK:related-posts:END === */


/* === BLOCK:comments:START === */
.comments-wrap {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
[x-cloak] { display: none !important; }

/* Header: title + CTA */
.comments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.125rem;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.comments-head__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.comments-head__icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary, #E22421) 12%, transparent);
    color: var(--color-primary, #E22421);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.comments-head__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.comments-head__eyebrow {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}
.comments-head__count {
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
    font-weight: 800;
    color: var(--color-secondary, #000000);
}

@media (max-width: 640px) {
    .comments-head__count { display: none; }
}

.comments-head__cta {
    appearance: none;
    border: 0;
    background: var(--color-primary, #E22421);
    color: #fff;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.625rem 1.125rem;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.comments-head__cta:hover { background: var(--color-secondary, #000000); transform: translateY(-1px); }
.comments-head__cta.is-open {
    background: var(--color-surface, #F8F8F8);
    color: var(--color-text-muted, #565758);
}
.comments-head__cta.is-open:hover { background: color-mix(in srgb, var(--color-border, #E5E5E5) 40%, transparent); }

/* Lista de comentários estilo questions */
.comments-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.comments-list .children {
    list-style: none;
    margin: 0 0 0 clamp(1rem, 3vw, 2.25rem);
    padding-left: clamp(0.875rem, 2vw, 1.25rem);
    border-left: 2px solid color-mix(in srgb, var(--color-border, #E5E5E5) 70%, transparent);
    display: flex;
    flex-direction: column;
}
.comments-thread__item { list-style: none; }

.comment-item {
    padding: 1.125rem 0 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 55%, transparent);
}
.comments-thread__item:last-child > .comment-item { border-bottom: 0; }
.comments-thread__item.is-reply .comment-item { padding-top: 0.875rem; }

.comment-item__body {
    margin-bottom: 0.875rem;
}
.comment-item__text {
    color: var(--color-text, #000000);
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    line-height: 1.65;
}
.comment-item__text p { margin: 0 0 0.625rem; }
.comment-item__text p:last-child { margin-bottom: 0; }

.comment-item__pending {
    background: color-mix(in srgb, var(--color-accent, #FFFFFF) 14%, transparent);
    border-left: 3px solid var(--color-accent, #FFFFFF);
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.625rem;
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.comment-item__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    flex-wrap: wrap;
}
.comment-item__author {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}
.comment-item__avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.comment-item__author-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}
.comment-item__author-name {
    font-family: var(--font-heading, sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-secondary, #000000);
}
.comment-item__author-name a { color: inherit; text-decoration: none; }
.comment-item__author-name a:hover { color: var(--color-primary, #E22421); }
.comment-item__time {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    color: var(--color-text-muted, #565758);
}

.comment-item__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}
.comment-item__action a {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.3125rem 0.625rem;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 70%, transparent);
    border-radius: 0;
    color: var(--color-text-muted, #565758);
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.16s ease;
    line-height: 1;
}
.comment-item__action a:hover {
    color: var(--color-primary, #E22421);
    border-color: var(--color-primary, #E22421);
    background: color-mix(in srgb, var(--color-primary, #E22421) 6%, transparent);
}
.comment-item__action svg { flex-shrink: 0; }

/* Estado vazio */
.comments-empty {
    text-align: center;
    padding: 2.25rem 1rem;
    background: var(--color-surface, #F8F8F8);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
}
.comments-empty__icon { color: var(--color-text-muted, #565758); opacity: 0.4; }
.comments-empty__lead {
    margin: 0;
    color: var(--color-text-muted, #565758);
    font-size: 0.9375rem;
    max-width: 480px;
}
.comments-empty__btn {
    appearance: none;
    border: 0;
    background: var(--color-primary, #E22421);
    color: #fff;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.625rem 1.25rem;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background 0.18s ease;
}
.comments-empty__btn:hover { background: var(--color-secondary, #000000); }

/* Form wrap (toggle) */
.comments-form-wrap {
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Userbar (logado) */
.comments-userbar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg, #FFFFFF);
    border-radius: 0;
    border: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 60%, transparent);
    width: fit-content;
    max-width: 100%;
}
.comments-userbar__avatar img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.comments-userbar__label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #565758);
    line-height: 1.2;
}
.comments-userbar__label strong {
    color: var(--color-secondary, #000000);
    font-weight: 700;
}
.comments-userbar__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.375rem;
    padding-left: 0.5rem;
    border-left: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 60%, transparent);
}
.comments-userbar__action {
    width: 26px;
    height: 26px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted, #565758);
    text-decoration: none;
    transition: all 0.16s ease;
}
.comments-userbar__action:hover {
    background: color-mix(in srgb, var(--color-primary, #E22421) 12%, transparent);
    color: var(--color-primary, #E22421);
}

/* Form fields */
.comment-form {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.comment-form p {
    margin: 0;
}
.comment-form-author,
.comment-form-email {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}
@media (max-width: 640px) {
    .comment-form-author,
    .comment-form-email { grid-template-columns: 1fr; }
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.6875rem 0.875rem;
    background: var(--color-form-input-bg, #FFFFFF);
    border: 1px solid var(--color-form-input-border, color-mix(in srgb, var(--color-border, #E5E5E5) 80%, transparent));
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    color: var(--color-form-input-text, var(--color-secondary, #000000));
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.comment-form input::placeholder,
.comment-form textarea::placeholder {
    color: var(--color-form-placeholder, color-mix(in srgb, var(--color-text-muted, #565758) 70%, transparent));
}
.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--color-form-input-focus, var(--color-primary, #E22421));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-form-input-focus, var(--color-primary, #E22421)) 18%, transparent);
}
.comment-form textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.55;
}

.comment-form__submit {
    appearance: none;
    border: 0;
    background: var(--color-primary, #E22421);
    color: #fff;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
    align-self: flex-start;
    margin-top: 0.25rem;
}
.comment-form__submit:hover { background: var(--color-secondary, #000000); transform: translateY(-1px); }
.comment-form__submit svg { flex-shrink: 0; }

.comment-form__hint {
    margin: 0;
    color: var(--color-text-muted, #565758);
    font-size: 0.6875rem;
    line-height: 1.4;
}
.comment-form__hint small { font-size: inherit; }

.comments-must-login {
    margin: 0;
    padding: 0.875rem 1rem;
    background: var(--color-bg, #FFFFFF);
    border: 1px dashed var(--color-border, #E5E5E5);
    border-radius: 0;
    color: var(--color-text-muted, #565758);
    font-size: 0.875rem;
}
.comments-must-login a { color: var(--color-primary, #E22421); font-weight: 700; }

.comments-closed {
    text-align: center;
    color: var(--color-text-muted, #565758);
    padding: 1.25rem;
    font-style: italic;
    font-size: 0.875rem;
}

/* Pagination dos comentários */
.comments-wrap .pagination,
.comments-wrap .nav-links {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 1rem;
}
/* === BLOCK:comments:END === */


/* === BLOCK:shop:START === */
/* Layout do shop — topbar + sidebar (drawer mobile) + grid */
.twp-shop-main { background: var(--color-bg, #FFFFFF); }

.shop {
    padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(2.5rem, 5vw, 4rem);
}

/* Topbar */
.shop-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 0.875rem 1.125rem;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-left: 4px solid var(--color-primary, #E22421);
}
.shop-topbar__count {
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}
.shop-topbar__count span {
    color: var(--color-secondary, #000000);
    font-size: 1.125em;
}
.shop-topbar__controls {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .shop-topbar__controls {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.5rem;
        width: 100%;
    }
    .shop-topbar__count { width: 100%; }
}

.shop-topbar__filter-btn {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--color-secondary, #000000);
    color: var(--color-bg, #FFFFFF);
    border: 0;
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
}
.shop-topbar__filter-btn:hover { background: var(--color-primary, #E22421); }
.shop-topbar__filter-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--color-accent, #FFFFFF);
    border-radius: 50%;
}

/* Sort select (custom chevron) */
.shop-sort { display: inline-flex; min-width: 0; flex: 1; }
.shop-sort__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 0.875rem;
    background: var(--color-bg, #FFFFFF) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%231E3932" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 0.625rem center;
    background-size: 12px;
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-secondary, #000000);
    cursor: pointer;
}
.shop-sort__select:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: -1px;
}

/* Layout grid (sidebar + cards) */
.shop-layout {
    display: grid;
    /* sidebar mais estreita (220px) pra dar mais espaço ao grid 4-col */
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(1.25rem, 2.4vw, 1.75rem);
    position: relative;
}
@media (max-width: 1280px) {
    /* Em laptops, sidebar reduz pra 200px (cabe 4 cols apertadas ou 3 cols folgadas). */
    .shop-layout { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 980px) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-topbar__filter-btn { display: inline-flex; }
}

/* Override .listing-grid no contexto shop — 4 cols desktop */
.shop-grid-wrap .listing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.875rem, 1.6vw, 1.25rem);
}
@media (max-width: 1280px) { .shop-grid-wrap .listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Mobile: SEMPRE 2 cards por linha (sem queda pra 1-col) */
@media (max-width: 760px)  {
    .shop-grid-wrap .listing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.625rem;
    }
}
@media (max-width: 360px)  {
    .shop-grid-wrap .listing-grid { gap: 0.5rem; }
}

/* Overlay do drawer mobile */
.shop-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 90;
    animation: twpOverlayFade 0.22s ease forwards;
}
@keyframes twpOverlayFade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 980px) { .shop-overlay { display: block; } }

/* Sidebar de filtros */
.shop-filters {
    background: var(--color-shop-filter-bg, var(--color-bg, #FFFFFF));
    border: 1px solid var(--color-border, #E5E5E5);
    align-self: start;
}
.shop-filters__drawer-header { display: none; }

@media (max-width: 980px) {
    .shop-filters {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(380px, 92vw);
        max-height: 100vh;
        overflow-y: auto;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        border: 0;
        border-right: 1px solid var(--color-border, #E5E5E5);
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.24);
        will-change: transform;
    }
    .shop-filters--open { transform: translateX(0); }
    .shop-filters__drawer-header {
        display: flex;
        justify-content: flex-start;
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--color-secondary, #000000);
    }
    .shop-filters__drawer-close {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem 1.25rem;
        background: transparent;
        border: 0;
        color: var(--color-bg, #FFFFFF);
        font-family: var(--font-body, sans-serif);
        font-size: 0.8125rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
    }
}

.shop-filters__form {
    /* padding mais compacto + gap menor → cabem mais grupos visíveis. */
    padding: 0.875rem 0.9375rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.shop-filters__form > * { min-width: 0; max-width: 100%; box-sizing: border-box; }

.shop-filters__clear {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    align-self: flex-start;
    padding: 0.3125rem 0.625rem;
    background: color-mix(in srgb, #E22421 8%, transparent);
    color: #E22421;
    border: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.18s ease;
}
.shop-filters__clear:hover { background: color-mix(in srgb, #E22421 16%, transparent); }

.shop-filter-group {
    margin: 0;
    padding: 0 0 1rem;
    border: 0;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    min-width: 0;
}
.shop-filter-group:last-of-type { border-bottom: 0; padding-bottom: 0; }
.shop-filter-group > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.shop-filter-group__title {
    padding: 0 0 0.5rem;
    margin-bottom: 0.625rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-secondary, #000000);
    border-bottom: 2px solid var(--color-secondary, #000000);
    width: 100%;
}

/* SKU input com lupa */
.shop-sku { position: relative; width: 100%; }
.shop-sku__input {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.625rem 0.5rem 2rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-secondary, #000000);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-sizing: border-box;
}
.shop-sku__input::placeholder { color: var(--color-text-muted, #565758); text-transform: none; letter-spacing: 0; font-weight: 400; }
.shop-sku__input:focus { outline: 2px solid var(--color-accent, #FFFFFF); outline-offset: -1px; background: var(--color-bg, #FFFFFF); }
.shop-sku__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.shop-sku__icon {
    position: absolute;
    top: 50%; left: 0.5rem;
    transform: translateY(-50%);
    color: var(--color-text-muted, #565758);
    pointer-events: none;
}

/* Faixa de preço */
.shop-price {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
    width: 100%;
}
.shop-price__label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}
.shop-price__input {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.625rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-secondary, #000000);
    -moz-appearance: textfield;
    box-sizing: border-box;
}

/* Checklist (categorias, marcas, tipo, estoque) */
.shop-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
/* Altura natural — cresce conforme a lista (sem scroll interno). */
.shop-checklist--scroll { max-height: none; overflow: visible; padding-right: 0; }
.shop-checklist__item {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.3125rem 0.4375rem;
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: 0;
    font-size: 0.75rem;
}
.shop-checklist__item:hover { background: var(--color-surface, #F8F8F8); }
.shop-checklist__item--checked,
.shop-checklist__item:has(.shop-checklist__input:checked) {
    background: color-mix(in srgb, var(--color-primary, #E22421) 8%, transparent);
    font-weight: 700;
}

.shop-checklist__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.shop-checklist__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px; height: 14px;
    background: var(--color-bg, #FFFFFF);
    border: 1.5px solid var(--color-border, #E5E5E5);
    color: var(--color-bg, #FFFFFF);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.shop-checklist__box svg { opacity: 0; transition: opacity 0.15s ease; }

.shop-checklist__item--checked .shop-checklist__box,
.shop-checklist__input:checked + .shop-checklist__box {
    background: var(--color-primary, #E22421);
    border-color: var(--color-primary, #E22421);
}
.shop-checklist__item--checked .shop-checklist__box svg,
.shop-checklist__input:checked + .shop-checklist__box svg { opacity: 1; }

.shop-checklist__box--radio { border-radius: 50%; padding: 2px; }
.shop-checklist__dot {
    width: 100%; height: 100%;
    background: transparent;
    border-radius: 50%;
    transition: background 0.15s ease;
}
.shop-checklist__item--checked .shop-checklist__box--radio,
.shop-checklist__input:checked + .shop-checklist__box--radio {
    background: var(--color-bg, #FFFFFF);
}
.shop-checklist__item--checked .shop-checklist__dot,
.shop-checklist__input:checked + .shop-checklist__box--radio .shop-checklist__dot {
    background: var(--color-primary, #E22421);
}

.shop-checklist__label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-secondary, #000000);
    line-height: 1.3;
    /* Trunca nome muito longo de marca/categoria (ex: "VW ar fusca 1300 / 1500 / 1600") */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shop-checklist__count {
    font-family: var(--font-body, sans-serif);
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--color-text-muted, #565758);
    background: var(--color-surface, #F8F8F8);
    padding: 0.125rem 0.3125rem;
    min-width: 22px;
    text-align: center;
}

.shop-search-input {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.625rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    color: var(--color-secondary, #000000);
    box-sizing: border-box;
}

.shop-filters__reset-link {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
    text-decoration: none;
}
.shop-filters__reset-link:hover { color: #E22421; }

.shop-filters__apply {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--color-shop-apply-btn, var(--color-primary, #E22421));
    color: #FFFFFF;
    border: 0;
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease;
    margin-top: 0.5rem;
}
.shop-filters__apply:hover { background: var(--color-secondary, #000000); }

/* Variante topo — sticky enquanto rola os filtros */
.shop-filters__apply--top {
    margin: 0 0 1rem;
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.18);
}

/* Active chips (acima do grid) */
.shop-active-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1rem;
}
.shop-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.5rem 0.3125rem 0.75rem;
    background: var(--color-shop-chip-active, var(--color-surface, #F8F8F8));
    color: var(--color-secondary, #000000);
    border: 1px solid var(--color-shop-chip-active, var(--color-border, #E5E5E5));
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.shop-active-chip:hover {
    background: var(--color-danger, #E22421);
    color: var(--color-bg, #FFFFFF);
    border-color: var(--color-danger, #E22421);
}
.shop-active-chip span { font-size: 1.125em; line-height: 1; opacity: 0.7; }
/* === BLOCK:shop:END === */


/* === BLOCK:product-card-wc:START === */
/* ════════════════════════════════════════════════════════════════════════
   PRODUCT CARD — usado em TODOS os loops WC (loja, categorias, related,
   cart cross-sells). Padrão premium consistente com o DS:

     - Card branco com border-top accent dourado SUTIL no hover
     - Imagem 1:1 com zoom suave on hover
     - Brand eyebrow (uppercase letter-spacing 0.18em)
     - Título max 2 linhas (-webkit-line-clamp)
     - Rating stars custom (SVG mask, --twp-rating var %)
     - Price destacado em font-heading + PIX line abaixo (font-body)
     - CTA pill verde discreto com seta — escala no hover
     - Estados: in stock (default) / on sale (badge) / OOS (filter + banner)

   Fontes: var(--font-heading) + var(--font-body) (DS).
   ════════════════════════════════════════════════════════════════════════ */

.product-card {
    position: relative;
    background: var(--color-shop-card-bg, #fff);
    border: 1px solid var(--color-shop-card-border, var(--color-border, #E5E5E5));
    border-radius: var(--rounded-md, var(--radius-md, 8px));
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    display: flex;
    flex-direction: column;
}
.product-card::before {
    /* Strip accent dourado no topo — invisible até hover */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-accent, #FFFFFF);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 4;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.18);
    border-color: color-mix(in srgb, var(--color-accent, #FFFFFF) 60%, var(--color-border, #E5E5E5));
}
.product-card:hover::before { transform: scaleX(1); }

/* Link interno cobre o card inteiro (acessível, clicável) */
.product-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* ── MEDIA (imagem 1:1 com hover zoom) ─────────────────────────────── */
.product-card .listing-card__media,
.product-card .listing-card__media--square {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--color-surface, #F8F8F8);
    overflow: hidden;
    isolation: isolate;
}
.product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.35s ease,
                filter 0.3s ease;
}
/* Primary (destaque) — visível por padrão */
.product-card__img--primary {
    position: relative;
    z-index: 1;
    opacity: 1;
}
/* Secondary (hover) — absoluta sobre a primary, invisível até hover */
.product-card__img--secondary {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}
/* No hover: fade-cross entre primary e secondary com zoom suave */
.product-card:hover .product-card__img--primary {
    opacity: 0;
    transform: scale(1.04);
}
.product-card:hover .product-card__img--secondary {
    opacity: 1;
    transform: scale(1.04);
}
/* Sem imagem secondary, hover só faz zoom (comportamento original) */
.product-card:not(:has(.product-card__img--secondary)):hover .product-card__img--primary {
    opacity: 1;
    transform: scale(1.06);
}
.product-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: color-mix(in srgb, var(--color-text-muted, #565758) 40%, transparent);
}

/* ── BADGES (discount top-left) ────────────────────────────────────── */
.product-card__badge {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 0.3125rem 0.5rem;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    border-radius: var(--rounded-sm, var(--radius-sm, 4px));
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.18);
}
.product-card__badge--discount {
    top: 0.75rem;
    left: 0.75rem;
    background: var(--color-shop-sale-badge-bg, var(--color-primary, #E22421));
    color: var(--color-shop-sale-badge-text, #fff);
}

/* ── FEATURED BADGE — fogo vivo 360° + embers ─────────────────────
 * CAMADAS (z-stack fundo → frente):
 *   ::before                          → aura externa pulsante 360° (blur 8px)
 *   .product-card__flame-ring > i ×8  → línguas N/NE/E/SE/S/SW/W/NW
 *                                        cada uma sai do centro pelo vetor
 *                                        e desvanece em ~1s (escalonado)
 *   corpo do badge                    → gradient lava + flicker brightness
 *   ::after                           → highlight amarelo interno (topo)
 *   .product-card__embers > i ×6      → fagulhas subindo (z=4, na frente)
 *   .product-card__badge-flame-icon   → ícone SVG com glow pulsante
 *
 * Durações primas/coprimas (0.22 / 0.5 / 0.85 / 0.9 / 0.95 / 1.05 / 1.1
 * / 1.15 / 1.25 / 1.3 / 1.5 / 1.6 / 1.7 / 1.8 / 1.9 / 2.1 / 2.3s) com
 * delays negativos distintos garantem que NUNCA há sincronia visível.
 * ───────────────────────────────────────────────────────────────── */
.product-card__badge--featured {
    top: 0.75rem;
    right: 0.75rem;
    left: auto;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.3125rem 0.5625rem 0.3125rem 0.5rem;
    border-radius: 3px;
    background: linear-gradient(180deg,
        #FFE066 0%,
        #FFB347 22%,
        #FF6B1A 48%,
        #E22421 75%,
        #6E1410 100%);
    background-size: 100% 240%;
    background-position: 50% 100%;
    color: #fff3d6;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow:
        0 0 6px rgba(255, 220, 100, 0.85),
        0 0 2px rgba(0, 0, 0, 0.4);
    box-shadow:
        inset 0 0 8px rgba(255, 200, 60, 0.35),
        0 0 0 1px rgba(255, 180, 60, 0.45),
        0 0 14px rgba(255, 120, 30, 0.55),
        0 4px 18px rgba(192, 57, 43, 0.55);
    overflow: visible;
    isolation: isolate;
    animation:
        twpFlameFlow    1.6s ease-in-out infinite alternate,
        twpFlameFlicker 0.22s steps(2, end) infinite;
}

/* AURA EXTERNA — halo radial 360° em volta do badge inteiro */
.product-card__badge--featured::before {
    content: '';
    position: absolute;
    inset: -16px;
    z-index: -2;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 220, 120, 0.55) 0%,
        rgba(255, 140, 40, 0.45)  25%,
        rgba(255, 80, 20, 0.28)   45%,
        rgba(192, 57, 43, 0.12)   65%,
        transparent 80%);
    filter: blur(8px);
    pointer-events: none;
    animation: twpFlameAura 1.8s ease-in-out infinite alternate;
}

/* Highlight interno (luz amarela no topo) */
.product-card__badge--featured::after {
    content: '';
    position: absolute;
    inset: 1px 1px auto 1px;
    height: 38%;
    background: linear-gradient(180deg,
        rgba(255, 250, 200, 0.6) 0%,
        rgba(255, 220, 120, 0.18) 60%,
        transparent 100%);
    pointer-events: none;
    border-radius: 2px;
}

/* ── ANEL DE 8 CHAMAS — cobre 360° em torno do badge ─────────── */
.product-card__flame-ring {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.product-card__flame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 22px;
    background: radial-gradient(ellipse at 50% 90%,
        rgba(255, 250, 200, 1)   0%,
        rgba(255, 190, 60, 0.85) 30%,
        rgba(255, 100, 25, 0.55) 55%,
        rgba(180, 40, 20, 0.25)  75%,
        transparent 90%);
    border-radius: 50% 50% 30% 30% / 65% 65% 35% 35%;
    filter: blur(1.5px);
    transform-origin: 50% 100%;
    opacity: 0;
    will-change: transform, opacity;
}

.product-card__flame--n  { animation: twpFlameN  1.1s  ease-in-out infinite both; animation-delay: -0.05s; }
.product-card__flame--ne { animation: twpFlameNE 0.9s  ease-in-out infinite both; animation-delay: -0.70s; width: 10px; height: 18px; }
.product-card__flame--e  { animation: twpFlameE  1.3s  ease-in-out infinite both; animation-delay: -0.40s; width: 11px; height: 19px; }
.product-card__flame--se { animation: twpFlameSE 0.95s ease-in-out infinite both; animation-delay: -0.20s; width: 9px;  height: 16px; }
.product-card__flame--s  { animation: twpFlameS  1.05s ease-in-out infinite both; animation-delay: -0.60s; width: 10px; height: 14px; }
.product-card__flame--sw { animation: twpFlameSW 1.15s ease-in-out infinite both; animation-delay: -0.85s; width: 9px;  height: 16px; }
.product-card__flame--w  { animation: twpFlameW  1.25s ease-in-out infinite both; animation-delay: -0.30s; width: 11px; height: 19px; }
.product-card__flame--nw { animation: twpFlameNW 0.85s ease-in-out infinite both; animation-delay: -0.55s; width: 10px; height: 18px; }

/* ── EMBERS — 6 fagulhas flutuantes ───────────────────────────── */
.product-card__embers {
    position: absolute;
    inset: -4px -2px;
    z-index: 4;
    pointer-events: none;
}
.product-card__embers i {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 250, 180, 1)  0%,
        rgba(255, 180, 50, 0.9) 40%,
        rgba(255, 80, 0, 0)   100%);
    box-shadow: 0 0 4px rgba(255, 200, 80, 0.95);
    opacity: 0;
    will-change: transform, opacity;
}
.product-card__embers i:nth-child(1) { left: 18%; bottom: 0;   animation: twpEmber1 1.7s ease-out infinite; animation-delay: 0s; }
.product-card__embers i:nth-child(2) { left: 42%; bottom: 0;   animation: twpEmber2 2.1s ease-out infinite; animation-delay: -0.6s; }
.product-card__embers i:nth-child(3) { left: 68%; bottom: 0;   animation: twpEmber1 1.5s ease-out infinite; animation-delay: -1.1s; width: 3px; height: 3px; }
.product-card__embers i:nth-child(4) { left: 10%; bottom: 30%; animation: twpEmber3 2.3s ease-out infinite; animation-delay: -0.3s; }
.product-card__embers i:nth-child(5) { left: 88%; bottom: 20%; animation: twpEmber2 1.9s ease-out infinite; animation-delay: -1.4s; width: 1.5px; height: 1.5px; }
.product-card__embers i:nth-child(6) { left: 55%; bottom: 60%; animation: twpEmber3 1.6s ease-out infinite; animation-delay: -0.9s; }

/* Ícone SVG com glow pulsante */
.product-card__badge-flame-icon {
    flex-shrink: 0;
    color: #fff8d6;
    filter: drop-shadow(0 0 3px rgba(255, 200, 60, 0.9));
    animation: twpFlameIconPulse 0.5s ease-in-out infinite alternate;
    position: relative;
    z-index: 1;
}
.product-card__badge-text {
    position: relative;
    z-index: 1;
}

/* ── KEYFRAMES ────────────────────────────────────────────────── */
@keyframes twpFlameFlow {
    0%   { background-position: 50% 100%; }
    100% { background-position: 50% 0%; }
}
@keyframes twpFlameFlicker {
    0%, 100% { filter: brightness(1)    saturate(1.05); }
    50%      { filter: brightness(1.18) saturate(1.3);  }
}
@keyframes twpFlameAura {
    0%   { opacity: 0.55; transform: scale(0.92); }
    50%  { opacity: 0.95; transform: scale(1.08); }
    100% { opacity: 0.65; transform: scale(0.98); }
}
@keyframes twpFlameIconPulse {
    0%   { transform: scale(1)    translateY(0);   filter: drop-shadow(0 0 3px rgba(255, 200, 60, 0.9)); }
    100% { transform: scale(1.08) translateY(-1px); filter: drop-shadow(0 0 6px rgba(255, 230, 100, 1));  }
}

/* Cada chama: nasce no centro do badge (translate -50/-100%), gira pelo
 * vetor radial e escala pra fora; skew alternado distorce o formato
 * pra parecer chama orgânica, não elipse perfeita. */
@keyframes twpFlameN {
    0%   { transform: translate(-50%, -100%) rotate(0deg)   translateY(-60%)  scale(0.5,  0.4); opacity: 0; }
    25%  { opacity: 1; }
    50%  { transform: translate(-50%, -100%) rotate(0deg)   translateY(-150%) scale(1.05, 1.2) skewX(4deg); }
    100% { transform: translate(-50%, -100%) rotate(0deg)   translateY(-230%) scale(0.7,  1.5) skewX(-3deg); opacity: 0; }
}
@keyframes twpFlameNE {
    0%   { transform: translate(-50%, -100%) rotate(45deg)  translateY(-50%)  scale(0.4, 0.4); opacity: 0; }
    25%  { opacity: 0.95; }
    50%  { transform: translate(-50%, -100%) rotate(45deg)  translateY(-140%) scale(0.95, 1.15) skewX(-4deg); }
    100% { transform: translate(-50%, -100%) rotate(45deg)  translateY(-220%) scale(0.6, 1.4)  skewX(5deg);  opacity: 0; }
}
@keyframes twpFlameE {
    0%   { transform: translate(-50%, -100%) rotate(90deg)  translateY(-50%)  scale(0.45, 0.4); opacity: 0; }
    25%  { opacity: 0.9; }
    50%  { transform: translate(-50%, -100%) rotate(90deg)  translateY(-130%) scale(0.95, 1.15) skewX(3deg); }
    100% { transform: translate(-50%, -100%) rotate(90deg)  translateY(-200%) scale(0.55, 1.35) skewX(-4deg); opacity: 0; }
}
@keyframes twpFlameSE {
    0%   { transform: translate(-50%, -100%) rotate(135deg) translateY(-50%)  scale(0.4, 0.4); opacity: 0; }
    25%  { opacity: 0.85; }
    50%  { transform: translate(-50%, -100%) rotate(135deg) translateY(-110%) scale(0.85, 1.05) skewX(-3deg); }
    100% { transform: translate(-50%, -100%) rotate(135deg) translateY(-180%) scale(0.5, 1.3)  skewX(4deg);  opacity: 0; }
}
@keyframes twpFlameS {
    0%   { transform: translate(-50%, -100%) rotate(180deg) translateY(-50%)  scale(0.4, 0.3); opacity: 0; }
    25%  { opacity: 0.7; }
    50%  { transform: translate(-50%, -100%) rotate(180deg) translateY(-100%) scale(0.8, 1)    skewX(3deg); }
    100% { transform: translate(-50%, -100%) rotate(180deg) translateY(-160%) scale(0.45, 1.2) skewX(-4deg); opacity: 0; }
}
@keyframes twpFlameSW {
    0%   { transform: translate(-50%, -100%) rotate(225deg) translateY(-50%)  scale(0.4, 0.4); opacity: 0; }
    25%  { opacity: 0.85; }
    50%  { transform: translate(-50%, -100%) rotate(225deg) translateY(-110%) scale(0.85, 1.05) skewX(4deg); }
    100% { transform: translate(-50%, -100%) rotate(225deg) translateY(-180%) scale(0.5, 1.3)  skewX(-3deg); opacity: 0; }
}
@keyframes twpFlameW {
    0%   { transform: translate(-50%, -100%) rotate(270deg) translateY(-50%)  scale(0.45, 0.4); opacity: 0; }
    25%  { opacity: 0.9; }
    50%  { transform: translate(-50%, -100%) rotate(270deg) translateY(-130%) scale(0.95, 1.15) skewX(-3deg); }
    100% { transform: translate(-50%, -100%) rotate(270deg) translateY(-200%) scale(0.55, 1.35) skewX(4deg);  opacity: 0; }
}
@keyframes twpFlameNW {
    0%   { transform: translate(-50%, -100%) rotate(315deg) translateY(-50%)  scale(0.4, 0.4); opacity: 0; }
    25%  { opacity: 0.95; }
    50%  { transform: translate(-50%, -100%) rotate(315deg) translateY(-140%) scale(0.95, 1.15) skewX(4deg); }
    100% { transform: translate(-50%, -100%) rotate(315deg) translateY(-220%) scale(0.6, 1.4)  skewX(-5deg); opacity: 0; }
}

/* Embers — fagulhas sobem com leve drift horizontal */
@keyframes twpEmber1 {
    0%   { transform: translate(0, 0)     scale(0.6); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(-3px, -28px) scale(0.2); opacity: 0; }
}
@keyframes twpEmber2 {
    0%   { transform: translate(0, 0)    scale(0.5); opacity: 0; }
    20%  { opacity: 0.95; }
    100% { transform: translate(4px, -32px) scale(0.15); opacity: 0; }
}
@keyframes twpEmber3 {
    0%   { transform: translate(0, 0)    scale(0.7); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(-2px, -24px) scale(0.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .product-card__badge--featured,
    .product-card__badge--featured::before,
    .product-card__flame,
    .product-card__embers i,
    .product-card__badge-flame-icon {
        animation: none !important;
    }
    .product-card__badge--featured { background-position: 50% 50%; }
    .product-card__flame,
    .product-card__embers i { opacity: 0; }
}

/* ── BODY ──────────────────────────────────────────────────────────── */
.product-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.125rem 1.125rem;
    flex: 1;
}

/* Brand eyebrow — vermelho com sombra sutil pra destaque visual.
   Weight 600 (DS prefere pesos finos e elegantes). */
.product-card__brand {
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #E22421;                  /* Vermelho destaque (não DS, decisão visual) */
    text-shadow: 0 1px 2px color-mix(in srgb, #E22421 25%, transparent);
    line-height: 1;
}

/* Título 2 linhas max */
.product-card__title {
    margin: 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--color-secondary, #000000);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: calc(1.35em * 2);
}

/* ── RATING (estrelas custom SVG mask) ─────────────────────────────── */
.product-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
}
.product-card__stars {
    --twp-star-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z' fill='black'/></svg>");
    position: relative;
    display: inline-block;
    width: 76px;   /* 5 estrelas × 14px + 6px gaps */
    height: 14px;
    background:
        linear-gradient(90deg, #FFC107 var(--twp-rating, 0%), var(--color-border, #E5E5E5) var(--twp-rating, 0%));
    -webkit-mask-image: var(--twp-star-svg), var(--twp-star-svg), var(--twp-star-svg), var(--twp-star-svg), var(--twp-star-svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 14px 14px;
    -webkit-mask-position:
        0   0,
        15px 0,
        31px 0,
        47px 0,
        62px 0;
            mask-image: var(--twp-star-svg), var(--twp-star-svg), var(--twp-star-svg), var(--twp-star-svg), var(--twp-star-svg);
            mask-repeat: no-repeat;
            mask-size: 14px 14px;
            mask-position:
        0   0,
        15px 0,
        31px 0,
        47px 0,
        62px 0;
}
.product-card__rating-count { font-weight: 600; }

/* ── PRICING (WC nativo .woocommerce-Price-amount) ──────────────────── */
.product-card__pricing {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4375rem;
    margin: 0;
}
.product-card__pricing del,
.product-card__pricing del .woocommerce-Price-amount {
    color: var(--color-text-muted, #565758);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.8125rem;
    font-weight: 500;
    opacity: 0.75;
}
.product-card__pricing ins,
.product-card__pricing ins .woocommerce-Price-amount {
    background: transparent;
    text-decoration: none;
}
.product-card__pricing .woocommerce-Price-amount {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    font-weight: 800;
    color: var(--color-secondary, #000000);
    letter-spacing: -0.01em;
}
.product-card__pricing ins .woocommerce-Price-amount,
.product-card--sale .product-card__pricing > .woocommerce-Price-amount {
    color: var(--color-primary, #E22421);
}

/* PIX line (sutil, com ícone diamante) */
.product-card__pix {
    margin: -0.125rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary, #E22421);
    line-height: 1.3;
}
.product-card__pix .woocommerce-Price-amount {
    font-size: 0.8125rem;
    font-weight: 700;
    color: inherit;
}
.product-card__pix-icon {
    flex-shrink: 0;
    color: var(--color-primary, #E22421);
}

/* Parcelamento sem juros — chamada sutil logo abaixo do preço */
.product-card__installments {
    margin: 0.1875rem 0 0;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 500;
    color: #00a650;
    line-height: 1.3;
}

/* ── CTA — estrutura do .twp-add-btn (COMPRAR) mas com coloração
   OUTLINED verde (atual do card). Full-width, height 48px, weight 800
   uppercase, padding horizontal apenas. Hover preenche verde sólido. */
.product-card__cta-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 44px;
    padding: 0 clamp(0.75rem, 2vw, 1.25rem);
    /* Coloração OUTLINED (atual do card) — bg transparent, border + color verde */
    background: transparent;
    color: var(--color-primary, #E22421);
    border: 1.5px solid var(--color-primary, #E22421);
    border-radius: 0;            /* Quadrado igual COMPRAR */
    /* Tipografia idêntica ao .twp-add-btn (COMPRAR) */
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.product-card:hover .product-card__cta-btn:not(.product-card__cta-btn--oos) {
    background: var(--color-primary, #E22421);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary, #E22421) 30%, transparent);
}
.product-card__cta-btn:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 3px;
}

/* ── ESTADO OOS (Indisponível) ─────────────────────────────────────── */
.product-card--oos .product-card__img {
    filter: grayscale(0.9) brightness(0.92) contrast(0.95);
}
.product-card--oos:hover .product-card__img {
    transform: none;
    filter: grayscale(0.85) brightness(0.95);
}
.product-card--oos:hover {
    transform: none;
    box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.1);
}
.product-card--oos:hover::before { transform: scaleX(0); }
.product-card--oos .product-card__title,
.product-card--oos .product-card__pricing .woocommerce-Price-amount,
.product-card--oos .product-card__brand {
    color: var(--color-text-muted, #565758);
}
.product-card--oos .product-card__pricing .woocommerce-Price-amount {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--color-text-muted, #565758) 50%, transparent);
}
.product-card--oos .product-card__badge--discount {
    opacity: 0.4;
    filter: grayscale(1);
}
.product-card__cta-btn--oos {
    color: var(--color-text-muted, #565758);
    border-color: var(--color-border, #E5E5E5);
    background: var(--color-surface, #F8F8F8);
    cursor: not-allowed;
}

/* Banner "Indisponível" sobreposto à imagem */
.product-card__oos-banner {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-4deg);
    z-index: 3;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(78%, 220px);
    text-align: center;
}
.product-card__oos-banner::before,
.product-card__oos-banner::after {
    content: '';
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
}
.product-card__oos-banner-text {
    padding: 0.5rem 0.875rem;
    background: rgba(30, 57, 50, 0.92);     /* color-secondary opaco */
    color: #fff;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: clamp(0.75rem, 1.8vw, 0.9375rem);
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ── Responsive — mobile 2-up profissional ──────────────────────────
 * Cards têm ~160-200px de largura em mobile (2 cols + gutters).
 * Toda a tipografia/spacing aqui está calibrada pra esse range.
 * ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Body mais compacto, sem perder respiração */
    .product-card__body {
        padding: 0.625rem 0.6875rem 0.75rem;
        gap: 0.3125rem;
    }

    /* Brand: menor mas legível, sem text-shadow (poluição em telas finas) */
    .product-card__brand {
        font-size: 0.625rem;
        letter-spacing: 0.12em;
        text-shadow: none;
    }

    /* Título: 0.8125rem (13px), 2 linhas garantidas via min-height */
    .product-card__title {
        font-size: 0.8125rem;
        line-height: 1.3;
        min-height: calc(1.3em * 2);
    }

    /* Rating compacto — 4 estrelinhas menores */
    .product-card__rating { font-size: 0.6875rem; gap: 0.25rem; }
    .product-card__stars {
        width: 64px;
        height: 12px;
        -webkit-mask-size: 12px 12px;
        mask-size: 12px 12px;
        -webkit-mask-position: 0 0, 13px 0, 26px 0, 39px 0, 52px 0;
        mask-position: 0 0, 13px 0, 26px 0, 39px 0, 52px 0;
    }

    /* Preço em coluna (regular em cima, PIX embaixo) — evita wrap feio */
    .product-card__pricing {
        gap: 0.25rem 0.4375rem;
        align-items: baseline;
    }
    .product-card__pricing .woocommerce-Price-amount {
        font-size: 1rem;
        letter-spacing: -0.015em;
    }
    .product-card__pricing del,
    .product-card__pricing del .woocommerce-Price-amount {
        font-size: 0.75rem;
        flex: 0 0 100%;
        order: -1;
        margin-bottom: -0.125rem;
    }

    /* PIX line compacta */
    .product-card__pix {
        font-size: 0.6875rem;
        gap: 0.25rem;
    }
    .product-card__pix .woocommerce-Price-amount {
        font-size: 0.75rem;
    }
    .product-card__pix-icon { width: 10px; height: 10px; }

    /* Parcelamento compacto */
    .product-card__installments { font-size: 0.625rem; }

    /* Badge desconto reposicionado e menor */
    .product-card__badge {
        min-width: 36px;
        padding: 0.25rem 0.375rem;
        font-size: 0.625rem;
    }
    .product-card__badge--discount {
        top: 0.5rem;
        left: 0.5rem;
    }

    /* CTA mais baixo e tight */
    .product-card__cta-btn {
        height: 36px;
        padding: 0 0.5rem;
        font-size: 0.625rem;
        letter-spacing: 0.06em;
    }

    /* OOS banner mais discreto no card pequeno */
    .product-card__oos-banner { width: min(85%, 160px); }
}

/* Mobile MUITO pequeno (<360px): aperta mais ainda */
@media (max-width: 360px) {
    .product-card__body { padding: 0.5rem 0.5625rem 0.625rem; gap: 0.25rem; }
    .product-card__title { font-size: 0.75rem; }
    .product-card__pricing .woocommerce-Price-amount { font-size: 0.9375rem; }
    .product-card__cta-btn { height: 32px; font-size: 0.5625rem; }
}

@media (prefers-reduced-motion: reduce) {
    .product-card,
    .product-card::before,
    .product-card__img,
    .product-card__cta-btn { transition: none !important; }
    .product-card:hover { transform: none; }
    .product-card:hover .product-card__img { transform: none; }
}
/* === BLOCK:product-card-wc:END === */


/* === BLOCK:product-category-hero:START === */
/* ── Barra fina da categoria — H1 + botão INFO toggle ────────────────
 * Substitui o hero gigante. Cartão branco com borda fina, faixa azul
 * vertical à esquerda (accent visual), botão INFO escuro à direita.
 * Clique no INFO → expande painel com a descrição da categoria.
 * Layout: collapse vertical na mobile (h1 em cima, botão abaixo).
 * ──────────────────────────────────────────────────────────────────── */
.cat-info-bar {
    background: var(--color-bg, #FFFFFF);
    padding: 1.25rem 0 0;
}
.cat-info-bar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem 0.875rem 1.125rem;
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-left: 4px solid var(--color-primary, #E22421);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.cat-info-bar__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--color-secondary, #000000);
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botão INFO — circular branco com ícone verde primary; só ícone (sem texto).
 * Fica fixo à direita do título, nunca quebra para baixo. */
.cat-info-bar__btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--color-primary, #E22421);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.cat-info-bar__btn:hover {
    background: var(--color-primary, #E22421);
    color: #fff;
    border-color: var(--color-primary, #E22421);
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--color-primary, #E22421) 40%, transparent);
}
.cat-info-bar__btn:active { transform: scale(0.94); }
.cat-info-bar__btn:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 2px;
}

/* Painel expansível — descrição renderizada com .prose.
 * Botão X no topo-direito fecha e restaura o botão INFO. */
.cat-info-bar__panel {
    position: relative;
    margin-top: -1px; /* cola na borda inferior do .row */
    padding: 1.5rem 3.25rem 1.5rem 1.75rem; /* right tem espaço pro X */
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-top: 0;
    border-left: 4px solid var(--color-primary, #E22421);
    box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.18);
}
.cat-info-bar__panel-inner { max-width: 900px; }
.cat-info-bar__close {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 50%;
    color: var(--color-text-muted, #565758);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.cat-info-bar__close:hover {
    background: var(--color-secondary, #000000);
    border-color: var(--color-secondary, #000000);
    color: #fff;
}
.cat-info-bar__close:active { transform: scale(0.92); }
.cat-info-bar__empty {
    margin: 0;
    color: var(--color-text-muted, #565758);
    font-style: italic;
    font-size: 0.875rem;
}
@media (max-width: 560px) {
    .cat-info-bar__panel { padding: 1rem 2.75rem 1rem 1rem; }
    .cat-info-bar__close { top: 0.5rem; right: 0.5rem; width: 30px; height: 30px; }
}

@media (max-width: 560px) {
    /* Título + botão ficam SEMPRE na mesma linha — sem quebra */
    .cat-info-bar__row {
        gap: 0.625rem;
        padding: 0.75rem 0.875rem;
    }
    .cat-info-bar__title { font-size: 0.9375rem; }
    .cat-info-bar__btn { width: 32px; height: 32px; }
    .cat-info-bar__btn svg { width: 14px; height: 14px; }
}

.product-category-subs {
    padding: clamp(1rem, 2.5vw, 1.5rem) 0;
    background: var(--color-bg, #FFFFFF);
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.product-category-subs .container {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.product-category-subs__label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}
.product-category-subs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.product-category-subs__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--color-surface, #F8F8F8);
    color: var(--color-secondary, #000000);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: var(--rounded-full, 50px);
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}
.product-category-subs__chip:hover {
    background: var(--color-primary, #E22421);
    color: var(--color-bg, #FFFFFF);
    border-color: var(--color-primary, #E22421);
}
.product-category-subs__count {
    min-width: 22px;
    height: 18px;
    padding: 0 0.375rem;
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--rounded-full, 50px);
    font-size: 0.6875rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.product-category-subs__chip:hover .product-category-subs__count {
    background: rgba(255, 255, 255, 0.22);
}
/* === BLOCK:product-category-hero:END === */


/* === BLOCK:prose:START =============================================
 * .prose — sistema tipográfico padronizado para conteúdo de artigo.
 *
 * Aplica em qualquer container que renderize HTML rico vindo do CMS
 * (descrição de categoria, post, página, blocos Gutenberg, ACF wysiwyg).
 *
 * Cobre TODOS os elementos HTML comuns de artigo:
 *   - h1..h6 (hierarquia clara, uppercase, escala responsiva)
 *   - p (parágrafos com espaçamento ritmado)
 *   - strong, em, mark, small, sub, sup, kbd, abbr
 *   - a (link primary com underline animado)
 *   - ul, ol, li (bullets/números nativos + indent)
 *   - blockquote (citação com barra lateral primary)
 *   - code (inline) + pre (block) — code-style monoespaçado
 *   - hr (separador sutil)
 *   - table, thead, tbody, tr, th, td (table com header destacado)
 *   - img, figure, figcaption (imagens responsivas com legenda)
 *   - dl, dt, dd (lista de definição)
 *
 * USO:
 *   <div class="prose"><?php echo wp_kses_post( $content ); ?></div>
 *
 * Variantes:
 *   .prose--sm  → 14px base (descrições, sidebars)
 *   .prose      → 16px base (default — artigos)
 *   .prose--lg  → 18px base (hero copy, landing pages)
 *
 * Responsivo: tudo escala via clamp(); breakpoint 560px aperta paddings
 * e reduz a escala de headings em telas pequenas.
 * ================================================================== */

.prose {
    /* Vars locais — facilita override por contexto.
     * Consomem os tokens Tier 2 do BLOCK:design-system (admin > Cores Globais > Single Post) */
    --prose-color:       var(--color-single-content, var(--color-secondary, #000000));
    --prose-color-soft:  var(--color-text-muted, #565758);
    --prose-color-link:  var(--color-single-link, var(--color-primary, #E22421));
    --prose-color-rule:  var(--color-single-blockquote, var(--color-border, #E5E5E5));
    --prose-bg-quote:    var(--color-surface, #F8F8F8);
    --prose-bg-code:     #F4F1EC;
    --prose-radius:      4px;
    --prose-font-body:   var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
    --prose-font-head:   var(--font-heading, var(--prose-font-body));
    --prose-font-mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    color: var(--prose-color);
    font-family: var(--prose-font-body);
    font-size: 1rem;
    line-height: 1.65;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.prose--sm { font-size: 0.875rem; line-height: 1.6; }
.prose--lg { font-size: 1.125rem; line-height: 1.7; }

/* Reset do espaçamento das pontas para colar bem dentro de containers */
.prose > :first-child { margin-top: 0; }
.prose > :last-child  { margin-bottom: 0; }

/* ── Headings ──────────────────────────────────────────────────── */
.prose h1, .prose h2, .prose h3,
.prose h4, .prose h5, .prose h6 {
    font-family: var(--prose-font-head);
    color: var(--prose-color);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-wrap: balance;
}
.prose h1 { margin: 1.75em 0 0.625em; font-size: clamp(1.5rem, 3.4vw, 2.125rem); letter-spacing: -0.02em; }
.prose h2 { margin: 1.65em 0 0.625em; font-size: clamp(1.25rem, 2.6vw, 1.625rem); }
.prose h3 { margin: 1.55em 0 0.5em;   font-size: clamp(1.0625rem, 2vw, 1.25rem); }
.prose h4 { margin: 1.45em 0 0.5em;   font-size: clamp(0.9375rem, 1.6vw, 1.0625rem); }
.prose h5 { margin: 1.35em 0 0.4375em; font-size: 0.875rem; letter-spacing: 0.04em; }
.prose h6 { margin: 1.25em 0 0.4375em; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--prose-color-soft); }

/* Primeiro heading nunca tem margin-top — já vem colado no topo */
.prose h1:first-child, .prose h2:first-child, .prose h3:first-child,
.prose h4:first-child, .prose h5:first-child, .prose h6:first-child { margin-top: 0; }

/* ── Parágrafos / inline ───────────────────────────────────────── */
.prose p { margin: 0 0 1.1em; }
.prose strong, .prose b { font-weight: 700; color: var(--prose-color); }
.prose em, .prose i { font-style: italic; }
.prose small { font-size: 0.875em; color: var(--prose-color-soft); }
.prose sub, .prose sup { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; }
.prose sup { top: -0.5em; }
.prose sub { bottom: -0.25em; }
.prose mark {
    background: color-mix(in srgb, var(--color-accent, #FFFFFF) 35%, transparent);
    color: var(--prose-color);
    padding: 0 0.2em;
    border-radius: 2px;
}
.prose abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}
.prose kbd {
    display: inline-block;
    padding: 0.125em 0.4em;
    font-family: var(--prose-font-mono);
    font-size: 0.85em;
    background: var(--prose-bg-code);
    border: 1px solid var(--prose-color-rule);
    border-bottom-width: 2px;
    border-radius: var(--prose-radius);
    color: var(--prose-color);
}

/* ── Links — underline animado primary ─────────────────────────── */
.prose a {
    color: var(--prose-color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.18s ease, color 0.18s ease;
}
.prose a:hover {
    text-decoration-thickness: 2px;
    color: color-mix(in srgb, var(--prose-color-link) 80%, #000);
}
.prose a:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Listas ─────────────────────────────────────────────────────── */
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul ul, .prose ol ol,
.prose ul ol, .prose ol ul { margin: 0.35em 0 0.5em; }
.prose ul ul { list-style: circle; }
.prose ul ul ul { list-style: square; }
.prose li { margin: 0.3em 0; padding-left: 0.25em; }
.prose li::marker { color: var(--prose-color-link); }
.prose li > p { margin-bottom: 0.5em; }

/* ── Lista de definição ────────────────────────────────────────── */
.prose dl { margin: 0 0 1.1em; }
.prose dt {
    font-weight: 700;
    color: var(--prose-color);
    margin-top: 0.875em;
}
.prose dt:first-child { margin-top: 0; }
.prose dd { margin: 0.25em 0 0 1.25em; color: var(--prose-color-soft); }

/* ── Blockquote — citação com barra lateral primary ────────────── */
.prose blockquote {
    margin: 1.5em 0;
    padding: 0.875em 1.25em;
    background: var(--prose-bg-quote);
    border-left: 4px solid var(--prose-color-link);
    color: var(--prose-color);
    font-style: italic;
    font-size: 1.0625em;
    line-height: 1.55;
    border-radius: 0 var(--prose-radius) var(--prose-radius) 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite {
    display: block;
    margin-top: 0.625em;
    font-size: 0.8125em;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--prose-color-soft);
}
.prose blockquote cite::before { content: '— '; }

/* ── Código inline + bloco ─────────────────────────────────────── */
.prose code {
    font-family: var(--prose-font-mono);
    font-size: 0.875em;
    background: var(--prose-bg-code);
    color: var(--prose-color);
    padding: 0.1em 0.4em;
    border-radius: var(--prose-radius);
    border: 1px solid var(--prose-color-rule);
}
.prose pre {
    margin: 1.25em 0;
    padding: 1em 1.125em;
    background: #1E2939;
    color: #E5E7EB;
    border-radius: var(--prose-radius);
    overflow-x: auto;
    font-family: var(--prose-font-mono);
    font-size: 0.875em;
    line-height: 1.55;
    -webkit-overflow-scrolling: touch;
}
.prose pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border: 0;
    font-size: inherit;
    border-radius: 0;
}

/* ── HR — separador ────────────────────────────────────────────── */
.prose hr {
    margin: 2em 0;
    border: 0;
    height: 1px;
    background: var(--prose-color-rule);
}

/* ── Imagens / figure ──────────────────────────────────────────── */
.prose img,
.prose svg,
.prose video {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--prose-radius);
}
.prose figure {
    margin: 1.5em 0;
    text-align: center;
}
.prose figure img { margin-inline: auto; }
.prose figcaption {
    margin-top: 0.5em;
    font-size: 0.8125em;
    color: var(--prose-color-soft);
    font-style: italic;
    line-height: 1.4;
}

/* ── Tabelas ───────────────────────────────────────────────────── */
.prose table {
    width: 100%;
    margin: 1.5em 0;
    border-collapse: collapse;
    font-size: 0.9375em;
    overflow: hidden;
    border: 1px solid var(--prose-color-rule);
    border-radius: var(--prose-radius);
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.prose table thead {
    background: color-mix(in srgb, var(--prose-color-link) 8%, transparent);
}
.prose table th {
    text-align: left;
    padding: 0.75em 1em;
    font-weight: 800;
    color: var(--prose-color);
    text-transform: uppercase;
    font-size: 0.75em;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--prose-color-rule);
    white-space: nowrap;
}
.prose table td {
    padding: 0.75em 1em;
    border-bottom: 1px solid var(--prose-color-rule);
    vertical-align: top;
}
.prose table tbody tr:last-child td { border-bottom: 0; }
.prose table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--prose-color-soft) 4%, transparent); }

/* ── Detalhes / summary (accordion nativo) ─────────────────────── */
.prose details {
    margin: 1em 0;
    padding: 0.75em 1em;
    background: var(--prose-bg-quote);
    border: 1px solid var(--prose-color-rule);
    border-radius: var(--prose-radius);
}
.prose summary {
    font-weight: 700;
    cursor: pointer;
    color: var(--prose-color);
}
.prose details[open] summary { margin-bottom: 0.625em; }

/* ── Mobile ≤ 560px — aperta paddings e reduz heading scale ──── */
@media (max-width: 560px) {
    .prose { font-size: 0.9375rem; line-height: 1.6; }
    .prose h1 { font-size: 1.5rem; }
    .prose h2 { font-size: 1.25rem; }
    .prose h3 { font-size: 1.0625rem; }
    .prose ul, .prose ol { padding-left: 1.25em; }
    .prose blockquote { padding: 0.75em 1em; font-size: 1em; }
    .prose pre, .prose table { font-size: 0.8125em; }
    .prose table th, .prose table td { padding: 0.5em 0.625em; }
}

@media (prefers-reduced-motion: reduce) {
    .prose a { transition: none; }
}
/* === BLOCK:prose:END ============================================== */


/* === BLOCK:product-single:START === */
/* Layout do single product — 2 colunas (galeria + summary) → 1 col mobile */
.twp-product-single { background: var(--color-bg, #FFFFFF); }

.twp-product-page {
    padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(2rem, 4vw, 3rem);
    /* GARANTIA contra scroll horizontal vindo de qualquer descendente
       (filmstrip 100vw, card flutuante etc). Defensivo. */
    overflow-x: clip;
}

.product-single__top-meta {
    margin-bottom: clamp(1rem, 2vw, 1.25rem);
}
.product-single__top-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text-muted, #565758);
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.15s ease;
}
.product-single__top-cat:hover { color: var(--color-primary, #E22421); }
.product-single__top-cat svg { flex-shrink: 0; }

.product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
@media (max-width: 900px) {
    .product-layout { grid-template-columns: 1fr; }
}
/* === BLOCK:product-single:END === */


/* === BLOCK:product-gallery:START === */
/* WC default gallery: .woocommerce-product-gallery, .flex-viewport,
   .flex-control-thumbs. Estilizamos por cima do flexslider.
   Zoom + lightbox usam classes WC nativas. */
.product-gallery-wrap {
    position: relative;
    isolation: isolate;
}
.woocommerce-product-gallery {
    position: relative;
}
.woocommerce-product-gallery__image {
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    overflow: hidden;
}
.woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.woocommerce-product-gallery__wrapper {
    margin: 0 !important;
}

/* Trigger de zoom (lightbox) — WC adiciona .woocommerce-product-gallery__trigger */
.woocommerce-product-gallery__trigger {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    z-index: 3;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg, #FFFFFF);
    color: var(--color-secondary, #000000);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    text-decoration: none;
    font-size: 0;
    box-shadow: var(--shadow-sm);
    transition: background 0.18s ease, color 0.18s ease;
}
.woocommerce-product-gallery__trigger::before {
    content: '+';
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: inherit;
}
.woocommerce-product-gallery__trigger:hover {
    background: var(--color-primary, #E22421);
    color: var(--color-bg, #FFFFFF);
    border-color: var(--color-primary, #E22421);
}

/* Thumbnails */
.flex-control-thumbs {
    list-style: none;
    margin: 0.625rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}
.flex-control-thumbs li { margin: 0; }
.flex-control-thumbs img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.55;
    border: 1px solid var(--color-border, #E5E5E5);
    transition: opacity 0.18s ease, border-color 0.18s ease;
}
.flex-control-thumbs img:hover,
.flex-control-thumbs .flex-active {
    opacity: 1;
    border-color: var(--color-primary, #E22421);
}

/* Setas do flexslider (se mais de 1 imagem) */
.flex-direction-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
}
.flex-direction-nav li a {
    position: absolute;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-bg, #FFFFFF);
    color: var(--color-secondary, #000000);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    text-decoration: none;
    font-size: 0;
    pointer-events: auto;
    box-shadow: var(--shadow-sm);
    transition: background 0.18s ease;
}
.flex-direction-nav .flex-prev { left: 0.625rem; }
.flex-direction-nav .flex-prev::before { content: '‹'; }
.flex-direction-nav .flex-next { right: 0.625rem; }
.flex-direction-nav .flex-next::before { content: '›'; }
.flex-direction-nav li a::before {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: inherit;
}
.flex-direction-nav li a:hover {
    background: var(--color-primary, #E22421);
    color: var(--color-bg, #FFFFFF);
}

/* Sale flash sobre a galeria */
.twp-sale-flash {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    padding: 0.4375rem 0.75rem;
    background: #E22421;
    color: #FFFFFF;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(192, 57, 43, 0.4);
}

/* Imagem placeholder quando WC mostra "wp-content/plugins/woocommerce/.../placeholder.png" */
.woocommerce-product-gallery--with-images .wp-post-image,
.woocommerce-product-gallery__image--placeholder img {
    background: var(--color-surface, #F8F8F8);
}
/* === BLOCK:product-gallery:END === */


/* === BLOCK:product-summary:START === */
/* Coluna direita do single — title, rating, price, short desc, add to cart, meta */
.product-summary {
    display: flex;
    flex-direction: column;
    gap: clamp(0.875rem, 2vw, 1.25rem);
}

/* Title (WC injeta <h1 class="product_title entry-title">) */
.product_title.entry-title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-secondary, #000000);
}

/* Rating (estrelas) — WC default */
.woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
}
.woocommerce-product-rating .star-rating {
    color: var(--color-accent, #FFFFFF);
    font-size: 1rem;
    width: 5.4em;
    letter-spacing: 0.2em;
}
.woocommerce-review-link {
    color: var(--color-primary, #E22421);
    text-decoration: none;
}
.woocommerce-review-link:hover { text-decoration: underline; }

/* Pricing — WC injeta <p class="price"> com regular/sale */
.product-summary .price {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.875rem 1.125rem;
    background: var(--color-surface, #F8F8F8);
    border-left: 4px solid var(--color-primary, #E22421);
    font-family: var(--font-heading, sans-serif);
}
.product-summary .price del,
.product-summary .price del .woocommerce-Price-amount {
    color: var(--color-text-muted, #565758);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.85;
}
.product-summary .price ins {
    background: transparent;
    text-decoration: none;
}
.product-summary .price .woocommerce-Price-amount,
.product-summary .price ins .woocommerce-Price-amount {
    color: var(--color-shop-price, var(--color-primary, #E22421));
    font-size: clamp(1.5rem, 3.2vw, 2.125rem);
    font-weight: 800;
    letter-spacing: -0.015em;
}

/* Short description (excerpt) */
.woocommerce-product-details__short-description {
    color: var(--color-text-muted, #565758);
    font-family: var(--font-body, sans-serif);
    font-size: 1rem;
    line-height: 1.55;
}
.woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* Stock status (in stock / out of stock) */
.product-summary .stock,
.product-summary .product-stock {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
}
.product-summary .in-stock     { color: var(--color-shop-stock-in, var(--color-success, #E22421)); }
.product-summary .out-of-stock { color: var(--color-shop-stock-out, var(--color-danger, #E22421)); }

.product-summary .in-stock::before,
.product-summary .out-of-stock::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Meta (SKU + categorias + tags) */
.twp-product-meta {
    margin: 0;
    padding: 0.875rem 0 0;
    border-top: 1px solid var(--color-border, #E5E5E5);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.twp-product-meta__row {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: baseline;
    gap: 0.75rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
}
.twp-product-meta__row dt {
    margin: 0;
    color: var(--color-product-meta-label, var(--color-text-muted, #565758));
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.6875rem;
}
.twp-product-meta__row dd {
    margin: 0;
    color: var(--color-secondary, #000000);
}
.twp-product-meta__row dd a {
    color: var(--color-primary, #E22421);
    text-decoration: none;
}
.twp-product-meta__row dd a:hover { text-decoration: underline; }
/* === BLOCK:product-summary:END === */


/* === BLOCK:add-to-cart-single:START === */
.twp-add-to-cart-form { margin: 0; }

.twp-add-to-cart-row {
    display: flex;
    align-items: stretch;
    gap: 0.625rem;
    /* nowrap mantém qty + botão SEMPRE na mesma linha (incluindo
       em cards estreitos no mobile). O botão tem flex: 1 +
       min-width: 0 abaixo, então ele encolhe pra caber sem quebrar. */
    flex-wrap: nowrap;
}

/* Qty controls premium [-] [input] [+] */
.twp-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-secondary, #000000);
    background: var(--color-bg, #FFFFFF);
    flex-shrink: 0;
}
.twp-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-secondary, #000000);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.twp-qty__btn:hover:not(:disabled) {
    background: var(--color-primary, #E22421);
    color: var(--color-bg, #FFFFFF);
}
.twp-qty__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.twp-qty__btn:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: -2px;
}

.twp-qty__input,
.twp-qty input.input-text {
    width: 56px;
    height: 48px;
    padding: 0 0.25rem;
    background: var(--color-surface, #F8F8F8);
    border: 0;
    border-left: 1px solid var(--color-secondary, #000000);
    border-right: 1px solid var(--color-secondary, #000000);
    border-radius: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-secondary, #000000);
    -moz-appearance: textfield;
}
.twp-qty input.qty::-webkit-outer-spin-button,
.twp-qty input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Add button — premium, full-flex */
/* Botão COMPRAR (single product).
 * IMPORTANTE: cobre tanto produtos SIMPLES (.twp-add-btn injetado pelo
 * template add-to-cart/simple.php) quanto produtos VARIÁVEIS (botão
 * renderizado dinamicamente por WC JS via add-to-cart/variable.php —
 * que NÃO injeta a class twp-add-btn). Por isso o seletor inclui
 * `.single_add_to_cart_button` desacoplado.
 *
 * Especificidade alta + !important nas cores derrotam o WC default
 * `.button.alt` (que vem com cor roxa hardcoded). */
.twp-add-btn,
.single_add_to_cart_button,
button.single_add_to_cart_button,
.product-summary .single_add_to_cart_button,
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 clamp(0.75rem, 2vw, 1.5rem);
    height: 48px;
    background: var(--color-product-buy-btn, var(--color-primary, #E22421)) !important;
    color: var(--color-product-buy-btn-text, var(--color-bg, #FFFFFF)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: none !important;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-product-buy-btn, var(--color-primary, #E22421)) 30%, transparent);
}
.twp-add-btn:hover,
.single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover,
.product-summary .single_add_to_cart_button:hover,
.woocommerce-variation-add-to-cart .single_add_to_cart_button:hover {
    background: var(--color-product-buy-btn-hover, var(--color-secondary, #000000)) !important;
    color: var(--color-product-buy-btn-text, var(--color-bg, #FFFFFF)) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-product-buy-btn-hover, var(--color-secondary, #000000)) 30%, transparent);
}
.twp-add-btn:focus-visible,
.single_add_to_cart_button:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 3px;
}
.twp-add-btn--oos {
    background: var(--color-text-muted, #565758);
    cursor: not-allowed;
    opacity: 0.8;
}
.twp-add-btn--oos:hover {
    background: var(--color-text-muted, #565758);
    transform: none;
}

/* "Ver meu carrinho" link */
.twp-view-cart-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    color: var(--color-secondary, #000000);
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s ease, gap 0.2s ease;
}
.twp-view-cart-link:hover {
    color: var(--color-primary, #E22421);
    gap: 0.625rem;
}

/* WC's "Added to cart" notice */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    margin: 1rem 0;
    padding: 0.875rem 1.125rem;
    border-left: 4px solid var(--color-primary, #E22421);
    background: var(--color-surface, #F8F8F8);
    color: var(--color-secondary, #000000);
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
}
.woocommerce-message .button,
.woocommerce-info .button {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0.375rem 0.875rem;
    background: var(--color-primary, #E22421);
    color: var(--color-bg, #FFFFFF);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.woocommerce-error {
    border-color: var(--color-form-error, var(--color-danger, #E22421));
    color: var(--color-form-error, var(--color-danger, #E22421));
}
.woocommerce-info  { border-color: var(--color-accent, #FFFFFF); }

/* ════════════════════════════════════════════════════════════════════
 * PRODUTOS VARIÁVEIS — table.variations + select + reset + qty input
 * WC injeta uma <table class="variations"> com uma row por atributo.
 * Por default vem com bordas, td/th padding minúsculo, select feio.
 * Reseta tudo e aplica visual premium consistente com o tema.
 * ════════════════════════════════════════════════════════════════════ */
.variations_form {
    margin: 0;
}
.variations_form table.variations {
    width: 100%;
    margin: 0 0 1rem;
    border-collapse: collapse;
    border: 0;
    background: transparent;
}
.variations_form table.variations tbody { background: transparent; }
.variations_form table.variations tr {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    margin-bottom: 0.875rem;
    border: 0;
    background: transparent;
}
.variations_form table.variations tr:last-child { margin-bottom: 0; }
.variations_form table.variations th.label,
.variations_form table.variations td.value {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
}
.variations_form table.variations th.label label {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-form-label, var(--color-text-muted, #565758));
}
.variations_form table.variations td.value {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}
.variations_form table.variations td.value select {
    flex: 1 1 auto;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    padding: 0.6875rem 2.25rem 0.6875rem 0.875rem;
    background: var(--color-form-input-bg, #FFFFFF);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231E3932' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 10px;
    border: 1px solid var(--color-form-input-border, var(--color-border, #E5E5E5));
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-form-input-text, var(--color-secondary, #000000));
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.variations_form table.variations td.value select:focus {
    outline: none;
    border-color: var(--color-form-input-focus, var(--color-primary, #E22421));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-form-input-focus, var(--color-primary, #E22421)) 18%, transparent);
}
.variations_form table.variations td.value select:hover {
    border-color: var(--color-form-input-focus, var(--color-primary, #E22421));
}
.variations_form .reset_variations {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
    text-decoration: none;
    transition: color 0.15s ease;
    /* WC esconde por JS quando nenhuma variação foi escolhida — sem !important */
    visibility: visible;
}
.variations_form .reset_variations:hover {
    color: var(--color-danger, #E22421);
    text-decoration: underline;
}
.variations_form .reset_variations[style*="visibility: hidden"] {
    display: none;
}

/* Single variation — preço/SKU/disponibilidade que aparece após selecionar */
.single_variation_wrap {
    margin-top: 0.5rem;
}
.single_variation_wrap .woocommerce-variation {
    margin-bottom: 0.875rem;
    padding: 0.875rem 1rem;
    background: color-mix(in srgb, var(--color-surface, #F8F8F8) 60%, transparent);
    border-left: 3px solid var(--color-primary, #E22421);
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
}
.single_variation_wrap .woocommerce-variation-price .price {
    margin: 0;
    color: var(--color-shop-price, var(--color-primary, #E22421));
    font-family: var(--font-heading, sans-serif);
    font-size: 1.5rem;
    font-weight: 800;
}
.single_variation_wrap .woocommerce-variation-availability {
    margin: 0.25rem 0 0;
}
.single_variation_wrap .woocommerce-variation-description p { margin: 0.25rem 0 0; color: var(--color-text-muted, #565758); font-size: 0.8125rem; }

/* Botão COMPRAR DESABILITADO (quando variation ainda não foi escolhida).
   WC adiciona class `.disabled` ou attr `disabled`. Visualmente: opaco +
   cursor not-allowed + sem hover lift. */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button[disabled],
.single_add_to_cart_button.wc-variation-selection-needed,
.twp-add-btn.disabled,
.twp-add-btn[disabled] {
    background: color-mix(in srgb, var(--color-product-buy-btn, var(--color-primary, #E22421)) 35%, var(--color-surface, #F8F8F8)) !important;
    color: color-mix(in srgb, var(--color-bg, #FFFFFF) 70%, transparent) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none;
    opacity: 0.65;
}

/* Qty input (number) no contexto variável — usa estilo do .twp-cart-qty
   ou WC default? Aqui padronizamos pra ficar premium e consistente. */
.variations_form .quantity .qty,
.variations_form input[type="number"].qty {
    width: 80px;
    height: 48px;  /* mesma altura do botão Comprar */
    padding: 0 0.75rem;
    background: var(--color-form-input-bg, #FFFFFF);
    border: 1px solid var(--color-form-input-border, var(--color-border, #E5E5E5));
    border-radius: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-form-input-text, var(--color-secondary, #000000));
    -moz-appearance: textfield;
}
.variations_form .quantity .qty::-webkit-outer-spin-button,
.variations_form .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.variations_form .quantity .qty:focus {
    outline: none;
    border-color: var(--color-form-input-focus, var(--color-primary, #E22421));
}
/* Wrap do qty + botão comprar em uma row */
.variations_form .single_variation_wrap .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: stretch;
    gap: 0.625rem;
    margin-top: 0.875rem;
    flex-wrap: wrap;
}
.variations_form .woocommerce-variation-add-to-cart .quantity { flex-shrink: 0; }
.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    flex: 1 1 auto;
    min-width: 160px;
}
/* === BLOCK:add-to-cart-single:END === */


/* === BLOCK:ask-vendor:START === */
/* Card "Fale com o vendedor" — versão WC do ask-expert do Legado */
.ask-vendor {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1rem);
    padding: clamp(0.875rem, 2vw, 1.125rem);
    background: linear-gradient(
        135deg,
        var(--color-surface, #F8F8F8) 0%,
        color-mix(in srgb, var(--color-surface, #F8F8F8) 90%, var(--color-bg, #FFFFFF) 10%) 100%
    );
    border: 1px solid var(--color-border, #E5E5E5);
    border-left: 4px solid var(--color-accent, #FFFFFF);
    border-radius: var(--rounded-md, 8px);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ask-vendor::after {
    content: '';
    position: absolute;
    top: -20%; right: -10%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-accent, #FFFFFF) 18%, transparent), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.ask-vendor__avatar {
    position: relative;
    flex-shrink: 0;
    width: clamp(48px, 7vw, 60px);
    height: clamp(48px, 7vw, 60px);
    border-radius: 50%;
    overflow: visible;
    background: var(--color-secondary, #000000);
    border: 2px solid var(--color-bg, #FFFFFF);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ask-vendor__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.ask-vendor__avatar-placeholder {
    color: var(--color-accent, #FFFFFF);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ask-vendor__pulse {
    position: absolute;
    bottom: 0; right: 0;
    width: 12px;
    height: 12px;
    background: #22C55E;
    border: 2px solid var(--color-bg, #FFFFFF);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: twpRingPulse 1.8s ease-in-out infinite;
}
@keyframes twpRingPulse {
    0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0); }
}

.ask-vendor__body {
    min-width: 0;
    flex: 1;
}
.ask-vendor__title {
    display: block;
    margin: 0 0 0.25rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(0.9375rem, 1.6vw, 1rem);
    font-weight: 800;
    color: var(--color-secondary, #000000);
    letter-spacing: -0.005em;
}

.ask-vendor__actions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
.ask-vendor__actions li {
    display: inline-flex;
    align-items: center;
}
.ask-vendor__actions li + li::before {
    content: '|';
    color: var(--color-border, #E5E5E5);
    margin: 0 0.625rem;
    opacity: 0.6;
}
.ask-vendor__action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-primary, #E22421);
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}
.ask-vendor__action:hover {
    color: var(--color-secondary, #000000);
    transform: translateY(-1px);
}
.ask-vendor__action:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 3px;
}

@media (max-width: 380px) {
    .ask-vendor { padding: 0.75rem; }
    .ask-vendor__title { font-size: 0.875rem; }
    .ask-vendor__action { font-size: 0.8125rem; }
}
/* === BLOCK:ask-vendor:END === */


/* === BLOCK:product-tabs:START === */
/* ════════════════════════════════════════════════════════════════════════
   PRODUCT TABS — Descrição / Informação adicional / Avaliações
   ────────────────────────────────────────────────────────────────────────
   Layout premium baseado no padrão legado.pros (auditorias):
     • Eyebrow "DETALHES" + h2 "Sobre este produto" centralizados
     • Divisor accent dourado abaixo do h2
     • Tabs nav centralizada (não mais alinhada à esquerda)
     • Conteúdo com classe .prose — typography rica (h3, p, ul, table,
       form de reviews) com espaçamento generoso e fontes do DS.
   Fontes: var(--font-heading) + var(--font-body) (DS oficial — Inter
   via Google Fonts, fallback SoDoSans). NÃO usar var(--font-h1) etc
   em font-family — esses são tokens de SIZE, não family.
   ════════════════════════════════════════════════════════════════════════ */

.twp-product-tabs {
    margin-top: 0;
    padding: 40px 0 clamp(2rem, 4vw, 3.5rem);
    background: var(--color-bg, #FFFFFF);
}

/* ── HEADER: eyebrow + h2 + divisor accent ─────────────────────────── */
.twp-product-tabs__header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
}
.twp-product-tabs__eyebrow {
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent, #FFFFFF);
    line-height: 1;
}
.twp-product-tabs__heading {
    margin: 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: clamp(1.625rem, 3.2vw, 2.25rem);   /* token --font-h2 */
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-secondary, #000000);
}
.twp-product-tabs__divider {
    display: block;
    width: 56px;
    height: 3px;
    background: var(--color-accent, #FFFFFF);
    border-radius: 2px;
    margin-top: 0.125rem;
}

/* ── TABS NAV (centralizada com underline ativo) ─────────────────────
   Desktop: tabs centralizadas, sem quebra.
   Mobile (≤640px): tabs em linha única com scroll horizontal (swipe).
   Scrollbar é ocultada, snap-x ativa pra centralizar a aba escolhida. */
.twp-product-tabs__nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    margin-bottom: clamp(2rem, 4vw, 3rem);
    /* Scroll horizontal "invisível" quando o conteúdo excede a largura.
       Em desktop com 3 tabs curtas, justify-content: center funciona;
       em mobile com tabs longas, vira filmstrip swipeable. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.twp-product-tabs__nav::-webkit-scrollbar { display: none; }

.twp-product-tabs__tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.875rem 1.5rem;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
    cursor: pointer;
    scroll-snap-align: center;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.twp-product-tabs__tab:hover { color: var(--color-secondary, #000000); }
.twp-product-tabs__tab--active {
    color: var(--color-product-tabs-active, var(--color-primary, #E22421));
    border-bottom-color: var(--color-product-tabs-active, var(--color-primary, #E22421));
}
.twp-product-tabs__tab:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: -2px;
}

/* ── PANELS — max-width 1100px centralizado, mesma margem das tabs ── */
.twp-product-tabs__panels {
    max-width: 1100px;
    margin: 0 auto;
}
/* Heading + tabela na mesma margem (alinhados) e tabela em 100% do panel.
 * Sem `max-width: 760px` em filhos — todos usam a largura do panels. */
.twp-product-tabs__panel.prose > h2,
.twp-product-tabs__panel.prose > h3 {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}
.twp-product-tabs__panel .shop_attributes,
.twp-product-tabs__panel > table {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0;
    margin-right: 0;
    /* CRÍTICO: .prose table tem display:block que quebra o stretch.
     * Restaura display:table pra .shop_attributes ocupar 100%. */
    display: table !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    table-layout: fixed;
}

/* ── PROSE — typography rica do conteúdo das tabs ──────────────────── */
.twp-product-tabs__panel.prose {
    color: var(--color-text, #000000);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.7;
}

/* Parágrafos */
.twp-product-tabs__panel.prose p {
    margin: 0 0 1.25rem;
}
.twp-product-tabs__panel.prose p:last-child { margin-bottom: 0; }

/* Strong / em */
.twp-product-tabs__panel.prose strong,
.twp-product-tabs__panel.prose b {
    color: var(--color-secondary, #000000);
    font-weight: 800;
}

/* Headings dentro do conteúdo */
.twp-product-tabs__panel.prose h2,
.twp-product-tabs__panel.prose h3,
.twp-product-tabs__panel.prose h4 {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-weight: 800;
    color: var(--color-secondary, #000000);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 2rem 0 0.875rem;
}
.twp-product-tabs__panel.prose h2 { font-size: clamp(1.375rem, 2.6vw, 1.625rem); }
.twp-product-tabs__panel.prose h3 { font-size: clamp(1.125rem, 2vw, 1.25rem); }
.twp-product-tabs__panel.prose h4 { font-size: 1.0625rem; }
.twp-product-tabs__panel.prose h2:first-child,
.twp-product-tabs__panel.prose h3:first-child,
.twp-product-tabs__panel.prose h4:first-child { margin-top: 0; }

/* Listas */
.twp-product-tabs__panel.prose ul,
.twp-product-tabs__panel.prose ol {
    margin: 0 0 1.5rem;
    padding-left: 1.5rem;
}
.twp-product-tabs__panel.prose ul { list-style: none; padding-left: 0; }
.twp-product-tabs__panel.prose ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}
.twp-product-tabs__panel.prose ul li::before {
    content: '';
    position: absolute;
    left: 0.375rem;
    top: 0.6875em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    /* --color-accent resolvia pra branco (#FFFFFF) → dot invisível no fundo
       branco do painel. Usa o vermelho da identidade (mesmo do underline das
       tabs e do FAQ) pra bullet visível e on-brand. */
    background: var(--color-primary, #E22421);
}
.twp-product-tabs__panel.prose ol li { margin-bottom: 0.5rem; }
.twp-product-tabs__panel.prose li > strong:first-child {
    color: var(--color-primary, #E22421);
}

/* Links */
.twp-product-tabs__panel.prose a {
    color: var(--color-primary, #E22421);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    font-weight: 700;
    transition: color 0.15s ease;
}
.twp-product-tabs__panel.prose a:hover {
    color: var(--color-secondary, #000000);
    text-decoration-thickness: 2px;
}

/* Blockquote */
.twp-product-tabs__panel.prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--color-accent, #FFFFFF);
    background: var(--color-surface, #F8F8F8);
    color: var(--color-text-muted, #565758);
    font-style: italic;
}

/* Imagens */
.twp-product-tabs__panel.prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--rounded-md, var(--radius-md, 8px));
    margin: 1.5rem 0;
}

/* ── WC: tabela de atributos (Informação adicional) ────────────────── */
.twp-product-tabs__panel .shop_attributes {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.9375rem;
}
.twp-product-tabs__panel .shop_attributes tr {
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.twp-product-tabs__panel .shop_attributes tr:last-child { border-bottom: 0; }
.twp-product-tabs__panel .shop_attributes th,
.twp-product-tabs__panel .shop_attributes td {
    padding: 0.875rem 1rem;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}
.twp-product-tabs__panel .shop_attributes th {
    width: clamp(140px, 30%, 240px);
    font-weight: 700;
    color: var(--color-secondary, #000000);
    letter-spacing: 0.02em;
    text-transform: none;
    background: transparent;
}
.twp-product-tabs__panel .shop_attributes td {
    color: var(--color-text, #000000);
}
.twp-product-tabs__panel .shop_attributes td p { margin: 0; }

/* ── WC: Reviews — HEADER premium com contagem total + média de estrelas ─ */
.twp-product-tabs__panel .woocommerce-Reviews-title {
    margin: 0 0 1.75rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--color-secondary, #000000);
    text-transform: none;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.twp-product-tabs__panel .woocommerce-Reviews-title::before {
    content: '';
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: var(--color-secondary, #000000);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>") no-repeat center / contain;
}
.twp-product-tabs__panel .woocommerce-noreviews {
    margin: 0 0 1.5rem;
    padding: 2rem 1.5rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px dashed var(--color-border, #E5E5E5);
    border-radius: 6px;
    text-align: center;
    color: var(--color-text-muted, #565758);
    font-size: 0.9375rem;
    font-style: normal;
}

/* ════════════════════════════════════════════════════════════════════
 * REVIEWS — premium TikTok Shop / Shopee style.
 *
 * Estrutura WC (default review.php):
 *   <li class="comment">
 *     <div class="comment_container">
 *       <img class="avatar">                      ← woocommerce_review_display_gravatar
 *       <div class="comment-text">
 *         <div class="star-rating">★★★★★</div>   ← woocommerce_review_display_rating
 *         <p class="meta"><strong>Autor</strong> – <time>data</time></p>
 *         <div class="description"><p>texto</p></div>
 *       </div>
 *     </div>
 *   </li>
 *
 * Visual:
 *   ┌────────────────────────────────────────────────────────┐
 *   │ ┌────┐  Leonardo Pederzoli  ★★★★★                      │
 *   │ │ AV │  ✓ Comprou · 5 de junho de 2026                 │
 *   │ └────┘                                                  │
 *   │                                                          │
 *   │  Texto do comentário com tipografia premium, linha de   │
 *   │  altura confortável e parágrafos com respiro adequado.  │
 *   │                                                          │
 *   │  ─────────────────────────────────────────────────────  │
 *   │  Esta avaliação foi útil?  [👍 Útil (0)]  [⚠ Reportar]  │
 *   └────────────────────────────────────────────────────────┘
 *
 * Reset agressivo com !important pra vencer override de plugin/WC.
 * ════════════════════════════════════════════════════════════════════ */
.twp-product-tabs__panel ol.commentlist,
.twp-product-tabs__panel ul.commentlist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 2.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
}
.twp-product-tabs__panel ol.commentlist > li.comment,
.twp-product-tabs__panel ul.commentlist > li.comment {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
}

/* CARD premium — bg branco, border sutil, padding generoso, hover lift */
.twp-product-tabs__panel .comment_container {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 56px 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
        "avatar header"
        "body   body" !important;
    column-gap: 1rem !important;
    row-gap: 0.875rem !important;
    padding: clamp(1rem, 2vw, 1.5rem) !important;
    margin: 0 !important;
    background: var(--color-bg, #FFFFFF) !important;
    border: 1px solid var(--color-border, #E5E5E5) !important;
    border-radius: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}
.twp-product-tabs__panel .comment_container:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 28px -16px rgba(15, 23, 42, 0.18), 0 6px 14px -10px rgba(15, 23, 42, 0.08) !important;
    border-color: color-mix(in srgb, var(--color-primary, #E22421) 35%, var(--color-border, #E5E5E5)) !important;
}
/* Strip de cor superior pra indicar review verificado (em hover ganha cor) */
.twp-product-tabs__panel .comment_container::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary, #E22421) 0%, var(--color-accent, #FFFFFF) 100%);
    border-radius: 6px 6px 0 0;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.twp-product-tabs__panel .comment_container:hover::before { opacity: 1; }

/* Avatar — grid-area "avatar", 56px circular com borda accent sutil */
.twp-product-tabs__panel .comment_container img.avatar,
.twp-product-tabs__panel .comment_container .avatar {
    grid-area: avatar !important;
    flex-shrink: 0 !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    background: var(--color-surface, #F8F8F8) !important;
    border: 2px solid color-mix(in srgb, var(--color-accent, #FFFFFF) 50%, transparent) !important;
}

/* HEADER do review — grid-area "header" — nome + estrelas + verified + data */
.twp-product-tabs__panel .comment_container .comment-text {
    grid-area: header !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.375rem !important;
    /* RESET CRÍTICO contra herança que possa quebrar word-break em vertical */
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

/* Estrelas — amarelo TikTok-like, mais visíveis */
.twp-product-tabs__panel .comment_container .star-rating {
    display: inline-block !important;
    width: 5.4em !important;
    height: 1em !important;
    margin: 0 !important;
    font-size: 1rem !important;
    color: #FFC107 !important;
    letter-spacing: 0.2em !important;
    line-height: 1 !important;
    order: 1 !important;
}

/* Meta — autor em destaque + data leve */
.twp-product-tabs__panel .comment_container p.meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-body, sans-serif) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: var(--color-text-muted, #565758) !important;
    line-height: 1.3 !important;
    word-break: keep-all !important;
    white-space: normal !important;
    order: 2 !important;
}
.twp-product-tabs__panel .comment_container p.meta strong {
    color: var(--color-secondary, #000000) !important;
    font-family: var(--font-heading, sans-serif) !important;
    font-weight: 800 !important;
    font-size: 0.9375rem !important;
    margin-right: 0.125rem !important;
}
.twp-product-tabs__panel .comment_container p.meta time {
    color: var(--color-text-muted, #565758) !important;
    font-weight: 400 !important;
    font-size: 0.75rem !important;
    opacity: 0.85 !important;
}
/* O hífen "–" entre nome e data — esconder e usar ponto */
.twp-product-tabs__panel .comment_container p.meta {
    /* não conseguimos esconder o "–" diretamente sem JS; deixa o original */
}

/* Body do review (texto) — grid-area "body" */
.twp-product-tabs__panel .comment_container .description {
    grid-area: body !important;
    margin: 0 !important;
    padding: 0 0 0.25rem !important;
    color: var(--color-text, #000000) !important;
    font-family: var(--font-body, sans-serif) !important;
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    /* Quote-style: leve indentação que separa visualmente o texto */
    position: relative;
    padding-left: 0;
}
.twp-product-tabs__panel .comment_container .description p {
    margin: 0 0 0.625rem !important;
    padding: 0 !important;
}
.twp-product-tabs__panel .comment_container .description p:last-child {
    margin-bottom: 0 !important;
}

/* "Verified owner" badge — pílula verde com checkmark */
.twp-product-tabs__panel .comment_container .verified {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    padding: 0.1875rem 0.5625rem 0.1875rem 0.4375rem !important;
    background: color-mix(in srgb, var(--color-success, #10B981) 14%, transparent) !important;
    color: var(--color-success, #10B981) !important;
    border-radius: 50px !important;
    font-family: var(--font-body, sans-serif) !important;
    font-size: 0.625rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-left: 0.25rem !important;
    line-height: 1.2 !important;
}
.twp-product-tabs__panel .comment_container .verified::before {
    content: '';
    width: 11px;
    height: 11px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}

/* Mobile: avatar menor, gap reduzido */
@media (max-width: 640px) {
    .twp-product-tabs__panel .comment_container {
        grid-template-columns: 40px 1fr !important;
        column-gap: 0.75rem !important;
        padding: 1rem !important;
    }
    .twp-product-tabs__panel .comment_container img.avatar { width: 40px !important; height: 40px !important; }
    .twp-product-tabs__panel .comment_container .description { font-size: 0.875rem !important; }
    .twp-product-tabs__panel .comment_container .star-rating { font-size: 0.875rem !important; }
    .twp-product-tabs__panel .comment_container p.meta strong { font-size: 0.875rem !important; }
}

/* ── FORM DE REVIEW — versão premium ──────────────────────────────────
   Card com background bege sutil, header com ícone de estrela,
   sistema de rating com estrelas grandes (sobrescreve WC default),
   inputs maiores com focus ring accent, botão CTA de destaque. */
.twp-product-tabs__panel #review_form_wrapper {
    margin-top: 2.5rem;
    padding: 0;
    border-top: 0;
}

/* CONTAINER do form — minimalista (sem card pesado, sem gradient).
   Apenas um divisor sutil acima e padding reduzido pra ficar respirável
   sem virar uma "caixa decorada". Tom de voz: elegante, sem exagero. */
.twp-product-tabs__panel #review_form {
    position: relative;
    padding: 1.25rem 0 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.twp-product-tabs__panel #review_form_wrapper {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-border, #E5E5E5);
}

/* Título "Avalie este produto" — peso 600 (não 800), sem ícone gigante.
   Texto neutro e curto (sem nome do produto repetido em CAPS LOCK). */
.twp-product-tabs__panel #review_form .comment-reply-title {
    display: block;
    margin: 0 0 0.5rem;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-secondary, #000000);
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.twp-product-tabs__panel #review_form .comment-reply-title::before {
    /* Ícone removido — visual mais limpo, sem competir com texto */
    content: none;
}

/* Subtítulo discreto (educativo, convidativo) */
.twp-product-tabs__panel #review_form .comment-notes {
    margin: 0 0 1.5rem;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-muted, #565758);
    line-height: 1.6;
}
.twp-product-tabs__panel #review_form .comment-notes .required-field-message {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    opacity: 0.75;
}

/* Grid 2-col em desktop (autor | email) */
.twp-product-tabs__panel #review_form .comment-form-author,
.twp-product-tabs__panel #review_form .comment-form-email {
    display: inline-block;
    width: calc(50% - 0.375rem);
    margin-bottom: 0.875rem;
    vertical-align: top;
}
.twp-product-tabs__panel #review_form .comment-form-author { margin-right: 0.625rem; }

.twp-product-tabs__panel #review_form .comment-form-rating,
.twp-product-tabs__panel #review_form .comment-form-comment,
.twp-product-tabs__panel #review_form .comment-form-cookies-consent {
    margin-bottom: 0.875rem;
}

/* Labels — sentence case + peso 500 (era 800 uppercase, agora mais elegante) */
.twp-product-tabs__panel #review_form label {
    display: block;
    margin-bottom: 0.4375rem;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-secondary, #000000);
    letter-spacing: 0;
    text-transform: none;
}
.twp-product-tabs__panel #review_form label .required {
    color: var(--color-primary, #E22421);
    margin-left: 0.125rem;
    font-weight: 500;
}

/* Inputs + textarea — minimal, peso 400 (DS book) */
.twp-product-tabs__panel #review_form input[type="text"],
.twp-product-tabs__panel #review_form input[type="email"],
.twp-product-tabs__panel #review_form textarea {
    width: 100%;
    padding: 0.75rem 0.875rem;
    background: #fff;
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: var(--rounded-sm, var(--radius-sm, 4px));
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-secondary, #000000);
    box-sizing: border-box;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.twp-product-tabs__panel #review_form textarea {
    min-height: 130px;
    resize: vertical;
}
.twp-product-tabs__panel #review_form input::placeholder,
.twp-product-tabs__panel #review_form textarea::placeholder {
    color: var(--color-text-muted, #565758);
    font-weight: 400;
    opacity: 0.5;
}
.twp-product-tabs__panel #review_form input:focus,
.twp-product-tabs__panel #review_form textarea:focus {
    outline: none;
    border-color: var(--color-primary, #E22421);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #E22421) 14%, transparent);
}

/* ── RATING STARS — sem caixa decorada, só padding mínimo ─────────── */
.twp-product-tabs__panel #review_form .comment-form-rating {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
/* Estrelas em ordem NATURAL (1 → 5). WC DOM já vem 1-5, então NÃO usamos
   flex-direction: row-reverse. Pintura "1 até N" via :has() (anterior
   sibling combinator moderno — Chrome 105+/Safari 15.4+/Firefox 121+).
   Comportamento: clicar/hover na estrela 1 = nota 1; estrela 5 = nota 5. */
.twp-product-tabs__panel .stars {
    display: inline-flex;
    gap: 0.25rem;
    margin: 0 !important;
    padding: 0;
    font-size: 0 !important;
    line-height: 1;
}
.twp-product-tabs__panel .stars a {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    background-color: var(--color-border, #E5E5E5);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>") no-repeat center / 26px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>") no-repeat center / 26px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
    border: 0 !important;
}
.twp-product-tabs__panel .stars a::before { display: none !important; content: none !important; }
/* HOVER — pinta a estrela apontada + todas as ANTERIORES dela.
   `.stars a:has(~ a:hover)` = "qualquer star que tem um irmão POSTERIOR
   em hover" — em ordem natural, isso são os anteriores ao hover. */
.twp-product-tabs__panel .stars a:hover,
.twp-product-tabs__panel .stars a:has(~ a:hover) {
    background-color: #FFC107;
    transform: scale(1.08);
}
/* SELECTED — após clicar, WC adiciona class .active na star clicada.
   Mesma lógica: pinta a active + anteriores. */
.twp-product-tabs__panel .stars.selected a.active,
.twp-product-tabs__panel .stars.selected a:has(~ a.active) {
    background-color: #FFC107;
    transform: scale(1.08);
}
/* Quando hover está ativo no container, "desliga" o estado .active das
   estrelas POSTERIORES ao hover (evita ghost de seleção anterior). */
.twp-product-tabs__panel .stars:has(a:hover) a.active:not(:hover):not(:has(~ a:hover)) {
    background-color: var(--color-border, #E5E5E5);
    transform: none;
}

/* Cookies consent (WC nativo) */
.twp-product-tabs__panel #review_form .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.twp-product-tabs__panel #review_form .comment-form-cookies-consent input {
    margin-top: 0.25rem;
    width: 1rem !important;
    height: 1rem !important;
    accent-color: var(--color-primary, #E22421);
    flex-shrink: 0;
}
.twp-product-tabs__panel #review_form .comment-form-cookies-consent label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted, #565758);
    line-height: 1.5;
}

/* ── BOTÃO "Enviar avaliação" — segue EXATAMENTE o padrão base do
   tema: mesmo estilo do .twp-add-btn (botão COMPRAR do single product).
   Características: height 48px fixo, primary verde, border-radius 0
   (quadrado), font-weight 800, letter-spacing 0.08em, UPPERCASE, sombra
   projetada primary 30%. Override via !important defensivo contra os
   resets do WC (.button / input[type=submit]). */
.twp-product-tabs__panel #review_form .form-submit {
    margin: 1.25rem 0 0;
    text-align: left;
}
.twp-product-tabs__panel #review_form .submit,
.twp-product-tabs__panel #review_form input[type="submit"].submit,
.twp-product-tabs__panel #review_form input.submit[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-width: 200px;
    padding: 0 clamp(1rem, 2vw, 1.75rem);
    height: 48px;
    background: var(--color-primary, #E22421) !important;
    background-color: var(--color-primary, #E22421) !important;
    color: var(--color-bg, #FFFFFF) !important;
    border: 0 !important;
    border-radius: 0;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary, #E22421) 30%, transparent);
}
.twp-product-tabs__panel #review_form .submit:hover,
.twp-product-tabs__panel #review_form input[type="submit"].submit:hover {
    background: var(--color-secondary, #000000) !important;
    background-color: var(--color-secondary, #000000) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-secondary, #000000) 30%, transparent);
}
.twp-product-tabs__panel #review_form .submit:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 3px;
}

/* ── RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Tabs nav: filmstrip swipeable alinhado à esquerda (dica de scroll). */
    .twp-product-tabs__nav {
        justify-content: flex-start;
        padding-bottom: 2px;
    }
    .twp-product-tabs__tab {
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
    }

    /* Tabela de info adicional — th menor pra dar mais espaço ao value. */
    .twp-product-tabs__panel .shop_attributes th { width: 40%; }

    /* ── REVIEW FORM mobile redesign — limpo, full-width, sem poluição ──
       Antes: card com bg/border/padding grande dentro de panels com
       max-width 760px → form ficava espremido em ~60% da tela com muito
       padding interno e textareas minúsculos. */

    /* Panels: ocupam 100% da viewport (sem max-width restringindo). */
    .twp-product-tabs__panels {
        max-width: none;
        margin: 0;
    }

    /* Form: SEM card decorado em mobile — apenas o conteúdo respira na
       largura toda. Remove background gradient, border, sombra, radius. */
    .twp-product-tabs__panel #review_form {
        padding: 1.25rem 0 0;
        background: none;
        border: 0;
        box-shadow: none;
        border-radius: 0;
    }
    .twp-product-tabs__panel #review_form_wrapper {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--color-border, #E5E5E5);
    }

    /* Título — peso 600, mais compacto. Ícone já removido no desktop. */
    .twp-product-tabs__panel #review_form .comment-reply-title {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.35;
        margin-bottom: 0.5rem;
    }

    /* Subtítulo / notes compacto. */
    .twp-product-tabs__panel #review_form .comment-notes {
        margin-bottom: 1rem;
        font-size: 0.8125rem;
    }

    /* Rating: sem padding/box (visual herda do desktop, sem caixa). */
    .twp-product-tabs__panel #review_form .comment-form-rating {
        padding: 0;
        margin-bottom: 0.875rem;
    }

    /* Author / email: stack vertical, full width. */
    .twp-product-tabs__panel #review_form .comment-form-author,
    .twp-product-tabs__panel #review_form .comment-form-email {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.875rem;
    }

    /* Inputs e textarea: 16px = anti-zoom iOS, padding ergonômico touch. */
    .twp-product-tabs__panel #review_form input[type="text"],
    .twp-product-tabs__panel #review_form input[type="email"],
    .twp-product-tabs__panel #review_form textarea {
        padding: 0.875rem 1rem;
        font-size: 1rem;       /* 16px — anti-zoom iOS */
    }
    .twp-product-tabs__panel #review_form textarea {
        min-height: 140px;
    }

    /* Botão CTA — herda TUDO do padrão base (.twp-add-btn-like),
       apenas full-width em mobile e height ligeiramente maior pra
       conforto touch (≥44px Apple HIG, aqui 52px). */
    .twp-product-tabs__panel #review_form .submit,
    .twp-product-tabs__panel #review_form input[type="submit"].submit {
        display: flex;
        width: 100%;
        min-width: 0;
        height: 52px;
    }
}
/* === BLOCK:product-tabs:END === */


/* === BLOCK:product-desc-video:START === */
/* ════════════════════════════════════════════════════════════════════════
   DESCRIÇÃO DO PRODUTO COM VÍDEO — tab "Descrição" (aplicacoes_single_product)
   ────────────────────────────────────────────────────────────────────────
   Quando o campo ACF `video_single` está preenchido, a tab renderiza um grid
   de 2 colunas: [ vídeo 9:16 ] [ conteúdo das aplicações ].
     • Desktop: vídeo à esquerda (largura fixa, retrato 9:16) + texto à direita.
     • Mobile (≤768px): empilha — vídeo em cima (9:16), conteúdo embaixo,
       cada um ocupando a largura (vídeo com teto pra não ficar gigante).
   O player é <iframe> (YouTube) ou <video> (biblioteca WP), montado no PHP
   por the_woo_premium_render_product_video(). Ambos preenchem o box 9:16.
   ════════════════════════════════════════════════════════════════════════ */

.twp-prod-desc__grid {
    display: grid;
    grid-template-columns: minmax(0, 300px) 1fr;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
}

/* Coluna do vídeo — box retrato 9:16. O player (iframe/video) preenche 100%. */
.twp-prod-desc__video {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: var(--rounded-md, 10px);
    overflow: hidden;
}
.twp-prod-desc__video .twp-prod-video__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* Vídeo hospedado (retrato) → cobre o box; YouTube (iframe) já preenche. */
.twp-prod-desc__video video.twp-prod-video__frame { object-fit: cover; }

/* Coluna do texto — min-width:0 pra não estourar o grid com conteúdo longo. */
.twp-prod-desc__text { min-width: 0; }

/* Vídeo sozinho (sem conteúdo de aplicações) — não estica na largura toda. */
.twp-prod-desc__video--solo {
    max-width: 300px;
    margin-inline: auto;
}

/* ── MOBILE (≤768px): empilha, vídeo primeiro ──────────────────────────── */
@media (max-width: 768px) {
    .twp-prod-desc__grid {
        grid-template-columns: 1fr;   /* 1 coluna: vídeo em cima, texto embaixo */
        gap: clamp(1rem, 5vw, 1.75rem);
    }
    .twp-prod-desc__video {
        /* 100% da largura, mas com teto pra o 9:16 não virar um paredão
           em telas maiores (tablet/phablet). Centralizado. */
        width: 100%;
        max-width: 340px;
        margin-inline: auto;
    }
}
/* === BLOCK:product-desc-video:END === */


/* === BLOCK:product-faq:START === */
/* ════════════════════════════════════════════════════════════════════════
   FAQ DO PRODUTO — accordion logo abaixo da descrição (tabs)
   ────────────────────────────────────────────────────────────────────────
   Herda o bloco global BLOCK:faq (.faq-section / .faq-item / .faq-question)
   e só reescreve o que muda no contexto de produto:
     • Header no mesmo padrão visual das tabs (eyebrow + h2 + divisor accent)
     • Fundo surface pra separar visualmente da descrição acima (que é bg)
     • Cards com raio + hover mais evidentes (o bloco global é flat)
     • .faq-answer__text virou <div> (aceita <p> do wpautop) — o global
       assumia <p> único, então o reset de margem é feito aqui.
   Markup: template-parts/shop/product-faq.php
   ════════════════════════════════════════════════════════════════════════ */

/* Full-bleed: a seção nasce DENTRO de .container.twp-product-bottom, então
   escapa o container pra faixa cinza ir de ponta a ponta. Mesmo padrão do
   BLOCK:slider. Seguro porque o body tem overflow-x: hidden (o 100vw
   inclui a scrollbar). O .container interno mantém o conteúdo alinhado
   com o resto da página. */
.twp-product-faq {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--color-surface, #F8F8F8);
    border-top: 1px solid var(--color-border, #E5E5E5);
}

/* ── Encosta a faixa cinza no footer ───────────────────────────────────
   Quando o FAQ é o ÚLTIMO bloco do produto (sem related/upsells), três
   espaços se somavam abaixo dele e criavam um vão branco antes do footer:
     .twp-product-bottom  padding-bottom  48px
     .twp-product-page    padding-bottom  48px
     .site-footer         margin-top      ~77px
   O padding da própria faixa cinza já dá o respiro, então zeramos os três.
   Condicionado por :has() — em produtos COM related/upsells o FAQ não é o
   último filho, a regra não casa e o espaçamento normal é preservado. */
.twp-product-bottom:has( > .twp-product-faq:last-child),
.twp-product-page:has( .twp-product-bottom > .twp-product-faq:last-child) {
    padding-bottom: 0;
}
.twp-product-single:has( .twp-product-bottom > .twp-product-faq:last-child) + .site-footer {
    margin-top: 0;
}

/* ── HEADER (espelha .twp-product-tabs__header) ────────────────────────── */
.twp-product-faq .faq-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.twp-product-faq .faq-eyebrow {
    margin-bottom: 0;
    background: transparent;
    padding: 0;
    color: var(--color-accent, #FFFFFF);
    font-weight: 800;
    letter-spacing: 0.22em;
    line-height: 1;
}
.twp-product-faq .faq-title {
    margin: 0;
    letter-spacing: -0.02em;
}
.twp-product-faq__divider {
    display: block;
    width: 56px;
    height: 3px;
    background: var(--color-accent, #FFFFFF);
    border-radius: 2px;
}
.twp-product-faq .faq-subtitle {
    margin: 0;
    max-width: 620px;
}

/* ── ITENS (cards com raio, sobre fundo surface) ───────────────────────── */
.twp-product-faq .faq-list { gap: 0.625rem; }

.twp-product-faq .faq-item {
    background: var(--color-bg, #FFFFFF);
    border-radius: var(--rounded-md, 10px);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.twp-product-faq .faq-item:hover {
    border-color: color-mix(in srgb, var(--color-primary, #E22421) 40%, transparent);
}
.twp-product-faq .faq-item--open {
    border-color: var(--color-primary, #E22421);
    box-shadow: 0 6px 18px -12px color-mix(in srgb, var(--color-primary, #E22421) 60%, transparent);
}

.twp-product-faq .faq-question {
    padding: 1.0625rem 1.25rem;
    line-height: 1.4;
}

/* ── RESPOSTA — agora é <div> com <p> vindos do wpautop ────────────────── */
.twp-product-faq .faq-answer__text > :first-child { margin-top: 0; }
.twp-product-faq .faq-answer__text > :last-child  { margin-bottom: 0; }
.twp-product-faq .faq-answer__text p {
    margin: 0 0 0.75rem;
    color: var(--color-text-muted, #565758);
    font-size: 0.9375rem;
    line-height: 1.65;
}
.twp-product-faq .faq-answer__text a {
    color: var(--color-primary, #E22421);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.twp-product-faq .faq-answer__text ul,
.twp-product-faq .faq-answer__text ol {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
    color: var(--color-text-muted, #565758);
    font-size: 0.9375rem;
    line-height: 1.65;
}
.twp-product-faq .faq-answer__text li { margin-bottom: 0.25rem; }

@media (max-width: 640px) {
    .twp-product-faq .faq-question { padding: 0.9375rem 1rem; font-size: 0.9rem; }
    .twp-product-faq .faq-answer   { padding: 0 1rem 0.9375rem; }
}
/* === BLOCK:product-faq:END === */


/* === BLOCK:product-related:START === */
.twp-related {
    padding: var(--spacing-section, clamp(2.5rem, 6vw, 4rem)) 0;
    background: var(--color-bg, #FFFFFF);
    border-top: 1px solid var(--color-border, #E5E5E5);
}
.twp-related__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.twp-related__eyebrow {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: color-mix(in srgb, var(--color-primary, #E22421) 14%, transparent);
    color: var(--color-primary, #E22421);
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--rounded-full, 50px);
    margin-bottom: 0.625rem;
}
.twp-related__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.375rem, 2.8vw, 1.875rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-secondary, #000000);
}

/* Related usa o mesmo .listing-grid, mas força 4 colunas em desktop */
.twp-related .listing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.875rem, 1.6vw, 1.25rem);
}
@media (max-width: 1100px) { .twp-related .listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .twp-related .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .twp-related .listing-grid { grid-template-columns: 1fr; } }
/* === BLOCK:product-related:END === */


/* === BLOCK:cart-page:START === */
/* Layout 2 cols (itens + sidebar totais) — largura segue --container-max */
.twp-cart-form { margin: 0; padding: clamp(1.5rem, 3vw, 2.5rem) 0; }

.commerce-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
    max-width: var(--container-max, min(1500px, 96vw));
    margin: 0 auto;
    padding: 0 var(--container-padding, clamp(12px, 2.5vw, 28px));
    box-sizing: border-box;
}
@media (max-width: 900px) { .commerce-layout { grid-template-columns: 1fr; } }

.commerce-layout__main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* Header da coluna principal */
.commerce-layout__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 2px solid var(--color-secondary, #000000);
}
.commerce-layout__title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.125rem, 2.4vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-secondary, #000000);
}
.commerce-layout__title svg { color: var(--color-primary, #E22421); }
.commerce-layout__count {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}

/* Container dos itens */
.commerce-items {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Card de item — grid 3 cols: thumb | info | actions */
.commerce-item {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: clamp(0.75rem, 2vw, 1.125rem);
    align-items: flex-start;
    padding: clamp(0.875rem, 2vw, 1.125rem);
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.commerce-item:hover {
    border-color: color-mix(in srgb, var(--color-primary, #E22421) 50%, var(--color-border, #E5E5E5));
    box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.12);
}

.commerce-item__thumb {
    display: block;
    width: 96px;
    height: 96px;
    overflow: hidden;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    align-self: flex-start;
}
.commerce-item__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.commerce-item:hover .commerce-item__thumb img { transform: scale(1.06); }

.commerce-item__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.commerce-item__brand {
    font-family: var(--font-body, sans-serif);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #E22421;
    line-height: 1;
}
.commerce-item__name {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--color-secondary, #000000);
    text-transform: uppercase;
}
.commerce-item__name a { color: inherit; text-decoration: none; }
.commerce-item__name a:hover { color: var(--color-primary, #E22421); }

/* Pricing (unitário + PIX) */
.commerce-item__pricing {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.125rem;
}
.commerce-item__price {
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    color: var(--color-text-muted, #565758);
}
.commerce-item__price .woocommerce-Price-amount {
    font-family: var(--font-heading, sans-serif);
    font-weight: 800;
    font-size: 0.9375rem;
    color: var(--color-secondary, #000000);
}
.commerce-item__price del,
.commerce-item__price del .woocommerce-Price-amount {
    color: var(--color-text-muted, #565758);
    font-weight: 500;
    text-decoration: line-through;
    margin-right: 0.25rem;
    opacity: 0.7;
}
.commerce-item__price ins { text-decoration: none; background: transparent; }
.commerce-item__pix {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary, #E22421);
    line-height: 1.3;
}
.commerce-item__pix svg { flex-shrink: 0; color: var(--color-primary, #E22421); }
.commerce-item__pix .woocommerce-Price-amount {
    font-weight: 800;
    font-size: 0.8125rem;
    color: var(--color-primary, #E22421);
}

/* Qty no card de item */
.commerce-item__qty { margin-top: 0.4375rem; }

/* Coluna direita: subtotal + remove */
.commerce-item__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.625rem;
    height: 100%;
    min-height: 96px;
}
.commerce-item__subtotal {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
    letter-spacing: -0.005em;
    text-align: right;
    line-height: 1.1;
}
.commerce-item__subtotal-pix {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-primary, #E22421);
    letter-spacing: 0.02em;
    text-align: right;
    line-height: 1.2;
    margin-top: -0.25rem;
}
.commerce-item__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    color: var(--color-text-muted, #565758);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.commerce-item__remove:hover {
    color: #fff;
    background: #E22421;
    border-color: #E22421;
}

/* Cupom (barra abaixo dos itens) */
.commerce-coupon-bar { margin-top: 0.25rem; }
.commerce-coupon {
    padding: 1rem 1.125rem;
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-left: 4px solid var(--color-accent, #FFFFFF);
}
.commerce-coupon__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    margin: 0 0 0.5rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-secondary, #000000);
}
.commerce-coupon__label svg { color: var(--color-primary, #E22421); }
.commerce-coupon__row { display: flex; gap: 0.5rem; }
.commerce-coupon__input {
    flex: 1;
    padding: 0.625rem 0.875rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.commerce-coupon__input:focus {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: -1px;
    background: var(--color-bg, #FFFFFF);
}
.commerce-coupon__btn {
    flex-shrink: 0;
    padding: 0 1.25rem;
    background: var(--color-secondary, #000000);
    color: #fff;
    border: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease;
}
.commerce-coupon__btn:hover { background: var(--color-primary, #E22421); }

.twp-update-cart-btn { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ── MOBILE ≤ 640px — empilha thumb + info, qty/remove abaixo ──── */
@media (max-width: 640px) {
    .commerce-item {
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-areas:
            "thumb info"
            "thumb actions";
        gap: 0.625rem 0.875rem;
        align-items: start;
        padding: 0.875rem;
    }
    .commerce-item__thumb { grid-area: thumb; width: 72px; height: 72px; }
    .commerce-item__info  { grid-area: info; }
    .commerce-item__actions {
        grid-area: actions;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: 0;
        margin-top: 0.375rem;
    }
    .commerce-item__name { font-size: 0.875rem; }
    .commerce-item__subtotal { font-size: 1rem; }
    .commerce-item__subtotal-pix { font-size: 0.625rem; }
    .commerce-coupon__row { flex-direction: column; }
    .commerce-coupon__btn { width: 100%; padding: 0.625rem; }
}

.commerce-item__oos-flag {
    grid-column: 1 / -1;
    padding: 0.375rem 0.625rem;
    background: color-mix(in srgb, #E22421 12%, transparent);
    color: #E22421;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

@media (max-width: 520px) {
    .commerce-item {
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-rows: auto auto;
    }
    .commerce-item__thumb { width: 64px; height: 64px; }
    .commerce-item__actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
}

/* Cupom + update */
.twp-cart-coupon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.125rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    margin-top: 0.5rem;
}
.twp-cart-coupon .coupon {
    display: flex;
    align-items: stretch;
    gap: 0.375rem;
    flex: 1;
    min-width: 240px;
}
.twp-coupon-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    color: var(--color-secondary, #000000);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.twp-coupon-btn,
.twp-cart-coupon button.button {
    padding: 0.5rem 1rem;
    background: var(--color-secondary, #000000);
    color: var(--color-bg, #FFFFFF);
    border: 0;
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease;
}
.twp-coupon-btn:hover, .twp-cart-coupon button.button:hover {
    background: var(--color-primary, #E22421);
}
/* Update button — submetido programaticamente, escondemos do usuário */
.twp-update-cart-btn {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

/* Summary (sidebar de totais) */
.commerce-layout__aside { position: sticky; top: clamp(80px, 10vh, 100px); }
@media (max-width: 900px) { .commerce-layout__aside { position: static; } }

.commerce-summary {
    background: var(--color-cart-sidebar-bg, var(--color-bg, #FFFFFF));
    border: 1px solid var(--color-border, #E5E5E5);
    padding: clamp(1.125rem, 2.5vw, 1.5rem);
}
.commerce-summary__title {
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    font-family: var(--font-heading, sans-serif);
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.commerce-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    color: var(--color-text-muted, #565758);
}
.commerce-summary__row .woocommerce-Price-amount {
    font-weight: 700;
    color: var(--color-text, #000000);
}
.commerce-summary__row--discount { color: var(--color-primary, #E22421); }
.commerce-summary__row--discount .woocommerce-Price-amount { color: var(--color-primary, #E22421); }
.commerce-summary__row--shipping { font-size: 0.8125rem; }

.commerce-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.875rem 0;
    border-top: 2px solid var(--color-secondary, #000000);
}
.commerce-summary__total-label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-cart-total-text, var(--color-secondary, #000000));
}
.commerce-summary__total-value,
.commerce-summary__total-value .woocommerce-Price-amount {
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.25rem, 2.4vw, 1.625rem);
    font-weight: 800;
    color: var(--color-cart-total-accent, var(--color-primary, #E22421));
}

.commerce-summary__hint {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 60%, transparent);
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.commerce-summary__hint svg { color: var(--color-primary, #E22421); flex-shrink: 0; }

/* ── Notice de despacho — bloco de aviso premium abaixo do CTA ─── */
.commerce-summary__notice {
    margin-top: 0.875rem;
    padding: 0.75rem 0.875rem;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--color-primary, #E22421) 12%, transparent) 0%,
            color-mix(in srgb, var(--color-accent, #FFFFFF) 14%, transparent) 100%
        );
    border: 1px solid color-mix(in srgb, var(--color-primary, #E22421) 28%, transparent);
    border-left: 4px solid var(--color-primary, #E22421);
    border-radius: 2px;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    position: relative;
    overflow: hidden;
}
.commerce-summary__notice::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-accent, #FFFFFF) 18%, transparent) 0%, transparent 60%);
    pointer-events: none;
}
.commerce-summary__notice-icon {
    flex-shrink: 0;
    color: var(--color-primary, #E22421);
    margin-top: 1px;
    position: relative;
    z-index: 1;
}
.commerce-summary__notice-text {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-secondary, #000000);
    position: relative;
    z-index: 1;
}
.commerce-summary__notice-text strong {
    display: inline-block;
    color: var(--color-primary, #E22421);
    font-weight: 800;
    margin-right: 0.1875rem;
}

/* Empty state */
.commerce-empty {
    text-align: center;
    padding: clamp(2rem, 5vw, 3.5rem) 1rem;
    max-width: 480px;
    margin: 2rem auto;
    background: var(--color-surface, #F8F8F8);
    border: 1px dashed var(--color-border, #E5E5E5);
}
.commerce-empty__icon { display: inline-flex; color: var(--color-text-muted, #565758); opacity: 0.6; margin-bottom: 1rem; }
.commerce-empty__title {
    margin: 0 0 0.625rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.commerce-empty__desc {
    margin: 0 0 1.25rem;
    color: var(--color-text-muted, #565758);
    font-size: 0.9375rem;
    line-height: 1.55;
}
.commerce-empty__cta {
    width: auto;
    max-width: 280px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* Alerts (perfil incompleto, info, etc) */
.commerce-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 1.125rem;
    margin-bottom: 1rem;
    background: var(--color-surface, #F8F8F8);
    border-left: 4px solid var(--color-accent, #FFFFFF);
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    color: var(--color-secondary, #000000);
}
.commerce-alert--warning  { border-color: #FFFFFF; }
.commerce-alert--info     { border-color: var(--color-primary, #E22421); }
.commerce-alert--error    { border-color: #E22421; }
/* === BLOCK:cart-page:END === */


/* === BLOCK:cart-qty:START === */
/* Qty controls premium na página do carrinho */
.twp-cart-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-cart-qty-btn, var(--color-secondary, #000000));
    background: var(--color-bg, #FFFFFF);
    width: fit-content;
    margin-top: 0.5rem;
}
.twp-cart-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-cart-qty-btn, var(--color-secondary, #000000));
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.twp-cart-qty__btn:hover:not(:disabled) {
    background: var(--color-cart-qty-btn, var(--color-primary, #E22421));
    color: var(--color-bg, #FFFFFF);
}
.twp-cart-qty__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.twp-cart-qty__btn:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: -2px;
}
.twp-cart-qty__input {
    width: 48px;
    height: 36px;
    padding: 0 0.25rem;
    background: var(--color-surface, #F8F8F8);
    border: 0;
    border-left: 1px solid var(--color-secondary, #000000);
    border-right: 1px solid var(--color-secondary, #000000);
    border-radius: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-secondary, #000000);
    -moz-appearance: textfield;
}
.twp-cart-qty__input::-webkit-outer-spin-button,
.twp-cart-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* === BLOCK:cart-qty:END === */


/* === BLOCK:checkout:START === */
/* Checkout usa .commerce-layout do BLOCK:cart-page (mesmo grid 2 cols
 * + container width). Aqui só refinamentos específicos do checkout. */
/* Largura EXATAMENTE igual ao .twp-cart-form (que respeita --container-max).
   O WC core aplica .woocommerce-checkout/.checkout no <form> com CSS próprio
   que sobrescreve nosso layout → checkout ficava full-width enquanto cart
   ficava centralizado. Por isso o `!important` é necessário: precisamos
   vencer regras tanto do WC core (woocommerce.css/woocommerce-layout.css)
   quanto possíveis estilos inline de plugins (Mercado Pago, etc).
   Cobrimos os 3 selectors do form (.twp-checkout, .checkout,
   .woocommerce-checkout) pra garantir match independente da especificidade. */
form.twp-checkout,
form.checkout.woocommerce-checkout,
.woocommerce-checkout.twp-checkout {
    padding: clamp(1rem, 2vw, 1.5rem) 0 0 !important;
    width: auto !important;
    max-width: var(--container-max, min(1500px, 96vw)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.twp-checkout__layout { /* sem grid próprio — herda .commerce-layout */ }
.twp-checkout__main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }

/* Aside é apenas um wrapper sticky — o "box" é .commerce-summary */
.twp-checkout__aside {
    position: sticky;
    top: clamp(80px, 10vh, 100px);
    background: transparent;
    border: 0;
    padding: 0;
}
@media (max-width: 900px) { .twp-checkout__aside { position: static; } }

/* Summary header (título + contador alinhado com header do cart) */
.commerce-summary__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.commerce-summary__head .commerce-summary__title {
    margin: 0;
    padding: 0;
    border: 0;
}
.commerce-summary__head-count {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
    flex-shrink: 0;
}

/* Variante compacta do notice (na sidebar) */
.commerce-summary__notice--compact {
    padding: 0.5625rem 0.75rem;
    margin-top: 0.625rem;
}
.commerce-summary__notice--compact .commerce-summary__notice-text {
    font-size: 0.75rem;
    line-height: 1.35;
}

/* Container da review table dentro do summary */
.twp-checkout__review {
    margin: 0;
}
.twp-checkout__review > h3 { /* "Seu pedido" duplicado do WC core — esconde */
    display: none;
}

/* ── Refinamentos da sidebar (Seu pedido) ────────────────────────
 * Bloco de pagamento dentro do .commerce-summary com padding adequado
 * e bg sutil pra dar respiro (sem nested-card pesado). */
.twp-checkout__aside .commerce-checkout-section--payment {
    margin: 1.25rem 0 0;
    padding: 1rem 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
}
.twp-checkout__aside .commerce-payment__head {
    display: flex;
    align-items: center;
    margin: 0 0 0.875rem;
    padding-bottom: 0;
    border-bottom: 0;
    gap: 0.6875rem;
}
.twp-checkout__aside .commerce-payment__head > div {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    line-height: 1.25;
}
/* Esconde o ícone duplicado do checkmark dentro do lead — o cadeado
 * (.commerce-checkout-section__step::before) já transmite "seguro" */
.twp-checkout__aside .commerce-checkout-section__lead svg { display: none; }
.twp-checkout__aside .commerce-checkout-section__lead {
    display: block;
    margin: 0;
    flex-wrap: nowrap;
}
/* No aside o passo "3" do payment fica isolado (passos 1 e 2 ficam na
 * coluna principal). Esconde o número e substitui por um indicador de
 * segurança (ícone) via ::before pra reforçar "pagamento seguro". */
.twp-checkout__aside .commerce-checkout-section__step {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    font-size: 0;
    background: color-mix(in srgb, var(--color-primary, #E22421) 12%, transparent);
    color: var(--color-primary, #E22421);
    position: relative;
}
.twp-checkout__aside .commerce-checkout-section__step::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>') center / 16px no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>') center / 16px no-repeat;
}
.twp-checkout__aside .commerce-checkout-section__title {
    font-size: 0.9375rem;
    line-height: 1.2;
    margin: 0;
}
.twp-checkout__aside .commerce-checkout-section__lead {
    font-size: 0.6875rem;
    line-height: 1.4;
    margin-top: 0.3125rem;
    color: var(--color-text-muted, #565758);
}
.twp-checkout__aside .wc_payment_methods {
    margin: 0 0 0.875rem;
    background: transparent;
}
.twp-checkout__aside .wc_payment_method {
    padding: 0.5625rem 0.75rem;
    background: transparent;
    border-color: color-mix(in srgb, var(--color-border, #E5E5E5) 70%, transparent);
}
.twp-checkout__aside .wc_payment_method:has(.input-radio:checked) {
    background: transparent;
    border-color: var(--color-primary, #E22421);
}
.twp-checkout__aside .payment_box {
    background: transparent;
    padding: 0.625rem 0 0 0.75rem;
    border-left: 2px solid var(--color-primary, #E22421);
    margin-top: 0.5rem;
}
.twp-checkout__aside .form-row.place-order {
    background: transparent;
    margin: 0.875rem 0 0;
    padding: 0;
}

/* Override do default WC: #payment vem com background: #ececec do core.
 * Forçamos TRANSPARENTE pra que o card herde o bg cream do .commerce-summary
 * pai — caso contrário aparece um card branco destacado fora do padrão visual.
 * Mantém border-radius zero pra integração visual com o resto do summary. */
.add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
    background: transparent !important;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

/* Row de item — sem hover/border excessiva no aside */
.twp-checkout__aside .commerce-review__row {
    padding: 0.5rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 50%, transparent);
}
.twp-checkout__aside .commerce-review tbody tr:last-of-type {
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}

/* Place order full-width dentro do aside */
.twp-checkout__aside .place-order {
    margin: 0;
}
.twp-checkout__aside #place_order {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--color-primary, #E22421);
    color: #FFFFFF;
    border: 0;
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease;
}
.twp-checkout__aside #place_order:hover { background: var(--color-secondary, #000000); }

/* WC checkout form fields */
.twp-checkout .form-row,
.woocommerce-checkout .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1rem;
}
.twp-checkout .form-row label,
.woocommerce-checkout .form-row label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-form-label, var(--color-text-muted, #565758));
}
.twp-checkout .form-row input[type="text"],
.twp-checkout .form-row input[type="email"],
.twp-checkout .form-row input[type="tel"],
.twp-checkout .form-row input[type="number"],
.twp-checkout .form-row input[type="password"],
.twp-checkout .form-row textarea,
.twp-checkout .form-row .select2-selection,
.twp-checkout .form-row select {
    padding: 0.625rem 0.875rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    color: var(--color-secondary, #000000);
    box-sizing: border-box;
    width: 100%;
}
.twp-checkout .form-row input:focus,
.twp-checkout .form-row textarea:focus,
.twp-checkout .form-row select:focus {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: -1px;
    background: var(--color-bg, #FFFFFF);
}

/* Layout 2-col em form-row-first/last (NOME | SOBRENOME, EMAIL | TEL, etc).
 *
 * CRÍTICO — woocommerce-layout.css (do plugin) define:
 *   .woocommerce-page form .form-row-first { width: 47%; float: left; }
 *   .woocommerce-page form .form-row-last  { width: 47%; float: right; }
 * Especificidade 0,2,1. Para sobrescrever sem !important precisamos
 * de seletor com especificidade IGUAL OU MAIOR. Usamos `form.twp-checkout`
 * (0,2,1 = igual; última declaração vence no cascade pois twp-main-css
 * é enfileirado DEPOIS de woocommerce-layout-css).
 *
 * O grid é restrito aos __field-wrapper internos das sections (não nos
 * filhos diretos de #customer_details, que esmagaria as sections inteiras
 * a 50% e desalinharia o header). */
@media (min-width: 640px) {
    form.twp-checkout .woocommerce-billing-fields__field-wrapper,
    form.twp-checkout .woocommerce-shipping-fields__field-wrapper,
    form.twp-checkout .woocommerce-additional-fields__field-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1rem;
    }
    form.twp-checkout .form-row-first,
    form.twp-checkout .form-row-last {
        width: 100%;
        min-width: 0;
        float: none;
        clear: none;
    }
    form.twp-checkout .form-row-wide {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        float: none;
        clear: none;
    }
}

/* Mobile (<640px): wrapper volta a block flow, todos os campos 100% */
@media (max-width: 639px) {
    form.twp-checkout .form-row,
    form.twp-checkout .form-row-first,
    form.twp-checkout .form-row-last,
    form.twp-checkout .form-row-wide {
        width: 100%;
        float: none;
        clear: none;
    }
}

/* Garante que o <span class="woocommerce-input-wrapper"> que envolve o
 * <input> não colapse para inline (default) — precisa ser block para o
 * input herdar 100% da coluna do grid corretamente. */
form.twp-checkout .form-row .woocommerce-input-wrapper,
.woocommerce-checkout .form-row .woocommerce-input-wrapper {
    display: block;
    width: 100%;
}

.twp-checkout h3 {
    margin: 1.5rem 0 1rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}

/* Order review table — bordas removidas (estilo .commerce-review controla
 * o layout via grid em tfoot; aqui só refinamentos do markup default WC). */
.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 0.5rem 0;
    text-align: left;
    border: 0;
    background: transparent;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
}
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table td:last-child { text-align: right; }
.woocommerce-checkout-review-order-table .order-total {
    border: 0;
    border-top: 0;
    font-weight: 800;
}
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    border: 0 !important;
    background: transparent !important;
}
.woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount {
    color: var(--color-primary, #E22421);
    font-family: var(--font-heading, sans-serif);
    font-size: 1.25rem;
}

/* Payment methods */
.wc_payment_methods {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.wc_payment_method {
    padding: 0.875rem 1rem;
    background: transparent;
    border: 1px solid var(--color-border, #E5E5E5);
}
.wc_payment_method label {
    font-family: var(--font-heading, sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-secondary, #000000);
    cursor: pointer;
}
.payment_box {
    margin-top: 0.625rem;
    padding: 0.75rem;
    background: var(--color-bg, #FFFFFF);
    border-left: 3px solid var(--color-primary, #E22421);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #565758);
}

/* Place order button */
#place_order,
.woocommerce-checkout .place-order .button {
    width: 100%;
    padding: 0.9375rem 1.25rem;
    background: var(--color-primary, #E22421);
    color: var(--color-bg, #FFFFFF);
    border: 0;
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease;
}
#place_order:hover { background: var(--color-secondary, #000000); }

.woocommerce-terms-and-conditions-wrapper {
    margin: 1rem 0;
    padding: 0.75rem;
    background: var(--color-surface, #F8F8F8);
    border-left: 3px solid var(--color-accent, #FFFFFF);
    font-size: 0.8125rem;
}

/* ── Coupon (markup nativo WC — .checkout_coupon + .showcoupon) ──── */
.commerce-coupon-toggle {
    margin: 0 0 1.25rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    border-left: 4px solid var(--color-primary, #E22421);
}
.commerce-coupon-toggle__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
}
.commerce-coupon-toggle__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-secondary, #000000);
}
.commerce-coupon-toggle__hint svg { color: var(--color-primary, #E22421); flex-shrink: 0; }
.commerce-coupon-toggle__link,
.checkout_coupon ~ .commerce-coupon-toggle__link,
a.showcoupon {
    background: transparent;
    color: var(--color-primary, #E22421);
    border: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0;
}
.commerce-coupon-toggle__link:hover,
a.showcoupon:hover { color: var(--color-secondary, #000000); }

/* Form revelado (slideToggle do WC nativo) */
.checkout_coupon.commerce-coupon-form,
.woocommerce-form-coupon.commerce-coupon-form {
    margin: -1px 0 1.25rem;
    padding: 1rem;
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-top: 1px dashed var(--color-border, #E5E5E5);
    border-left: 4px solid var(--color-primary, #E22421);
}
.commerce-coupon-form__intro {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #565758);
}
.commerce-coupon-form__row {
    display: flex;
    gap: 0.625rem;
    align-items: stretch;
}
.commerce-coupon-form__input {
    flex: 1;
    min-width: 0;
    padding: 0.625rem 0.875rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.commerce-coupon-form__input:focus {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: -1px;
    background: var(--color-bg, #FFFFFF);
}
.commerce-coupon-form__submit {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 7rem;
    padding: 0 1.5rem;
    background: var(--color-primary, #E22421) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease;
}
.commerce-coupon-form__submit:hover { background: var(--color-secondary, #000000) !important; }

/* Mobile ≤ 560px — input em cima, botão full-width abaixo */
@media (max-width: 560px) {
    .commerce-coupon-form__row { flex-direction: column; gap: 0.5rem; }
    .commerce-coupon-form__submit { width: 100% !important; min-width: 0; padding: 0.75rem 1rem; }
}
.commerce-checkout-login__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}
@media (max-width: 560px) { .commerce-checkout-login__grid { grid-template-columns: 1fr; } }
.commerce-checkout-login__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: 0.75rem;
}
.commerce-checkout-login__remember {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #565758);
    cursor: pointer;
}
.commerce-checkout-login__lost {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--color-primary, #E22421);
    text-decoration: none;
}
.commerce-checkout-login__lost:hover { text-decoration: underline; }

/* ── Section heads (step number + title) ────────────────────────── */
.commerce-checkout-section {
    margin: 0 0 1.5rem;
    padding: 1.25rem;
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
}
.commerce-checkout-section__head {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin: 0 0 1.25rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.commerce-checkout-section__head > div { flex: 1; min-width: 0; }
.commerce-checkout-section__step {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary, #E22421);
    color: #fff;
    font-family: var(--font-heading, sans-serif);
    font-size: 0.875rem;
    font-weight: 800;
    border-radius: 50%;
}
.commerce-checkout-section__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
    line-height: 1.25;
}
.commerce-checkout-section__lead {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #565758);
    line-height: 1.45;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.commerce-checkout-section__lead svg { color: var(--color-primary, #E22421); flex-shrink: 0; }
.commerce-checkout-section__notes-title {
    margin: 1.25rem 0 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.commerce-checkout-section__notes-title svg { color: var(--color-primary, #E22421); }

/* Switch on/off (ship-to-different-address) */
.commerce-checkout-section__toggle {
    margin-left: auto;
    align-self: center;
}
.commerce-checkout-section__switch { cursor: pointer; display: inline-flex; align-items: center; }
.commerce-checkout-section__switch input { position: absolute; opacity: 0; pointer-events: none; }
.commerce-checkout-section__switch-track {
    width: 40px;
    height: 22px;
    background: var(--color-border, #E5E5E5);
    border-radius: 999px;
    position: relative;
    transition: background 0.18s ease;
}
.commerce-checkout-section__switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease;
}
.commerce-checkout-section__switch input:checked + .commerce-checkout-section__switch-track {
    background: var(--color-primary, #E22421);
}
.commerce-checkout-section__switch input:checked + .commerce-checkout-section__switch-track .commerce-checkout-section__switch-thumb {
    transform: translateX(18px);
}

/* Checkbox de "criar conta" */
.commerce-checkout-section__checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-secondary, #000000);
}
.commerce-checkout-section__checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.commerce-checkout-section__checkbox-box {
    width: 18px;
    height: 18px;
    background: var(--color-bg, #FFFFFF);
    border: 1.5px solid var(--color-border, #E5E5E5);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.commerce-checkout-section__checkbox input:checked + .commerce-checkout-section__checkbox-box {
    background: var(--color-primary, #E22421);
    border-color: var(--color-primary, #E22421);
    color: #fff;
}

/* ── Review order — tabela compacta com mini-cards ──────────────── */
.commerce-review { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.commerce-review tbody { display: block; }
.commerce-review tbody tr.commerce-review__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 0.75rem;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.commerce-review__name {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0;
}
.commerce-review__thumb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.commerce-review__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.commerce-review__info { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.commerce-review__title {
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-secondary, #000000);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.commerce-review__qty {
    font-size: 0.6875rem;
    color: var(--color-text-muted, #565758);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.commerce-review__total {
    padding: 0 !important;
    border: 0 !important;
    text-align: right !important;
    font-family: var(--font-heading, sans-serif);
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
    white-space: nowrap;
}
.commerce-review tfoot { display: block; margin-top: 0.625rem; }
.commerce-review__line {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0.5rem 0;
    align-items: baseline;
    /* SEM border-bottom dashed — spacing limpo entre linhas */
}
.commerce-review__line th,
.commerce-review__line td {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    line-height: 1.3;
}
.commerce-review__line th { font-weight: 600; color: var(--color-text-muted, #565758); }
.commerce-review__line td { font-weight: 700; color: var(--color-secondary, #000000); text-align: right; white-space: nowrap; }
.commerce-review__line--discount td { color: var(--color-primary, #E22421); }
.commerce-review__line--total {
    margin-top: 0.625rem;
    padding: 0.875rem 0 0;
    border-top: 0;
    align-items: center;
}
.commerce-review__line--total th {
    font-family: var(--font-heading, sans-serif);
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.commerce-review__line--total td {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-primary, #E22421);
    letter-spacing: -0.01em;
}

/* ── Payment methods premium ────────────────────────────────────── */
.commerce-payment { margin-top: 1.25rem; }
.commerce-payment__head {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.commerce-payment__head > div { flex: 1; min-width: 0; }
.commerce-payment__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    cursor: pointer;
}
.commerce-payment__option .input-radio { position: absolute; opacity: 0; pointer-events: none; }
.commerce-payment__radio {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border, #E5E5E5);
    border-radius: 50%;
    position: relative;
    transition: border-color 0.15s ease;
}
.commerce-payment__radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--color-primary, #E22421);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.18s ease;
}
.commerce-payment__option .input-radio:checked ~ .commerce-payment__radio {
    border-color: var(--color-primary, #E22421);
}
.commerce-payment__option .input-radio:checked ~ .commerce-payment__radio::after { transform: scale(1); }

.wc_payment_method {
    transition: border-color 0.15s ease, background 0.15s ease;
}
.wc_payment_method:has(.input-radio:checked) {
    border-color: var(--color-primary, #E22421);
    background: transparent;
}
.commerce-payment__label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    flex-wrap: wrap;
}
.commerce-payment__title {
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-secondary, #000000);
}
.commerce-payment__label img {
    max-height: 22px;
    width: auto;
    margin-left: 0.5rem;
}

/* ── Terms checkbox custom ──────────────────────────────────────── */
.commerce-terms { margin: 1rem 0 1.25rem; padding: 0.875rem 1rem; background: var(--color-surface, #F8F8F8); border-left: 3px solid var(--color-accent, #FFFFFF); }
.commerce-terms__label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    margin: 0 !important;
}
.commerce-terms__label .input-checkbox { position: absolute; opacity: 0; pointer-events: none; }
.commerce-terms__box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-border, #E5E5E5);
    background: var(--color-bg, #FFFFFF);
    border-radius: 3px;
    margin-top: 0.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.commerce-terms__label .input-checkbox:checked + .commerce-terms__box {
    background: var(--color-primary, #E22421);
    border-color: var(--color-primary, #E22421);
    color: #fff;
}
.commerce-terms__text {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-secondary, #000000);
}
.commerce-terms__text a { color: var(--color-primary, #E22421); font-weight: 700; }

/* ── Shipping calculator (cart-totals expand) ───────────────────── */
.commerce-calc { margin-top: 0.875rem; }
.commerce-calc__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary, #E22421);
    cursor: pointer;
    list-style: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.commerce-calc__toggle::-webkit-details-marker { display: none; }
.commerce-calc__toggle:hover { color: var(--color-secondary, #000000); }
.commerce-calc__form {
    margin-top: 0.625rem;
    padding: 0.875rem;
    background: var(--color-surface, #F8F8F8);
    border-left: 3px solid var(--color-accent, #FFFFFF);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.commerce-calc__row { display: flex; flex-direction: column; gap: 0.25rem; }
.commerce-calc__row label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}
.commerce-calc__row .input-text,
.commerce-calc__row select {
    padding: 0.5625rem 0.75rem;
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    font-size: 0.875rem;
    font-family: var(--font-body, sans-serif);
}
.commerce-calc__submit { margin-top: 0.25rem; }

/* ── Shipping methods (radios estilizados em cart-totals) ───────── */
.commerce-shipping { margin: 0; }
.commerce-shipping__methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4375rem; }
.commerce-shipping__method {
    padding: 0.5625rem 0.75rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.commerce-shipping__method.is-active { border-color: var(--color-primary, #E22421); background: var(--color-bg, #FFFFFF); }
.commerce-shipping__method label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin: 0; font-size: 0.8125rem; }
.commerce-shipping__method input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.commerce-shipping__radio {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border, #E5E5E5);
    border-radius: 50%;
    position: relative;
}
.commerce-shipping__radio::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--color-primary, #E22421);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.18s ease;
}
.commerce-shipping__method input[type="radio"]:checked ~ .commerce-shipping__radio { border-color: var(--color-primary, #E22421); }
.commerce-shipping__method input[type="radio"]:checked ~ .commerce-shipping__radio::after { transform: scale(1); }
.commerce-shipping__body { flex: 1; min-width: 0; }
.commerce-shipping__label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-secondary, #000000);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4375rem;
    flex-wrap: wrap;
    width: 100%;
}
.commerce-shipping__name {
    flex: 1 1 auto;
    min-width: 0;
}
/* Preço do método de envio (PAC/Sedex) — alinhado à direita da linha,
   cor primária pra criar âncora visual igual ao total. */
.commerce-shipping__price {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary, #E22421);
    font-weight: 700;
}
.commerce-shipping__price .woocommerce-Price-amount,
.commerce-shipping__price bdi { color: inherit; font-weight: inherit; }
.commerce-shipping__badge {
    flex: 0 0 auto;
    padding: 0.0625rem 0.4375rem;
    background: var(--color-primary, #E22421);
    color: #fff;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.commerce-shipping__hint {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
    line-height: 1.4;
}
.commerce-shipping__hint--error { color: #E22421; }

/* ── commerce-cta--large (botões grandes do checkout/cart) ──────── */
.commerce-cta--large {
    padding: 0.9375rem 1.5rem;
    font-size: 0.9375rem;
    letter-spacing: 0.1em;
    width: 100%;
    text-align: center;
    justify-content: center;
    line-height: 1;
}
/* Garante que SVG fica perfeitamente alinhado com o texto (sem baseline gap) */
.commerce-cta svg,
.commerce-cta--large svg {
    display: block;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ── MOBILE-FIRST refinements ───────────────────────────────────── */
@media (max-width: 640px) {
    .commerce-checkout-section { padding: 1rem; }
    .commerce-checkout-section__head { gap: 0.625rem; }
    .commerce-checkout-section__step { width: 28px; height: 28px; font-size: 0.8125rem; }
    .commerce-checkout-section__title { font-size: 0.9375rem; }
    .commerce-payment__title { font-size: 0.875rem; }
    .commerce-review__title { font-size: 0.75rem; }
    .commerce-review__total { font-size: 0.8125rem; }
    .commerce-review__line--total td { font-size: 1.0625rem; }
}
/* === BLOCK:checkout:END === */


/* === BLOCK:myaccount:START ====================================
 * My Account — wrapper 2 colunas (sidebar nav + main content),
 * dashboard com cards, lista de pedidos como cards, forms premium.
 * Largura herda .commerce-layout (--container-max).
 * ============================================================== */

/* Override do .commerce-layout (que é grid 2-col pro cart/checkout).
 * No myaccount queremos block flow: layout próprio de 2 colunas
 * (sidebar + main). Mantém só o container width. */
.commerce-layout.twp-myaccount {
    display: block;
}
.commerce-layout.twp-login-wrap {
    display: block;
}
.twp-myaccount {
    padding-top: clamp(1rem, 2vw, 1.5rem);
    padding-bottom: var(--spacing-section, 4rem);
}

/* Botão mobile abre drawer — só aparece em ≤ 900px */
.twp-myaccount__drawer-btn {
    display: none;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.5rem 0.875rem;
    margin: 0 0 1rem;
    background: var(--color-secondary, #000000);
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    width: fit-content;
}

/* Layout 2 cols — sidebar 280px + main flexível */
.twp-myaccount__layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
    width: 100%;
}

/* CRÍTICO: WC default aplica float:left + width:30% na .woocommerce-MyAccount-navigation
 * e float:right + width:68% na .woocommerce-MyAccount-content. Isso esmagava o nav pra
 * ~30% do sidebar (cortando labels pra "P."). Reset total. */
.twp-myaccount .woocommerce-MyAccount-navigation,
.twp-myaccount .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
}

/* Sidebar — sem overflow:hidden (clipava o label do item ativo) */
.twp-myaccount__sidebar {
    background: var(--color-account-sidebar-bg, #FFFFFF);
    border: 1px solid var(--color-account-sidebar-border, var(--color-border, #E5E5E5));
    border-radius: 4px;
    position: sticky;
    top: clamp(80px, 10vh, 100px);
    min-width: 0;
    width: 100%;
}
.twp-myaccount__sidebar-head {
    display: none; /* só aparece em mobile */
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    background: var(--color-secondary, #000000);
    color: #fff;
}
.twp-myaccount__sidebar-title {
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.twp-myaccount__sidebar-close {
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.18s ease;
}
.twp-myaccount__sidebar-close:hover { background: rgba(255, 255, 255, 0.15); }

/* Nav itens */
.twp-myaccount__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.twp-myaccount__nav-item {
    margin: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 50%, transparent);
}
.twp-myaccount__nav-item:last-child { border-bottom: 0; }
.twp-myaccount__nav-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    color: var(--color-account-sidebar-link, var(--color-secondary, #000000));
    text-decoration: none;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 0;
    line-height: 1.3;
    transition: background 0.15s ease, color 0.15s ease;
}
.twp-myaccount__nav-link:hover {
    background: color-mix(in srgb, var(--color-account-sidebar-link-hover, var(--color-primary, #E22421)) 10%, transparent);
    color: var(--color-account-sidebar-link-hover, var(--color-primary, #E22421));
}
.twp-myaccount__nav-icon {
    flex-shrink: 0;
    color: var(--color-text-muted, #565758);
    display: inline-flex;
}
.twp-myaccount__nav-label {
    flex: 1 1 auto;
    min-width: 0;
    /* Texto numa linha — nunca quebra */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.twp-myaccount__nav-arrow {
    color: var(--color-text-muted, #565758);
    opacity: 0.5;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.twp-myaccount__nav-link:hover .twp-myaccount__nav-arrow {
    opacity: 1;
    transform: translateX(2px);
}
.twp-myaccount__nav-item.is-active .twp-myaccount__nav-link {
    background: var(--color-account-sidebar-active-bg, var(--color-primary, #E22421));
    color: var(--color-account-sidebar-active-text, #FFFFFF);
}
.twp-myaccount__nav-item.is-active .twp-myaccount__nav-icon,
.twp-myaccount__nav-item.is-active .twp-myaccount__nav-arrow {
    color: var(--color-account-sidebar-active-text, #FFFFFF);
    opacity: 1;
}

/* Logout — visualmente diferente (border vermelho) */
.twp-myaccount__nav-item--logout {
    margin-top: 0.5rem;
    border-top: 1px dashed var(--color-border, #E5E5E5);
    border-bottom: 0;
}
.twp-myaccount__nav-item--logout .twp-myaccount__nav-link {
    color: #E22421;
}
.twp-myaccount__nav-item--logout .twp-myaccount__nav-icon { color: #E22421; }
.twp-myaccount__nav-item--logout .twp-myaccount__nav-link:hover {
    background: color-mix(in srgb, #E22421 8%, transparent);
    color: #E22421;
}

/* Overlay drawer mobile */
.twp-myaccount__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 40;
}

/* Main content — full-width da coluna direita do grid */
.twp-myaccount__content {
    min-width: 0;
    width: 100%;
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 4px;
    padding: clamp(1.125rem, 2.5vw, 1.75rem);
    box-sizing: border-box;
}

/* ── Dashboard ───────────────────────────────────────────── */
.twp-dashboard { display: flex; flex-direction: column; gap: clamp(1.25rem, 3vw, 2rem); }

.twp-dashboard__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 1.875rem);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #E22421) 12%, transparent) 0%, color-mix(in srgb, var(--color-accent, #FFFFFF) 15%, transparent) 100%),
        var(--color-account-hero-bg, var(--color-bg, #FFFFFF));
    color: var(--color-account-hero-text, inherit);
    border: 1px solid color-mix(in srgb, var(--color-primary, #E22421) 25%, transparent);
    border-left: 4px solid var(--color-primary, #E22421);
    border-radius: 4px;
}
.twp-dashboard__title {
    margin: 0 0 0.4375rem;
    color: var(--color-account-hero-text, var(--color-secondary, #000000)) !important;
}
.twp-dashboard__lead {
    color: var(--color-account-hero-text, var(--color-text-muted, #565758));
    opacity: 0.85;
}
.twp-dashboard__eyebrow {
    display: inline-block;
    margin-bottom: 0.3125rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-account-hero-eyebrow, var(--color-primary, #E22421));
}
.twp-dashboard__title {
    margin: 0 0 0.4375rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.25rem, 2.4vw, 1.625rem);
    font-weight: 800;
    color: var(--color-secondary, #000000);
    line-height: 1.2;
}
.twp-dashboard__title em { font-style: normal; color: var(--color-primary, #E22421); }
.twp-dashboard__lead {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    color: var(--color-text-muted, #565758);
    line-height: 1.5;
    max-width: 520px;
}
.twp-dashboard__stat {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.875rem 1.5rem;
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.twp-dashboard__stat:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.15); }
.twp-dashboard__stat { color: var(--color-account-stat-value, inherit); }
.twp-dashboard__stat-value {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-account-stat-value, var(--color-primary, #E22421));
    line-height: 1;
}
.twp-dashboard__stat-label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-account-stat-label, var(--color-text-muted, #565758));
    margin-top: 0.25rem;
}

/* Cards de atalho */
.twp-dashboard__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.875rem;
}
.twp-dashboard__card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: var(--color-account-card-bg, var(--color-bg, #FFFFFF));
    border: 1px solid var(--color-account-card-border, var(--color-border, #E5E5E5));
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.twp-dashboard__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.18);
    border-color: var(--color-account-card-hover-border, var(--color-primary, #E22421));
}
.twp-dashboard__card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-account-card-icon-bg, color-mix(in srgb, var(--color-primary, #E22421) 12%, transparent));
    color: var(--color-account-card-icon-color, var(--color-primary, #E22421));
    border-radius: 4px;
}
.twp-dashboard__card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.twp-dashboard__card-title {
    font-family: var(--font-heading, sans-serif);
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-account-card-title, var(--color-secondary, #000000));
    line-height: 1.2;
}
.twp-dashboard__card-desc {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-account-card-desc, var(--color-text-muted, #565758));
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.twp-dashboard__card-arrow {
    color: var(--color-account-card-arrow, var(--color-text-muted, #565758));
    flex-shrink: 0;
}
.twp-dashboard__card:hover .twp-dashboard__card-arrow {
    color: var(--color-account-card-hover-border, var(--color-primary, #E22421));
}

/* Últimos pedidos */
.twp-dashboard__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.twp-dashboard__section-title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.twp-dashboard__section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary, #E22421);
    text-decoration: none;
}
.twp-dashboard__section-link:hover { color: var(--color-secondary, #000000); }

.twp-dashboard__orders {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.twp-dashboard__order { margin: 0; }
.twp-dashboard__order-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 0.875rem;
    align-items: center;
    padding: 0.75rem 0.875rem;
    background: var(--color-account-order-bg, var(--color-surface, #F8F8F8));
    border: 1px solid var(--color-account-order-border, transparent);
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-account-order-link, inherit);
    transition: border-color 0.18s ease, background 0.18s ease;
}
.twp-dashboard__order-link:hover {
    background: var(--color-bg, #FFFFFF);
    border-color: var(--color-account-order-link, var(--color-primary, #E22421));
}
.twp-dashboard__order-meta { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.twp-dashboard__order-number {
    font-family: var(--font-heading, sans-serif);
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--color-account-order-number, var(--color-secondary, #000000));
}
.twp-dashboard__order-date {
    font-size: 0.6875rem;
    color: var(--color-account-order-date, var(--color-text-muted, #565758));
}
.twp-dashboard__order-badge {
    padding: 0.25rem 0.625rem;
    background: color-mix(in srgb, var(--color-primary, #E22421) 12%, transparent);
    color: var(--color-primary, #E22421);
    border-radius: 999px;
    font-family: var(--font-body, sans-serif);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.twp-dashboard__order-badge--completed,
.twp-order-card__badge--completed {
    background: var(--color-account-status-completed-bg, var(--color-success, #10B981));
    color: var(--color-account-status-completed-text, #FFFFFF);
}
.twp-dashboard__order-badge--processing,
.twp-order-card__badge--processing {
    background: var(--color-account-status-processing-bg, var(--color-warning, #F59E0B));
    color: var(--color-account-status-processing-text, #FFFFFF);
}
.twp-dashboard__order-badge--pending,
.twp-order-card__badge--pending,
.twp-dashboard__order-badge--on-hold,
.twp-order-card__badge--on-hold {
    background: var(--color-account-status-pending-bg, var(--color-info, #2563EB));
    color: var(--color-account-status-pending-text, #FFFFFF);
}
.twp-dashboard__order-badge--cancelled,
.twp-order-card__badge--cancelled,
.twp-dashboard__order-badge--failed,
.twp-order-card__badge--failed,
.twp-dashboard__order-badge--refunded,
.twp-order-card__badge--refunded {
    background: var(--color-account-status-cancelled-bg, var(--color-danger, #E22421));
    color: var(--color-account-status-cancelled-text, #FFFFFF);
}

.twp-dashboard__order-total {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}
.twp-dashboard__order-total > * { line-height: 1.2; }
.twp-dashboard__order-total > :first-child {
    font-family: var(--font-heading, sans-serif);
    font-weight: 800;
    font-size: 0.9375rem;
    color: var(--color-account-order-total, var(--color-secondary, #000000));
}
.twp-dashboard__order-total small {
    font-size: 0.6875rem;
    color: var(--color-text-muted, #565758);
    font-weight: 600;
}
.twp-dashboard__order-arrow { color: var(--color-text-muted, #565758); }

.twp-dashboard__empty-orders {
    padding: 2.5rem 1rem;
    text-align: center;
    background: var(--color-surface, #F8F8F8);
    border: 1px dashed var(--color-border, #E5E5E5);
    border-radius: 4px;
    color: var(--color-text-muted, #565758);
}
.twp-dashboard__empty-orders svg { margin-bottom: 0.625rem; }
.twp-dashboard__empty-orders p { margin: 0 0 1rem; font-size: 0.875rem; }
.twp-dashboard__empty-orders .commerce-cta { display: inline-flex; width: auto; padding: 0.625rem 1.5rem; }

/* ── Orders list (página /pedidos/) ──────────────────────── */
.twp-myaccount-section { margin: 0; }
.twp-myaccount-section__head {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-secondary, #000000);
}
.twp-myaccount-section__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.twp-myaccount-section__lead {
    margin: 0.3125rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #565758);
}

.twp-orders__list { display: flex; flex-direction: column; gap: 0.875rem; }
.twp-order-card {
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 4px;
    padding: 1rem 1.125rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.twp-order-card:hover {
    border-color: var(--color-primary, #E22421);
    box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.15);
}
.twp-order-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 50%, transparent);
}
.twp-order-card__number {
    font-family: var(--font-heading, sans-serif);
    font-weight: 800;
    font-size: 1rem;
    color: var(--color-secondary, #000000);
    margin-right: 0.625rem;
}
.twp-order-card__date {
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
}
.twp-order-card__badge {
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.twp-order-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.twp-order-card__items {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #565758);
}
.twp-order-card__items svg { color: var(--color-primary, #E22421); }
.twp-order-card__total {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}
.twp-order-card__total-label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}
.twp-order-card__total-value {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-primary, #E22421);
}
.twp-order-card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.twp-order-card__action {
    display: inline-flex;
    align-items: center;
    padding: 0.4375rem 0.875rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 4px;
    text-decoration: none;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-secondary, #000000);
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.twp-order-card__action:hover {
    background: var(--color-primary, #E22421);
    color: #FFFFFF;
    border-color: var(--color-primary, #E22421);
}
.twp-order-card__action--view {
    background: var(--color-primary, #E22421);
    color: #FFFFFF;
    border-color: var(--color-primary, #E22421);
}
.twp-order-card__action--view:hover { background: var(--color-secondary, #000000); }

.twp-orders__pagination {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, #E5E5E5);
}
.twp-orders__pagination-link {
    color: var(--color-primary, #E22421);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 700;
}
.twp-orders__pagination-link:hover { color: var(--color-secondary, #000000); }
.twp-orders__pagination-info { font-size: 0.75rem; color: var(--color-text-muted, #565758); }

.twp-orders__empty {
    padding: 3rem 1rem;
    text-align: center;
    background: var(--color-account-empty-bg, var(--color-surface, #F8F8F8));
    color: var(--color-account-empty-text, var(--color-text-muted, #565758));
    border: 1px dashed var(--color-border, #E5E5E5);
    border-radius: 4px;
}
.twp-orders__empty svg { color: var(--color-text-muted, #565758); opacity: 0.5; margin-bottom: 0.875rem; }
.twp-orders__empty h3 {
    margin: 0 0 0.4375rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.twp-orders__empty p { margin: 0 0 1.25rem; font-size: 0.875rem; color: var(--color-text-muted, #565758); }
.twp-orders__empty .commerce-cta { display: inline-flex; width: auto; padding: 0.625rem 1.5rem; }

/* ── Edit Account / Form ─────────────────────────────────── */
.twp-form-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.twp-form-card__section {
    margin: 0;
    padding: 0;
    border: 0;
}
.twp-form-card__section--password {
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border, #E5E5E5);
}
.twp-form-card__legend {
    margin: 0 0 0.875rem;
    padding: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary, #E22421);
}
.twp-form-card__hint {
    margin: -0.5rem 0 0.875rem;
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
    font-style: italic;
}
.twp-form-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 0.875rem;
}
@media (max-width: 560px) { .twp-form-card__grid { grid-template-columns: 1fr; gap: 0; } }
.twp-form-card .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    margin-bottom: 1rem;
    width: auto !important;
    float: none !important;
}
.twp-form-card .form-row label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}
.twp-form-card .form-row input,
.twp-form-card .form-row select,
.twp-form-card .form-row textarea {
    padding: 0.625rem 0.875rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    color: var(--color-secondary, #000000);
    width: 100%;
    box-sizing: border-box;
}
.twp-form-card .form-row input:focus,
.twp-form-card .form-row select:focus,
.twp-form-card .form-row textarea:focus {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: -1px;
    background: var(--color-bg, #FFFFFF);
}
.twp-form-card__actions {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 0.5rem 0 0;
}
.twp-form-card__actions .commerce-cta { width: auto; padding: 0.75rem 1.5rem; }

/* ── Edit Address + Edit Account (forms WC nativos) — herdam o mesmo
 *    estilo de input do checkout para padrão visual consistente. */
.woocommerce-account .woocommerce-EditAccountForm .form-row,
.woocommerce-account .woocommerce-address-fields .form-row,
.woocommerce-account .woocommerce-MyAccount-content .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    margin-bottom: 1rem;
    width: auto !important;
    float: none !important;
}
.woocommerce-account .woocommerce-EditAccountForm .form-row label,
.woocommerce-account .woocommerce-address-fields .form-row label,
.woocommerce-account .woocommerce-MyAccount-content .form-row label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}
.woocommerce-account .woocommerce-EditAccountForm .form-row input,
.woocommerce-account .woocommerce-EditAccountForm .form-row select,
.woocommerce-account .woocommerce-EditAccountForm .form-row textarea,
.woocommerce-account .woocommerce-address-fields .form-row input,
.woocommerce-account .woocommerce-address-fields .form-row select,
.woocommerce-account .woocommerce-address-fields .form-row textarea,
.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content .form-row select,
.woocommerce-account .woocommerce-MyAccount-content .form-row textarea {
    padding: 0.625rem 0.875rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    color: var(--color-secondary, #000000);
    box-sizing: border-box;
    width: 100%;
}
.woocommerce-account .woocommerce-EditAccountForm .form-row input:focus,
.woocommerce-account .woocommerce-EditAccountForm .form-row select:focus,
.woocommerce-account .woocommerce-EditAccountForm .form-row textarea:focus,
.woocommerce-account .woocommerce-address-fields .form-row input:focus,
.woocommerce-account .woocommerce-address-fields .form-row select:focus,
.woocommerce-account .woocommerce-address-fields .form-row textarea:focus,
.woocommerce-account .woocommerce-MyAccount-content .form-row input:focus,
.woocommerce-account .woocommerce-MyAccount-content .form-row select:focus,
.woocommerce-account .woocommerce-MyAccount-content .form-row textarea:focus {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: -1px;
    background: var(--color-bg, #FFFFFF);
}

/* Grid 2-col em rows pareados (form-row-first / form-row-last) */
@media (min-width: 640px) {
    .woocommerce-account .woocommerce-address-fields__field-wrapper,
    .woocommerce-account .woocommerce-EditAccountForm:not(.twp-form-card),
    .woocommerce-account .woocommerce-MyAccount-content .twp-form-card__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1rem;
    }
    .woocommerce-account .form-row-first,
    .woocommerce-account .form-row-last { width: auto !important; float: none !important; }
    .woocommerce-account .form-row-wide,
    .woocommerce-account .form-row.notes,
    .woocommerce-account p.form-row.create-account { grid-column: 1 / -1; }
}

/* Botão "Salvar alterações" / "Salvar endereço" — padrão commerce-cta */
.woocommerce-account .woocommerce-MyAccount-content .button {
    padding: 0.75rem 1.5rem;
    background: var(--color-primary, #E22421);
    color: #FFFFFF;
    border: 0;
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover {
    background: var(--color-secondary, #000000);
}

/* Headers e legends dos forms do myaccount */
.woocommerce-account .woocommerce-MyAccount-content fieldset {
    margin: 1.25rem 0;
    padding: 0;
    border: 0;
}
.woocommerce-account .woocommerce-MyAccount-content fieldset:first-of-type { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content fieldset legend,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    margin: 0 0 0.875rem;
    padding: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary, #E22421);
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    padding-bottom: 0.5rem;
}

/* ── Addresses ──────────────────────────────────────────── */
.twp-addresses__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.twp-address-card {
    background: var(--color-account-address-bg, var(--color-bg, #FFFFFF));
    border: 1px solid var(--color-account-address-border, var(--color-border, #E5E5E5));
    border-radius: 4px;
    padding: 1.125rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.twp-address-card:hover {
    border-color: var(--color-account-address-edit-btn, var(--color-primary, #E22421));
    box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.12);
}
.twp-address-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px dashed var(--color-border, #E5E5E5);
}
.twp-address-card__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-account-address-title, var(--color-secondary, #000000));
}
.twp-address-card__title svg { color: var(--color-account-address-edit-btn, var(--color-primary, #E22421)); }
.twp-address-card__address { color: var(--color-account-address-text, var(--color-text-muted, #565758)); }
.twp-address-card__edit {
    color: var(--color-account-address-edit-btn, var(--color-primary, #E22421));
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary, #E22421);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.twp-address-card__edit:hover { color: var(--color-secondary, #000000); }
.twp-address-card__address {
    margin: 0;
    font-style: normal;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-secondary, #000000);
}

/* ── Login (split 2 cards) ──────────────────────────────── */
.twp-login-wrap { padding-bottom: var(--spacing-section, 4rem); }
.twp-login-head { justify-content: center; text-align: center; padding-bottom: 1rem; border-bottom: 0; }
.twp-login-head .commerce-layout__title { margin: 0 auto; }
.twp-login-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: stretch;
}
@media (max-width: 760px) { .twp-login-grid { grid-template-columns: 1fr; } }
.twp-login-card {
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 4px;
    padding: clamp(1.25rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
}
.twp-login-card--register {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #E22421) 5%, transparent) 0%, transparent 60%),
        var(--color-bg, #FFFFFF);
    border-left: 4px solid var(--color-primary, #E22421);
}
.twp-login-card__head { margin-bottom: 1.25rem; }
.twp-login-card__title {
    margin: 0 0 0.4375rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.twp-login-card__lead {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #565758);
    line-height: 1.5;
}
.twp-login-card__form { display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.twp-login-card .form-row {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}
.twp-login-card .form-row label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}
.twp-login-card .input-text {
    padding: 0.6875rem 0.875rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    width: 100%;
    box-sizing: border-box;
}
.twp-login-card .input-text:focus {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: -1px;
    background: var(--color-bg, #FFFFFF);
}
.twp-login-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: 0.5rem;
}
.twp-login-card__actions .commerce-cta { width: auto; padding: 0.75rem 1.5rem; }
.twp-login-card__remember {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--color-text-muted, #565758);
}
.twp-login-card__lost { margin: 0.875rem 0 0; }
.twp-login-card__lost a {
    font-size: 0.8125rem;
    color: var(--color-primary, #E22421);
    text-decoration: none;
}
.twp-login-card__lost a:hover { text-decoration: underline; }

/* ── MOBILE ≤ 900px — sidebar vira drawer ─────────────── */
@media (max-width: 900px) {
    .twp-myaccount__layout { grid-template-columns: 1fr; gap: 1rem; }
    .twp-myaccount__drawer-btn { display: inline-flex; }
    .twp-myaccount__sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 50;
        width: min(320px, 88vw);
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
        overflow-y: auto;
        border-radius: 0;
        border: 0;
    }
    .twp-myaccount__sidebar.is-open { transform: translateX(0); }
    .twp-myaccount__sidebar-head { display: flex; }
    .twp-myaccount__overlay[x-show] { display: block; }
}

/* Mobile ≤ 760px — esconde o hero do dashboard (PAINEL DO CLIENTE +
 * Bem-vindo + lead + PEDIDO TOTAL). Mantém só os cards de atalho e
 * a lista de últimos pedidos — interface mais enxuta. */
@media (max-width: 760px) {
    .twp-dashboard__hero { display: none; }
}

@media (max-width: 560px) {
    .twp-dashboard__order-link { grid-template-columns: 1fr; gap: 0.4375rem; }
    .twp-dashboard__order-arrow { display: none; }
    .twp-order-card__head { flex-direction: column; align-items: stretch; }
    .twp-order-card__badge { align-self: flex-start; }
    .twp-order-card__body { flex-direction: column; align-items: stretch; }
}
/* === BLOCK:myaccount:END ====================================== */


/* === BLOCK:page-institucional:START ===========================
 * Páginas institucionais (Quem Somos, Contato, Políticas, Termos).
 *
 * Layout:
 *   - Hero escuro full-bleed com gradient + título XL + lead + meta
 *   - Layout 2 cols: TOC sidebar (sticky) + main prose content
 *   - CTA card final com WhatsApp + Email do ACF Empresa
 * ============================================================== */

.twp-institutional { padding-bottom: var(--spacing-section, 4rem); }

/* ── HERO ─────────────────────────────────────────────────────── */
.twp-institutional__hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-secondary, #000000);
    color: #fff;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.twp-institutional__hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at top right, color-mix(in srgb, var(--color-primary, #E22421) 22%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at bottom left, color-mix(in srgb, var(--color-accent, #FFFFFF) 14%, transparent) 0%, transparent 60%);
}
/* Imagem destaque como background do hero (com overlay escuro p/ contraste do texto) */
.twp-institutional__hero-bg--image {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 0, 0, 0.35) 100%),
        linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 55%),
        var(--hero-img) center / cover no-repeat;
}
.twp-institutional__hero--has-image {
    min-height: clamp(260px, 34vw, 440px);
    display: flex;
    align-items: center;
}
.twp-institutional__hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
}
@media (max-width: 760px) {
    .twp-institutional__hero-inner { grid-template-columns: 1fr; }
}

.twp-institutional__hero-text { min-width: 0; }
.twp-institutional__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.875rem;
    background: color-mix(in srgb, var(--color-accent, #FFFFFF) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent, #FFFFFF) 40%, transparent);
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent, #FFFFFF);
    margin-bottom: 1rem;
}
.twp-institutional__title {
    margin: 0 0 0.75rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.75rem, 4.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
}
.twp-institutional__lead {
    margin: 0 0 1.25rem;
    max-width: 640px;
    font-family: var(--font-body, sans-serif);
    font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
    line-height: 1.55;
    color: color-mix(in srgb, #fff 88%, transparent);
}
.twp-institutional__meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.875rem 1.25rem;
    padding: 0.4375rem 0;
}
.twp-institutional__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    color: color-mix(in srgb, #fff 70%, transparent);
}
.twp-institutional__meta-item svg { color: var(--color-accent, #FFFFFF); }

.twp-institutional__hero-media {
    width: clamp(180px, 26vw, 320px);
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--color-accent, #FFFFFF) 30%, transparent);
    box-shadow: 0 22px 50px -22px rgba(0, 0, 0, 0.5);
}
.twp-institutional__hero-img { display: block; width: 100%; height: auto; }
.twp-institutional__hero-icon {
    width: clamp(140px, 18vw, 220px);
    height: clamp(140px, 18vw, 220px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--color-accent, #FFFFFF) 80%, #fff);
    background: color-mix(in srgb, #fff 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent, #FFFFFF) 25%, transparent);
    border-radius: 4px;
}
@media (max-width: 760px) {
    .twp-institutional__hero-media,
    .twp-institutional__hero-icon { display: none; }
}

/* ── LAYOUT 2 cols ────────────────────────────────────────────── */
.twp-institutional__layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}
@media (max-width: 900px) {
    .twp-institutional__layout { grid-template-columns: 1fr; }
}

/* Sidebar TOC */
.twp-institutional__sidebar {
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 4px;
    position: sticky;
    top: clamp(80px, 10vh, 100px);
    overflow: hidden;
}
@media (max-width: 900px) {
    .twp-institutional__sidebar { position: static; }
}
.twp-institutional__sidebar-head {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--color-surface, #F8F8F8);
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-secondary, #000000);
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.twp-institutional__sidebar-head svg { color: var(--color-primary, #E22421); }

.twp-institutional__toc {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    max-height: 480px;
    overflow-y: auto;
}
.twp-institutional__toc-link {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--color-secondary, #000000);
    text-decoration: none;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    border-radius: 2px;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.18s ease;
    border-left: 2px solid transparent;
}
.twp-institutional__toc-link:hover {
    background: var(--color-surface, #F8F8F8);
    color: var(--color-primary, #E22421);
    padding-left: 1rem;
}
.twp-institutional__toc-link.is-level-3 {
    padding-left: 1.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted, #565758);
}
.twp-institutional__toc-link.is-level-3:hover { padding-left: 1.75rem; }
.twp-institutional__toc-link.is-active {
    background: color-mix(in srgb, var(--color-primary, #E22421) 8%, transparent);
    color: var(--color-primary, #E22421);
    border-left-color: var(--color-primary, #E22421);
    font-weight: 700;
}
.twp-institutional__toc-empty {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
    font-style: italic;
}

/* Main article content */
.twp-institutional__article {
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 4px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    min-width: 0;
}
.twp-institutional__article .prose { max-width: 100%; }
.twp-institutional__article .prose h2 {
    scroll-margin-top: clamp(80px, 10vh, 110px);
}
.twp-institutional__article .prose h3 {
    scroll-margin-top: clamp(80px, 10vh, 110px);
}

/* ── CTA Card ─────────────────────────────────────────────────── */
.twp-institutional__cta {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}
.twp-institutional__cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background:
        radial-gradient(ellipse at top right, color-mix(in srgb, var(--color-accent, #FFFFFF) 16%, transparent) 0%, transparent 60%),
        var(--color-secondary, #000000);
    color: #fff;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--color-accent, #FFFFFF) 35%, transparent);
    overflow: hidden;
    position: relative;
}
.twp-institutional__cta-text { min-width: 0; flex: 1 1 360px; }
.twp-institutional__cta-eyebrow {
    display: inline-block;
    margin-bottom: 0.4375rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent, #FFFFFF);
}
.twp-institutional__cta-title {
    margin: 0 0 0.625rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.25rem, 2.4vw, 1.625rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #fff;
}
.twp-institutional__cta-lead {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: color-mix(in srgb, #fff 85%, transparent);
    max-width: 540px;
}
.twp-institutional__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    flex-shrink: 0;
}
/* CTA buttons — proporção EXATAMENTE IDÊNTICA entre os dois */
.twp-institutional__cta-btn {
    /* Reset agressivo pra anular o .commerce-cta base */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
    width: 220px !important;
    height: 54px !important;
    min-width: 220px !important;
    padding: 0 1.25rem !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-family: var(--font-body, sans-serif) !important;
    font-size: 0.8125rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1 !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s ease;
}
.twp-institutional__cta-btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    display: block !important;
}
.twp-institutional__cta-btn span { line-height: 1 !important; }
.twp-institutional__cta-btn:hover { transform: translateY(-3px); }
.twp-institutional__cta-btn:active { transform: translateY(0); }

/* Shimmer faixa de luz passa horizontalmente em loop infinito */
.twp-institutional__cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255, 255, 255, 0.28) 50%,
        transparent 70%
    );
    transform: translateX(-110%);
    animation: twpShimmer 3.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
.twp-institutional__cta-btn svg,
.twp-institutional__cta-btn span { position: relative; z-index: 2; }

@keyframes twpShimmer {
    0%   { transform: translateX(-110%); }
    55%  { transform: translateX(110%); }
    100% { transform: translateX(110%); }
}

/* ── AMBOS os botões (telefone + e-mail) — VERDE exato #25D366, sem vermelho ────
 * --color-primary é redefinido localmente p/ verde, pois o glow/pulse/hover
 * herdavam o vermelho do DS. Cor única e idêntica nos 2 botões deste bloco. */
.twp-institutional__cta-btn--whatsapp,
.twp-institutional__cta-btn--email {
    --color-primary: #25D366;
    background:
        linear-gradient(135deg, #25D366 0%, color-mix(in srgb, #25D366 80%, #000) 100%) !important;
    color: #fff !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, #25D366 60%, transparent),
        0 6px 18px -8px color-mix(in srgb, #25D366 80%, transparent),
        0 0 0 0 color-mix(in srgb, #25D366 50%, transparent);
}
.twp-institutional__cta-btn--whatsapp:hover,
.twp-institutional__cta-btn--email:hover {
    color: #fff !important;
    box-shadow:
        0 0 0 1px #25D366,
        0 14px 30px -10px color-mix(in srgb, #25D366 85%, transparent),
        0 0 0 6px color-mix(in srgb, #25D366 25%, transparent);
    animation: none;
}
/* Pulse verde só no botão do telefone (ação principal) */
.twp-institutional__cta-btn--whatsapp { animation: twpPulseGlow 2s ease-out infinite; }

/* Halo pulsante em volta do botão WhatsApp (chama atenção sem deslocar layout) */
@keyframes twpPulseGlow {
    0%, 100% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--color-primary, #E22421) 60%, transparent),
            0 6px 18px -8px color-mix(in srgb, var(--color-primary, #E22421) 80%, transparent),
            0 0 0 0 color-mix(in srgb, var(--color-primary, #E22421) 50%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--color-primary, #E22421) 60%, transparent),
            0 6px 18px -8px color-mix(in srgb, var(--color-primary, #E22421) 80%, transparent),
            0 0 0 8px color-mix(in srgb, var(--color-primary, #E22421) 0%, transparent);
    }
}

@media (max-width: 640px) {
    .twp-institutional__cta-btn { width: 100% !important; min-width: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    .twp-institutional__cta-btn::before,
    .twp-institutional__cta-btn--whatsapp { animation: none !important; }
}

@media (max-width: 640px) {
    /* Mobile: empilha texto + botões SEM espaço morto entre eles.
     * Causa do buraco: o card é flex e .cta-text tinha flex:1 1 360px →
     * em coluna esse 360px vira BASE DE ALTURA (texto forçado a ~360px).
     * Soma-se o justify-content:space-between que espalhava os itens.
     * Fix: flex-start + nowrap + altura auto + reset do flex do texto. */
    .twp-institutional__cta-card {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        align-content: flex-start;
        justify-content: flex-start;
        gap: 1.25rem;               /* ≤30px entre texto e botões */
        height: auto;
        min-height: 0;
    }
    .twp-institutional__cta-text   { flex: 0 0 auto; }
    .twp-institutional__cta-actions { width: 100%; flex: 0 0 auto; }
    .twp-institutional__cta-btn { flex: 1 1 auto; justify-content: center; }
}
/* === BLOCK:page-institucional:END ============================= */


/* === BLOCK:blog:START ==========================================
 * Blog premium estilo portal de notícias.
 *
 * Componentes:
 *   - .blog-hero (hero escuro de home/archive)
 *   - .blog-spotlight (featured + 2 secundários)
 *   - .blog-layout (grid + sidebar)
 *   - .blog-grid / .blog-card (cards padrão)
 *   - .blog-featured (card grande do spotlight)
 *   - .blog-sidebar + .blog-widget (widgets)
 *   - .blog-single-hero / .blog-single-layout / .blog-single-toc
 *   - .blog-single-article (single magazine)
 *   - .blog-single-author-box, .blog-single-tags, .blog-single-share
 *   - .blog-related (related posts no fim)
 *   - .blog-empty (estado vazio)
 * ============================================================== */

.blog-main { padding-bottom: var(--spacing-section, 4rem); }

/* ── HERO (home + archive) ─────────────────────────────────────── */
.blog-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-blog-hero-bg, #000000);
    color: var(--color-blog-hero-text, #fff);
    padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.blog-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at top right, color-mix(in srgb, var(--color-primary, #E22421) 22%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at bottom left, color-mix(in srgb, var(--color-accent, #FFFFFF) 12%, transparent) 0%, transparent 60%);
}
.blog-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.blog-hero__inner--archive {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
}
.blog-hero__author-avatar {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--color-accent, #FFFFFF) 60%, transparent);
}
.blog-hero__author-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-hero__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.blog-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.375rem 0.75rem;
    background: color-mix(in srgb, var(--color-accent, #FFFFFF) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent, #FFFFFF) 40%, transparent);
    border-radius: 999px;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent, #FFFFFF);
    width: fit-content;
}
.blog-hero__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
}
.blog-hero__lead {
    margin: 0;
    max-width: 640px;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.55;
    color: color-mix(in srgb, #fff 85%, transparent);
}
.blog-hero__meta-line {
    margin-top: 0.25rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    color: color-mix(in srgb, #fff 70%, transparent);
}
.blog-hero__meta-line strong { color: var(--color-blog-hero-accent, var(--color-accent, #FFFFFF)); font-weight: 800; }

/* Ticker de tags */
.blog-hero__ticker {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-top: 0.875rem;
}
.blog-hero__ticker-label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent, #FFFFFF);
}
.blog-hero__ticker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.blog-hero__ticker-tag {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.blog-hero__ticker-tag:hover {
    background: var(--color-primary, #E22421);
    border-color: var(--color-primary, #E22421);
}

/* ── SPOTLIGHT (featured + 2 secundários) ─────────────────────── */
.blog-spotlight {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 900px) { .blog-spotlight { grid-template-columns: 1fr; } }
.blog-spotlight__primary { min-width: 0; }
.blog-spotlight__secondary {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
    min-width: 0;
}
@media (max-width: 760px) { .blog-spotlight__secondary { grid-template-rows: auto; } }

/* ── BLOG FEATURED (card grande spotlight) ────────────────────── */
.blog-featured {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    height: 100%;
    min-height: 380px;
    background: var(--color-secondary, #000000);
}
.blog-featured__link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    position: relative;
}
.blog-featured__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.blog-featured__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.blog-featured:hover .blog-featured__img { transform: scale(1.05); }
.blog-featured__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.85) 100%);
}
.blog-featured__content {
    position: relative;
    z-index: 1;
    padding: clamp(1.25rem, 3vw, 2rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
}
/* .blog-featured__cat — agora renderizado via partial cat-chip.php
   (variant overlay-large). Estilo definido em .blog-cat-chip. */
.blog-featured__title {
    margin: 0 0 0.625rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.25rem, 2.8vw, 1.875rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #fff;
}
.blog-featured__excerpt {
    margin: 0 0 0.875rem;
    font-size: clamp(0.875rem, 1.4vw, 0.9375rem);
    line-height: 1.5;
    color: color-mix(in srgb, #fff 88%, transparent);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-featured__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem 1.125rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    color: color-mix(in srgb, #fff 80%, transparent);
}
.blog-featured__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}
.blog-featured__meta-item svg { color: var(--color-accent, #FFFFFF); }

/* ── LAYOUT 2 cols (grid + sidebar) ───────────────────────────── */
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}
@media (max-width: 1100px) { .blog-layout { grid-template-columns: 1fr; } }
.blog-layout__main { min-width: 0; }

.blog-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(0.875rem, 2vw, 1.25rem);
    padding-bottom: 0.625rem;
    border-bottom: 2px solid var(--color-secondary, #000000);
    flex-wrap: wrap;
}
.blog-section-head__eyebrow {
    display: inline-block;
    margin-bottom: 0.25rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary, #E22421);
}
.blog-section-head__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.0625rem, 2vw, 1.375rem);
    font-weight: 800;
    color: var(--color-secondary, #000000);
    letter-spacing: -0.005em;
}
.blog-section-head__title em { font-style: normal; color: var(--color-primary, #E22421); }
.blog-section-head__count {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}
.blog-section-head__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary, #E22421);
    text-decoration: none;
}
.blog-section-head__link:hover { color: var(--color-secondary, #000000); }

/* ── BLOG GRID + BLOG CARD ────────────────────────────────────── */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}
.blog-card {
    background: var(--color-blog-card-bg, #FFFFFF);
    border: 1px solid var(--color-blog-card-border, #E5E5E5);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
    position: relative;
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -14px rgba(15, 23, 42, 0.22), 0 4px 12px -4px rgba(15, 23, 42, 0.10);
    border-color: color-mix(in srgb, var(--color-blog-card-hover, var(--color-primary, #E22421)) 50%, var(--color-blog-card-border, #E5E5E5));
}
.blog-card:hover .blog-cat-chip--overlay {
    transform: translateY(-2px);
    filter: brightness(1.08) saturate(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.blog-card__media-link { display: block; }
.blog-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-surface, #F8F8F8);
    overflow: hidden;
}
.blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.blog-card:hover .blog-card__img { transform: scale(1.04); }
.blog-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted, #565758);
    opacity: 0.4;
}
/* ── Cat chip (partial reutilizável) ─────────────────────────────
 * Pílula colorida da categoria. Recebe cores via CSS vars inline
 * (--cat-bg, --cat-text) — definidas pelo helper twp_blog_category_color().
 * Variantes: overlay (cards), overlay-large (featured), hero (single).
 * ──────────────────────────────────────────────────────────────── */
.blog-cat-chip {
    --cat-bg: rgba(15, 23, 42, 0.85);
    --cat-text: #fff;
    display: inline-flex;
    align-items: center;
    background: var(--cat-bg);
    color: var(--cat-text);
    font-family: var(--font-body, sans-serif);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
    line-height: 1;
}
.blog-cat-chip:hover {
    color: var(--cat-text);
    transform: translateY(-1px);
    filter: brightness(1.12) saturate(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
/* Variant: overlay sobre card pequeno (post-card) */
.blog-cat-chip--overlay {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.375rem 0.6875rem;
    font-size: 0.625rem;
    z-index: 2;
}
/* Variant: overlay sobre featured/spotlight */
.blog-cat-chip--overlay-large {
    width: fit-content;
    margin-bottom: 0.75rem;
    padding: 0.4375rem 0.875rem;
    font-size: 0.6875rem;
}
/* Variant: hero do single post */
.blog-cat-chip--hero {
    width: fit-content;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
}
/* Variant: inline (uso futuro) */
.blog-cat-chip--inline {
    padding: 0.3125rem 0.625rem;
    font-size: 0.625rem;
}

/* Backwards-compat: classes antigas mantidas como alias mínimo
   (caso algum template terceiro use). Não usar em código novo. */
.blog-card__cat,
.blog-featured__cat,
.blog-single-hero__cat {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.375rem 0.6875rem;
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    z-index: 2;
}

.blog-card__body {
    padding: clamp(0.875rem, 1.8vw, 1.125rem);
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    flex: 1;
}
.blog-card__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.005em;
}
.blog-card__title a {
    color: var(--color-blog-card-title, #000000);
    text-decoration: none;
    transition: color 0.15s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card__title a:hover { color: var(--color-blog-card-hover, #E22421); }
.blog-card__excerpt {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted, #565758);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card__meta {
    margin-top: auto;
    padding-top: 0.4375rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-muted, #565758);
    border-top: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 50%, transparent);
}
.blog-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
}
.blog-card__meta-item svg { color: var(--color-primary, #E22421); }

/* ── BLOG SIDEBAR (widgets) ───────────────────────────────────── */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: clamp(80px, 10vh, 100px);
}
@media (max-width: 1100px) { .blog-sidebar { position: static; } }

.blog-widget {
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    overflow: hidden;
}
.blog-widget__title {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--color-surface, #F8F8F8);
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-secondary, #000000);
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.blog-widget__title svg { color: var(--color-primary, #E22421); }

.blog-widget__list { list-style: none; margin: 0; padding: 0.4375rem; }
.blog-widget__post { margin: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 50%, transparent); }
.blog-widget__post:last-child { border-bottom: 0; }
.blog-widget__post-link {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0.625rem;
    padding: 0.5rem;
    text-decoration: none;
    color: inherit;
    border-radius: 0;
    transition: background 0.15s ease;
    align-items: center;
}
.blog-widget__post-link:hover { background: var(--color-surface, #F8F8F8); }
.blog-widget__post-thumb {
    width: 56px;
    height: 56px;
    overflow: hidden;
    background: var(--color-surface, #F8F8F8);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.blog-widget__post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-widget__post-body { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; justify-content: center; }
.blog-widget__post-title {
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-secondary, #000000);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-widget__post-link:hover .blog-widget__post-title { color: var(--color-primary, #E22421); }
.blog-widget__post-date {
    font-size: 0.6875rem;
    color: var(--color-text-muted, #565758);
    font-weight: 600;
}

.blog-widget__cats { list-style: none; margin: 0; padding: 0; }
.blog-widget__cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    color: var(--color-secondary, #000000);
    text-decoration: none;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 50%, transparent);
    transition: background 0.15s ease, padding-left 0.18s ease;
}
.blog-widget__cats li:last-child .blog-widget__cat-link { border-bottom: 0; }
.blog-widget__cat-link:hover {
    background: var(--color-surface, #F8F8F8);
    color: var(--color-primary, #E22421);
    padding-left: 1.25rem;
}
.blog-widget__cat-count {
    padding: 0.125rem 0.5rem;
    background: color-mix(in srgb, var(--color-primary, #E22421) 12%, transparent);
    color: var(--color-primary, #E22421);
    border-radius: 0;
    font-size: 0.625rem;
    font-weight: 800;
    min-width: 1.5rem;
    text-align: center;
}

.blog-widget__tags {
    list-style: none;
    margin: 0;
    padding: 0.875rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.blog-widget__tag {
    display: inline-block;
    padding: 0.3125rem 0.625rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    color: var(--color-secondary, #000000);
    text-decoration: none;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.blog-widget__tag:hover {
    background: var(--color-primary, #E22421);
    color: #fff;
    border-color: var(--color-primary, #E22421);
}

/* ── SINGLE HERO (magazine) ───────────────────────────────────── */
.blog-single-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: var(--color-single-hero-text, #fff);
    padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.blog-single-hero--text { background: var(--color-single-hero-bg, #000000); }
.blog-single-hero--image { background: var(--color-single-hero-bg, #000000); }
.blog-single-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--single-hero-bg);
    background-size: cover;
    background-position: center;
    filter: blur(12px) brightness(0.4) saturate(1.2);
    transform: scale(1.1);
}
.blog-single-hero--text .blog-single-hero__bg {
    background:
        radial-gradient(ellipse at top right, color-mix(in srgb, var(--color-primary, #E22421) 25%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at bottom left, color-mix(in srgb, var(--color-accent, #FFFFFF) 14%, transparent) 0%, transparent 60%);
    filter: none;
    transform: none;
}
.blog-single-hero__inner {
    /* Herda max-width/padding do .container — alinha com breadcrumb */
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.blog-single-hero__title,
.blog-single-hero__excerpt { max-width: 980px; }
/* .blog-single-hero__cat — agora renderizado via partial cat-chip.php
   (variant hero). Estilo definido em .blog-cat-chip. */
.blog-single-hero__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.75rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
}
.blog-single-hero__excerpt {
    margin: 0;
    font-size: clamp(1rem, 1.7vw, 1.125rem);
    line-height: 1.55;
    color: color-mix(in srgb, #fff 88%, transparent);
    max-width: 720px;
}
.blog-single-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 0.875rem;
    margin-top: 0.5rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    color: color-mix(in srgb, #fff 80%, transparent);
}
.blog-single-hero__author {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
}
.blog-single-hero__author:hover { color: var(--color-accent, #FFFFFF); }
.blog-single-hero__author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--color-accent, #FFFFFF) 70%, transparent);
}
.blog-single-hero__meta-divider { opacity: 0.4; }
.blog-single-hero__meta-item { display: inline-flex; align-items: center; gap: 0.25rem; }

/* ── SINGLE LAYOUT 2 cols ─────────────────────────────────────── */
.blog-single-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}
@media (max-width: 980px) { .blog-single-layout { grid-template-columns: 1fr; } }

/* TOC sidebar */
.blog-single-toc {
    position: sticky;
    top: clamp(80px, 10vh, 100px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (max-width: 980px) { .blog-single-toc { position: static; } }

.blog-single-toc__head {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0 0 0.625rem;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-secondary, #000000);
}
.blog-single-toc__head svg { color: var(--color-primary, #E22421); }
.blog-single-toc__nav { display: flex; flex-direction: column; gap: 0.125rem; max-height: 360px; overflow-y: auto; }
.blog-single-toc__link {
    display: block;
    padding: 0.4375rem 0.625rem;
    color: var(--color-secondary, #000000);
    text-decoration: none;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    border-left: 2px solid transparent;
    border-radius: 2px;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.18s ease;
}
.blog-single-toc__link:hover { background: var(--color-surface, #F8F8F8); color: var(--color-primary, #E22421); padding-left: 1rem; }
.blog-single-toc__link.is-level-3 {
    padding-left: 1.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted, #565758);
}
.blog-single-toc__link.is-active {
    background: color-mix(in srgb, var(--color-single-toc-active, var(--color-primary, #E22421)) 8%, transparent);
    color: var(--color-single-toc-active, var(--color-primary, #E22421));
    border-left-color: var(--color-single-toc-active, var(--color-primary, #E22421));
    font-weight: 700;
}
.blog-single-toc__empty {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
    font-style: italic;
}

/* Share buttons sidebar */
.blog-single-share {
    padding-top: 0.875rem;
    border-top: 1px dashed var(--color-border, #E5E5E5);
}
.blog-single-share__label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}
.blog-single-share__buttons { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.blog-single-share__btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg, #FFFFFF);
    color: var(--color-secondary, #000000);
    border: 1px solid var(--color-product-share-btn, var(--color-border, #E5E5E5));
    border-radius: 50%;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
.blog-single-share__btn:hover {
    background: var(--color-primary, #E22421);
    color: #fff;
    border-color: var(--color-primary, #E22421);
    transform: translateY(-2px);
}
@media (max-width: 980px) {
    .blog-single-share { text-align: center; }
    .blog-single-share__label { text-align: center; }
    .blog-single-share__buttons { justify-content: center; }
}

/* Article content */
.blog-single-article {
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 6px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    min-width: 0;
}
.blog-single-article .prose { max-width: 100%; }
.blog-single-article .prose h2,
.blog-single-article .prose h3 { scroll-margin-top: clamp(80px, 10vh, 110px); }

.blog-single-article__pages {
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface, #F8F8F8);
    border-left: 3px solid var(--color-accent, #FFFFFF);
    font-size: 0.8125rem;
}

/* Tags do artigo */
.blog-single-tags {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--color-border, #E5E5E5);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem 1rem;
}
.blog-single-tags__label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}
.blog-single-tags__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.blog-single-tags__chip {
    display: inline-block;
    padding: 0.3125rem 0.75rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 999px;
    color: var(--color-secondary, #000000);
    text-decoration: none;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.blog-single-tags__chip:hover {
    background: var(--color-primary, #E22421);
    color: #fff;
    border-color: var(--color-primary, #E22421);
}

/* Author box */
.blog-single-author-box {
    margin-top: 2rem;
    padding: 1.25rem;
    background: var(--color-surface, #F8F8F8);
    border-left: 4px solid var(--color-primary, #E22421);
    border-radius: 4px;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.blog-single-author-box__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--color-border, #E5E5E5);
    flex-shrink: 0;
}
.blog-single-author-box__body { min-width: 0; }
.blog-single-author-box__eyebrow {
    display: block;
    margin-bottom: 0.125rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}
.blog-single-author-box__name {
    margin: 0 0 0.4375rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.blog-single-author-box__bio {
    margin: 0 0 0.625rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-muted, #565758);
}
.blog-single-author-box__more {
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--color-primary, #E22421);
    text-decoration: none;
}
.blog-single-author-box__more:hover { color: var(--color-secondary, #000000); }

/* Comentários container */
.blog-single-comments {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid var(--color-border, #E5E5E5);
}

/* Related posts */
.blog-related {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding: clamp(2rem, 4vw, 3rem) 0;
    background: var(--color-surface, #F8F8F8);
    border-top: 1px solid var(--color-border, #E5E5E5);
}

/* ── EMPTY STATE ──────────────────────────────────────────────── */
.blog-empty {
    padding: clamp(2.5rem, 5vw, 4rem) 1rem;
    text-align: center;
    background: var(--color-surface, #F8F8F8);
    border: 1px dashed var(--color-border, #E5E5E5);
    border-radius: 6px;
    max-width: 560px;
    margin: 2rem auto;
}
.blog-empty svg { color: var(--color-text-muted, #565758); opacity: 0.5; margin-bottom: 1rem; }
.blog-empty__title {
    margin: 0 0 0.5rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.blog-empty__lead { margin: 0 0 1.5rem; font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-muted, #565758); }
.blog-empty .commerce-cta { display: inline-flex; width: auto; padding: 0.75rem 1.5rem; }

/* ── MOBILE refinements ───────────────────────────────────────── */
@media (max-width: 640px) {
    /* Archives genéricos (category, tag, date): hero empilha para usar largura cheia */
    .blog-hero__inner--archive:not(.blog-hero__inner--author) {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    /* Author hero — MANTÉM row no mobile (avatar à esquerda, texto à direita).
       Layout enxuto premium: avatar compacto, título e meta empilhados ao lado. */
    .blog-hero__inner--author {
        flex-direction: row;
        align-items: center;
        gap: 0.875rem;
    }
    .blog-hero__inner--author .blog-hero__author-avatar {
        width: 100px;
        height: 100px;
        border-width: 2px;
    }
    .blog-hero__inner--author .blog-hero__text { gap: 0.25rem; }
    .blog-hero__inner--author .blog-hero__title {
        font-size: clamp(1.375rem, 5.5vw, 1.75rem);
        line-height: 1.15;
        margin: 0;
    }
    .blog-hero__inner--author .blog-hero__lead {
        font-size: 0.8125rem;
        line-height: 1.45;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .blog-hero__inner--author .blog-hero__meta-line {
        font-size: 0.75rem;
        margin-top: 0.125rem;
    }

    .blog-featured { min-height: 320px; }
    .blog-spotlight__secondary { grid-template-rows: auto auto; }
}
/* === BLOCK:blog:END ============================================ */


/* === BLOCK:thankyou:START =====================================
 * Página /finalizar-compra/pedido-recebido/{ID}/ — confirmação premium.
 * Layout: hero com ícone grande → overview → próximos passos → detalhes WC → CTAs.
 * ============================================================== */
.twp-thankyou { background: var(--color-bg, #FFFFFF); }

/* HERO */
.twp-thankyou-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(2rem, 4vw, 3rem);
    text-align: center;
    isolation: isolate;
}
.twp-thankyou-hero--success {
    background: linear-gradient(135deg, var(--color-success, #10B981) 0%, color-mix(in srgb, var(--color-success, #10B981) 75%, #000) 100%);
    color: #fff;
}
.twp-thankyou-hero--failed {
    background: linear-gradient(135deg, var(--color-danger, #E22421) 0%, color-mix(in srgb, var(--color-danger, #E22421) 75%, #000) 100%);
    color: #fff;
}
.twp-thankyou-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    max-width: 720px;
    margin: 0 auto;
}
.twp-thankyou-hero__icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    color: #fff;
    margin-bottom: 0.25rem;
}
.twp-thankyou-hero__eyebrow {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}
.twp-thankyou-hero__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.twp-thankyou-hero__lead {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    max-width: 560px;
}
.twp-thankyou-hero__lead strong { color: #fff; font-weight: 800; }
.twp-thankyou-hero__status {
    display: inline-flex;
    padding: 0.375rem 0.75rem;
    margin-top: 0.5rem;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}

/* INNER content (overview + steps + details + actions) */
.twp-thankyou__inner {
    padding: clamp(1.75rem, 3vw, 2.5rem) var(--container-padding) var(--spacing-section);
    max-width: 880px;
    margin: 0 auto;
}

/* Sections wrapping (overview, steps, details) */
.twp-thankyou-section {
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.twp-thankyou-section__title {
    margin: 0 0 1rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    font-weight: 800;
    color: var(--color-secondary, #000000);
    letter-spacing: -0.005em;
}

/* OVERVIEW grid */
.twp-order-overview {
    list-style: none;
    margin: 0;
    padding: 1.25rem 1.5rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.125rem;
}
.twp-order-overview li {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.twp-order-overview__total {
    background: var(--color-bg, #FFFFFF);
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-primary, #E22421);
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.twp-order-overview__label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
}
.twp-order-overview__value {
    font-family: var(--font-heading, sans-serif);
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
    word-break: break-word;
}
.twp-order-overview__value--small { font-size: 0.8125rem; font-weight: 600; }
.twp-order-overview__value--strong {
    font-size: 1.375rem;
    color: var(--color-primary, #E22421);
}

/* PRÓXIMOS PASSOS — 3 cards */
.twp-thankyou-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.875rem;
}
@media (max-width: 760px) {
    .twp-thankyou-steps { grid-template-columns: 1fr; }
}
.twp-thankyou-step {
    display: flex;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    align-items: flex-start;
}
.twp-thankyou-step__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-primary, #E22421) 12%, transparent);
    color: var(--color-primary, #E22421);
}
.twp-thankyou-step__body { min-width: 0; }
.twp-thankyou-step__title {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-heading, sans-serif);
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.twp-thankyou-step__desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted, #565758);
}

/* Gateway output (PIX QR code, instruções boleto, etc) */
.twp-thankyou-gateway {
    padding: 1.25rem 1.5rem;
    background: var(--color-surface, #F8F8F8);
    border-left: 4px solid var(--color-primary, #E22421);
}

/* DETALHES WC (woocommerce_view_order action) */
.twp-order-details { margin-bottom: 0; }
.twp-order-details h2 {
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    font-weight: 800;
    color: var(--color-secondary, #000000);
    margin: 0 0 0.875rem;
}
.twp-order-details table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5rem;
    background: var(--color-bg, #FFFFFF);
}
.twp-order-details table.shop_table th,
.twp-order-details table.shop_table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    text-align: left;
    font-size: 0.875rem;
}
.twp-order-details table.shop_table th {
    font-family: var(--font-body, sans-serif);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: var(--color-text-muted, #565758);
    background: var(--color-surface, #F8F8F8);
}
.twp-order-details .order_item .product-name a {
    color: var(--color-secondary, #000000);
    font-weight: 700;
    text-decoration: none;
}
.twp-order-details .order_item .product-name a:hover { color: var(--color-primary, #E22421); }
.twp-order-details tfoot th { font-size: 0.8125rem; text-transform: none; }
.twp-order-details tfoot tr:last-child td,
.twp-order-details tfoot tr:last-child th {
    background: color-mix(in srgb, var(--color-primary, #E22421) 8%, transparent);
    color: var(--color-primary, #E22421);
    font-size: 1rem;
    font-weight: 800;
}
.twp-order-details .woocommerce-customer-details address {
    padding: 1rem 1.25rem;
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    font-style: normal;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-muted, #565758);
}

/* CTAs finais */
.twp-thankyou__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}
.twp-thankyou__actions .commerce-cta { width: auto; min-width: 220px; }

@media (max-width: 480px) {
    .twp-thankyou-hero__icon { width: 60px; height: 60px; }
    .twp-thankyou__actions .commerce-cta { width: 100%; }
    .twp-order-overview__total {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* === BLOCK:thankyou:END === */


/* === BLOCK:cart-recs:START === */
/* Carrossel premium de recomendações abaixo do cart — porte v1.45.1 */
.cart-recs {
    position: relative;
    margin: clamp(2rem, 5vw, 3rem) 0;
    padding: clamp(1.5rem, 3.5vw, 2.5rem) 0;
    background: linear-gradient(
        135deg,
        var(--color-surface, #F8F8F8) 0%,
        color-mix(in srgb, var(--color-surface, #F8F8F8) 88%, var(--color-primary, #E22421) 12%) 100%
    );
    border-top: 1px solid var(--color-border, #E5E5E5);
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    overflow: hidden;
    isolation: isolate;
}
.cart-recs::before {
    content: '';
    position: absolute;
    top: -40%; right: -10%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-accent, #FFFFFF) 18%, transparent) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.cart-recs__header {
    position: relative;
    z-index: 1;
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
    max-width: 720px;
}
.cart-recs__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
    padding: 0.375rem 0.875rem;
    background: var(--color-bg, #FFFFFF);
    color: var(--color-primary, #E22421);
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--rounded-full, 50px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.cart-recs__title {
    margin: 0 0 0.5rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.375rem, 3vw, 1.875rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-secondary, #000000);
}
.cart-recs__desc {
    margin: 0;
    color: var(--color-text-muted, #565758);
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    line-height: 1.55;
    max-width: 540px;
}

.cart-recs__viewport {
    position: relative;
    z-index: 1;
}
.cart-recs__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--rounded-full, 50px);
    border: 1px solid var(--color-border, #E5E5E5);
    background: var(--color-bg, #FFFFFF);
    color: var(--color-secondary, #000000);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.cart-recs__nav:hover:not(:disabled) {
    background: var(--color-primary, #E22421);
    color: var(--color-bg, #FFFFFF);
    border-color: var(--color-primary, #E22421);
    transform: translateY(-50%) scale(1.06);
}
.cart-recs__nav:focus-visible { outline: 3px solid var(--color-accent, #FFFFFF); outline-offset: 3px; }
.cart-recs__nav:disabled { opacity: 0.35; cursor: not-allowed; }
.cart-recs__nav--prev { left: clamp(-6px, 0.5vw, 8px); }
.cart-recs__nav--next { right: clamp(-6px, 0.5vw, 8px); }
@media (max-width: 768px) { .cart-recs__nav { display: none; } }

.cart-recs__track {
    display: flex;
    gap: clamp(0.875rem, 2vw, 1.25rem);
    list-style: none;
    margin: 0;
    padding: 0.5rem clamp(1.5rem, 3.5vw, 2.5rem) 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: clamp(1.5rem, 3.5vw, 2.5rem);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}
.cart-recs__track::-webkit-scrollbar { display: none; }
.cart-recs__track:active { cursor: grabbing; }
.cart-recs__slide {
    flex: 0 0 clamp(220px, 30vw, 280px);
    scroll-snap-align: start;
    display: flex;
}
@media (max-width: 480px) { .cart-recs__slide { flex: 0 0 92%; } }

/* Card de recomendação */
.cart-recs-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--color-bg, #FFFFFF);
    border-radius: var(--rounded-lg, 12px);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.cart-recs-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}
.cart-recs-card:hover .cart-recs-card__media img { transform: scale(1.06); }
.cart-recs-card--oos { opacity: 0.6; }

.cart-recs-card__media-link { display: block; color: inherit; text-decoration: none; position: relative; }
.cart-recs-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-surface, #F8F8F8);
}
.cart-recs-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
.cart-recs-card__placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: var(--color-text-muted, #B5A696);
}
.cart-recs-card__badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.625rem;
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    z-index: 2;
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.cart-recs-card__badge--disc {
    top: 0.625rem; left: 0.625rem;
    background: #E22421;
    box-shadow: 0 2px 6px rgba(192, 57, 43, 0.32);
}
.cart-recs-card__badge--oferta {
    top: 0.625rem; right: 0.625rem;
    background: linear-gradient(135deg, #F2994A 0%, #EB5757 100%);
    box-shadow: 0 2px 6px rgba(235, 87, 87, 0.28);
}

.cart-recs-card__body {
    padding: clamp(0.875rem, 1.6vw, 1.125rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.cart-recs-card__category {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.3125rem 0.75rem;
    background: linear-gradient(135deg, #F2994A 0%, #EB5757 100%);
    color: #FFFFFF;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
    box-shadow: 0 2px 6px rgba(235, 87, 87, 0.28);
}
.cart-recs-card__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-secondary, #000000);
}
.cart-recs-card__title a { color: inherit; text-decoration: none; }
.cart-recs-card__title a:hover { color: var(--color-primary, #E22421); }
.cart-recs-card__pricing {
    margin-top: 0.125rem;
}
.cart-recs-card__pricing .woocommerce-Price-amount {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--color-primary, #E22421);
    line-height: 1;
}
.cart-recs-card__pricing del .woocommerce-Price-amount {
    color: var(--color-text-muted, #565758);
    font-size: 0.8125rem;
    text-decoration: line-through;
}
.cart-recs-card__cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1rem;
    margin-top: auto;
    background: var(--color-primary, #E22421);
    color: var(--color-bg, #FFFFFF);
    border: 0;
    border-radius: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary, #E22421) 35%, transparent);
}
.cart-recs-card__cta:hover {
    background: var(--color-secondary, #000000);
    color: var(--color-bg, #FFFFFF);
    transform: translateY(-1px);
}
.cart-recs-card__cta:focus-visible { outline: 3px solid var(--color-accent, #FFFFFF); outline-offset: 3px; }
.cart-recs-card__oos {
    margin-top: auto;
    padding: 0.625rem 0.875rem;
    background: var(--color-surface, #F8F8F8);
    color: var(--color-text-muted, #565758);
    text-align: center;
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
}

.cart-recs__dots {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.cart-recs__dot {
    width: 8px; height: 8px;
    padding: 0; border: 0;
    background: color-mix(in srgb, var(--color-secondary, #000000) 25%, transparent);
    border-radius: var(--rounded-full, 50px);
    cursor: pointer;
    transition: width 0.22s ease, background 0.22s ease;
}
.cart-recs__dot:hover { background: color-mix(in srgb, var(--color-primary, #E22421) 50%, transparent); }
.cart-recs__dot--active {
    width: 24px;
    background: var(--color-primary, #E22421);
}
.cart-recs__dot:focus-visible { outline: 2px solid var(--color-accent, #FFFFFF); outline-offset: 3px; }
/* === BLOCK:cart-recs:END === */


/* === BLOCK:slider:START === */
/* Slider fullwidth — CPT slide + taxonomy slider_location.
   Alpine controla autoplay/dots/setas/swipe. Fade transition
   controlado por --slider-duration (vem do PHP). */
.slider {
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);  /* full-bleed: escapa container pai */
    overflow: hidden;
    background: var(--color-secondary, #000000);
    isolation: isolate;
}

.slider__track {
    position: relative;
    width: 100%;
    /* SEM altura fixa. A altura é SEMPRE definida pela imagem do slide ativo
     * (auto-ajuste à tela em qualquer largura). Era o min-height fixo que deixava
     * o fundo --color-secondary (preto) exposto quando a imagem não preenchia o box.
     * Desktop/tablet: twp-hero-desktop (1920×800). ≤768px o <source> troca para
     * twp-hero-mobile (800×1000, retrato) — em ambos a altura segue a imagem. */
}

.slider__slide {
    /* Relativo + em fluxo: o slide ATIVO dá altura ao track.
     * Slides inativos ficam display:none via Alpine x-show → não somam altura. */
    position: relative;
    display: block;
    width: 100%;
}

/* Alpine transition classes — fade premium */
.slider__slide--fade-in    { transition: opacity var(--slider-duration, 600ms) cubic-bezier(0.22, 1, 0.36, 1); }
.slider__slide--fade-start { opacity: 0; }
.slider__slide--fade-end   { opacity: 1; }

.slider__media {
    /* Imagem entra no fluxo e DEFINE a altura do slide/track. */
    position: relative;
    display: block;
    width: 100%;
    z-index: 0;
}
.slider__img {
    width: 100%;
    height: auto;          /* proporção natural da imagem → sem crop e sem buraco preto */
    display: block;
}

/* Fallback gradient quando slide sem imagem.
 * Sem <img> não há altura natural — damos a mesma proporção do hero desktop
 * (1920×800) p/ o slide não colapsar a 0px. */
.slider__media--fallback {
    aspect-ratio: 1920 / 800;
    background:
        radial-gradient(ellipse at 30% 40%,
            color-mix(in srgb, var(--color-primary, #E22421) 25%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 70%,
            color-mix(in srgb, var(--color-accent, #FFFFFF) 15%, transparent) 0%, transparent 55%),
        linear-gradient(135deg,
            var(--color-secondary, #000000) 0%,
            color-mix(in srgb, var(--color-secondary, #000000) 80%, var(--color-primary, #E22421) 20%) 100%);
}

.slider__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.slider__content {
    /* Sobrepõe a imagem (que agora define a altura do slide). */
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    /* Padding lateral acompanha EXATAMENTE o container global do tema
     * (--container-max: min(1500px, 96vw), --container-padding: clamp(12px, 2.5vw, 28px)).
     *
     * Fórmula: max(container-padding, (100vw - 1500px) / 2)
     *   • viewport ≤ 1500px → calc fica ≤0 → usa container-padding (mesmo que o .container)
     *   • viewport > 1500px → calc aumenta proporcional → texto fica alinhado à borda
     *     do "container 1500px" centralizado (mesma margem do menu, breadcrumb, footer).
     *
     * Padding vertical mantém o respiro do hero (clamp original). */
    padding-block: clamp(2rem, 6vw, 5rem);
    padding-inline: max(var(--container-padding, 16px), calc((100vw - 1500px) / 2));
    display: flex;
}
/* Desktop / tablets ≥641px — usa data-h e data-v (alinhamento padrão) */
.slider__content[data-h="left"]   { justify-content: flex-start; }
.slider__content[data-h="center"] { justify-content: center;     text-align: center; }
.slider__content[data-h="right"]  { justify-content: flex-end;   text-align: right; }
.slider__content[data-v="top"]    { align-items: flex-start; }
.slider__content[data-v="center"] { align-items: center; }
.slider__content[data-v="bottom"] { align-items: flex-end; }

/* Mobile ≤640px — sobrescreve usando data-h-mobile e data-v-mobile.
 * Em PHP, se mobile estiver vazio, herda do desktop (mesmos valores em ambos
 * data-attrs). Assim NÃO há diferença visual quando o admin não customiza. */
@media (max-width: 640px) {
    .slider__content[data-h-mobile="left"]   { justify-content: flex-start; text-align: left; }
    .slider__content[data-h-mobile="center"] { justify-content: center;     text-align: center; }
    .slider__content[data-h-mobile="right"]  { justify-content: flex-end;   text-align: right; }
    .slider__content[data-v-mobile="top"]    { align-items: flex-start; }
    .slider__content[data-v-mobile="center"] { align-items: center; }
    .slider__content[data-v-mobile="bottom"] { align-items: flex-end; }

    /* Eyebrow + CTAs também precisam acompanhar o align horizontal mobile */
    .slider__content[data-h-mobile="left"]   .slider__eyebrow { align-self: flex-start; }
    .slider__content[data-h-mobile="center"] .slider__eyebrow { align-self: center; }
    .slider__content[data-h-mobile="right"]  .slider__eyebrow { align-self: flex-end; }

    .slider__content[data-h-mobile="left"]   .slider__ctas { justify-content: flex-start; }
    .slider__content[data-h-mobile="center"] .slider__ctas { justify-content: center; }
    .slider__content[data-h-mobile="right"]  .slider__ctas { justify-content: flex-end; }
}

.slider__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(0.625rem, 1.5vw, 1rem);
    width: 100%;
}

.slider__eyebrow {
    display: inline-block;
    align-self: flex-start;
    padding: 0.375rem 0.875rem;
    background: color-mix(in srgb, currentColor 18%, transparent);
    border: 1px solid currentColor;
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
}
.slider__content[data-h="center"] .slider__eyebrow { align-self: center; }
.slider__content[data-h="right"]  .slider__eyebrow { align-self: flex-end; }

.slider__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.875rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.slider__subtitle {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: clamp(0.9375rem, 1.7vw, 1.1875rem);
    font-weight: 500;
    line-height: 1.5;
    opacity: 0.96;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.slider__desc {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: clamp(0.875rem, 1.4vw, 1rem);
    line-height: 1.55;
    opacity: 0.88;
}

/* CTAs */
.slider__ctas {
    margin-top: clamp(0.5rem, 1.5vw, 1rem);
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}
.slider__content[data-h="center"] .slider__ctas { justify-content: center; }
.slider__content[data-h="right"]  .slider__ctas { justify-content: flex-end; }

.slider__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    border: 2px solid transparent;
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
    line-height: 1;
}
.slider__cta:hover { transform: translateY(-2px); }
.slider__cta:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 3px;
}
/* ── Variantes de estilo ────────────────────────────────────────────
 * Cada variante define seus DEFAULTS. ACF pode sobrescrever individualmente
 * via style inline no <a>: style="--cta-bg:#XX; --cta-text:#YY; --cta-hover-bg:#ZZ; --cta-hover-text:#WW;"
 * (campos cta1_bg/cta1_text/cta1_hover_bg/cta1_hover_text por slide).
 * Vazio = usa o default da variante (var fallback no segundo arg). */
.slider__cta--primary {
    background: var(--cta-bg, var(--color-primary, #E22421));
    color: var(--cta-text, var(--color-bg, #FFFFFF));
    border-color: var(--cta-bg, var(--color-primary, #E22421));
}
.slider__cta--primary:hover {
    background: var(--cta-hover-bg, var(--color-secondary, #000000));
    border-color: var(--cta-hover-bg, var(--color-secondary, #000000));
    color: var(--cta-hover-text, var(--cta-text, var(--color-bg, #FFFFFF)));
}
.slider__cta--secondary {
    background: var(--cta-bg, var(--color-secondary, #000000));
    color: var(--cta-text, var(--color-bg, #FFFFFF));
    border-color: var(--cta-bg, var(--color-secondary, #000000));
}
.slider__cta--secondary:hover {
    background: var(--cta-hover-bg, var(--color-primary, #E22421));
    border-color: var(--cta-hover-bg, var(--color-primary, #E22421));
    color: var(--cta-hover-text, var(--cta-text, var(--color-bg, #FFFFFF)));
}
.slider__cta--outline {
    background: var(--cta-bg, transparent);
    color: var(--cta-text, currentColor);
    border-color: var(--cta-text, currentColor);
}
.slider__cta--outline:hover {
    background: var(--cta-hover-bg, currentColor);
    color: var(--cta-hover-text, var(--color-secondary, #000000));
    border-color: var(--cta-hover-bg, currentColor);
}
.slider__cta--ghost {
    background: var(--cta-bg, transparent);
    color: var(--cta-text, currentColor);
    border-color: transparent;
}
.slider__cta--ghost:hover {
    background: var(--cta-hover-bg, color-mix(in srgb, currentColor 16%, transparent));
    color: var(--cta-hover-text, var(--cta-text, currentColor));
}

/* Setas prev/next */
.slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: rgba(0, 0, 0, 0.45);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.18s ease, transform 0.18s ease;
}
.slider__arrow:hover {
    background: var(--color-primary, #E22421);
    transform: translateY(-50%) scale(1.06);
}
.slider__arrow:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 3px;
}
.slider__arrow--prev { left: clamp(0.5rem, 1.5vw, 1.25rem); }
.slider__arrow--next { right: clamp(0.5rem, 1.5vw, 1.25rem); }
@media (max-width: 600px) {
    .slider__arrow { width: 36px; height: 36px; }
}

/* Dots — barras pequenas (accent dourado quando active) */
.slider__dots {
    position: absolute;
    bottom: clamp(0.75rem, 2vw, 1.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.slider__dot {
    width: 28px; height: 4px;
    padding: 0; border: 0;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.18s ease, width 0.22s ease;
}
.slider__dot:hover { background: rgba(255, 255, 255, 0.75); }
.slider__dot--active {
    background: var(--color-accent, #FFFFFF);
    width: 44px;
}
.slider__dot:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .slider__slide--fade-in,
    .slider__arrow,
    .slider__cta,
    .slider__dot { transition: none !important; }
}
/* === BLOCK:slider:END === */


/* === BLOCK:a11y-global:START === */
/* ════════════════════════════════════════════════════════════════════════
   A11y global — cobre TODO o tema com regras universais de acessibilidade
   ════════════════════════════════════════════════════════════════════════ */

/* Focus default: qualquer elemento interativo sem regra própria ganha
   outline visível ao receber foco por teclado.
   :focus-visible só dispara em navegação por teclado (não em clique).        */
*:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 2px;
    border-radius: 2px;
}

/* prefers-reduced-motion universal — desliga animações/transições para
   usuários com vestibular disorder, motion sickness, etc.                    */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Suporte a forçar contraste (Windows High Contrast Mode + similares).
   Garante que ícones SVG decorativos não sumam quando o user força colors.   */
@media (forced-colors: active) {
    .skip-link,
    .commerce-cta,
    .home-cta,
    .twp-add-btn {
        border: 1px solid CanvasText;
    }
    svg[aria-hidden="true"] {
        forced-color-adjust: auto;
    }
}

/* Screen-reader-only utility class — usada por labels invisíveis em forms.   */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Pular para conteúdo deve ser sempre acima de tudo, inclusive overlays.     */
.skip-link:focus {
    z-index: 10000;
}
/* === BLOCK:a11y-global:END === */


/* === BLOCK:product-hero-fullwidth:START === */
/* ════════════════════════════════════════════════════════════════════════
   PRODUCT HERO — filmstrip horizontal + card flutuante
   ────────────────────────────────────────────────────────────────────────
   Galeria como filmstrip: TODAS as imagens lado a lado numa track flex,
   cada uma com largura fixa (--twp-slide-w). Navegação prev/next desloca
   a track via translate3d. Autoplay com pause on hover/touch. Loop infinito.
   Card sobreposto à direita (z-index acima da galeria).

   Mobile: --twp-slide-w vira 100vw → 1 imagem por vez, card empilha.
   Desktop: --twp-slide-w = clamp(...) → várias imagens visíveis.
   ════════════════════════════════════════════════════════════════════════ */

.twp-product-hero {
    --twp-slide-w: clamp(380px, 38vw, 580px);
    --twp-slide-h: clamp(380px, 38vw, 580px);
    --twp-card-w:  440px;

    /* Posição do LADO ESQUERDO do card:
         IDEAL    → 14px após a divisão entre 2º e 3º slide
                    (2 × largura_do_slide + 14px do início do filmstrip)
         FALLBACK → 1rem da borda direita (viewports onde IDEAL
                    estouraria pra fora da tela)
       min() escolhe o menor (mais à esquerda). overflow:hidden abaixo
       é defesa final contra qualquer cálculo imprevisto. */
    --twp-card-left: min(
        calc(var(--twp-slide-w) * 2 + 14px),
        calc(100vw - var(--twp-card-w) - 1rem)
    );

    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--color-surface, #F8F8F8);

    /* min-height acomoda o card flutuante DENTRO do hero. Aumentamos pra
       comportar produtos VARIÁVEIS (que adicionam dropdown, qty input,
       linha de preço variável, etc — facilmente +200px no card).
       Quando produto for simples, sobra padding embaixo (sem problema). */
    min-height: clamp(640px, 80vh, 980px);

    /* overflow-x: clip impede scroll horizontal (defesa contra cálculo
       imprevisto do --twp-card-left). overflow-y: visible deixa o card
       crescer livremente em produtos variáveis sem ser cortado pelo
       hero — JS/CSS depois do hero respeita o tamanho real do card. */
    overflow-x: clip;
    overflow-y: visible;
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

.twp-product-hero__viewport {
    position: relative;
    width: 100%;
    height: var(--twp-slide-h);
    overflow: hidden;
}

.twp-product-hero__track {
    display: flex;
    align-items: stretch;
    height: 100%;
    width: max-content;
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.twp-product-hero__slide {
    /* position: relative CRÍTICO — sem isso, .twp-product-hero__lens
       (position: absolute) ancora no ancestor positioned mais próximo
       (__viewport), e TODAS as 12 lens empilham no origin do viewport
       → bug "zoom só funciona na primeira imagem". */
    position: relative;
    flex: 0 0 var(--twp-slide-w);
    width: var(--twp-slide-w);
    height: var(--twp-slide-h);
    margin: 0;
    /* SEM padding e SEM flex-center: a <img> ocupa 100% do slide via
       width/height + object-fit:contain. Assim o getBoundingClientRect()
       da img cobre o slide INTEIRO e a lupa ativa em qualquer pixel
       (não só na pequena área central onde a imagem real renderiza). */
    padding: 0;
    background: #fff;
    border-right: none;
    overflow: hidden;
    cursor: zoom-in;
}
.twp-product-hero__slide:last-child { border-right: 0; }

.twp-product-hero__img {
    /* width/height 100% do slide → área de hover = slide inteiro.
       object-fit: contain mantém proporção da imagem original (letterbox
       branco se necessário, em vez de distorcer). Padding INTERNO via
       padding+box-sizing dá o "respiro" visual sem reduzir a hit-area. */
    width: 100%;
    height: 100%;
    padding: clamp(1rem, 2.5vw, 2rem);
    box-sizing: border-box;
    object-fit: contain;
    display: block;
    /* drag + select INTENCIONALMENTE habilitados: user pode arrastar
       a imagem pro desktop ou clicar com botão direito → "Salvar como". */
    -webkit-user-drag: auto;
    user-select: auto;
}

/* ── LUPA (zoom em hover, desktop) ─────────────────────────────────────
   Elemento sobreposto que mostra a região sob o cursor em alta resolução
   (2.5×). Posição/tamanho/background controlados via :style inline pelo
   Alpine. pointer-events: none → NÃO bloqueia o <img>, então right-click
   "Salvar imagem" e drag-to-desktop continuam funcionando normalmente.
   ────────────────────────────────────────────────────────────────────── */
.twp-product-hero__lens {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    border-radius: 50%;
    border: 3px solid var(--color-accent, #FFFFFF);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.6),
        0 12px 32px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    background-repeat: no-repeat;
    background-color: #fff;
    will-change: transform, background-position;
    z-index: 6;
    transition: opacity 0.15s ease;
}

/* x-cloak: esconde antes do Alpine inicializar (evita flash). */
[x-cloak] { display: none !important; }

/* Desktop only — lupa não faz sentido em touch. */
@media (hover: none), (max-width: 1024px) {
    .twp-product-hero__lens { display: none !important; }
    .twp-product-hero__slide { cursor: default; }
}

/* Setas prev/next */
.twp-product-hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--rounded-full, var(--radius-full, 50px));
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.18s ease, transform 0.18s ease;
}
.twp-product-hero__nav:hover {
    background: var(--color-primary, #E22421);
    transform: translateY(-50%) scale(1.08);
}
.twp-product-hero__nav:focus-visible {
    outline: 3px solid var(--color-accent, #FFFFFF);
    outline-offset: 3px;
}
.twp-product-hero__nav--prev { left: clamp(0.75rem, 2vw, 1.5rem); }
.twp-product-hero__nav--next {
    /* IMEDIATAMENTE antes do card: (left do card) − 14px de respiro
       − 44px (largura do botão). Acompanha --twp-card-left automaticamente. */
    left: calc(var(--twp-card-left) - 14px - 44px);
    right: auto;
}

/* Counter X / N */
.twp-product-hero__counter {
    position: absolute;
    bottom: clamp(0.75rem, 2vw, 1.25rem);
    left: clamp(0.75rem, 2vw, 1.5rem);
    z-index: 5;
    padding: 0.4375rem 0.875rem;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    border-radius: var(--rounded-full, var(--radius-full, 50px));
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
}

/* CARD flutuante — alinhado ao TOPO, totalmente DENTRO do hero (não
   estoura). Glass effect leve (94% opaco + backdrop blur) deixa a
   galeria por trás minimamente visível sem prejudicar a leitura.

   Posicionamento:
     top:   próximo ao topo do hero (~ 1.5rem-3rem)
     right: afastado da borda direita em desktops largos pra deixar
            parte da galeria visível ao lado (espaço respiratório). */
.twp-product-hero__card {
    position: absolute;
    top: clamp(1.5rem, 4vh, 3rem);
    /* CRÍTICO: garante que o card NUNCA cobre conteúdo abaixo do hero.
       Em produto variável (com dropdown de variations), o card pode
       crescer até ~900px. Como o card é absolute, ele não puxa o pai;
       então damos `bottom: auto; max-height` controlado e — se ainda
       assim crescer demais — scroll interno em vez de overflow visual. */
    bottom: auto;
    max-height: calc(100% - clamp(1.5rem, 4vh, 3rem) - 1rem);
    overflow-y: auto;
    scrollbar-width: thin;
    /* Posicionado pelo LADO ESQUERDO via --twp-card-left:
       14px após a divisão entre 2º e 3º slide. Fallback automático
       (1rem da borda direita) em viewports estreitos via min() interno. */
    left: var(--twp-card-left);
    right: auto;
    /* z-index BAIXO (3) — fica acima da galeria/slide (1) mas SEMPRE
       abaixo do site-header (10) pra mega-menu sobrepor ao rolar. */
    z-index: 3;
    width: var(--twp-card-w);
    max-width: calc(100% - 2rem);
    /* Transparência sutil: 94% opaco deixa "vazar" um pouco da galeria
       por trás sem comprometer contraste do texto. backdrop-filter
       borra o que está atrás pra preservar legibilidade (graceful
       degradation em browsers sem suporte: fica só rgba). */
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px) saturate(1.05);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    border: 1px solid var(--color-border, #E5E5E5);
    border-top: 4px solid var(--color-accent, #FFFFFF);
    border-radius: var(--radius-md, var(--rounded-md, 8px));
    box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.22), 0 12px 24px -12px rgba(0, 0, 0, 0.12);
    padding: clamp(1.25rem, 2.5vw, 1.875rem);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.twp-product-hero__top { margin-bottom: 0.25rem; }
.twp-product-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted, #565758);
    text-decoration: none;
    transition: color 0.18s ease, transform 0.18s ease;
}
.twp-product-hero__back:hover {
    color: var(--color-primary, #E22421);
    transform: translateX(-2px);
}

.twp-product-hero__title {
    /* font-family CORRETO: var(--font-heading) é a family.
       var(--font-h1/h2/h3) são apenas tokens de SIZE — usar em
       font-family fazia cair no fallback Georgia (errado pro DS). */
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: clamp(1.125rem, 1.6vw, 1.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-secondary, #000000);
    margin: 0;
    text-transform: uppercase;
}

.twp-product-hero__pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 0;
    padding: 0.625rem 0;
    border-top: 1px solid var(--color-border, #E5E5E5);
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.twp-product-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.6875rem;
    line-height: 1.2;
}
.twp-product-hero__pill dt {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
    margin: 0;
}
.twp-product-hero__pill dd {
    font-weight: 700;
    color: var(--color-secondary, #000000);
    margin: 0;
    letter-spacing: 0.02em;
}

.twp-product-hero__price {
    font-family: var(--font-heading, system-ui, sans-serif);
    color: var(--color-secondary, #000000);
    line-height: 1;
}
.twp-product-hero__price .price,
.twp-product-hero__price > span {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.twp-product-hero__price del {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted, #565758);
    opacity: 0.7;
    margin-right: 0.5rem;
}
.twp-product-hero__price ins {
    background: transparent;
    text-decoration: none;
}

/* PIX highlight */
.twp-product-hero__pix {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0.5rem 0.75rem;
    align-items: center;
    padding: 0.75rem 0.875rem;
    background: color-mix(in srgb, var(--color-primary, #E22421) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary, #E22421) 22%, transparent);
    border-radius: var(--rounded-sm, var(--radius-sm, 4px));
    position: relative;
}
.twp-product-hero__pix-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--rounded-sm, var(--radius-sm, 4px));
    background: var(--color-primary, #E22421);
    color: #fff;
}
.twp-product-hero__pix-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    line-height: 1.2;
}
.twp-product-hero__pix-label {
    grid-column: 1 / -1;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary, #E22421);
    display: block;
    width: 100%;
    margin-bottom: 0.125rem;
}
.twp-product-hero__pix-value {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    font-weight: 800;
    color: var(--color-primary, #E22421);
    letter-spacing: -0.01em;
}
.twp-product-hero__pix-strike {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted, #565758);
    text-decoration: line-through;
    opacity: 0.7;
}
.twp-product-hero__pix-badge {
    font-size: 0.625rem;
    font-weight: 800;
    color: #fff;
    background: var(--color-primary, #E22421);
    padding: 0.125rem 0.375rem;
    border-radius: var(--rounded-sm, var(--radius-sm, 4px));
    letter-spacing: 0.04em;
}
.twp-product-hero__pix-economy {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-text-muted, #565758);
    line-height: 1.3;
}

.twp-product-hero__installments {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text, #000000);
    letter-spacing: 0.02em;
}

.twp-product-hero__stock {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    align-self: flex-start;
    padding: 0.375rem 0.75rem;
    border-radius: var(--rounded-full, var(--radius-full, 50px));
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.twp-product-hero__stock--in {
    background: color-mix(in srgb, var(--color-primary, #E22421) 12%, transparent);
    color: var(--color-primary, #E22421);
}
.twp-product-hero__stock--out {
    background: color-mix(in srgb, #b91c1c 10%, transparent);
    color: #b91c1c;
}
.twp-product-hero__stock-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}

.twp-product-hero__buy { margin-top: 0.25rem; }

/* Override do ask-vendor QUANDO renderizado dentro do card flutuante.
   No card já temos background branco + border-top dourado, então
   removemos as decorações duplicadas e fazemos versão compacta:
   só um divisor sutil acima e padding reduzido. */
.twp-product-hero__card .ask-vendor {
    margin: 0.625rem -0.5rem -0.5rem;
    padding: 0.875rem 0.5rem 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    isolation: auto;
    gap: 0.75rem;
}
.twp-product-hero__card .ask-vendor::after { display: none; }
.twp-product-hero__card .ask-vendor__avatar {
    width: 44px;
    height: 44px;
}
.twp-product-hero__card .ask-vendor__title {
    font-size: 0.8125rem;
    margin-bottom: 0.125rem;
}
.twp-product-hero__card .ask-vendor__action {
    font-size: 0.75rem;
}
.twp-product-hero__card .ask-vendor__actions li + li::before {
    margin: 0 0.5rem;
}

/* ── BOTTOM da single product (tabs + ask + related) ───────────────────
   Card flutuante NÃO atravessa essa seção (cabe inteiro dentro do hero
   via min-height). Bottom é uma section limpa, com padding generoso,
   tipografia clara. */
.twp-product-bottom {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
    background: var(--color-bg, #FFFFFF);
}

/* ────── Responsivo ────── */
@media (max-width: 1100px) {
    .twp-product-hero {
        --twp-slide-w: clamp(320px, 50vw, 480px);
        --twp-slide-h: clamp(320px, 50vw, 480px);
        --twp-card-w:  380px;
        /* min-height generoso permanece — acomoda card no tablet também. */
    }
}

@media (max-width: 768px) {
    .twp-product-hero {
        --twp-slide-w: 100vw;
        --twp-slide-h: clamp(280px, 80vw, 420px);
        --twp-card-w:  100%;
        /* min-height removido no mobile — card empilha abaixo (static),
           hero tem altura natural do conteúdo. */
        min-height: auto;
        /* overflow-y volta a visible no mobile pra acomodar o card
           stacked abaixo do filmstrip. */
        overflow-y: visible;
    }
    .twp-product-hero__slide { border-right: 0; }
    .twp-product-hero__nav { width: 38px; height: 38px; }
    .twp-product-hero__nav--prev { left: 0.5rem; right: auto; }
    .twp-product-hero__nav--next { left: auto; right: 0.5rem; }
    .twp-product-hero__counter { bottom: 0.5rem; left: 0.5rem; }

    /* Card SAI do overlay no mobile e empilha abaixo do filmstrip.
       reset left/right pra não interferir com position: static. */
    .twp-product-hero__card {
        position: static;
        left: auto;
        right: auto;
        transform: none;
        margin: 1rem;
        width: auto;
        max-width: calc(100% - 2rem);
    }
    .twp-product-hero__title { font-size: clamp(1rem, 4vw, 1.25rem); }
    .twp-product-hero__price .price,
    .twp-product-hero__price > span { font-size: clamp(1.5rem, 6vw, 2rem); }
}

@media (prefers-reduced-motion: reduce) {
    .twp-product-hero__track,
    .twp-product-hero__nav,
    .twp-product-hero__back { transition: none !important; }
}
/* === BLOCK:product-hero-fullwidth:END === */


/* === BLOCK:toasts:START === */
/* ════════════════════════════════════════════════════════════════════════
   TOASTS — notificações estilo Shopee
   ────────────────────────────────────────────────────────────────────────
   Substitui as notices inline default do WooCommerce (.woocommerce-message
   / .woocommerce-error / .woocommerce-info) por toasts slide-in no canto
   superior direito (desktop) / topo (mobile).
   Auto-dismiss 4.5s, pausa no hover, close manual via X.
   ════════════════════════════════════════════════════════════════════════ */

/* Esconde notices WC inline (capturadas pelo JS e re-renderizadas como toast).
   !important defensivo contra regras antigas no main.css e plugins. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notices-wrapper > .woocommerce-message,
.woocommerce-notices-wrapper > .woocommerce-error,
.woocommerce-notices-wrapper > .woocommerce-info {
    display: none !important;
}

/* Stage (container fixo BOTTOM-right). Mudança de top→bottom evita que
   o toast cubra elementos do header (mini-cart, menu) ao adicionar produto.
   `top: auto` explícito garante que regra antiga cacheada (top: 1.25rem) não
   sobreviva via override de mídia ou cache do browser. */
.twp-toast-stage {
    position: fixed;
    top: auto;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    /* column-reverse: toasts novos empilham PRA CIMA do anterior (visualmente
       o mais recente fica mais próximo da borda inferior, padrão UI moderno). */
    flex-direction: column-reverse;
    gap: 0.625rem;
    pointer-events: none;
    max-width: calc(100vw - 2rem);
    width: 380px;
}

/* Toast card */
.twp-toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: #fff;
    border: 1px solid var(--color-border, #E5E5E5);
    border-left-width: 4px;
    border-radius: var(--rounded-md, var(--radius-md, 8px));
    box-shadow:
        0 12px 28px -10px rgba(0, 0, 0, 0.18),
        0 4px 12px -4px rgba(0, 0, 0, 0.08);
    font-family: var(--font-body, system-ui, sans-serif);
    color: var(--color-secondary, #000000);

    opacity: 0;
    transform: translate3d(120%, 0, 0);
    transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}
.twp-toast.is-show {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.twp-toast.is-leaving {
    opacity: 0;
    transform: translate3d(120%, 0, 0);
}

/* Ícone */
.twp-toast__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
}

/* Mensagem */
.twp-toast__msg {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-secondary, #000000);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Close button */
.twp-toast__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-text-muted, #565758);
    cursor: pointer;
    border-radius: 50%;
    opacity: 0.55;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.twp-toast__close:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--color-text-muted, #565758) 10%, transparent);
    color: var(--color-secondary, #000000);
}
.twp-toast__close:focus-visible {
    outline: 2px solid var(--color-accent, #FFFFFF);
    outline-offset: 2px;
    opacity: 1;
}

/* Variants: success (verde primary) */
.twp-toast--success { border-left-color: var(--color-primary, #E22421); }
.twp-toast--success .twp-toast__icon {
    background: color-mix(in srgb, var(--color-primary, #E22421) 12%, transparent);
    color: var(--color-primary, #E22421);
}

/* Variants: error (vermelho) */
.twp-toast--error { border-left-color: #E22421; }
.twp-toast--error .twp-toast__icon {
    background: color-mix(in srgb, #E22421 12%, transparent);
    color: #E22421;
}

/* Variants: info (azul muted) */
.twp-toast--info { border-left-color: #2563EB; }
.twp-toast--info .twp-toast__icon {
    background: color-mix(in srgb, #2563EB 12%, transparent);
    color: #2563EB;
}

/* Mobile: bottom-center full-width, slide-from-bottom.
   `!important` em top/bottom porque o browser mobile pode manter `top:` da
   regra antiga via cache parcial — força ancoragem na base da viewport. */
@media (max-width: 640px) {
    .twp-toast-stage {
        top: auto !important;
        bottom: 0.625rem !important;
        right: 0.625rem;
        left: 0.625rem;
        width: auto;
        max-width: none;
    }
    .twp-toast {
        /* Slide vem de BAIXO no mobile (espelho do desktop bottom-right) */
        transform: translate3d(0, 120%, 0);
        transition: opacity 0.28s ease, transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .twp-toast.is-show     { transform: translate3d(0, 0, 0); }
    .twp-toast.is-leaving  { transform: translate3d(0, 120%, 0); }
}

/* Reduced motion: sem slide, só fade */
@media (prefers-reduced-motion: reduce) {
    .twp-toast,
    .twp-toast__close { transition: opacity 0.2s ease !important; }
    .twp-toast,
    .twp-toast.is-show,
    .twp-toast.is-leaving { transform: none !important; }
}
/* === BLOCK:toasts:END === */


/* === BLOCK:shop-promo-sections:START === */
/* ════════════════════════════════════════════════════════════════════════
   SEÇÕES PROMOCIONAIS DA LOJA (archive-product premium)
     1. twp-shop-hero       — banner escuro com imagem + CTA (ACF)
     2. twp-shop-shortcuts  — atalhos horizontais de categorias (ACF)
     3. twp-shop-offers     — "Ofertas por tempo limitado" (on_sale dinâmico)
     4. twp-shop-kits       — kits promocionais fundo dourado (ACF)
     5. twp-shop-mostviewed — produtos mais acessados (post_views_count)
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO PROMOCIONAL ──────────────────────────────────────────── */
.twp-shop-hero {
    position: relative;
    background: var(--color-shop-hero-bg, var(--color-secondary, #000000));
    color: #fff;
    overflow: hidden;
    margin: 0 calc(50% - 50vw);
}
.twp-shop-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    min-height: clamp(280px, 35vw, 420px);
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    z-index: 2;
}
.twp-shop-hero__content { max-width: 540px; position: relative; z-index: 3; }
.twp-shop-hero__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.375rem 0.75rem;
    background: color-mix(in srgb, var(--color-accent, #FFFFFF) 18%, transparent);
    color: var(--color-accent, #FFFFFF);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: var(--rounded-full, var(--radius-full, 50px));
    border: 1px solid color-mix(in srgb, var(--color-accent, #FFFFFF) 30%, transparent);
}
.twp-shop-hero__title {
    margin: 0 0 1rem;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: #fff;
}
.twp-shop-hero__subtitle {
    margin: 0 0 1.5rem;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    line-height: 1.5;
    color: color-mix(in srgb, #fff 80%, transparent);
}
.twp-shop-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 48px;
    padding: 0 1.5rem;
    background: var(--color-primary, #E22421);
    color: #fff;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--color-primary, #E22421) 50%, transparent);
}
.twp-shop-hero__cta:hover {
    background: var(--color-accent, #FFFFFF);
    transform: translateY(-2px);
}
.twp-shop-hero__media {
    flex-shrink: 0;
    width: clamp(280px, 38vw, 480px);
    position: relative;
    z-index: 3;
}
.twp-shop-hero__media img {
    width: 100%; height: auto; display: block;
    filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.42));
}
.twp-shop-hero__grid-bg {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 1;
}
.twp-shop-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    filter: blur(60px);
}
.twp-shop-hero__orb--1 {
    top: -10%; right: 30%;
    width: 280px; height: 280px;
    background: color-mix(in srgb, var(--color-primary, #E22421) 40%, transparent);
}
.twp-shop-hero__orb--2 {
    bottom: -15%; left: 10%;
    width: 220px; height: 220px;
    background: color-mix(in srgb, var(--color-accent, #FFFFFF) 30%, transparent);
}
@media (max-width: 768px) {
    .twp-shop-hero__inner { grid-template-columns: 1fr; text-align: center; }
    .twp-shop-hero__media { margin: 0 auto; width: 240px; }
    .twp-shop-hero__cta { margin: 0 auto; }
}

/* ── 2. ATALHOS DE CATEGORIAS ─────────────────────────────────────── */
.twp-shop-shortcuts {
    background: var(--color-bg, #FFFFFF);
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    padding: clamp(1rem, 2vw, 1.5rem) 0;
}
.twp-shop-shortcuts__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}
.twp-shop-shortcuts__link {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: var(--rounded-md, var(--radius-md, 8px));
    color: var(--color-secondary, #000000);
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.twp-shop-shortcuts__link:hover {
    background: #fff;
    border-color: var(--color-primary, #E22421);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.12);
}
.twp-shop-shortcuts__media {
    width: 48px; height: 48px;
    overflow: hidden;
    border-radius: var(--rounded-sm, var(--radius-sm, 4px));
    background: #fff;
    display: flex; align-items: center; justify-content: center;
}
.twp-shop-shortcuts__media img { width: 100%; height: 100%; object-fit: cover; }
.twp-shop-shortcuts__title {
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.twp-shop-shortcuts__arrow { color: var(--color-primary, #E22421); flex-shrink: 0; }

/* ── 3. OFERTAS POR TEMPO LIMITADO ───────────────────────────────── */
.twp-shop-offers {
    margin: clamp(2rem, 4vw, 3rem) calc(50% - 50vw) 0;
    padding: clamp(2rem, 4vw, 3rem) 0;
    background: var(--color-secondary, #000000);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.twp-shop-offers::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--color-primary, #E22421) 35%, transparent), transparent 50%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--color-accent, #FFFFFF) 22%, transparent), transparent 50%);
    pointer-events: none;
}
.twp-shop-offers__head {
    position: relative; z-index: 1;
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
    text-align: center;
}
.twp-shop-offers__eyebrow {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: color-mix(in srgb, var(--color-accent, #FFFFFF) 18%, transparent);
    color: var(--color-accent, #FFFFFF);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: var(--rounded-full, var(--radius-full, 50px));
    margin-bottom: 0.75rem;
}
.twp-shop-offers__title {
    margin: 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}
.twp-shop-offers__track {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.875rem, 1.6vw, 1.25rem);
}
@media (max-width: 1100px) { .twp-shop-offers__track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
    .twp-shop-offers__track {
        grid-template-columns: repeat(2, 78vw);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .twp-shop-offers__track > * { scroll-snap-align: start; }
    .twp-shop-offers__track::-webkit-scrollbar { display: none; }
}

/* ── 4. KITS PROMOCIONAIS — carrossel premium (full-bleed accent) ───
 * Cards verticais com imagem grande + título + preço + CTA "Ver oferta".
 * Mobile: 1.2 cards visíveis (scroll-snap). Desktop: 4 cards visíveis.
 * Setas prev/next reaproveitam factory `twpNovidadesCarousel` (genérica). */
.twp-shop-kits {
    position: relative;
    margin: clamp(1.5rem, 3vw, 2.5rem) calc(50% - 50vw) 0;
    padding: clamp(2rem, 4vw, 3rem) 0;
    background: linear-gradient(135deg, var(--color-secondary, #000000) 0%, color-mix(in srgb, var(--color-secondary, #000000) 70%, #000) 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.twp-shop-kits__inner {
    position: relative;
    z-index: 1;
}
.twp-shop-kits__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
    flex-wrap: wrap;
}
.twp-shop-kits__eyebrow {
    display: block;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent, #FFFFFF);
    margin-bottom: 0.25rem;
}
.twp-shop-kits__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
.twp-shop-kits__title svg { color: var(--color-accent, #FFFFFF); flex-shrink: 0; }

.twp-shop-kits__nav { display: flex; gap: 0.5rem; }
.twp-shop-kits__nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.twp-shop-kits__nav-btn:hover {
    background: var(--color-accent, #FFFFFF);
    border-color: var(--color-accent, #FFFFFF);
    color: var(--color-secondary, #000000);
}

.twp-shop-kits__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: clamp(0.875rem, 1.5vw, 1.25rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scroll-behavior: smooth;
}
.twp-shop-kits__track::-webkit-scrollbar { display: none; }

/* Mobile: 1.2 cards visíveis */
@media (max-width: 640px) {
    .twp-shop-kits__track { grid-auto-columns: 80vw; }
}
/* Tablet: 2 cards */
@media (min-width: 641px) and (max-width: 900px) {
    .twp-shop-kits__track { grid-auto-columns: calc(50% - 0.625rem); }
}
/* Desktop sm: 3 cards */
@media (min-width: 901px) and (max-width: 1199px) {
    .twp-shop-kits__track { grid-auto-columns: calc(33.333% - 0.833rem); }
}
/* Desktop lg: 4 cards */
@media (min-width: 1200px) {
    .twp-shop-kits__track { grid-auto-columns: calc(25% - 0.9375rem); }
}

.twp-shop-kits__slide {
    scroll-snap-align: start;
    min-width: 0;
}
.twp-shop-kits__link {
    display: flex;
    flex-direction: column;
    background: #fff;
    color: var(--color-secondary, #000000);
    text-decoration: none;
    border-radius: var(--rounded-md, var(--radius-md, 8px));
    overflow: hidden;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.twp-shop-kits__link:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.45);
}
.twp-shop-kits__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--color-surface, #F8F8F8);
    overflow: hidden;
}
.twp-shop-kits__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.twp-shop-kits__link:hover .twp-shop-kits__media img { transform: scale(1.04); }
.twp-shop-kits__media-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-surface, #F8F8F8) 0%, var(--color-border, #E5E5E5) 100%);
}
.twp-shop-kits__badge {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    padding: 0.25rem 0.5rem;
    background: var(--color-accent, #FFFFFF);
    color: var(--color-secondary, #000000);
    font-family: var(--font-body, sans-serif);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 3px;
}
.twp-shop-kits__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem 1.125rem;
    flex: 1;
}
.twp-shop-kits__name {
    margin: 0;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-secondary, #000000);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.twp-shop-kits__price {
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-primary, #E22421);
    line-height: 1.2;
}
.twp-shop-kits__price del { font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted, #565758); opacity: 0.7; margin-right: 0.25rem; }
.twp-shop-kits__price ins { text-decoration: none; }
.twp-shop-kits__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: auto;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary, #E22421);
    transition: gap 0.18s ease;
}
.twp-shop-kits__link:hover .twp-shop-kits__cta { gap: 0.625rem; }

/* ── 5. MAIS ACESSADOS ────────────────────────────────────────────── */
.twp-shop-mostviewed { padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--color-bg, #FFFFFF); }
.twp-shop-mostviewed__head { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.twp-shop-mostviewed__eyebrow {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent, #FFFFFF);
}
.twp-shop-mostviewed__title {
    margin: 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--color-secondary, #000000);
    letter-spacing: -0.02em;
}
.twp-shop-mostviewed__track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(0.875rem, 1.6vw, 1.25rem);
}
@media (max-width: 1280px) { .twp-shop-mostviewed__track { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .twp-shop-mostviewed__track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    /* Carrossel horizontal de UMA linha só (não quebra em 2 linhas).
       grid-auto-flow:column + auto-columns substitui o template-columns
       fixo — assim qualquer quantidade de items fica numa fileira só,
       com scroll-snap pra navegação táctil natural. */
    .twp-shop-mostviewed__track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 70vw;
        grid-template-columns: none;
        gap: 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        scroll-padding-left: var(--container-padding, clamp(12px, 2.5vw, 28px));
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }
    .twp-shop-mostviewed__track > * {
        scroll-snap-align: start;
        min-width: 0;
    }
    .twp-shop-mostviewed__track::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .twp-shop-hero__cta,
    .twp-shop-shortcuts__link,
    .twp-shop-kits__link { transition: none !important; }
}
/* === BLOCK:shop-promo-sections:END === */

/* === BLOCK:novidades-carousel:START ============================================
 * Carrossel Novidades (full-bleed escuro/vermelho com cards premium).
 * Mobile: 1.1 cards visíveis (90vw card + ~10% next visível via scroll-snap).
 * Desktop ≥ 1024px: 3 cards visíveis.
 * Vars locais (override via inline style no <section>):
 *   --twp-novidades-bg : url() do banner de fundo (carro etc.)
 * ============================================================================ */
.twp-novidades {
    position: relative;
    margin: clamp(2rem, 5vw, 3.5rem) 0;
    padding: clamp(2rem, 5vw, 3.25rem) 0;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(120deg, #1a0a0a 0%, #4a0f10 55%, #E22421 100%);
}

/* Variante cart-recs — cola no footer (sem gap entre carrossel e rodapé) */
.twp-novidades.twp-cart-recs { margin-bottom: 0; }
body.woocommerce-cart .site-footer,
body.woocommerce-checkout .site-footer { margin-top: 0; }

/* Variante upsells (single-product) — full-bleed pra escapar do
 * `<div class="container">` que envolve `woocommerce_after_single_product_summary`.
 * Truque clássico: width:100vw + margin-left negativo de 50vw. */
.twp-novidades.twp-upsells {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.twp-novidades__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--twp-novidades-bg, none);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    opacity: 0.35;
    mix-blend-mode: lighten;
    pointer-events: none;
}
.twp-novidades__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 8, 8, 0.85) 0%, rgba(60, 15, 16, 0.55) 50%, rgba(192, 57, 43, 0.25) 100%);
}
.twp-novidades__inner {
    position: relative;
    z-index: 1;
}

/* Header (eyebrow + título + nav) */
.twp-novidades__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
    flex-wrap: wrap;
}
.twp-novidades__eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}
.twp-novidades__title {
    font-family: var(--font-heading, 'Inter', sans-serif);
    font-size: clamp(1.875rem, 4.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
    text-transform: uppercase;
    color: #fff;
}
.twp-novidades__nav {
    display: flex;
    gap: 0.5rem;
}
.twp-novidades__nav-btn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.twp-novidades__nav-btn:hover {
    background: #fff;
    color: #E22421;
    border-color: #fff;
}
.twp-novidades__nav-btn:active { transform: scale(0.94); }

/* Track horizontal scroll-snap */
.twp-novidades__track {
    display: flex;
    gap: clamp(0.875rem, 1.5vw, 1.25rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
}
.twp-novidades__track::-webkit-scrollbar { display: none; }

/* Slide wrapper — controla largura/snap; o card vem de content-product.php */
.twp-novidades__slide {
    flex: 0 0 90%;
    max-width: 90%;
    scroll-snap-align: start;
    display: flex;
}
.twp-novidades__slide > .listing-card,
.twp-novidades__slide > .product {
    width: 100%;
    margin: 0;
}

/* Desktop XL ≥ 1280px → 5 cards (mesmo tamanho do loop archive 4cols + 1) */
@media (min-width: 1280px) {
    .twp-novidades__slide {
        flex: 0 0 calc((100% - 4 * clamp(0.875rem, 1.5vw, 1.25rem)) / 5);
        max-width: calc((100% - 4 * clamp(0.875rem, 1.5vw, 1.25rem)) / 5);
    }
    .twp-novidades__track {
        scroll-snap-type: none;
        overflow: hidden;
    }
}

/* Laptop 1024-1279px → 4 cards visíveis */
@media (min-width: 1024px) and (max-width: 1279px) {
    .twp-novidades__slide {
        flex: 0 0 calc((100% - 3 * clamp(0.875rem, 1.5vw, 1.25rem)) / 4);
        max-width: calc((100% - 3 * clamp(0.875rem, 1.5vw, 1.25rem)) / 4);
    }
    .twp-novidades__track {
        scroll-snap-type: none;
        overflow: hidden;
    }
}

/* Tablet 760-1023px → 3 cards */
@media (min-width: 760px) and (max-width: 1023px) {
    .twp-novidades__slide {
        flex: 0 0 calc((100% - 2 * clamp(0.875rem, 1.5vw, 1.25rem)) / 3);
        max-width: calc((100% - 2 * clamp(0.875rem, 1.5vw, 1.25rem)) / 3);
    }
}

/* Tablet pequeno 640-759px → ~2 cards */
@media (min-width: 640px) and (max-width: 759px) {
    .twp-novidades__slide {
        flex: 0 0 calc(55% - 0.5rem);
        max-width: calc(55% - 0.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .twp-novidades__track { scroll-behavior: auto; }
}
/* === BLOCK:novidades-carousel:END ============================================ */



/* === BLOCK:brands:START =======================================
 * Página de índice de marcas (template page-marcas.php).
 * Estrutura: hero compacto + grid premium de cards de marca.
 * ============================================================ */

/* Hero */
.brands-main { background: var(--color-bg, #FFFFFF); }
.brands-hero {
    position: relative;
    background: linear-gradient(135deg, var(--color-secondary, #000000) 0%, color-mix(in srgb, var(--color-secondary, #000000) 80%, #000) 100%);
    color: #fff;
    padding: clamp(2rem, 5vw, 3.25rem) 0;
    overflow: hidden;
}
.brands-hero__bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--color-accent, #FFFFFF) 22%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--color-primary, #E22421) 25%, transparent) 0%, transparent 60%);
    pointer-events: none;
}
.brands-hero__inner { position: relative; z-index: 1; }
.brands-hero__title {
    margin: 0 0 0.625rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.625rem, 3.4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
}
.brands-hero__lead {
    margin: 0 0 0.75rem;
    max-width: 720px;
    font-size: clamp(0.875rem, 1.4vw, 1rem);
    line-height: 1.5;
    color: color-mix(in srgb, #fff 88%, transparent);
}
.brands-hero__lead p { margin: 0 0 0.5rem; }
.brands-hero__lead p:last-child { margin-bottom: 0; }
.brands-hero__meta {
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    color: var(--color-accent, #FFFFFF);
}
.brands-hero__meta strong { color: #fff; font-weight: 800; }

/* Wrap */
.brands-wrap {
    padding: clamp(2rem, 5vw, 3.5rem) var(--container-padding);
}

/* Grid */
.brands-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.875rem, 1.6vw, 1.25rem);
}
@media (max-width: 1100px) { .brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .brands-grid { grid-template-columns: 1fr; } }

/* Card */
.brand-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.brand-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -14px rgba(15, 23, 42, 0.22), 0 4px 12px -4px rgba(15, 23, 42, 0.10);
    border-color: color-mix(in srgb, var(--color-primary, #E22421) 50%, var(--color-border, #E5E5E5));
}

.brand-card__media {
    aspect-ratio: 16 / 10;
    background: var(--color-surface, #F8F8F8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.brand-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1.25rem;
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.brand-card:hover .brand-card__img { transform: scale(1.05); }

.brand-card__initial {
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--color-secondary, #000000);
    opacity: 0.18;
    line-height: 1;
    user-select: none;
}
.brand-card--no-thumb .brand-card__media {
    background: linear-gradient(135deg, var(--color-surface, #F8F8F8) 0%, color-mix(in srgb, var(--color-accent, #FFFFFF) 14%, var(--color-surface, #F8F8F8)) 100%);
}

.brand-card__body {
    padding: 0.875rem 1rem 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    flex: 1;
}
.brand-card__name {
    font-family: var(--font-heading, sans-serif);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.brand-card__count {
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
    font-weight: 500;
}

.brand-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.6875rem 1rem;
    margin-top: auto;
    background: var(--color-surface, #F8F8F8);
    color: var(--color-secondary, #000000);
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-top: 1px solid color-mix(in srgb, var(--color-border, #E5E5E5) 70%, transparent);
    transition: background 0.18s ease, color 0.18s ease, gap 0.18s ease;
}
.brand-card:hover .brand-card__cta {
    background: var(--color-primary, #E22421);
    color: #fff;
    gap: 0.5625rem;
}
.brand-card__cta svg { flex-shrink: 0; }

/* Estado vazio */
.brands-empty {
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4rem) 1rem;
    background: var(--color-surface, #F8F8F8);
    color: var(--color-text-muted, #565758);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.brands-empty svg { opacity: 0.35; }
.brands-empty__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-secondary, #000000);
}
.brands-empty__lead { margin: 0; max-width: 480px; font-size: 0.9375rem; }
/* === BLOCK:brands:END ========================================= */

/* === BLOCK:mercadopago-checkout-override:START =================================
   Padroniza frontend do Mercado Pago (woocommerce-mercadopago) + Pix Gateway no
   checkout com o design do tema. Removemos bordas/padding excessivos, alinhamos
   inputs com o resto do form, neutralizamos cores fora do DS.

   Iframes da MP (secure-fields.mercadopago.com — número do cartão, validade, CVV)
   NÃO podem ser estilizados internamente — sandbox de PCI compliance. Só o
   container em volta é nosso.

   Especificidade: usamos seletores curtos e !important seletivo nos pontos onde
   o plugin injeta style inline (ex: wallet button) ou onde o plugin tem CSS
   próprio com peso maior.
=============================================================================== */

/* ── Wrapper de cada método (payment_box) — substitui borda/setinha default WC ──
   bg transparente: herda do .commerce-summary parent (cream), evita "card branco"
   destacado que ficava fora do padrão visual do resumo. */
.commerce-payment .payment_box {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--color-border, #E5E5E5);
    border-radius: 0;
    padding: 1rem 0 0;
    margin: 0.875rem 0 0;
    box-shadow: none;
    color: var(--color-text, #000000);
}
.commerce-payment .payment_box::before,
.twp-checkout__aside .payment_box::before {
    display: none;
}

/* ── MP Custom — container do form (limpa wrapper redundante) ────────────────── */
.commerce-payment #mp-checkout-custom-root,
.commerce-payment .mp-checkout-custom-container {
    background: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border: 0;
}

/* Bandeiras dos cartões — centralizado, gap consistente */
.commerce-payment .mp-checkout-custom-card-flags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
}
.commerce-payment .mp-checkout-custom-card-flags img {
    height: 20px;
    width: auto;
    opacity: 0.9;
}

/* ── Card "Modo Teste" — neutraliza laranja chamativo do plugin ─────────────── */
.commerce-payment .mp-test-mode-card {
    background: color-mix(in srgb, var(--color-warning, #F59E0B) 8%, var(--color-bg, #FFFFFF));
    border: 1px solid color-mix(in srgb, var(--color-warning, #F59E0B) 25%, transparent);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    margin: 0 0 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-direction: column;
}
.commerce-payment .mp-test-mode-card-content {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.commerce-payment .mp-test-mode-badge {
    background: var(--color-warning, #F59E0B);
    color: #fff;
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 800;
    flex-shrink: 0;
}
.commerce-payment .mp-test-mode-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-secondary, #000000);
    margin: 0;
}
.commerce-payment .mp-test-mode-description {
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
    margin: 0;
    line-height: 1.45;
}
.commerce-payment .mp-test-mode-link {
    color: var(--color-primary, #E22421);
    text-decoration: underline;
}

/* ── Wallet button "Pague com 1 toque" — card mais discreto ──────────────────── */
.commerce-payment .mp-wallet-button-container-wrapper {
    margin: 0 0 1rem;
}
.commerce-payment .mp-wallet-button-container {
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 8px;
    padding: 0.875rem;
}
.commerce-payment .mp-wallet-button-title {
    font-size: 0.8125rem;
    color: var(--color-secondary, #000000);
    margin-bottom: 0.625rem;
    text-align: center;
    line-height: 1.4;
}
.commerce-payment .mp-wallet-button-title span br {
    display: none;
}
/* Botão amarelo do MP — preserva cor da marca, ajusta tamanho */
.commerce-payment #mp-wallet-button {
    height: 40px !important;
    border-radius: 6px !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 0.8125rem !important;
}
.commerce-payment .mp-privacy-policy-footer {
    font-size: 0.6875rem;
    color: var(--color-text-muted, #565758);
    text-align: center;
    margin: 0.5rem 0 0;
}
.commerce-payment .mp-privacy-policy-footer a {
    color: var(--color-primary, #E22421);
}

/* ── Form do cartão (inputs + iframes) ───────────────────────────────────────── */
.commerce-payment .mp-checkout-custom-card-form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin: 0;
}
.commerce-payment .mp-checkout-custom-card-row {
    margin: 0;
}
.commerce-payment .mp-checkout-custom-dual-column-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}
.commerce-payment .mp-checkout-custom-card-column {
    width: 100%;
    min-width: 0;
}

/* Label uniforme (web component <input-label> + .mp-input-label) */
.commerce-payment input-label,
.commerce-payment .mp-input-label {
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
    margin: 0 0 0.375rem;
    display: block;
}
.commerce-payment .mp-input-label b {
    color: var(--color-danger, #E22421) !important;
    font-weight: 700;
}

/* Container dos inputs (iframe MP secure-fields) — alinha com inputs do tema */
.commerce-payment .mp-checkout-custom-card-input,
.commerce-payment .mp-checkout-custom-security-code-input {
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 6px;
    height: 42px;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.commerce-payment .mp-checkout-custom-card-input:focus-within,
.commerce-payment .mp-checkout-custom-security-code-input:focus-within {
    border-color: var(--color-primary, #E22421);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #E22421) 15%, transparent);
}
.commerce-payment .mp-checkout-custom-card-input iframe,
.commerce-payment .mp-checkout-custom-security-code-input iframe {
    height: 100% !important;
    width: 100% !important;
    border: 0;
    background: transparent;
    display: block;
}

/* Input do nome do titular (input real, não iframe) */
.commerce-payment input.mp-card-holder-name {
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 6px;
    height: 42px;
    padding: 0 0.75rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    color: var(--color-text, #000000);
    width: 100%;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.commerce-payment input.mp-card-holder-name:focus {
    outline: none;
    border-color: var(--color-primary, #E22421);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #E22421) 15%, transparent);
}
.commerce-payment input.mp-card-holder-name::placeholder {
    color: var(--color-form-placeholder, #565758);
    opacity: 0.45;
}

/* CVV (security code) — tooltip à direita */
.commerce-payment .mp-checkout-custom-security-code-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.commerce-payment .mp-checkout-custom-security-code-input {
    flex: 1;
    min-width: 0;
}
.commerce-payment .mp-checkout-custom-security-code-tooltip {
    width: 24px;
    height: 24px;
    line-height: 22px;
    border-radius: 50%;
    border: 1px solid var(--color-border, #E5E5E5);
    background: var(--color-bg, #FFFFFF);
    color: var(--color-text-muted, #565758);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
    cursor: help;
    flex-shrink: 0;
}

/* Helpers (info/erro) abaixo do input */
.commerce-payment .mp-helper {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0.375rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
}
.commerce-payment .mp-helper-icon {
    flex-shrink: 0;
    margin-top: 2px;
}
.commerce-payment .mp-helper-message.info {
    color: var(--color-text-muted, #565758);
}
.commerce-payment .mp-helper-message.error {
    color: var(--color-danger, #E22421);
    font-weight: 500;
}

/* Selects (parcelas, banco emissor) — visual igual aos inputs */
.commerce-payment .mp-custom-checkout-select-input,
.commerce-payment .mp-input-select-input select {
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 6px;
    height: 42px;
    padding: 0 2.25rem 0 0.75rem;
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    color: var(--color-text, #000000);
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C4033' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    cursor: pointer;
}
.commerce-payment .mp-custom-checkout-select-input:focus,
.commerce-payment .mp-input-select-input select:focus {
    outline: none;
    border-color: var(--color-primary, #E22421);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #E22421) 15%, transparent);
}
.commerce-payment .mp-checkout-custom-installments-select-container {
    margin-top: 0.875rem;
}

/* CPF/CNPJ field (input-document — combo select + input) */
.commerce-payment .mp-input {
    display: flex;
    background: var(--color-bg, #FFFFFF);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 6px;
    height: 42px;
    overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.commerce-payment .mp-input:focus-within {
    border-color: var(--color-primary, #E22421);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #E22421) 15%, transparent);
}
.commerce-payment .mp-document-select {
    background: transparent;
    border: 0;
    padding: 0 0.5rem 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text, #000000);
    cursor: pointer;
    appearance: none;
}
.commerce-payment .mp-vertical-line {
    width: 1px;
    background: var(--color-border, #E5E5E5);
    height: 65%;
    align-self: center;
    flex-shrink: 0;
}
.commerce-payment .mp-document {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text, #000000);
    outline: none;
    font-family: var(--font-body, sans-serif);
}

/* ── Pix Gateway — limpa fundo lilás default e alinha com surface do tema ──── */
.commerce-payment .payment_box.payment_method_pix_gateway {
    /* Recebe estilo base do .payment_box acima — surface bg + border. */
}
.commerce-payment .payment_box.payment_method_pix_gateway p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text, #000000);
}

/* ── Mobile (≤640px): compactar paddings, single column nos campos duais ───── */
@media (max-width: 640px) {
    .commerce-payment .payment_box {
        padding: 1rem;
    }
    .commerce-payment .mp-checkout-custom-dual-column-row {
        grid-template-columns: 1fr;
    }
    .commerce-payment .mp-test-mode-card,
    .commerce-payment .mp-wallet-button-container {
        padding: 0.625rem 0.75rem;
    }
}

/* === BLOCK:mercadopago-checkout-override:END ================================= */

/* === BLOCK:cart-checkout-mobile:START =========================================
   Reforço de responsividade pra carrinho e checkout em telas pequenas.
   Foco: impedir overflow horizontal, empilhar colunas, encolher paddings
   e fontes, garantir que todos os controles fiquem clicáveis e visíveis
   em viewports ≤640px. Usa containment via `min-width: 0` em flex children
   e `max-width: 100%` em mídia.
=============================================================================== */

/* ── Defesas globais contra overflow horizontal no checkout/cart ──────────── */
.twp-checkout,
.twp-checkout__layout,
.commerce-items,
.commerce-summary,
.twp-checkout__aside,
.twp-checkout__main,
.commerce-layout__main {
    min-width: 0;
    max-width: 100%;
}
.twp-checkout *,
.twp-cart-form *,
.commerce-summary * {
    min-width: 0;  /* impede flex children de explodir o container */
}
/* Imagens sempre dentro do container */
.commerce-item__thumb img,
.commerce-review__thumb img,
.twp-checkout img,
.twp-cart-form img {
    max-width: 100%;
    height: auto;
}

/* ──── BREAKPOINT 768px (tablet) ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .twp-checkout { padding-top: 0.75rem; }
    .twp-checkout__main { gap: 0.75rem; }
    .twp-checkout__aside { margin-top: 1rem; }

    .commerce-summary {
        padding: 1rem;
    }
    .commerce-summary__title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.625rem;
    }
}

/* ──── BREAKPOINT 640px (mobile) ─────────────────────────────────────────── */
@media (max-width: 640px) {

    /* Containers gerais */
    .twp-checkout { padding: 0.5rem 0 0; }
    .twp-checkout__layout { gap: 0.875rem; }
    .twp-checkout__main { gap: 0.625rem; }

    .commerce-summary {
        padding: 0.875rem;
        border-radius: 4px;
    }
    .commerce-summary__title,
    .commerce-summary__head .commerce-summary__title {
        font-size: 0.9375rem;
    }
    .commerce-summary__row {
        font-size: 0.8125rem;
        flex-wrap: nowrap;
    }
    .commerce-summary__row span:first-child { min-width: 0; flex: 1; }
    .commerce-summary__total {
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding-top: 0.75rem;
        margin-top: 0.5rem;
    }
    .commerce-summary__total-label { font-size: 0.8125rem; }
    .commerce-summary__total-value { font-size: 1.125rem; }

    /* ── CARRINHO: items empilhados, qty/preço compactos ────────────────── */
    .commerce-items {
        gap: 0.625rem;
    }
    .commerce-item {
        flex-wrap: wrap;
        padding: 0.75rem;
        gap: 0.625rem;
    }
    .commerce-item__thumb {
        width: 72px;
        height: 72px;
        flex-shrink: 0;
    }
    .commerce-item__info {
        flex: 1 1 calc(100% - 84px);
        min-width: 0;
    }
    .commerce-item__name {
        font-size: 0.875rem;
        line-height: 1.3;
    }
    .commerce-item__brand {
        font-size: 0.6875rem;
    }
    .commerce-item__pricing {
        flex-wrap: wrap;
        gap: 0.25rem 0.625rem;
    }
    .commerce-item__price {
        font-size: 0.9375rem;
    }
    .commerce-item__pix {
        font-size: 0.75rem;
    }
    /* Linha qty + remove: full-width abaixo do thumb+info no mobile */
    .commerce-item__qty,
    .twp-cart-qty {
        flex: 1 1 100%;
        order: 3;
        justify-content: space-between;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px dashed var(--color-border, #E5E5E5);
    }
    .twp-cart-qty__btn {
        width: 32px;
        height: 32px;
    }
    .twp-cart-qty__input {
        width: 48px;
        font-size: 0.875rem;
    }

    /* ── CHECKOUT: form-checkout fields ─────────────────────────────────── */
    .twp-checkout .commerce-layout__head {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .twp-checkout .commerce-layout__title {
        font-size: 1.125rem;
    }
    .twp-checkout form.checkout .form-row,
    .twp-checkout form#order_review .form-row {
        width: 100% !important;
        float: none !important;
        margin-bottom: 0.625rem !important;
    }
    .twp-checkout .form-row-first,
    .twp-checkout .form-row-last {
        width: 100% !important;
    }

    /* ── REVIEW ORDER (checkout summary) ────────────────────────────────── */
    .commerce-review {
        font-size: 0.8125rem;
    }
    .commerce-review__row {
        flex-wrap: nowrap;
    }
    .commerce-review__thumb {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
    }
    .commerce-review__info { min-width: 0; }
    .commerce-review__title {
        font-size: 0.8125rem;
        line-height: 1.3;
    }
    .commerce-review__total {
        font-size: 0.875rem;
        white-space: nowrap;
    }
    .commerce-review__line {
        font-size: 0.8125rem;
    }
    .commerce-review__line--total {
        font-size: 1rem;
    }

    /* ── PAYMENT methods (Pix + MP) — paddings menores, flex-wrap labels ── */
    .commerce-payment { margin-top: 1rem; }
    .commerce-payment__head {
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        margin-bottom: 0.75rem;
    }
    .commerce-payment__head .commerce-checkout-section__title {
        font-size: 0.9375rem;
    }
    .commerce-payment__head .commerce-checkout-section__lead {
        font-size: 0.6875rem;
    }
    .wc_payment_methods { gap: 0.375rem; }
    .wc_payment_method {
        padding: 0.75rem 0.875rem;
    }
    .commerce-payment__option {
        gap: 0.5rem;
        flex-wrap: nowrap;
    }
    .commerce-payment__label {
        flex: 1 1 auto;
        gap: 0.5rem;
        flex-wrap: nowrap;
        min-width: 0;
    }
    .commerce-payment__title {
        font-size: 0.875rem;
        flex: 1 1 auto;
        min-width: 0;
    }
    .commerce-payment__label img {
        max-height: 18px;
        flex-shrink: 0;
    }

    /* Box do payment (interior expandido — MP form + Pix info) */
    .commerce-payment .payment_box {
        padding: 0.75rem 0 0;
        margin-top: 0.625rem;
    }

    /* ── PLACE ORDER button + terms ─────────────────────────────────────── */
    #place_order,
    .woocommerce-checkout .place-order .button {
        font-size: 0.875rem;
        padding: 0.875rem 1rem;
        letter-spacing: 0.06em;
    }
    .commerce-cta--large {
        font-size: 0.875rem;
        padding: 0.875rem 1rem;
    }
    .woocommerce-terms-and-conditions-wrapper {
        padding: 0.625rem 0.75rem;
        font-size: 0.75rem;
    }
    .commerce-terms__text { font-size: 0.75rem; }

    /* ── Notice "pedidos pagos até..." compacto ─────────────────────────── */
    .commerce-summary__notice {
        padding: 0.625rem 0.75rem;
        flex-wrap: nowrap;
    }
    .commerce-summary__notice-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    .commerce-summary__notice-text {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    /* ── SHIPPING calculator (carrinho) — empilhar inputs ───────────────── */
    .commerce-calc {
        margin-top: 0.5rem;
    }
    .commerce-calc__row label {
        font-size: 0.6875rem;
    }
    .commerce-calc__input {
        font-size: 0.875rem;
        height: 40px;
    }
    .commerce-calc__submit {
        font-size: 0.8125rem;
        padding: 0.625rem 1rem;
    }

    /* ── SHIPPING methods (radios) — quebra label/preço se preciso ──────── */
    .commerce-shipping__method {
        padding: 0.625rem 0.75rem;
    }
    .commerce-shipping__label {
        flex-wrap: nowrap;
        gap: 0.5rem;
        font-size: 0.75rem;
    }
    .commerce-shipping__name {
        font-size: 0.8125rem;
        min-width: 0;
    }
    .commerce-shipping__price {
        font-size: 0.8125rem;
        white-space: nowrap;
    }

    /* ── COUPON toggle bar ──────────────────────────────────────────────── */
    .commerce-coupon-toggle__bar {
        padding: 0.625rem 0.75rem;
        gap: 0.5rem;
    }
}

/* ──── BREAKPOINT 480px (mobile pequeno) ─────────────────────────────────── */
@media (max-width: 480px) {
    .commerce-summary { padding: 0.75rem; }

    .commerce-item__thumb {
        width: 56px;
        height: 56px;
    }
    .commerce-item__info {
        flex: 1 1 calc(100% - 68px);
    }
    .commerce-item__name { font-size: 0.8125rem; }

    .commerce-review__thumb {
        width: 40px;
        height: 40px;
    }

    /* Bandeiras MP — wrap em 2 linhas se 5 bandeiras */
    .commerce-payment .mp-checkout-custom-card-flags img {
        height: 16px;
    }
}

/* === BLOCK:cart-checkout-mobile:END ============================================ */

/* === BLOCK:search-product-card-ids:START ======================================
 * Linha "SKU: X · PN: Y" do card EXCLUSIVO da página de resultados de busca
 * (template-parts/shop/search-result-product-card.php).
 * Posicionada logo abaixo da marca, antes do título. Visual discreto, pareado
 * com o style do brand eyebrow — labels muted, valores em mono pra leitura
 * de códigos. NÃO afeta o card padrão do content-product.php.
============================================================================== */
.search-product-card__ids {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.875rem;
    margin: 0.25rem 0 0.375rem;
    padding: 0;
    font-family: var(--font-body, sans-serif);
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--color-text-muted, #565758);
}
.search-product-card__id {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    min-width: 0;
}
.search-product-card__id dt {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted, #565758);
    flex-shrink: 0;
}
.search-product-card__id dd {
    margin: 0;
    font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-secondary, #000000);
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
@media (max-width: 480px) {
    .search-product-card__ids {
        font-size: 0.625rem;
        gap: 0.375rem 0.625rem;
    }
}
/* === BLOCK:search-product-card-ids:END ======================================= */

/* === BLOCK:pay-for-order:START =================================================
 * Layout single-column centralizado pra /finalizar-compra/order-pay/{id}/
 * (template woocommerce/checkout/form-pay.php). Diferente do checkout normal,
 * essa página NÃO precisa de formulário de endereço (cliente já tem pedido) —
 * foca apenas no resumo + escolha de pagamento + botão "Pagar pedido".
============================================================================== */
.twp-pay-main {
    padding-block: clamp(1.25rem, 3vw, 2.5rem);
    background: var(--color-bg, #FFFFFF);
    min-height: 60vh;
}

.twp-pay-form {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.twp-pay-form__container {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
}

/* Header "Pagar pedido #N" + item count */
.twp-pay-form__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 0.5rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.twp-pay-form__head .commerce-layout__title {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.25rem, 2vw + 0.5rem, 1.625rem);
    font-weight: 800;
    color: var(--color-secondary, #000000);
    margin: 0;
    letter-spacing: -0.02em;
}
.twp-pay-form__head .commerce-layout__title svg { color: var(--color-primary, #E22421); flex-shrink: 0; }

/* Resumo do pedido — reusa .commerce-summary com pequenas adaptações */
.twp-pay-form__summary { margin: 0; }
.twp-pay-form__summary .commerce-summary__title {
    margin: 0 0 1rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--color-border, #E5E5E5);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-secondary, #000000);
}

/* Tabela de items dentro do pay-order summary */
.twp-pay-form__summary .commerce-review {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}
.twp-pay-form__summary .commerce-review tbody tr {
    border-bottom: 1px solid var(--color-border, #E5E5E5);
}
.twp-pay-form__summary .commerce-review tbody tr:last-child { border-bottom: 0; }
.twp-pay-form__summary .commerce-review__row td {
    padding: 0.75rem 0;
    vertical-align: top;
}
.twp-pay-form__summary .commerce-review__name {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
}
.twp-pay-form__summary .commerce-review__thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
}
.twp-pay-form__summary .commerce-review__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.twp-pay-form__summary .commerce-review__info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.twp-pay-form__summary .commerce-review__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-secondary, #000000);
    line-height: 1.35;
}
.twp-pay-form__summary .commerce-review__qty {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted, #565758);
}
.twp-pay-form__summary .commerce-review__total {
    text-align: right;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-secondary, #000000);
}

/* tfoot com totais */
.twp-pay-form__summary .commerce-review tfoot {
    border-top: 2px solid var(--color-border, #E5E5E5);
}
.twp-pay-form__summary .commerce-review__line th,
.twp-pay-form__summary .commerce-review__line td {
    padding: 0.625rem 0;
    font-size: 0.875rem;
    color: var(--color-text, #000000);
}
.twp-pay-form__summary .commerce-review__line th {
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    color: var(--color-text-muted, #565758);
}
.twp-pay-form__summary .commerce-review__line td {
    text-align: right;
    white-space: nowrap;
}
.twp-pay-form__summary .commerce-review__line--total th,
.twp-pay-form__summary .commerce-review__line--total td {
    padding-top: 1rem;
    font-size: 1.125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-secondary, #000000);
}
.twp-pay-form__summary .commerce-review__line--total td strong {
    color: var(--color-primary, #E22421);
    font-weight: 800;
}

/* Bloco de pagamento — bg/border consistente com resto do checkout */
.twp-pay-form__payment {
    background: var(--color-surface, #F8F8F8);
    border: 1px solid var(--color-border, #E5E5E5);
    padding: clamp(1rem, 2vw, 1.5rem);
    margin: 0;
}

/* Botão "Pagar pedido" — full-width, primary, destaque */
.twp-pay-form__payment .commerce-cta--large {
    width: 100%;
    margin-top: 1rem;
}

/* Mobile: paddings menores, empilhar header */
@media (max-width: 640px) {
    .twp-pay-form__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }
    .twp-pay-form__head .commerce-layout__title {
        font-size: 1.0625rem;
    }
    .twp-pay-form__summary .commerce-review__thumb {
        width: 44px;
        height: 44px;
    }
    .twp-pay-form__summary .commerce-review__title { font-size: 0.8125rem; }
    .twp-pay-form__summary .commerce-review__total { font-size: 0.875rem; }
    .twp-pay-form__summary .commerce-review__line--total th,
    .twp-pay-form__summary .commerce-review__line--total td { font-size: 1rem; }
    .twp-pay-form__payment {
        padding: 0.875rem;
    }
}

/* === BLOCK:pay-for-order:END =================================================== */

/* === BLOCK:search-suppresses-dropdown:START ====================================
 * Quando o painel de busca está aberto (.site-header.is-search-open via Alpine),
 * suprime QUALQUER dropdown do mega menu — evita que ao mover o mouse pra digitar
 * na busca o dropdown abra acidentalmente em cima do input.
 *
 * Específico só pra desktop (>= 992px) onde o mega menu existe; mobile usa
 * drawer próprio (outro markup) — não conflita.
============================================================================== */
@media (min-width: 992px) {
    /* Mata todos os dropdowns abertos por :hover/:focus quando busca tá ativa.
       Usa visibility+opacity (não display:none) pra não quebrar reflows do
       Alpine. pointer-events: none garante que mouse hover nem registra. */
    .site-header.is-search-open .twp-mega-dropdown {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    /* Também deixa a barra de nav inteira não-interativa (sem hover, sem click)
       enquanto a busca está aberta — UX consistente: foco total na busca. */
    .site-header.is-search-open .twp-mega-item:hover .twp-mega-dropdown,
    .site-header.is-search-open .twp-mega-item:focus-within .twp-mega-dropdown {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}
/* === BLOCK:search-suppresses-dropdown:END ======================================= */

/* === BLOCK:checkout-cep-autofill:START ========================================= */
/* Feedback de "buscando endereço" enquanto consulta o ViaCEP.
   Spinner discreto à direita do campo de CEP (billing/shipping). */
#billing_postcode.twp-cep-loading,
#shipping_postcode.twp-cep-loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23565758' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.125rem 1.125rem;
    padding-right: 2.5rem;
    animation: twp-cep-spin 0.7s linear infinite;
}
/* gira só o ícone de fundo via mask-friendly trick:
   como background não rotaciona, animamos opacidade pra dar feedback de atividade. */
@keyframes twp-cep-spin {
    0%, 100% { background-color: var(--color-bg, #FFFFFF); }
    50%      { background-color: var(--color-surface, #F8F8F8); }
}
/* === BLOCK:checkout-cep-autofill:END =========================================== */