/*
Theme Name:   Botiga Child
Theme URI:    https://oficinadamascara.com
Description:  Tema filho personalizado do Botiga para Oficina da Máscara
Author:       Oficina da Máscara
Author URI:   https://oficinadamascara.com
Template:     botiga
Version:      1.17.5
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  botiga-child
Tags:         e-commerce, woocommerce, child-theme
*/

/*
 * Estilos personalizados
 * Adicione seus estilos customizados abaixo
 */

/* Exemplo: Personalização de cores */
/*
:root {
    --cor-primaria: #your-color;
    --cor-secundaria: #your-color;
}
*/

/* Seus estilos personalizados aqui */

/* Home layout - Atelier Story */
:root {
    /* === Paleta — Laca Kabuki (gesso, carvão e vermelho-laca) === */
    --odm-charcoal: #181818;       /* carvão */
    --odm-laca: #d63417;           /* vermelho-laca vivo — acento único (AA c/ texto branco) */
    --odm-laca-dark: #b02a12;
    --odm-clay: #8a8478;           /* cinza-argila (apoio) */
    --odm-paper: #f6f4ef;          /* branco-gesso (fundo) */
    --odm-cream: #f6f4ef;          /* alias legado -> gesso */
    --odm-cream-2: #efece4;

    /* === Aliases (compatíveis com o CSS existente, remapeados p/ a paleta nova) === */
    --odm-black: var(--odm-charcoal);
    --odm-ink: #202020;
    --odm-gray-1: #6e685d;
    --odm-gray-2: #e2ddd2;
    --odm-gray-3: #efece4;
    --odm-white: #ffffff;
    --odm-red: var(--odm-laca);

    /* === Tipografia === */
    --odm-font-display: "Montserrat", "Arial Black", system-ui, sans-serif;
    --odm-font-body: "Work Sans", system-ui, -apple-system, sans-serif;
    --odm-fs-hero: clamp(46px, 8.5vw, 108px);
    --odm-fs-h1: clamp(36px, 6vw, 74px);
    --odm-fs-h2: clamp(28px, 4vw, 50px);
    --odm-fs-h3: 22px;
    --odm-fs-body: 17px;
    --odm-fs-small: 13px;

    /* === Espaçamento === */
    --odm-space-1: 8px;
    --odm-space-2: 16px;
    --odm-space-3: 24px;
    --odm-space-4: 40px;
    --odm-space-5: 64px;
    --odm-space-6: 96px;

    /* === Layout === */
    --odm-shell-max: 1200px;
    --odm-shell-side: 22px;
    --odm-shell-top: 40px;
    --odm-shell-bottom: 84px;

    /* === Raios / sombras === */
    --odm-radius: 4px;
    --odm-radius-lg: 14px;
    --odm-radius-pill: 999px;
    --odm-shadow: 0 18px 44px rgba(28, 26, 23, 0.14);
    --odm-shadow-soft: 0 10px 24px rgba(28, 26, 23, 0.08);
}

/* ==========================================================================
   Fundação de design — Máscara Expressionista (base global)
   ========================================================================== */
body {
    font-family: var(--odm-font-body);
    color: var(--odm-ink);
    background-color: var(--odm-paper);
    -webkit-font-smoothing: antialiased;
}

a:visited {
    color: var(--odm-cream);
}

h1, h2, h3, h4,
.entry-title,
.page-title,
.atelier-hero h1,
.woocommerce-products-header__title,
.product_title,
.woocommerce-loop-product__title,
.botiga-wc-loop-product__title {
    font-family: var(--odm-font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* Títulos display com peso máximo (Montserrat 900, linguagem do logo) */
.atelier-hero h1,
.woocommerce-products-header__title {
    font-optical-sizing: auto;
    font-weight: 900;
}

/* Acento expressivo (vermelho-laca) para destaques nos títulos */
.atelier-hero h1 em,
.about-hero h1 em {
    font-style: normal;
    font-weight: 900;
    color: var(--odm-laca);
}

p, li, a, span, .price, .button, input, textarea, select {
    font-family: var(--odm-font-body);
}

/* Seleção de texto na cor da marca */
::selection {
    background: var(--odm-laca);
    color: var(--odm-paper);
}

/* Headings principais em caixa-alta (linguagem do logo / kabuki editorial) */
.atelier-hero h1,
.about-hero h1,
.contact-hero h1,
.courses-hero h1,
.woocommerce-products-header__title,
.atelier-cta h2,
.about-cta h2,
.home-shop-head h2 {
    text-transform: uppercase;
}

/* Unified shell */
.home .entry-content > .atelier-home,
body.odm-page-sobre .entry-content > .about-editorial,
body.odm-page-contato .entry-content > .contact-editorial {
    max-width: var(--odm-shell-max);
    margin: 0 auto;
    padding: var(--odm-shell-top) var(--odm-shell-side) var(--odm-shell-bottom);
    color: var(--odm-ink);
}

/* Unified section label */
.atelier-label,
body.post-type-archive-product .shop-kicker,
body.odm-page-sobre .about-kicker,
body.odm-page-contato .contact-kicker {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 12px;
    border: 1px solid var(--odm-gray-2);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--odm-black);
}

/* Unified action buttons */
.atelier-btn,
body.odm-page-sobre .about-btn,
body.odm-page-contato .contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 700;
    transition: all 0.2s ease;
}

/* Unified surface cards */
body.post-type-archive-product ul.products li.product,
body.odm-page-sobre .about-highlights article,
body.odm-page-contato .contact-card {
    border: 1px solid var(--odm-gray-2);
    background: #fff;
}

.home .entry-title,
.home .page-title {
    display: none;
}

.home .entry-content > .atelier-home {
    padding-bottom: 60px;
}

.atelier-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 30px;
    align-items: end;
    margin-bottom: 22px;
}

.atelier-label {
    margin-bottom: 16px;
    display: none !important;
}

.atelier-hero h1 {
    margin: 0;
    font-size: clamp(34px, 6vw, 66px);
    line-height: 0.98;
    letter-spacing: -0.02em;
}

.atelier-hero h1 em {
    color: var(--odm-red);
    font-style: normal;
}

.atelier-hero p {
    margin: 0;
    font-size: clamp(17px, 2vw, 22px);
    line-height: 1.6;
    color: var(--odm-gray-1);
    max-width: 44ch;
}

.atelier-meta {
    margin: 0 0 36px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.atelier-meta li {
    border-top: 2px solid var(--odm-black);
    padding-top: 9px;
    font-size: 13px;
    color: var(--odm-gray-1);
}

.atelier-meta strong {
    display: block;
    color: var(--odm-black);
    font-size: 18px;
}

.atelier-story-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 40px;
}

.atelier-card {
    margin: 0;
    position: relative;
    overflow: hidden;
    background: var(--odm-gray-3);
}

.atelier-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.atelier-card figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.66));
    color: var(--odm-white);
    font-size: 15px;
    font-weight: 600;
}

.atelier-card-primary {
    grid-column: span 7;
    min-height: 500px;
}

.atelier-card-secondary {
    grid-column: span 5;
    min-height: 240px;
}

.atelier-card-tertiary {
    grid-column: span 12;
    min-height: 280px;
}

.atelier-process {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 26px;
    margin-bottom: 40px;
    align-items: start;
}

.atelier-process h2 {
    margin: 0;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.04;
}

.atelier-process ol {
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.atelier-process li {
    border-bottom: 1px solid var(--odm-gray-2);
    padding: 18px 0;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.atelier-process li > div {
    flex: 1;
    min-width: 0;
}

.atelier-process .step-no {
    color: var(--odm-red);
    font-weight: 700;
    width: 36px;
    flex: 0 0 36px;
}

.atelier-process h3 {
    margin: 0 0 4px;
    font-size: 22px;
    line-height: 1.2;
    max-width: 24ch;
    word-break: normal;
}

.atelier-process p {
    margin: 0;
    color: var(--odm-gray-1);
    max-width: 52ch;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    line-height: 1.55;
}

.atelier-cta {
    background: var(--odm-charcoal);
    color: var(--odm-white);
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
}

.atelier-cta h2 {
    margin: 0 0 6px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.02;
    color: var(--odm-white) !important;
}

.atelier-cta p {
    margin: 0;
    color: #d1d1d1 !important;
    max-width: 62ch;
}

.atelier-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.atelier-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.atelier-btn-primary {
    background: var(--odm-red);
    color: var(--odm-white);
}

.atelier-btn-primary:hover {
    background: var(--odm-charcoal);
    color: var(--odm-white);
}

.atelier-btn-secondary {
    border-color: #bebebe;
    color: var(--odm-white);
}

.atelier-btn-secondary:hover {
    border-color: var(--odm-white);
    color: var(--odm-white);
}

@media (max-width: 980px) {
    .home .entry-content > .atelier-home {
        padding-top: 20px;
    }

    .atelier-hero,
    .atelier-process {
        grid-template-columns: 1fr;
    }

    .atelier-meta {
        grid-template-columns: 1fr;
    }

    .atelier-card-primary,
    .atelier-card-secondary,
    .atelier-card-tertiary {
        grid-column: span 12;
        min-height: 300px;
    }

    .atelier-cta {
        grid-template-columns: 1fr;
    }
}

.content-wrapper {
    margin-top: 0;
    margin-bottom: 0;
}

/* Shop layout */
body.post-type-archive-product .woocommerce-page-header {
    border-bottom: 1px solid var(--odm-gray-2);
    padding: 34px 0 24px;
}

body.post-type-archive-product .woocommerce-page-header .container,
body.post-type-archive-product .content-wrapper {
    max-width: calc(var(--odm-shell-max) + (var(--odm-shell-side) * 2));
    margin: 0 auto;
    padding-left: var(--odm-shell-side);
    padding-right: var(--odm-shell-side);
}

body.post-type-archive-product .content-wrapper {
    padding-top: var(--odm-shell-top);
    padding-bottom: 64px;
}

body.post-type-archive-product .woocommerce-products-header__title {
    font-size: clamp(32px, 4.2vw, 50px);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 8px;
}

body.post-type-archive-product .woocommerce-page-header .page-description {
    max-width: 760px;
    margin: 10px auto 0;
}

body.post-type-archive-product .shop-kicker {
    margin-bottom: 10px;
}

body.post-type-archive-product .shop-intro-title {
    margin: 0 0 7px;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.15;
}

body.post-type-archive-product .shop-intro-text {
    margin: 0;
    color: var(--odm-gray-1);
    font-size: 15px;
    line-height: 1.55;
}

body.post-type-archive-product .woocommerce-sorting-wrapper {
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--odm-gray-3);
    border: 1px solid var(--odm-gray-2);
}

body.post-type-archive-product .woocommerce-result-count {
    font-size: 14px;
    color: var(--odm-gray-1);
}

body.post-type-archive-product .woocommerce-ordering .orderby {
    border: 1px solid #c8c8c8;
    background: #fff;
    min-height: 42px;
    padding: 0 34px 0 12px;
}

body.post-type-archive-product ul.products {
    gap: 18px;
    margin-top: 0;
}

body.post-type-archive-product ul.products li.product {
    margin-bottom: 14px;
    padding: 0 0 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.post-type-archive-product ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.08);
}

body.post-type-archive-product ul.products li.product .loop-image-wrap {
    margin-bottom: 12px;
    overflow: hidden;
}

body.post-type-archive-product ul.products li.product img {
    transition: transform 0.35s ease;
}

body.post-type-archive-product ul.products li.product:hover img {
    transform: scale(1.03);
}

body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive-product ul.products li.product .botiga-wc-loop-product__title {
    font-size: 18px;
    line-height: 1.25;
    margin: 0 14px 8px;
    color: var(--odm-ink);
}

body.post-type-archive-product ul.products li.product .price {
    display: block;
    margin: 0 14px 14px;
    font-size: 19px;
    font-weight: 700;
    color: var(--odm-black);
}

body.post-type-archive-product ul.products li.product .loop-button-wrap {
    margin: 0 14px;
}

body.post-type-archive-product ul.products li.product a.button {
    width: 100%;
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--odm-red);
    color: #fff;
    font-weight: 700;
}

body.post-type-archive-product ul.products li.product a.button:hover {
    background: var(--odm-charcoal);
    color: #fff;
}

body.post-type-archive-product .woocommerce-pagination ul.page-numbers {
    border: none;
}

body.post-type-archive-product .woocommerce-pagination ul.page-numbers li {
    border: none;
    margin: 0 3px;
}

body.post-type-archive-product .woocommerce-pagination ul.page-numbers li .page-numbers {
    border: 1px solid var(--odm-gray-2);
    min-width: 38px;
    height: 38px;
    line-height: 36px;
}

body.post-type-archive-product .woocommerce-pagination ul.page-numbers li .page-numbers.current {
    background: var(--odm-black);
    color: #fff;
    border-color: var(--odm-black);
}

@media (max-width: 767px) {
    body.post-type-archive-product .woocommerce-page-header {
        padding: 24px 0 20px;
    }

    body.post-type-archive-product .content-wrapper {
        padding-top: 24px;
        padding-bottom: 46px;
    }

    body.post-type-archive-product .woocommerce-products-header__title {
        font-size: 34px;
    }

    body.post-type-archive-product .woocommerce-sorting-wrapper .row {
        row-gap: 10px;
    }
}

/* About layout */
body.odm-page-sobre .entry-title.page-title {
    display: none;
}

body.odm-page-sobre .entry-content > .about-editorial {
    padding-bottom: 76px;
}

body.odm-page-sobre .about-hero {
    max-width: 900px;
    margin: 0 0 34px;
}

body.odm-page-sobre .about-kicker {
    margin-bottom: 12px;
}

body.odm-page-sobre .about-hero h1 {
    margin: 0 0 12px;
    font-size: clamp(34px, 5.6vw, 62px);
    line-height: 0.96;
    letter-spacing: -0.02em;
}

body.odm-page-sobre .about-lead {
    margin: 0;
    max-width: 58ch;
    color: var(--odm-gray-1);
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.65;
}

body.odm-page-sobre .about-split {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 26px;
    align-items: center;
    margin-bottom: 34px;
}

body.odm-page-sobre .about-image {
    margin: 0;
}

body.odm-page-sobre .about-image img {
    width: 100%;
    height: auto;
    display: block;
}

body.odm-page-sobre .about-text h2 {
    margin: 0 0 10px;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.08;
}

body.odm-page-sobre .about-text p {
    margin: 0 0 12px;
    color: var(--odm-gray-1);
    line-height: 1.65;
}

body.odm-page-sobre .about-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 34px;
}

body.odm-page-sobre .about-highlights article {
    padding: 16px;
}

body.odm-page-sobre .about-highlights h3 {
    margin: 0 0 6px;
    font-size: 22px;
}

body.odm-page-sobre .about-highlights p {
    margin: 0;
    color: var(--odm-gray-1);
}

body.odm-page-sobre .about-timeline {
    margin-bottom: 34px;
}

body.odm-page-sobre .about-timeline h2 {
    margin: 0 0 12px;
    font-size: clamp(28px, 3.1vw, 40px);
}

body.odm-page-sobre .about-timeline ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--odm-gray-2);
}

body.odm-page-sobre .about-timeline li {
    border-bottom: 1px solid var(--odm-gray-2);
    padding: 12px 0;
    color: var(--odm-gray-1);
}

body.odm-page-sobre .about-timeline strong {
    color: var(--odm-black);
    display: inline-block;
    width: 54px;
}

body.odm-page-sobre .about-cta {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 0;
    background: var(--odm-black);
    color: #fff;
}

body.odm-page-sobre .about-cta-copy {
    padding: 26px;
}

body.odm-page-sobre .about-cta h2 {
    margin: 0 0 8px;
    font-size: clamp(30px, 3.7vw, 48px);
    line-height: 1;
    color: #fff;
}

body.odm-page-sobre .about-cta p {
    margin: 0 0 14px;
    color: #cbcbcb;
}

body.odm-page-sobre .about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.odm-page-sobre .about-btn {
    padding-inline: 15px;
}

body.odm-page-sobre .about-btn-primary {
    background: var(--odm-red);
    color: #fff;
}

body.odm-page-sobre .about-btn-primary:hover {
    background: var(--odm-charcoal);
    color: #fff;
}

body.odm-page-sobre .about-btn-secondary {
    border-color: #bbb;
    color: #fff;
}

body.odm-page-sobre .about-btn-secondary:hover {
    border-color: #fff;
    color: #fff;
}

@media (max-width: 980px) {
    body.odm-page-sobre .entry-content > .about-editorial {
        padding-top: 24px;
    }

    body.odm-page-sobre .about-split,
    body.odm-page-sobre .about-cta {
        grid-template-columns: 1fr;
    }

    body.odm-page-sobre .about-highlights {
        grid-template-columns: 1fr;
    }
}

/* Header cleanup */
.site-branding .site-title,
.site-branding .site-description {
    display: none;
}

/* Contact layout */
body.odm-page-contato .entry-header,
body.odm-page-contato .entry-title.page-title {
    display: none !important;
}

body.odm-page-contato .entry-content > .contact-editorial {
    padding-bottom: 78px;
}

body.odm-page-contato .contact-hero {
    margin-bottom: 26px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
    align-items: start; /* painel Atendimento encolhe pro conteúdo */
}

body.odm-page-contato .contact-kicker {
    margin-bottom: 12px;
}

body.odm-page-contato .contact-hero-copy {
    border-top: 4px solid var(--odm-laca);
    padding-top: 20px;
}

body.odm-page-contato .contact-hero h1 {
    margin: 0 0 12px;
    font-size: clamp(40px, 5.6vw, 74px);
    line-height: 0.94;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

body.odm-page-contato .contact-lead {
    margin: 0 0 20px;
    color: var(--odm-gray-1);
    line-height: 1.6;
    font-size: clamp(17px, 2vw, 21px);
    max-width: 48ch;
}

body.odm-page-contato .contact-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

body.odm-page-contato .contact-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--odm-gray-2);
    border-radius: 999px;
    color: var(--odm-black);
    text-decoration: none;
    font-weight: 600;
}

body.odm-page-contato .contact-link:hover {
    border-color: #9d9d9d;
}

body.odm-page-contato .contact-hero-panel {
    border: none;
    background: var(--odm-charcoal);
    color: var(--odm-paper);
    padding: 20px;
    display: grid;
    align-content: start;
    gap: 8px;
}

body.odm-page-contato .contact-panel-label {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(246, 244, 239, 0.65);
}

body.odm-page-contato .contact-panel-value {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 700;
    text-wrap: balance;
}

body.odm-page-contato .contact-panel-note {
    margin: 0;
    color: rgba(246, 244, 239, 0.55);
    line-height: 1.5;
}

body.odm-page-contato .contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

body.odm-page-contato .contact-card {
    padding: 22px;
    min-height: 292px;
}

body.odm-page-contato .contact-card h2 {
    margin: 0 0 12px;
    font-size: clamp(19px, 1.8vw, 23px);
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.odm-page-contato .contact-card p {
    margin: 0 0 12px;
    color: var(--odm-gray-1);
    line-height: 1.55;
}

body.odm-page-contato .contact-card strong {
    color: var(--odm-black);
}

body.odm-page-contato .contact-list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

body.odm-page-contato .contact-list li {
    margin: 0;
    padding: 10px 0;
    color: var(--odm-gray-1);
    border-bottom: 1px solid var(--odm-gray-2);
}

body.odm-page-contato .contact-card a {
    color: var(--odm-black);
    text-decoration: none;
}

body.odm-page-contato .contact-card a:hover {
    text-decoration: underline;
}

body.odm-page-contato .contact-btn {
    padding-inline: 18px;
    background: var(--odm-red);
    color: #fff !important;
}

body.odm-page-contato .contact-btn:hover {
    background: var(--odm-charcoal);
    color: #fff !important;
}

body.odm-page-contato .contact-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-weight: 700;
}

body.odm-page-contato .contact-link-cta::after {
    content: "->";
    font-size: 12px;
}

body.odm-page-contato .contact-note {
    border: 1px solid var(--odm-gray-2);
    background: #ffffff;
    padding: 18px 20px;
}

body.odm-page-contato .contact-note p {
    margin: 0;
    color: var(--odm-gray-1);
    line-height: 1.6;
}

@media (max-width: 980px) {
    body.odm-page-contato .entry-content > .contact-editorial {
        padding-top: 24px;
    }

    body.odm-page-contato .contact-hero {
        grid-template-columns: 1fr;
    }

    body.odm-page-contato .contact-grid {
        grid-template-columns: 1fr;
    }

    body.odm-page-contato .contact-card h2 {
        font-size: 30px;
    }
}

@media (max-width: 980px) {
    .home .entry-content > .atelier-home,
    body.odm-page-sobre .entry-content > .about-editorial,
    body.odm-page-contato .entry-content > .contact-editorial {
        padding-top: 24px;
        padding-bottom: 56px;
    }
}

@media (max-width: 640px) {
    body.odm-page-contato .contact-hero h1 {
        font-size: clamp(34px, 10vw, 48px);
    }

    body.odm-page-contato .contact-card {
        padding: 18px;
        min-height: auto;
    }

    body.odm-page-contato .contact-btn,
    body.odm-page-contato .contact-link {
        width: 100%;
        justify-content: center;
    }
}

/* Blog layout */
body.blog .page-header {
    max-width: calc(var(--odm-shell-max) + (var(--odm-shell-side) * 2));
    margin: 0 auto;
    padding: 34px var(--odm-shell-side) 20px;
    border-bottom: 1px solid var(--odm-gray-2);
}

body.blog .page-header::before {
    content: "Pesquisa & processo";
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 12px;
    border: 1px solid var(--odm-gray-2);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--odm-black);
}

body.blog .page-title {
    margin: 0;
    font-size: clamp(34px, 5.2vw, 62px);
    line-height: 0.96;
    letter-spacing: -0.02em;
}

body.blog .content-wrapper {
    max-width: calc(var(--odm-shell-max) + (var(--odm-shell-side) * 2));
    margin: 0 auto;
    padding: 30px var(--odm-shell-side) 64px;
}

body.blog .posts-archive .row {
    row-gap: 18px;
}

body.blog .posts-archive article.post {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--odm-gray-2);
    border-top: 3px solid var(--odm-laca);
    background: #fff;
    padding: 0;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.blog .posts-archive article.post:hover {
    transform: translateY(-3px);
    box-shadow: var(--odm-shadow-soft);
}

/* Imagem destacada do card: topo, proporção fixa, leve zoom no hover */
body.blog .posts-archive article.post > .post-thumbnail {
    display: block;
    margin: 0;
    overflow: hidden;
    background: var(--odm-cream-2);
}

body.blog .posts-archive article.post > .post-thumbnail img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    box-shadow: none;
    transition: transform 0.45s ease;
}

body.blog .posts-archive article.post:hover > .post-thumbnail img {
    transform: scale(1.045);
}

/* Miolo de texto com respiro interno (a imagem é full-bleed no topo) */
body.blog .posts-archive .entry-meta {
    margin: 0;
    padding: 18px 20px 0;
}

body.blog .posts-archive .entry-header {
    padding: 0 20px;
}

body.blog .posts-archive .entry-content {
    padding: 0 20px 22px;
}

body.blog .posts-archive .entry-meta a,
body.blog .posts-archive .entry-meta time {
    color: var(--odm-gray-1);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}

body.blog .posts-archive .entry-title {
    margin: 8px 0 10px;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.1;
}

body.blog .posts-archive .entry-title a {
    color: var(--odm-ink);
    text-decoration: none;
    transition: color 0.15s ease;
}

body.blog .posts-archive .entry-title a:hover {
    color: var(--odm-laca-dark);
}

body.blog .posts-archive .entry-content p {
    margin: 0;
    color: var(--odm-gray-1);
    line-height: 1.6;
}

/* "Continuar lendo" vira âncora laca com seta */
body.blog .posts-archive .more-link {
    display: inline-block;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--odm-laca-dark);
    text-decoration: none;
}

body.blog .posts-archive .more-link::after {
    content: " \2192";
}

/* Courses layout */
body.odm-page-cursos .entry-title.page-title {
    display: none;
}

body.odm-page-cursos .entry-content > .courses-editorial {
    max-width: var(--odm-shell-max);
    margin: 0 auto;
    padding: var(--odm-shell-top) var(--odm-shell-side) var(--odm-shell-bottom);
    color: var(--odm-ink);
}

body.odm-page-cursos .courses-hero {
    max-width: 900px;
    margin: 0 0 30px;
}

body.odm-page-cursos .courses-kicker {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 12px;
    border: 1px solid var(--odm-gray-2);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--odm-black);
}

body.odm-page-cursos .courses-hero h1 {
    margin: 0 0 12px;
    font-size: clamp(36px, 5.2vw, 64px);
    line-height: 0.96;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

body.odm-page-cursos .courses-lead {
    margin: 0;
    max-width: 58ch;
    color: var(--odm-gray-1);
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.65;
}

body.odm-page-cursos .courses-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

body.odm-page-cursos .courses-card {
    border: 1px solid var(--odm-gray-2);
    background: #fff;
    padding: 20px;
}

body.odm-page-cursos .courses-card-primary {
    grid-column: span 2;
}

body.odm-page-cursos .courses-card h2 {
    margin: 0 0 10px;
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.06;
}

body.odm-page-cursos .courses-card p,
body.odm-page-cursos .courses-card li {
    color: var(--odm-gray-1);
    line-height: 1.6;
}

body.odm-page-cursos .courses-card p {
    margin: 0 0 10px;
}

body.odm-page-cursos .courses-card ul {
    margin: 0 0 14px 18px;
    padding: 0;
}

body.odm-page-cursos .courses-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 10px 16px;
    font-weight: 700;
    background: var(--odm-red);
    color: #fff;
}

body.odm-page-cursos .courses-btn:hover {
    background: var(--odm-charcoal);
    color: #fff;
}

@media (max-width: 980px) {
    body.blog .page-header {
        padding-top: 24px;
    }

    body.blog .content-wrapper {
        padding-top: 24px;
        padding-bottom: 50px;
    }

    body.odm-page-cursos .entry-content > .courses-editorial {
        padding-top: 24px;
        padding-bottom: 56px;
    }

    body.odm-page-cursos .courses-grid {
        grid-template-columns: 1fr;
    }

    body.odm-page-cursos .courses-card-primary {
        grid-column: span 1;
    }
}

/* ==========================================================================
   Home — vitrine de produtos (loja em destaque)
   ========================================================================== */

/* Shell das novas seções da home (mesma largura do restante) */
.home .entry-content > .home-shop,
.home .entry-content > .woocommerce.product-grid {
    max-width: var(--odm-shell-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--odm-shell-side);
    padding-right: var(--odm-shell-side);
    color: var(--odm-ink);
}

/* Hero mais compacto (loja sobe) + coluna de texto/ações */
.home .entry-content > .atelier-hero-block {
    padding-bottom: 22px;
}

.atelier-hero-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.atelier-hero .atelier-actions {
    margin-top: 2px;
}

.atelier-btn-outline {
    border-color: #c4c4c4;
    color: var(--odm-black);
    background: #fff;
}

.atelier-btn-outline:hover {
    border-color: var(--odm-black);
    color: var(--odm-black);
}

/* Cabeçalho da vitrine */
.home-shop {
    padding-top: 4px;
}

.home-shop-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--odm-gray-2);
    padding-bottom: 14px;
}

.home-shop-head h2 {
    margin: 8px 0 0;
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.home-shop-all {
    white-space: nowrap;
    font-weight: 700;
    color: var(--odm-black);
    text-decoration: none;
    border-bottom: 2px solid var(--odm-red);
    padding-bottom: 2px;
}

.home-shop-all:hover {
    color: var(--odm-red);
}

/* Grade de produtos na home */
.home .entry-content > .woocommerce.product-grid {
    padding-top: 22px;
    padding-bottom: 8px;
}

.home .woocommerce.product-grid ul.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* neutraliza clearfix/markup do tema que quebraria o grid */
.home .woocommerce.product-grid ul.products::before,
.home .woocommerce.product-grid ul.products::after {
    content: none;
    display: none;
}

.home ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 0 16px;
    border: 1px solid var(--odm-gray-2);
    background: #fff;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.08);
}

.home ul.products li.product img {
    margin: 0 0 12px;
    width: 100%;
    height: auto;
    display: block;
}

.home ul.products li.product .botiga-wc-loop-product__title,
.home ul.products li.product .woocommerce-loop-product__title {
    font-size: 17px;
    line-height: 1.25;
    margin: 0 14px 8px;
    padding: 0;
    color: var(--odm-ink);
}

.home ul.products li.product .price {
    display: block;
    margin: 0 14px 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--odm-black);
}

.home ul.products li.product .button {
    display: block;
    margin: 0 14px;
    text-align: center;
    min-height: 42px;
    line-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--odm-red);
    color: #fff;
    font-weight: 700;
}

.home ul.products li.product .button:hover {
    background: var(--odm-charcoal);
    color: #fff;
}

@media (max-width: 980px) {
    .home .woocommerce.product-grid ul.products {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-shop-head {
        flex-wrap: wrap;
    }
}

@media (max-width: 540px) {
    .home .woocommerce.product-grid ul.products {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Botão de WhatsApp no rodapé (site inteiro)
   ========================================================================== */
.botiga-credits {
    text-align: center;
    line-height: 2.4;
}

.odm-footer-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 14px;
    vertical-align: middle;
    padding: 9px 16px;
    border-radius: 999px;
    background: #25d366;
    color: #ffffff !important;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.odm-footer-whatsapp:hover {
    background: #1ebe5d;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.odm-footer-whatsapp .odm-wa-icon {
    flex: 0 0 auto;
}

/* ==========================================================================
   Laca Kabuki — superfícies flat (sem textura)
   ========================================================================== */
body {
    background-color: var(--odm-paper);
    background-image: none;
}

/* Painéis escuros (CTA) — carvão flat, botão laca */
.atelier-cta,
.about-cta,
.contact-hero-panel {
    background-color: var(--odm-charcoal);
    background-image: none;
    color: var(--odm-paper);
    border: none;
}

.atelier-cta h2,
.about-cta h2,
.contact-hero-panel .contact-panel-value {
    color: var(--odm-paper) !important;
}

.atelier-cta p,
.about-cta p {
    color: rgba(246, 244, 239, 0.75) !important;
}

/* Rodapé — carvão flat */
.bhfb-footer,
.site-footer {
    background-color: var(--odm-charcoal);
    background-image: none;
    color: var(--odm-clay);
}

.bhfb-footer a,
.site-footer a,
.bhfb-footer .botiga-credits {
    color: var(--odm-charcoal);
}

/* ==========================================================================
   Header transparente — herda o fundo gesso do site
   ========================================================================== */
.bhfb-header,
.bhfb-header .bhfb-rows,
.bhfb-above_header_row,
.bhfb-main_header_row,
.bhfb-below_header_row {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* ==========================================================================
   Laca Kabuki — componentes (botões retos, labels overline, cards)
   ========================================================================== */

/* --- Botões: retos, caixa-alta, espaçados --- */
.atelier-btn,
body.odm-page-sobre .about-btn,
body.odm-page-contato .contact-btn,
body.odm-page-cursos .courses-btn,
.home ul.products li.product .button,
body.post-type-archive-product ul.products li.product a.button {
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 13px;
    font-weight: 700;
}

.atelier-btn-primary,
body.odm-page-sobre .about-btn-primary,
body.odm-page-contato .contact-btn,
body.odm-page-cursos .courses-btn,
.home ul.products li.product .button,
body.post-type-archive-product ul.products li.product a.button {
    background: var(--odm-laca);
    color: #ffffff;
    border-color: var(--odm-laca);
}

.atelier-btn-primary:hover,
body.odm-page-sobre .about-btn-primary:hover,
body.odm-page-contato .contact-btn:hover,
body.odm-page-cursos .courses-btn:hover,
.home ul.products li.product .button:hover,
body.post-type-archive-product ul.products li.product a.button:hover {
    background: var(--odm-charcoal);
    border-color: var(--odm-charcoal);
    color: #ffffff;
}

/* Secundário/outline sobre fundo claro: contorno carvão */
.atelier-btn-outline {
    border-color: var(--odm-charcoal);
    color: var(--odm-charcoal);
    background: transparent;
}

.atelier-btn-outline:hover {
    background: var(--odm-charcoal);
    color: var(--odm-paper);
    border-color: var(--odm-charcoal);
}

/* Secundário sobre painel escuro (CTA): contorno gesso */
.atelier-btn-secondary,
body.odm-page-sobre .about-btn-secondary {
    border-color: rgba(246, 244, 239, 0.55);
    color: var(--odm-paper);
    background: transparent;
}

.atelier-btn-secondary:hover,
body.odm-page-sobre .about-btn-secondary:hover {
    border-color: var(--odm-paper);
    color: var(--odm-paper);
}

/* --- Labels/kickers: overline minimal com traço laca --- */
.atelier-label,
body.post-type-archive-product .shop-kicker,
body.odm-page-sobre .about-kicker,
body.odm-page-contato .contact-kicker,
body.odm-page-cursos .courses-kicker,
body.blog .page-header::before {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--odm-gray-1); /* legibilidade: clay #8a8478 reprova AA (3.4:1) em texto pequeno */
    background: none;
}

.atelier-label::before,
body.post-type-archive-product .shop-kicker::before,
body.odm-page-sobre .about-kicker::before,
body.odm-page-contato .contact-kicker::before,
body.odm-page-cursos .courses-kicker::before,
body.blog .page-header::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 3px;
    background: var(--odm-laca);
}

body.blog .page-header::before {
    content: "Pesquisa & processo";
    width: auto;
    height: auto;
    background: none;
    border: none;
    padding: 0;
}

/* --- Cards de produto: estilo galeria com sombra dura laca (efeito do hero) --- */
.home ul.products li.product,
body.post-type-archive-product ul.products li.product {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 0 18px;
}

.home ul.products li.product:hover,
body.post-type-archive-product ul.products li.product:hover {
    transform: none;
    box-shadow: none;
    border: none;
}

/* Sombra dura laca na moldura da thumb (fora do overflow, não é cortada) */
.home ul.products li.product .loop-image-wrap,
body.post-type-archive-product ul.products li.product .loop-image-wrap {
    margin: 0 12px 26px 0;
    box-shadow: 8px 8px 0 var(--odm-laca);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* Hover: a peça "levanta" e a sombra cresce */
.home ul.products li.product:hover .loop-image-wrap,
body.post-type-archive-product ul.products li.product:hover .loop-image-wrap {
    transform: translate(-3px, -3px);
    box-shadow: 13px 13px 0 var(--odm-laca);
}

.home ul.products li.product img {
    margin: 0;
}

/* Texto/botão sem o recuo interno do card antigo */
.home ul.products li.product .woocommerce-loop-product__title,
.home ul.products li.product .botiga-wc-loop-product__title,
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive-product ul.products li.product .botiga-wc-loop-product__title {
    margin-left: 0;
    margin-right: 0;
}

.home ul.products li.product .price,
body.post-type-archive-product ul.products li.product .price {
    color: var(--odm-charcoal);
    margin-left: 0;
    margin-right: 0;
}

.home ul.products li.product .button,
body.post-type-archive-product ul.products li.product .loop-button-wrap {
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   Laca Kabuki — hero (tipográfico + máscara emoldurada)
   ========================================================================== */
.kabuki-hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    margin-bottom: 26px;
}

.kabuki-hero-copy {
    border-top: 4px solid var(--odm-laca);
    padding-top: 22px;
}

.kabuki-hero h1 {
    margin: 14px 0 18px;
    font-size: clamp(40px, 6.5vw, 84px);
    line-height: 0.95;
    letter-spacing: -0.02em;
}

.kabuki-hero p {
    margin: 0 0 24px;
    max-width: 46ch;
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.65;
    color: var(--odm-gray-1);
}

.hero-mask {
    margin: 0;
    position: relative;
}

.hero-mask img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    box-shadow: 14px 14px 0 var(--odm-laca);
}

@media (max-width: 980px) {
    .kabuki-hero {
        grid-template-columns: 1fr;
    }

    .hero-mask {
        max-width: 420px;
    }

    .hero-mask img {
        box-shadow: 10px 10px 0 var(--odm-laca);
    }
}

/* ==========================================================================
   Legibilidade (WCAG AA) — corrige textos com contraste insuficiente
   ========================================================================== */

/* Preço riscado em promoções: Botiga usa #999 (2.8:1 sobre branco) */
.price del,
.product_list_widget del,
ul.products li.product .price del {
    color: var(--odm-gray-1);
}

/* Link "Ver por categoria" no hover: laca como texto pequeno reprova AA */
.home-shop-all:hover {
    color: var(--odm-laca-dark);
    border-bottom-color: var(--odm-laca-dark);
}

/* Placeholders de formulários (busca, checkout): garante cinza legível */
input::placeholder,
textarea::placeholder {
    color: var(--odm-gray-1);
    opacity: 1;
}

/* ==========================================================================
   Links — sistema completo Laca Kabuki (link, visited, hover, active, focus)
   ========================================================================== */

/* Base global: carvão em todos os estados de repouso; visited NUNCA roxo */
a,
a:visited {
    color: var(--odm-charcoal);
    text-decoration-color: rgba(214, 52, 23, 0.45);
    transition: color 0.15s ease, text-decoration-color 0.15s ease,
        border-color 0.15s ease, background-color 0.15s ease;
}

a:hover,
a:active {
    color: var(--odm-laca-dark);
}

/* Foco visível acessível (teclado) em todo o site */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--odm-laca);
    outline-offset: 2px;
}

/* --- Menu principal e offcanvas/mobile --- */
.main-navigation a,
.main-navigation a:visited,
.botiga-offcanvas-menu a,
.botiga-offcanvas-menu a:visited,
.mobile-offcanvas-menu-content a,
.mobile-offcanvas-menu-content a:visited {
    color: var(--odm-charcoal);
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.botiga-offcanvas-menu a:hover,
.mobile-offcanvas-menu-content a:hover {
    color: var(--odm-laca-dark);
}

/* --- Links de texto corrido (conteúdo): laca sublinhado --- */
.entry-content p a:not([class]),
.entry-content li a:not([class]),
body.odm-page-contato .contact-list a,
body.odm-page-contato .contact-card a,
.woocommerce-info a:not(.button),
.woocommerce-message a:not(.button) {
    color: var(--odm-laca-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(176, 42, 18, 0.5);
}

.entry-content p a:not([class]):hover,
.entry-content li a:not([class]):hover,
body.odm-page-contato .contact-list a:hover,
body.odm-page-contato .contact-card a:hover {
    color: var(--odm-charcoal);
    text-decoration-color: var(--odm-laca);
}

/* --- Títulos-link (produtos e posts): carvão -> laca no hover --- */
a.botiga-wc-loop-product__title,
a.botiga-wc-loop-product__title:visited,
body.blog .posts-archive .entry-title a,
body.blog .posts-archive .entry-title a:visited {
    color: var(--odm-ink);
    text-decoration: none;
}

a.botiga-wc-loop-product__title:hover,
li.product:hover a.botiga-wc-loop-product__title,
body.blog .posts-archive .entry-title a:hover {
    color: var(--odm-laca-dark);
}

/* --- Superfícies escuras (rodapé, CTAs, painel do contato): gesso -> branco --- */
.bhfb-footer a,
.bhfb-footer a:visited,
.site-footer a,
.site-footer a:visited,
.atelier-cta a:not(.atelier-btn),
.atelier-cta a:not(.atelier-btn):visited,
body.odm-page-sobre .about-cta a:not([class*="btn"]),
body.odm-page-contato .contact-hero-panel a,
body.odm-page-contato .contact-hero-panel a:visited {
    color: var(--odm-paper);
}

.bhfb-footer a:hover,
.site-footer a:hover,
.atelier-cta a:not(.atelier-btn):hover,
body.odm-page-contato .contact-hero-panel a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--odm-laca);
}

/* --- Guardas de :visited p/ botões (a:visited venceria a classe pura) --- */
.atelier-btn-primary:visited,
body.odm-page-sobre .about-btn-primary:visited,
body.odm-page-contato .contact-btn:visited,
body.odm-page-cursos .courses-btn:visited,
.home ul.products li.product .button:visited,
body.post-type-archive-product ul.products li.product a.button:visited,
.odm-footer-whatsapp:visited {
    color: #ffffff;
}

.atelier-btn-outline:visited,
body.odm-page-contato .contact-link:visited,
.home-shop-all:visited {
    color: var(--odm-charcoal);
}

.atelier-btn-secondary:visited,
body.odm-page-sobre .about-btn-secondary:visited {
    color: var(--odm-paper);
}

/* ==========================================================================
   Rodapé BLINDADO — o CSS dinâmico do Customizer (uploads/botiga/
   custom-styles.css) pinta fundos claros e textos brancos por conta própria;
   aqui garantimos carvão + gesso sempre, com prioridade máxima.
   ========================================================================== */
.bhfb-footer,
.bhfb-footer .bhfb-row-wrapper,
.bhfb-footer .bhfb-above_footer_row,
.bhfb-footer .bhfb-main_footer_row,
.bhfb-footer .bhfb-below_footer_row {
    background-color: var(--odm-charcoal) !important;
    background-image: none !important;
    border-color: transparent !important;
}

.bhfb-footer,
.bhfb-footer .botiga-credits,
.bhfb-footer .bhfb-builder-item,
.bhfb-footer p,
.bhfb-footer li {
    color: var(--odm-paper) !important;
}

.bhfb-footer a:not(.odm-footer-whatsapp),
.bhfb-footer a:not(.odm-footer-whatsapp):visited {
    color: #ffffff !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(246, 244, 239, 0.35);
    margin-inline-start: 0.3em; /* respiro após "mantido por" */
}

.bhfb-footer a:not(.odm-footer-whatsapp):hover {
    color: #ffffff !important;
    text-decoration-color: var(--odm-laca);
}

/* ==========================================================================
   Página de pedido recebido (thank you) — Laca Kabuki
   ========================================================================== */
body.woocommerce-order-received .woocommerce-order {
    max-width: 980px;
    margin: 0 auto;
    padding-bottom: var(--odm-space-5);
}

body.woocommerce-order-received .entry-title {
    text-transform: uppercase;
}

/* Aviso de sucesso: cartão com barra laca */
body.woocommerce-order-received .woocommerce-notice--success {
    background: #ffffff;
    border: 1px solid var(--odm-gray-2);
    border-left: 4px solid var(--odm-laca);
    padding: 18px 20px;
    margin: 0 0 22px;
    font-size: 18px;
    font-weight: 600;
    color: var(--odm-charcoal);
}

/* Resumo do pedido (nº, data, total): fichas em linha */
body.woocommerce-order-received ul.woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
}

body.woocommerce-order-received ul.woocommerce-order-overview li {
    margin: 0;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid var(--odm-gray-2);
    border-top: 3px solid var(--odm-laca);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--odm-gray-1);
    float: none;
    width: auto;
    min-width: 0; /* deixa a célula encolher no grid, sem estourar */
}

body.woocommerce-order-received ul.woocommerce-order-overview li strong {
    display: block;
    margin-top: 6px;
    font-family: var(--odm-font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--odm-charcoal);
    overflow-wrap: anywhere; /* valores longos quebram dentro do cartão */
}

/* E-mail é quase sempre comprido: fonte menor para caber sem quebrar feio */
body.woocommerce-order-received ul.woocommerce-order-overview li.woocommerce-order-overview__email strong {
    font-size: 15px;
    line-height: 1.4;
}

/* Títulos de seção da página */
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title {
    font-size: clamp(22px, 3vw, 30px);
    text-transform: uppercase;
    margin: 0 0 14px;
}

/* Tabela de detalhes: cartão branco */
body.woocommerce-order-received table.woocommerce-table--order-details {
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--odm-gray-2);
    border-collapse: collapse;
    margin-bottom: 34px;
}

body.woocommerce-order-received table.woocommerce-table--order-details th,
body.woocommerce-order-received table.woocommerce-table--order-details td {
    padding: 13px 16px;
    border: none;
    border-bottom: 1px solid var(--odm-gray-3);
    text-align: left;
}

body.woocommerce-order-received table.woocommerce-table--order-details thead th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--odm-gray-1);
    border-bottom: 2px solid var(--odm-charcoal);
}

body.woocommerce-order-received table.woocommerce-table--order-details tfoot th {
    color: var(--odm-charcoal);
    font-weight: 700;
}

body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: none;
    border-top: 2px solid var(--odm-charcoal);
    font-size: 18px;
}

body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td {
    font-family: var(--odm-font-display);
    font-weight: 700;
    color: var(--odm-laca-dark);
}

/* Endereços: 2 colunas com respiro (corrige títulos colados) */
body.woocommerce-order-received .woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

body.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column {
    float: none;
    width: auto;
    margin: 0;
}

body.woocommerce-order-received .woocommerce-customer-details address {
    background: #ffffff;
    border: 1px solid var(--odm-gray-2);
    padding: 18px 20px;
    font-style: normal;
    line-height: 1.75;
    color: var(--odm-ink);
}

@media (max-width: 640px) {
    body.woocommerce-order-received .woocommerce-columns--addresses {
        grid-template-columns: 1fr;
    }

    body.woocommerce-order-received .woocommerce-notice--success {
        font-size: 16px;
    }
}

/* ==========================================================================
   Grade de produtos — ajustes finos (ordenação e alinhamento)
   ========================================================================== */

/* Seletor "Ordenar por" estava cortando o texto */
.woocommerce-ordering {
    margin-bottom: 6px;
}

.woocommerce-ordering select.orderby,
.woocommerce-ordering .orderby {
    width: auto;
    max-width: 100%;
    min-height: 42px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--odm-gray-2);
    background-color: #ffffff;
    color: var(--odm-ink);
    font-size: 14px;
}

/* Contagem de resultados discreta, alinhada com a grade */
.home .woocommerce-result-count,
body.post-type-archive-product .woocommerce-result-count {
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--odm-gray-1);
}

/* Barra da vitrine no celular: contagem em cima, ordenação embaixo.

   O Botiga monta essa barra com o grid do Bootstrap e marca as duas metades
   como `col-md-6 col-6`. O `col-6` (sem breakpoint) vale em QUALQUER largura —
   ou seja, cada lado fica travado em 50% até no celular. Com ~163px de espaço,
   "MOSTRANDO TODOS OS 11 RESULTADOS" quebra em duas linhas e o <select> aparece
   truncado ("Ordenar por preço: r…").

   Aqui as duas colunas passam a ocupar a linha inteira e empilham. */
@media (max-width: 640px) {
    body.home .botiga-sorting-left,
    body.home .botiga-sorting-right,
    body.post-type-archive-product .botiga-sorting-left,
    body.post-type-archive-product .botiga-sorting-right {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    /* A coluna da direita empurrava o seletor para a borda com justify-content:
       flex-end — em DUAS camadas: no col externo E no inner. Empilhado, os dois
       precisam alinhar à esquerda, senão o select fica indentado e desalinhado
       da contagem que está logo acima. */
    body.home .botiga-sorting-right,
    body.home .botiga-sorting-right-inner,
    body.post-type-archive-product .botiga-sorting-right,
    body.post-type-archive-product .botiga-sorting-right-inner {
        justify-content: flex-start;
    }

    body.home .botiga-sorting-right-inner,
    body.post-type-archive-product .botiga-sorting-right-inner {
        width: 100%;
    }

    body.home .woocommerce-result-count,
    body.post-type-archive-product .woocommerce-result-count {
        margin-bottom: 10px;
    }

    body.home .woocommerce-ordering select.orderby,
    body.post-type-archive-product .woocommerce-ordering select.orderby {
        width: 100%;
        max-width: 100%;
    }
}

/* Título/preço/botão alinhados à esquerda (a sombra puxa p/ a direita) */
.home ul.products li.product,
body.post-type-archive-product ul.products li.product {
    text-align: left;
}

/* Prefixo "a partir de" nos preços de peças sob encomenda */
.odm-price-prefix {
    display: inline-block;
    margin-right: 2px;
    font-size: 0.72em;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--odm-gray-1);
    text-transform: none;
}

/* Fluxo de orçamento (peças sob encomenda) */
.odm-quote-note {
    margin: 14px 0 16px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--odm-gray-2);
    border-left: 3px solid var(--odm-laca);
    font-size: 14px;
    line-height: 1.6;
    color: var(--odm-gray-1);
}

.single-product a.odm-quote-button {
    margin-bottom: 18px;
}

/* ==========================================================================
   Carrossel de Destaques (topo da home) — [odm_destaques]
   ========================================================================== */
.odm-slides {
    display: flex;
    gap: 40px; /* respiro entre slides: a sombra laca (14px) cai no vão, não no slide vizinho */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    outline: none;
}

.odm-slides::-webkit-scrollbar {
    display: none;
}

.odm-slide {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
    padding-right: 16px; /* espaço p/ a sombra laca (14px) não ser cortada pelo overflow */
    padding-bottom: 16px;
}

.odm-slide .kabuki-hero {
    margin-bottom: 8px;
}

/* Título do slide (h2) com a mesma voz do hero */
.kabuki-hero .odm-slide-title {
    margin: 14px 0 18px;
    font-size: clamp(40px, 6.5vw, 84px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    font-weight: 900;
    text-transform: uppercase;
}

.kabuki-hero .odm-slide-title em {
    font-style: normal;
    font-weight: 900;
    color: var(--odm-laca);
}

/* Navegação: setas + bolinhas kabuki */
.odm-slider-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
}

.odm-prev,
.odm-next {
    width: 42px;
    height: 42px;
    border: 1px solid var(--odm-charcoal);
    border-radius: 3px;
    background: transparent;
    color: var(--odm-charcoal);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.odm-prev:hover,
.odm-next:hover {
    background: var(--odm-charcoal);
    color: var(--odm-paper);
}

.odm-dots {
    display: flex;
    gap: 8px;
}

.odm-dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: var(--odm-gray-2);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.odm-dot.is-active {
    background: var(--odm-laca);
    transform: scale(1.15);
}

/* Variantes de marcador (Destaques → Configurações) */
.odm-slider.odm-dots-circulo .odm-dot {
    border-radius: 50%;
}

.odm-slider.odm-dots-traco .odm-dot {
    width: 26px;
    height: 4px;
}

.odm-slider.odm-dots-traco .odm-dot.is-active {
    transform: none;
    width: 38px;
}

/* ==========================================================================
   Carimbo da marca (hanko) — face do logo em branco sobre quadrado laca
   ========================================================================== */
.odm-stamp {
    display: inline-flex;
    width: 64px;
    height: 64px;
    padding: 8px;
    background: var(--odm-laca);
    transform: rotate(-7deg);
    box-shadow: 4px 4px 0 rgba(24, 24, 24, 0.18);
}

.odm-stamp img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Faixa como barra de anúncio no topo do site (acima do logo) */
.odm-topbar .odm-marquee {
    margin: 0;
    padding: 11px 0;
    /* O .odm-marquee genérico usa width:100vw + translateX(-50%) para sangrar
       de ponta a ponta dentro de containers com padding. Aqui NÃO precisa: o
       .odm-topbar já é filho direto do body e ocupa a largura inteira.
       E `100vw` INCLUI a barra de rolagem — no celular isso deixava a faixa
       ~15px mais larga que a tela e criava rolagem horizontal no site todo. */
    width: 100%;
    left: auto;
    transform: none;
}

.odm-topbar .odm-marquee-track span {
    font-size: clamp(13px, 1.6vw, 17px);
    letter-spacing: 0.1em;
}

/* Arte própria do carimbo (já vem com quadrado laca + rotação): modo cru */
.odm-stamp--art {
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    transform: none;
    box-shadow: none;
}

.odm-stamp--art img {
    width: 84px;
    height: 84px;
    filter: drop-shadow(3px 4px 0 rgba(24, 24, 24, 0.15));
}

.odm-footer-brand .odm-stamp--art img {
    width: 96px;
    height: 96px;
}

/* ==========================================================================
   Faixa deslizante (marquee) — home, entre a vitrine e o CTA
   ========================================================================== */
body {
    overflow-x: clip; /* a faixa full-bleed usa 100vw */
}

.odm-marquee {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    background: var(--odm-charcoal);
    overflow: hidden;
    padding: 16px 0;
    margin: 0 0 34px;
}

.odm-marquee-track {
    display: inline-flex;
    white-space: nowrap;
    animation: odm-marquee 38s linear infinite;
    will-change: transform;
}

.odm-marquee-track span {
    font-family: var(--odm-font-display);
    font-weight: 800;
    font-size: clamp(17px, 2.4vw, 28px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--odm-paper);
    padding-right: 0.6em;
}

.odm-marquee-track em {
    font-style: normal;
    color: var(--odm-laca);
}

.odm-marquee-track .destaque_faixa{
    color: var(--odm-clay) !important;
}

/* Chip de cupom — selo laca reutilizável ([cupom]…[/cupom] ou a classe direta).
   Autossuficiente: pega o visual de "código" em qualquer contexto (funciona no
   marquee escuro e em página clara — laca + branco salta nos dois). */
.odm-cupom {
    display: inline-block;
    padding: 0.06em 0.5em;
    background: var(--odm-laca);
    color: #ffffff;
    border-radius: 3px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* No marquee, a fonte é de título (grande) — o chip acompanha com um respiro
   lateral e um espaçamento um pouco maior, para não colar nas palavras. */
.odm-marquee-track .odm-cupom {
    margin: 0 0.12em;
    padding: 0.02em 0.45em;
    letter-spacing: 0.14em;
}

@keyframes odm-marquee {
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .odm-marquee-track {
        animation: none;
    }
}

/* ==========================================================================
   Animações de entrada (classe aplicada via JS; sem JS tudo fica visível)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .odm-reveal {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        transition-delay: var(--odm-reveal-delay, 0s);
    }

    .odm-reveal.odm-in {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   Rodapé completo (3 colunas) — todas as páginas
   ========================================================================== */
.odm-footer {
    background: var(--odm-charcoal);
    color: var(--odm-paper);
}

/* O Botiga puxa a última seção de "Produtos relacionados" 120px para BAIXO do
   que vem depois dela:

     .single-product .site-main > .product > section.products:last-child
         { margin-bottom: -120px }   (woocommerce.css)

   É um truque do tema para o rodapé PADRÃO dele encaixar numa faixa de fundo
   que a seção estica (o ::after de largura 100vw). Só que o nosso rodapé é um
   bloco de carvão próprio (.odm-footer): esses -120px o arrastavam para dentro
   dos produtos relacionados, e o grid dos produtos (z-index: 2) pintava por
   cima do carvão — a faixa cinza no topo do rodapé, com o preço do produto
   preso na emenda. Zeramos a margem: o rodapé passa a começar abaixo da seção,
   com o respiro de 80px que o próprio padding-bottom da seção já dá.
   O `body` à frente sobe a especificidade para (0,5,2) e vence a regra do
   tema (0,5,1) sem precisar de !important. */
body.single-product .site-main > .product > section.products:last-child {
    margin-bottom: 0;
}

.odm-footer-inner {
    max-width: calc(var(--odm-shell-max) + (var(--odm-shell-side) * 2));
    margin: 0 auto;
    padding: 52px var(--odm-shell-side) 36px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 34px;
}

.odm-footer-brand .odm-stamp {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
}

.odm-footer-title {
    margin: 0 0 8px;
    font-family: var(--odm-font-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
}

.odm-footer-tag {
    margin: 0;
    max-width: 34ch;
    color: rgba(246, 244, 239, 0.7);
    line-height: 1.6;
}

.odm-footer-head {
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(246, 244, 239, 0.65);
}

.odm-footer-head::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 3px;
    background: var(--odm-laca);
}

.odm-footer-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.odm-footer-col li {
    margin: 0 0 10px;
    color: rgba(246, 244, 239, 0.7);
}

.odm-footer a,
.odm-footer a:visited {
    color: var(--odm-paper);
    /* O sublinhado já nasce vermelho-laca — invisível, porque a LINHA é `none`.
       Assim, quando o hover apenas liga a linha, ela aparece direto na cor
       certa. O flash "branco depois vermelho" vinha de animar o
       text-decoration-color a partir do branco (a cor do texto). Longhands de
       propósito: o shorthand `text-decoration` reseta a cor para currentColor,
       reabrindo a porta para o branco. */
    text-decoration-line: none;
    text-decoration-color: var(--odm-laca);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* HOVER DO RODAPÉ — a regra precisa desta especificidade (0,3,1) para empatar
   com `.bhfb-footer a:not(.odm-footer-whatsapp):hover`, que vinha vencendo.
   Aquela regra troca apenas a COR (gesso -> branco: diferença imperceptível) e
   NÃO declara `text-decoration` — como o estado normal é `none`, o sublinhado
   nunca aparecia e o hover não dava retorno visual nenhum.
   Empatando em especificidade e vindo depois no arquivo, esta vence. */
.odm-footer a:not(.odm-footer-whatsapp):hover,
.odm-footer a:not(.odm-footer-whatsapp):focus-visible,
.odm-footer .odm-cookie-prefs:hover,
.odm-footer .odm-cookie-prefs:focus-visible {
    color: #ffffff;
    /* Só liga a LINHA. Cor, espessura e offset já vêm do estado normal, então
       o sublinhado surge vermelho de uma vez — sem piscar branco antes. */
    text-decoration-line: underline;
}

/* "Preferências de cookies" é um <button>, não um <a> — nenhuma regra de link o
   alcançava, e ele destoava dos irmãos (apagado, com opacidade menor).
   Aqui ele passa a ser visualmente idêntico aos demais itens da coluna. */
.odm-footer .odm-cookie-prefs {
    color: var(--odm-paper);
    opacity: 1;
    font: inherit;
    /* mesmo sublinhado pré-vermelho dos links irmãos, para o hover casar */
    text-decoration-line: none;
    text-decoration-color: var(--odm-laca);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* linha de créditos vira o "fecho" do rodapé completo */
.bhfb-footer .bhfb-below_footer_row {
    border-top: 1px solid rgba(246, 244, 239, 0.14) !important;
}

@media (max-width: 980px) {
    .odm-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding-top: 44px;
    }
    .odm-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .odm-footer-inner {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-top: 40px;
    }
}

/* ==========================================================================
   Página Sobre — rigor kabuki (consistência com a home)
   ========================================================================== */
body.odm-page-sobre .about-hero {
    border-top: 4px solid var(--odm-laca);
    padding-top: 22px;
}

/* Foto do ateliê com o mesmo quadro de sombra laca do hero */
body.odm-page-sobre .about-split .about-image {
    margin-right: 16px;
    margin-bottom: 16px;
}

body.odm-page-sobre .about-split .about-image img {
    box-shadow: 14px 14px 0 var(--odm-laca);
}

/* Títulos de seção em caixa-alta, como na home */
body.odm-page-sobre .about-text h2,
body.odm-page-sobre .about-timeline h2,
body.odm-page-sobre .about-highlights h3 {
    text-transform: uppercase;
}

/* Anos da linha do tempo em laca */
body.odm-page-sobre .about-timeline strong {
    color: var(--odm-laca-dark);
}

/* Cartões de destaque com a régua laca no topo (eco das fichas do pedido) */
body.odm-page-sobre .about-highlights article {
    border-top: 3px solid var(--odm-laca);
}

@media (max-width: 980px) {
    body.odm-page-contato .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Minha Conta (WooCommerce) — Laca Kabuki
   ========================================================================== */
body.woocommerce-account .entry-title {
    text-transform: uppercase;
}

/* Formulário de entrada: cartão com sombra laca (eco do hero) */
body.woocommerce-account form.woocommerce-form-login {
    max-width: 460px;
    margin: 10px 0 40px;
    padding: 26px 24px;
    background: #ffffff;
    border: 1px solid var(--odm-gray-2);
    border-radius: 0;
    box-shadow: 10px 10px 0 var(--odm-laca);
}

body.woocommerce-account .woocommerce-form-row label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--odm-gray-1);
}

body.woocommerce-account .woocommerce-form input.input-text,
body.woocommerce-account .woocommerce-form input[type="email"],
body.woocommerce-account .woocommerce-form input[type="password"],
body.woocommerce-account .woocommerce-form input[type="text"] {
    border: 1px solid var(--odm-gray-2);
    border-radius: 0;
    min-height: 44px;
    background: #ffffff;
}

body.woocommerce-account .woocommerce-form input.input-text:focus {
    border-color: var(--odm-laca);
    outline: none;
    box-shadow: 0 0 0 1px var(--odm-laca);
}

body.woocommerce-account .woocommerce-form button.button,
body.woocommerce-account form.woocommerce-ResetPassword button.button,
body.woocommerce-account .woocommerce-MyAccount-content button.button {
    background: var(--odm-laca);
    color: #ffffff;
    border: 1px solid var(--odm-laca);
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 13px;
    font-weight: 700;
    min-height: 44px;
}

body.woocommerce-account .woocommerce-form button.button:hover,
body.woocommerce-account form.woocommerce-ResetPassword button.button:hover,
body.woocommerce-account .woocommerce-MyAccount-content button.button:hover {
    background: var(--odm-charcoal);
    border-color: var(--odm-charcoal);
    color: #ffffff;
}

body.woocommerce-account .lost_password a {
    color: var(--odm-gray-1);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Senha perdida / redefinir senha (uma coluna só)
   --------------------------------------------------------------------------
   Havia TRÊS alinhamentos na mesma tela: título centralizado, aviso ocupando a
   largura toda e formulário numa coluna de 500px que o tema-pai centraliza
   sozinho (margin-left: auto). Nada alinhava com nada.

   Escopo restrito de propósito a .woocommerce-lost-password: a tela de LOGIN
   tem duas colunas (Entrar + Cadastre-se) e já tem estilo próprio mais abaixo —
   aplicar a coluna estreita lá espremia as duas. */
body.woocommerce-lost-password .entry-content > .woocommerce {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

/* Título proporcional: 64px numa tela de três linhas era desproporcional */
body.woocommerce-lost-password .entry-title {
    font-size: clamp(28px, 4vw, 40px);
}

/* O formulário de senha ganha o mesmo cartão do login */
body.woocommerce-account form.woocommerce-ResetPassword {
    max-width: 460px;
    margin: 10px 0 40px;
    padding: 26px 24px;
    background: #ffffff;
    border: 1px solid var(--odm-gray-2);
    border-radius: 0;
    box-shadow: 10px 10px 0 var(--odm-laca);
}

/* Neutraliza a coluna de 500px auto-centralizada do tema-pai e o
   .form-row-first (47% flutuando), que só faz sentido no checkout */
body.woocommerce-lost-password .woocommerce form p,
body.woocommerce-lost-password .woocommerce form .form-row {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    width: auto;
    float: none;
}

/* Campo e botão ocupam o cartão inteiro */
body.woocommerce-account form.woocommerce-ResetPassword input.input-text,
body.woocommerce-account form.woocommerce-ResetPassword button.button {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Carrinho VAZIO
   --------------------------------------------------------------------------
   A mensagem "está vazio" e o botão "Retornar para a loja" são dois filhos de
   .woocommerce que o tema-pai deixa lado a lado (flex) — ficavam desconectados,
   e o botão saía escuro. Empilha os dois numa coluna e usa o vermelho-laca.
   O :has() restringe ao carrinho VAZIO: o carrinho COM itens mantém a tabela e
   os totais lado a lado. */
body.woocommerce-cart .woocommerce:has(.wc-empty-cart-message) {
    display: block;
    max-width: 520px;
}

body.woocommerce-cart .wc-empty-cart-message {
    margin: 0 0 18px;
}

body.woocommerce-cart .return-to-shop {
    margin: 0;
}

body.woocommerce-cart .return-to-shop .button {
    display: inline-block;
    background: var(--odm-laca);
    color: #ffffff;
    border: 1px solid var(--odm-laca);
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 13px;
    min-height: 44px;
}

body.woocommerce-cart .return-to-shop .button:hover {
    background: var(--odm-charcoal);
    border-color: var(--odm-charcoal);
}

/* Painel do cliente logado: navegação lateral kabuki */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--odm-gray-2);
    background: #ffffff;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin: 0;
    border-bottom: 1px solid var(--odm-gray-3);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 16px;
    color: var(--odm-ink);
    text-decoration: none;
    border-left: 3px solid transparent;
    font-weight: 600;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    border-left-color: var(--odm-laca);
    color: var(--odm-laca-dark);
    background: var(--odm-paper);
}

body.woocommerce-account .woocommerce-MyAccount-content {
    padding: 4px 0 30px;
}

/* Cadastre-se: o MESMO cartão do login, mas com a sombra em CARVÃO — irmãos
   com hierarquia (entrar é a ação principal, laca; cadastrar é a secundária).
   Sem isto, a coluna da direita parecia inacabada ao lado do cartão do login. */
body.woocommerce-account form.woocommerce-form-register {
    max-width: 460px;
    margin: 10px 0 40px;
    padding: 26px 24px;
    background: #ffffff;
    border: 1px solid var(--odm-gray-2);
    border-radius: 0;
    box-shadow: 10px 10px 0 var(--odm-charcoal);
}

/* Os títulos ("Entrar" / "Cadastre-se") ganham o traço-laca de seção
   (assinatura do site) e caixa-alta, ecoando o "MINHA CONTA" logo acima.
   Dois seletores porque o WooCommerce muda o markup: com cadastro ligado há o
   wrapper #customer_login (duas colunas); sem, o h2 fica solto no .woocommerce. */
body.woocommerce-account #customer_login h2,
body.woocommerce-account .woocommerce > h2 {
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

body.woocommerce-account #customer_login h2::before,
body.woocommerce-account .woocommerce > h2::before {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    margin-bottom: 12px;
    background: var(--odm-laca);
}

/* Texto de privacidade do cadastro: informativo, não protagonista */
body.woocommerce-account .woocommerce-form-register .woocommerce-privacy-policy-text p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--odm-gray-1);
}

/* Botão "Entrar com o Google" (Site Kit injeta o container; o botão em si é um
   iframe do Google — estilizamos o ENTORNO). O divisor "ou" nasce por CSS no
   próprio container: se o Google login sair do ar, o divisor some junto. */
body.woocommerce-account .googlesitekit-sign-in-with-google__frontend-output-button {
    margin: 4px 0 6px;
}

body.woocommerce-account .googlesitekit-sign-in-with-google__frontend-output-button::after {
    content: "— ou com e-mail e senha —";
    display: block;
    margin: 16px 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--odm-clay);
}

@media (max-width: 640px) {
    body.woocommerce-account form.woocommerce-form-login {
        box-shadow: 8px 8px 0 var(--odm-laca);
    }

    body.woocommerce-account form.woocommerce-form-register {
        box-shadow: 8px 8px 0 var(--odm-charcoal);
    }
}

/* ==========================================================================
   Ajustes finos (rodada de screenshots)
   ========================================================================== */

/* Logo do header: tamanho controlado pelo Customizer (Cabeçalho > logo). */

/* 2) Títulos de carrinho/checkout em caixa-alta (consistência) */
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title {
    text-transform: uppercase;
}

/* 7) Cursos: "Próximos passos" ocupa a largura toda (sem buraco na grade) */
body.odm-page-cursos .courses-grid .courses-card:last-child {
    grid-column: 1 / -1;
}

/* 8) Cursos: régua laca no hero (consistência com Home/Sobre/Contato) */
body.odm-page-cursos .courses-hero {
    border-top: 4px solid var(--odm-laca);
    padding-top: 20px;
}

/* 10) Blog: cards alinhados à esquerda (padrão editorial do site) */
body.blog .posts-archive article.post,
body.blog .posts-archive .entry-title,
body.blog .posts-archive .entry-meta {
    text-align: left;
}

/* ==========================================================================
   Página de busca — resultados agrupados (Produtos / Blog / Páginas)
   ========================================================================== */
.odm-search-shell {
    max-width: var(--odm-shell-max);
    margin: 0 auto;
    padding: var(--odm-shell-top) var(--odm-shell-side) var(--odm-shell-bottom);
}

.odm-search-header {
    border-top: 4px solid var(--odm-laca);
    padding-top: 20px;
    margin-bottom: 34px;
}

.odm-search-header h1 {
    margin: 10px 0 8px;
    font-size: clamp(30px, 4.6vw, 54px);
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.odm-search-count {
    margin: 0;
    color: var(--odm-gray-1);
}

.odm-search-section {
    margin-bottom: 44px;
}

.odm-search-section > h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--odm-gray-2);
    font-size: clamp(20px, 2.4vw, 28px);
    text-transform: uppercase;
}

.odm-search-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: var(--odm-laca);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
}

/* Produtos: mesma linguagem de galeria da loja */
.odm-search-products ul.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.odm-search-products ul.products::before,
.odm-search-products ul.products::after {
    content: none;
}

.odm-search-products ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 0 18px;
    background: transparent;
    border: none;
    text-align: left;
}

.odm-search-products ul.products li.product .loop-image-wrap {
    margin: 0 12px 22px 0;
    box-shadow: 8px 8px 0 var(--odm-laca);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.odm-search-products ul.products li.product:hover .loop-image-wrap {
    transform: translate(-3px, -3px);
    box-shadow: 13px 13px 0 var(--odm-laca);
}

.odm-search-products ul.products li.product .woocommerce-loop-product__title,
.odm-search-products ul.products li.product .botiga-wc-loop-product__title {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.25;
}

.odm-search-products ul.products li.product .price {
    display: block;
    margin: 0 0 12px;
    font-weight: 700;
    color: var(--odm-charcoal);
}

.odm-search-products ul.products li.product .button {
    margin: 0;
}

/* Posts do blog */
.odm-search-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.odm-search-card {
    padding: 18px;
    background: #ffffff;
    border: 1px solid var(--odm-gray-2);
    border-top: 3px solid var(--odm-laca);
}

.odm-search-card time {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--odm-gray-1);
}

.odm-search-card h3 {
    margin: 6px 0 8px;
    font-size: 20px;
    line-height: 1.2;
}

.odm-search-card h3 a {
    color: var(--odm-ink);
    text-decoration: none;
}

.odm-search-card h3 a:hover {
    color: var(--odm-laca-dark);
}

.odm-search-card p {
    margin: 0;
    color: var(--odm-gray-1);
    line-height: 1.6;
}

/* Páginas */
.odm-search-pagelist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.odm-search-pagelist li {
    padding: 13px 0;
    border-bottom: 1px solid var(--odm-gray-3);
}

.odm-search-pagelist a {
    font-weight: 700;
    color: var(--odm-charcoal);
    text-decoration: none;
}

.odm-search-pagelist a:hover {
    color: var(--odm-laca-dark);
}

.odm-search-pagelist span {
    display: block;
    margin-top: 2px;
    color: var(--odm-gray-1);
}

/* Vazio */
.odm-search-empty h2 {
    text-transform: uppercase;
}

.odm-search-empty p {
    color: var(--odm-gray-1);
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .odm-search-products ul.products {
        grid-template-columns: repeat(2, 1fr);
    }

    .odm-search-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .odm-search-products ul.products {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Botão "Adicionar ao carrinho": feedback pós-clique (sem sair da página)
   ========================================================================== */

/* Estado "Adicionado ✓" (aplicado pelo odm-cart-button.js) */
ul.products li.product .button.odm-added {
    background: var(--odm-charcoal) !important;
    border-color: var(--odm-charcoal) !important;
    color: #ffffff !important;
}

/* Esconde o link "Ver carrinho" que o Woo injeta ao lado do botão na grade
   (o contador do header já cumpre esse papel) */
ul.products li.product a.added_to_cart {
    display: none !important;
}

/* ==========================================================================
   Menu do header: pontos vermelhos SÓ entre os itens (sem pontas), centrados
   --------------------------------------------------------------------------
   ESCOPO IMPORTA. O Botiga renderiza DOIS menus e repete o id #primary-menu nos
   dois: o de desktop (nav#site-navigation) e o do painel lateral do celular
   (nav#site-navigation-mobile, dentro de .botiga-offcanvas-menu).

   Enquanto isso aqui usava `.main-navigation`, casava com AMBOS — e o layout
   horizontal com pontinhos invadia o menu do celular, que virava uma sopa de
   itens quebrando linha ("Loja • Cursos / • Blog da Oficina / • Contato •
   Sobre"). Por isso agora o seletor é o id do nav de DESKTOP.
   ========================================================================== */
#site-navigation #primary-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#site-navigation #primary-menu > li {
    display: flex;
    align-items: center;
    /* zera os 35px de margem-direita nativa do Botiga (assimétrica);
       o espaçamento passa a vir só do ponto, igual dos dois lados */
    margin: 0;
}

/* Ponto antes de cada item, exceto o 1º = separador centralizado entre itens */
#site-navigation #primary-menu > li + li::before {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    width: 5px;
    height: 5px;
    margin: 0 20px;
    border-radius: 50%;
    background: var(--odm-laca);
}

/* Rede de segurança: o menu do celular é uma LISTA VERTICAL, sem pontos.
   Se algum dia o Botiga mudar os ids, isto garante que nada horizontal vaze. */
.botiga-offcanvas-menu #primary-menu {
    display: block;
}

.botiga-offcanvas-menu #primary-menu > li {
    display: block;
    margin: 0;
}

.botiga-offcanvas-menu #primary-menu > li + li::before {
    content: none;
}

.botiga-offcanvas-menu #primary-menu > li > a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--odm-gray-2);
}

/* ==========================================================================
   Sombra laca nas imagens dos posts (blog) — respeitando o tamanho original
   ========================================================================== */
.single-post .entry-content img,
.single-post .wp-post-image,
.single-post .post-thumbnail img {
    box-shadow: 10px 10px 0 var(--odm-laca);
    max-width: 100%;
    height: auto;
}

/* garante que a moldura da imagem não corte a sombra (só no post individual;
   no arquivo do blog a imagem é full-bleed com overflow hidden — ver seção do arquivo) */
.single-post .entry-content figure,
.single-post .post-thumbnail {
    overflow: visible;
    background: transparent;
}

/* respiro à direita/baixo p/ a sombra caber (não altera o tamanho da imagem) */
.single-post .entry-content img,
.single-post .wp-post-image {
    margin-bottom: 16px;
    margin-right: 4px;
}



/* ==========================================================================
   Post individual (single) — leitura editorial "Laca Kabuki"
   ========================================================================== */
body.single-post .site-main {
    padding-top: var(--odm-shell-top);
    padding-bottom: var(--odm-shell-bottom);
}

/* Coluna de leitura estreita e centrada */
body.single-post article.post {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 var(--odm-shell-side);
}

/* Cabeçalho: régua laca + overline + título caixa-alta + meta */
body.single-post .entry-header {
    margin-bottom: 26px;
    text-align: left;
}

body.single-post .entry-header::before {
    content: "Blog da Oficina";
    display: block;
    margin-bottom: 16px;
    padding-top: 20px;
    border-top: 4px solid var(--odm-laca);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--odm-clay);
}

body.single-post .entry-title {
    margin: 0 0 18px;
    font-size: clamp(30px, 5vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

body.single-post .entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--odm-gray-1);
}

body.single-post .entry-meta a {
    color: var(--odm-laca-dark);
    text-decoration: none;
}

/* Esconde o timestamp "updated" duplicado que o Botiga imprime */
body.single-post .entry-meta .updated {
    display: none;
}

/* Imagem destacada com a sombra dura laca (assinatura) */
body.single-post .post-thumbnail {
    margin: 0 0 34px;
    overflow: visible;
    background: transparent;
}

body.single-post .post-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 12px 12px 0 var(--odm-laca);
}

/* Tipografia de leitura */
body.single-post .entry-content {
    font-size: 18px;
    line-height: 1.8;
    color: var(--odm-ink);
}

body.single-post .entry-content > * {
    margin-bottom: 1.25em;
}

body.single-post .entry-content h2 {
    margin: 1.7em 0 0.6em;
    font-size: clamp(24px, 3.2vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

body.single-post .entry-content h3 {
    margin: 1.5em 0 0.5em;
    font-size: 23px;
    line-height: 1.2;
}

body.single-post .entry-content a {
    color: var(--odm-laca-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

body.single-post .entry-content blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 24px;
    border-left: 4px solid var(--odm-laca);
    font-family: var(--odm-font-display);
    font-size: clamp(20px, 2.6vw, 26px);
    line-height: 1.4;
    font-style: normal;
    color: var(--odm-charcoal);
}

body.single-post .entry-content blockquote p:last-child {
    margin-bottom: 0;
}

body.single-post .entry-content ul,
body.single-post .entry-content ol {
    padding-left: 1.3em;
}

body.single-post .entry-content li {
    margin-bottom: 0.5em;
}

body.single-post .entry-content figure {
    margin: 1.6em 0;
}

body.single-post .entry-content figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: var(--odm-gray-1);
    text-align: center;
}

/* Rodapé do post: categorias/tags viram etiquetas */
body.single-post .entry-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 36px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--odm-gray-2);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--odm-gray-1);
}

body.single-post .entry-footer a {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--odm-gray-2);
    border-radius: 3px;
    color: var(--odm-charcoal);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

body.single-post .entry-footer a:hover {
    border-color: var(--odm-laca);
    color: var(--odm-laca-dark);
}

/* Navegação entre posts + área de comentários no mesmo eixo de leitura */
body.single-post .post-navigation,
body.single-post .comments-area {
    max-width: 780px;
    margin: 30px auto 0;
    padding: 22px var(--odm-shell-side) 0;
    border-top: 1px solid var(--odm-gray-2);
}

body.single-post .post-navigation a {
    color: var(--odm-laca-dark);
    text-decoration: none;
}

body.single-post .comments-title,
body.single-post .comment-reply-title {
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.1;
    text-transform: uppercase;
}

/* ==========================================================================
   Páginas simples (Privacidade, Trocas/Reembolso) — mesma leitura editorial
   ========================================================================== */
body.odm-legal .site-main {
    padding-top: var(--odm-shell-top);
    padding-bottom: var(--odm-shell-bottom);
}

body.odm-legal .entry-header,
body.odm-legal .entry-content {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--odm-shell-side);
    padding-right: var(--odm-shell-side);
}

body.odm-legal .entry-title {
    margin: 0 auto 24px;
    padding-top: 22px;
    border-top: 4px solid var(--odm-laca);
    font-size: clamp(30px, 5vw, 52px);
    line-height: 1.03;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

body.odm-legal .entry-content {
    font-size: 17px;
    line-height: 1.8;
    color: var(--odm-ink);
}

body.odm-legal .entry-content > * {
    margin-bottom: 1.2em;
}

body.odm-legal .entry-content h2 {
    margin: 1.6em 0 0.5em;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.15;
    text-transform: uppercase;
}

body.odm-legal .entry-content h3 {
    margin: 1.4em 0 0.4em;
    font-size: 21px;
}

body.odm-legal .entry-content a {
    color: var(--odm-laca-dark);
}

body.odm-legal .entry-content ul,
body.odm-legal .entry-content ol {
    padding-left: 1.3em;
}

body.odm-legal .entry-content li {
    margin-bottom: 0.5em;
}

body.odm-legal .entry-content code {
    padding: 2px 6px;
    background: var(--odm-cream-2);
    border-radius: 3px;
    font-size: 14px;
}

/* ==========================================================================
   Arquivo do blog — layout editorial (1º post em destaque) + subtítulo
   ========================================================================== */
/* Subtítulo abaixo do H1 "Blog da Oficina" */
body.blog .page-header::after {
    content: "Pesquisa, processo de confecção e referências sobre a arte da máscara teatral.";
    display: block;
    /* `auto` nas laterais: o cabeçalho do Botiga é centralizado, e sem isso o
       bloco encostava à esquerda enquanto o título ficava no meio — desalinhado. */
    max-width: 680px;
    margin: 14px auto 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--odm-gray-1);
    /* evita o órfão ("teatral." sozinho na segunda linha) */
    text-wrap: balance;
}

/* Grade explícita (neutraliza as classes col-lg-4 do Botiga) */
body.blog .posts-archive .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

body.blog .posts-archive .row article.post {
    width: auto;
    max-width: none;
    margin: 0;
    float: none;
}

/* 1º post = destaque horizontal ocupando a linha inteira */
body.blog .posts-archive .row article.post:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    /* As linhas 1fr no topo e na base absorvem a folga. Sem elas, a imagem
       (que atravessa o grid e tem min-height) esticava as três linhas de texto
       e espalhava data, título e resumo com buracos enormes entre eles.
       Agora o bloco de texto fica junto e centrado verticalmente. */
    grid-template-rows: 1fr auto auto auto 1fr;
}

body.blog .posts-archive .row article.post:first-child > .post-thumbnail {
    grid-column: 1;
    grid-row: 1 / -1;
    height: 100%;
}

body.blog .posts-archive .row article.post:first-child > .post-thumbnail img {
    height: 100%;
    min-height: 320px;
    aspect-ratio: auto;
}

/* Data, título e resumo ocupam as 3 linhas do meio, coladas entre si */
body.blog .posts-archive .row article.post:first-child > .entry-meta {
    grid-column: 2;
    grid-row: 2;
    padding: 0 28px 0 24px;
}

body.blog .posts-archive .row article.post:first-child > .entry-header {
    grid-column: 2;
    grid-row: 3;
    padding: 0 28px 0 24px;
}

body.blog .posts-archive .row article.post:first-child > .entry-content {
    grid-column: 2;
    grid-row: 4;
    padding: 0 28px 0 24px;
}

body.blog .posts-archive .row article.post:first-child .entry-title {
    font-size: clamp(26px, 3.4vw, 40px);
}

@media (max-width: 900px) {
    body.blog .posts-archive .row {
        grid-template-columns: 1fr 1fr;
    }
    /* no tablet/celular o destaque volta a ser card vertical */
    body.blog .posts-archive .row article.post:first-child {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
    }
    body.blog .posts-archive .row article.post:first-child > .post-thumbnail img {
        aspect-ratio: 3 / 2;
        min-height: 0;
    }
}

@media (max-width: 560px) {
    body.blog .posts-archive .row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Aviso de cookies (LGPD) + linha legal do rodapé
   ========================================================================== */
.odm-cookie {
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: 20px;
    width: min(880px, calc(100% - 32px));
    transform: translate(-50%, 20px);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    background: var(--odm-charcoal);
    color: var(--odm-paper);
    border-top: 4px solid var(--odm-laca);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.odm-cookie.is-open {
    opacity: 1;
    transform: translate(-50%, 0);
}

.odm-cookie-inner {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 22px 26px;
}

.odm-cookie-title {
    margin: 0 0 6px;
    font-family: var(--odm-font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.odm-cookie-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(246, 244, 239, 0.82);
}

.odm-cookie-text a {
    color: var(--odm-paper);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--odm-laca);
}

.odm-cookie-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.odm-cookie-btn {
    padding: 11px 20px;
    border-radius: 3px;
    font-family: var(--odm-font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.odm-cookie-btn--solid {
    border: 1px solid var(--odm-laca);
    background: var(--odm-laca);
    color: #fff;
}

.odm-cookie-btn--solid:hover {
    background: var(--odm-laca-dark);
    border-color: var(--odm-laca-dark);
}

.odm-cookie-btn--ghost {
    border: 1px solid rgba(246, 244, 239, 0.35);
    background: transparent;
    color: var(--odm-paper);
}

.odm-cookie-btn--ghost:hover {
    border-color: var(--odm-paper);
}

/* "Preferências de cookies" no rodapé: botão que parece link */
.odm-cookie-prefs {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    opacity: 0.85;
}

.odm-cookie-prefs:hover {
    color: var(--odm-laca);
    opacity: 1;
}

/* Linha do CNPJ, abaixo das colunas do rodapé */
.odm-footer-legal {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding-top: 22px;
    border-top: 1px solid rgba(246, 244, 239, 0.14);
}

.odm-footer-legal p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(246, 244, 239, 0.55);
}

@media (max-width: 720px) {
    .odm-cookie-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .odm-cookie-actions {
        flex-direction: column-reverse;
    }

    .odm-cookie-btn {
        width: 100%;
    }
}

/* ==========================================================================
   Sobre em blocos nativos do Gutenberg — neutraliza o espaçamento do core
   --------------------------------------------------------------------------
   Os blocos Group ganham `is-layout-flow`, e o CSS do WordPress injeta
   `margin-block-start: 24px` em TODO filho, além de `margin-bottom: 1em` nas
   figuras de imagem. Isso soma ao gap/grid do nosso design e desloca o layout.

   Como o nosso CSS já define a margem de cada elemento explicitamente, basta
   zerar o que o core inventa.

   A ESPECIFICIDADE AQUI É PROPOSITAL — precisa cair numa janela estreita:
   - ACIMA das regras do core, que usam :where() e valem (0,0,0);
   - ABAIXO das nossas, que são `body.odm-page-sobre .algo` = (0,2,1) ou mais.
   Por isso os seletores têm exatamente DUAS classes = (0,2,0). Prefixar com
   `body.odm-page-sobre` empataria com as nossas regras e, vindo depois no
   arquivo, o reset apagaria margens do próprio design — foi o que aconteceu na
   primeira tentativa, em que o .about-kicker perdeu os seus 12px.

   E note: quem tem `is-layout-flow` é o PRÓPRIO `.about-editorial`. Por isso a
   1ª linha casa o mesmo elemento (`.about-editorial.is-layout-flow`) e não só
   um descendente — senão os <section> filhos ficariam de fora, que foi o outro
   erro da primeira tentativa.
   ========================================================================== */
.about-editorial.is-layout-flow > *,
.about-editorial .is-layout-flow > *,
.about-editorial .wp-block-image,
.contact-editorial.is-layout-flow > *,
.contact-editorial .is-layout-flow > *,
.contact-editorial .wp-block-image,
.courses-editorial.is-layout-flow > *,
.courses-editorial .is-layout-flow > *,
.courses-editorial .wp-block-image {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* ==========================================================================
   Ordenação do catálogo: rótulo fora do campo ("Ordenar por: [ opções ]")
   ========================================================================== */
.odm-ordering {
    display: flex;
    align-items: center;
    gap: 10px;
}

.odm-ordering-label {
    flex: 0 0 auto;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--odm-gray-1);
    white-space: nowrap;
}

@media (max-width: 640px) {
    /* empilhado, o campo ocupa a linha e o rótulo fica acima */
    .odm-ordering {
        flex-wrap: wrap;
        gap: 6px;
    }

    .odm-ordering .orderby {
        flex: 1 0 100%;
    }
}

/* ==========================================================================
   Busca de endereço por CEP — estado de carregamento e mensagens
   ========================================================================== */
.odm-cep-buscando input {
    background-image: linear-gradient(90deg, transparent, rgba(214, 52, 23, 0.12), transparent);
    background-size: 200% 100%;
    animation: odm-cep-pulse 1s linear infinite;
}

@keyframes odm-cep-pulse {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

.odm-cep-msg {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--odm-laca-dark);
}

@media (prefers-reduced-motion: reduce) {
    .odm-cep-buscando input {
        animation: none;
    }
}

/* ==========================================================================
   Checkout clássico — grade de 2 colunas ancorada nos IDs dos campos
   --------------------------------------------------------------------------
   POR QUE POR ID, E NÃO PELAS CLASSES: o `address-i18n.js` do WooCommerce
   reaplica o "locale" do país e REESCREVE as classes de largura dos campos
   (os `form-row-last` viram `form-row-wide`), empilhando tudo. O locale do
   Brasil não define classes, então não há como fixar isso pelo caminho normal
   — qualquer regra baseada em `.form-row-last` é apagada pelo JS.

   Um grid no contêiner, com os campos largos marcados por ID, é imune: o JS
   pode trocar as classes à vontade que o layout não se mexe.
   ========================================================================== */
@media (min-width: 768px) {
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
    }

    /* Neutraliza os floats e larguras que o WooCommerce/JS aplicam: quem manda
       agora é o grid. */
    .woocommerce-billing-fields__field-wrapper > .form-row,
    .woocommerce-shipping-fields__field-wrapper > .form-row {
        float: none;
        width: auto;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* Campos que ocupam a linha inteira. O resto se acomoda em pares:
       Nome|Sobrenome · CEP|Endereço · Número|Complemento · Bairro|Cidade */
    #billing_persontype_field,
    #billing_cpf_field,
    #billing_cnpj_field,
    #billing_company_field,
    #billing_ie_field,
    #billing_rg_field,
    #billing_birthdate_field,
    #billing_sex_field,
    #billing_country_field,
    #billing_state_field,
    #billing_email_field,
    #shipping_persontype_field,
    #shipping_company_field,
    #shipping_country_field,
    #shipping_state_field {
        grid-column: 1 / -1;
    }
}

/* Campos escondidos pelo JS (CNPJ quando é Pessoa Física, por exemplo) não
   podem deixar um buraco na grade. */
.woocommerce-billing-fields__field-wrapper > .form-row[style*="display: none"],
.woocommerce-shipping-fields__field-wrapper > .form-row[style*="display: none"] {
    display: none !important;
}

/* ==========================================================================
   Depoimentos — quem já encomendou
   ========================================================================== */
.odm-depoimentos {
    max-width: var(--odm-shell-max);
    margin: 48px auto 8px;
    padding: 32px var(--odm-shell-side) 0;
    border-top: 1px solid var(--odm-gray-2);
}

/* Cabeçalho do carrossel: overline à esquerda, setas à direita. */
.odm-depoimentos-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px;
}

.odm-depoimentos-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--odm-clay);
}

/* traço laca do overline, igual ao resto do site */
.odm-depoimentos-kicker::before {
    content: "";
    width: 22px;
    height: 3px;
    background: var(--odm-laca);
}

/* setas do carrossel: da mesma família, um tom menores */
.odm-depoimentos-nav {
    margin-top: 0;
    gap: 10px;
}

.odm-depoimentos-nav .odm-prev,
.odm-depoimentos-nav .odm-next {
    width: 38px;
    height: 38px;
    font-size: 20px;
}

/* Carrossel em vez de grid: uma fileira que DESLIZA (scroll-snap, motor do
   odm-slider.js). Escala para muitos depoimentos sem esticar a página na
   vertical — mostra alguns e o resto vem deslizando. */
.odm-depoimentos-slides {
    gap: 22px;
    padding-bottom: 6px;
}

/* cada card é um slide de largura fixa; ~3 visíveis no desktop */
.odm-depoimentos-slider .odm-depoimento {
    flex: 0 0 300px;
    scroll-snap-align: start;
}

.odm-depoimento {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--odm-gray-2);
    border-top: 3px solid var(--odm-laca);
}

.odm-depoimento-foto {
    overflow: hidden;
    background: var(--odm-cream-2);
}

/* 4/5 (retrato), não 4/3 (paisagem): as fotos de máscara são retrato — a do
   Arthur é 1440×1794, ratio 0,80, ou seja 4/5 quase exato. Em 4/3 o cover
   cortava o topo da cabeça e o queixo, deixando só uma faixa do meio. Em 4/5
   a máscara aparece inteira. object-position no alto porque, se alguma foto
   vier mais alta e precisar cortar, o rosto (que fica em cima) é o que importa. */
.odm-depoimento-foto img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.45s ease;
}

.odm-depoimento:hover .odm-depoimento-foto img {
    transform: scale(1.04);
}

.odm-depoimento-texto {
    flex: 1 1 auto;
    margin: 0;
    padding: 16px 20px 12px;
    border: 0;
    color: var(--odm-charcoal);
}

/* O texto vem dentro de um <p> (o wpautop embrulha). E o Botiga tem uma regra
   `blockquote p { font-weight:600; font-size:32px; line-height:41px }` que, por
   mirar o <p>, vencia qualquer coisa que eu pusesse no <blockquote> — era ELA,
   e não o meu CSS, que deixava a fala em corpo de manchete. Por isso as
   reduções anteriores não surtiam efeito. Aqui miramos o <p> e ganhamos por
   especificidade (0,1,1 > 0,0,2): fonte de corpo (Work Sans 400), pequena. */
.odm-depoimento-texto p {
    margin: 0;
    font-family: var(--odm-font-body);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.6;
}

/* dois parágrafos (depoimento mais longo) ganham respiro entre si */
.odm-depoimento-texto p + p {
    margin-top: 0.7em;
}

/* aspa laca — a marca de que ali fala uma pessoa, não a loja */
.odm-depoimento-texto::before {
    content: "\201C";
    display: block;
    margin-bottom: 0;
    font-size: 26px;
    line-height: 0.6;
    color: var(--odm-laca);
}

.odm-depoimento-autor {
    padding: 0 20px 18px;
}

.odm-depoimento-nome {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--odm-ink);
}

.odm-depoimento-papel {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--odm-gray-1);
}

@media (max-width: 560px) {
    .odm-depoimentos {
        margin-top: 36px;
        padding-top: 26px;
    }

    /* no celular, um card domina e o próximo "espia" na borda (convida a deslizar) */
    .odm-depoimentos-slider .odm-depoimento {
        flex-basis: 82%;
    }
}

/* ==========================================================================
   Botão de zoom da galeria do produto
   --------------------------------------------------------------------------
   O WooCommerce injeta esse gatilho por JS e usa o EMOJI 🔍 literal como
   ícone — o desenho vem do sistema operacional, não do nosso design, e por
   isso destoa de tudo. Aqui o emoji é escondido e trocado por um SVG próprio,
   num botão laca reto (radius 3px), no vocabulário do resto do site.
   ========================================================================== */
.woocommerce-product-gallery {
    position: relative;
}

/* Setas da galeria (flexslider) — mesma família das setas do site: quadradas,
   contorno carvão, radius 3px, hover invertido. Aparecem no hover da galeria,
   centradas nas laterais da imagem. O <a> do flexslider traz o texto
   "Previous/Next", que escondemos (font-size:0) e trocamos pela seta no ::before. */
.woocommerce-product-gallery .flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-product-gallery .flex-direction-nav a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--odm-charcoal);
    border-radius: 3px;
    background: var(--odm-paper);
    color: var(--odm-charcoal);
    font-size: 0; /* esconde o texto "Previous"/"Next" */
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.15s ease, color 0.15s ease;
}

.woocommerce-product-gallery:hover .flex-direction-nav a,
.woocommerce-product-gallery .flex-direction-nav a:focus-visible {
    opacity: 1;
}

.woocommerce-product-gallery .flex-direction-nav a:hover {
    background: var(--odm-charcoal);
    color: var(--odm-paper);
}

.woocommerce-product-gallery .flex-direction-nav a.flex-disabled {
    opacity: 0 !important; /* no fim/começo, some (a galeria não faz loop) */
    cursor: default;
}

.woocommerce-product-gallery .flex-nav-prev a { left: 12px; }
.woocommerce-product-gallery .flex-nav-next a { right: 12px; }

.woocommerce-product-gallery .flex-direction-nav a::before {
    content: "‹";
    font-size: 24px;
    line-height: 1;
}

.woocommerce-product-gallery .flex-direction-nav .flex-next::before {
    content: "›";
}

.woocommerce-product-gallery__trigger {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 9;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;

    border: 0;
    border-radius: 3px;
    background: var(--odm-laca);
    box-shadow: 0 4px 14px rgba(24, 24, 24, 0.18);

    font-size: 0;          /* silencia qualquer texto/emoji remanescente */
    line-height: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

/* mata o emoji do WooCommerce */
.woocommerce-product-gallery__trigger span,
.woocommerce-product-gallery__trigger img {
    display: none;
}

/* Nosso ícone: lupa desenhada em CSS puro — um círculo (::before) e o cabo
   (::after). Sem data:URI, que é onde eu já errei uma vez (espaços não
   codificados dentro do SVG quebram a URL e o ícone some, deixando só o
   quadrado vermelho). Traço, sem preenchimento, no espírito do desenho do site. */
.woocommerce-product-gallery__trigger::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 12px;
    display: block;
    width: 13px;
    height: 13px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-sizing: border-box;
}

.woocommerce-product-gallery__trigger::after {
    content: "";
    position: absolute;
    top: 25px;
    left: 25px;
    display: block;
    width: 2px;
    height: 8px;
    background: #ffffff;
    border-radius: 1px;
    transform: rotate(-45deg);
    transform-origin: top center;
}

.woocommerce-product-gallery__trigger:hover,
.woocommerce-product-gallery__trigger:focus-visible {
    background: var(--odm-charcoal);
    transform: translateY(-1px);
}

.woocommerce-product-gallery__trigger:focus-visible {
    outline: 2px solid var(--odm-charcoal);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce-product-gallery__trigger {
        transition: none;
    }
    .woocommerce-product-gallery__trigger:hover {
        transform: none;
    }
}

/* ==========================================================================
   Carrinho — Laca Kabuki
   --------------------------------------------------------------------------
   O layout padrão empilha a tabela e joga a caixa de totais flutuando abaixo,
   à direita — deixando um VAZIO enorme à esquerda dela. Aqui vira duas colunas:
   itens à esquerda, totais à direita e grudados na rolagem.
   ========================================================================== */
/* ATENÇÃO AO SELETOR: neste tema NÃO existe `.cart-collaterals`. O DOM real é
   `div.woocommerce > div.cart_totals`, sem wrapper. Escrevi a primeira versão
   mirando o .cart-collaterals (que é o padrão do WooCommerce) e NENHUMA daquelas
   regras aplicou — as duas colunas funcionaram por acaso, porque o .cart_totals
   caiu sozinho na coluna 2. O sticky e o zeramento de margem simplesmente não
   existiam. Aqui as regras miram o elemento que de fato está na página. */
@media (min-width: 900px) {
    body.woocommerce-cart .woocommerce {
        display: grid;
        grid-template-columns: 1.55fr 1fr;
        gap: 44px;
        align-items: start;
    }

    body.woocommerce-cart .woocommerce .woocommerce-notices-wrapper {
        grid-column: 1 / -1;
    }

    body.woocommerce-cart .woocommerce .woocommerce-cart-form {
        grid-column: 1;
        margin-top: 0;
    }

    /* Especificidade (0,3,1): precisa vencer `.woocommerce-cart .cart_totals`
       do WooCommerce (0,2,0), que impõe `margin-top: 90px` — resquício do
       layout antigo, em que a caixa vinha ABAIXO da tabela e pedia respiro.
       No grid de duas colunas, aqueles 90px viram desalinhamento puro. */
    body.woocommerce-cart .woocommerce > .cart_totals {
        grid-column: 2;
        margin-top: 0;
        float: none;
        width: auto;
        /* acompanha a rolagem: o total fica sempre à vista */
        position: sticky;
        top: 24px;
    }
}

/* --- Tabela de itens --- */
body.woocommerce-cart .shop_table.cart {
    border: 0;
    border-collapse: collapse;
    border-radius: 0;
}

body.woocommerce-cart .shop_table.cart thead th {
    padding: 0 10px 12px;
    border: 0;
    border-bottom: 2px solid var(--odm-laca);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--odm-clay);
    text-align: left;
}

body.woocommerce-cart .shop_table.cart tbody td {
    padding: 20px 10px;
    border: 0;
    border-bottom: 1px solid var(--odm-gray-2);
    background: transparent;
    vertical-align: middle;
}

body.woocommerce-cart td.product-thumbnail img {
    display: block;
    width: 96px;
    height: 96px;
    max-width: none;
    object-fit: cover;
    border-radius: 2px;
}

body.woocommerce-cart td.product-name a {
    font-family: var(--odm-font-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--odm-ink);
    text-decoration: none;
}

body.woocommerce-cart td.product-name a:hover {
    color: var(--odm-laca-dark);
}

body.woocommerce-cart td.product-subtotal {
    font-weight: 700;
    color: var(--odm-ink);
}

/* o "x" de remover: discreto, e laca no hover */
body.woocommerce-cart td.product-remove a.remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    color: var(--odm-gray-1);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

body.woocommerce-cart td.product-remove a.remove:hover {
    background: var(--odm-laca);
    color: #ffffff;
}

/* --- Linha de ações: cupom + atualizar --- */
body.woocommerce-cart td.actions {
    padding: 26px 0 0;
    border-bottom: 0;
}

body.woocommerce-cart .coupon {
    display: flex;
}

body.woocommerce-cart #coupon_code {
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--odm-gray-2);
    border-right: 0;
    border-radius: 3px 0 0 3px;
    background: #fff;
    font-size: 14px;
}

body.woocommerce-cart .coupon .button {
    border-radius: 0 3px 3px 0;
}

/* --- Botões, no vocabulário do site: retos, caixa-alta --- */
body.woocommerce-cart .button,
body.woocommerce-cart .checkout-button {
    border-radius: 3px;
    padding: 13px 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* cupom e atualizar: contorno carvão (ações secundárias) */
body.woocommerce-cart button[name="apply_coupon"],
body.woocommerce-cart button[name="update_cart"] {
    border: 1px solid var(--odm-charcoal);
    background: transparent;
    color: var(--odm-charcoal);
}

body.woocommerce-cart button[name="apply_coupon"]:hover,
body.woocommerce-cart button[name="update_cart"]:not(:disabled):hover {
    background: var(--odm-charcoal);
    color: var(--odm-paper);
}

/* "Atualizar carrinho" nasce desabilitado — que ele PAREÇA desabilitado, em vez
   de um botão cinza que o visitante tenta clicar sem entender por que não reage */
body.woocommerce-cart button[name="update_cart"]:disabled {
    border-color: var(--odm-gray-2);
    color: var(--odm-gray-1);
    background: transparent;
    opacity: 1;
    cursor: not-allowed;
}

/* --- Caixa de totais --- */
body.woocommerce-cart .cart_totals {
    padding: 26px 24px;
    background: #ffffff;
    border: 1px solid var(--odm-gray-2);
    border-top: 3px solid var(--odm-laca);
    border-radius: 0;
}

body.woocommerce-cart .cart_totals h2 {
    margin: 0 0 18px;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

body.woocommerce-cart .cart_totals table {
    border: 0;
    margin: 0;
}

body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid var(--odm-gray-2);
    background: transparent;
    font-size: 14px;
}

body.woocommerce-cart .cart_totals table th {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--odm-gray-1);
    font-size: 12px;
}

body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td {
    padding-top: 18px;
    border-bottom: 0;
}

body.woocommerce-cart .cart_totals .order-total td .amount {
    font-family: var(--odm-font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--odm-ink);
}

body.woocommerce-cart .wc-proceed-to-checkout {
    padding: 20px 0 0;
}

body.woocommerce-cart .checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--odm-laca);
    border: 1px solid var(--odm-laca);
    color: #ffffff;
}

body.woocommerce-cart .checkout-button:hover {
    background: var(--odm-charcoal);
    border-color: var(--odm-charcoal);
    color: #ffffff;
}

/* --- "Continuar comprando" --- */
.odm-continuar-comprando {
    display: inline-block;
    margin-top: 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--odm-laca-dark);
    text-decoration: none;
}

.odm-continuar-comprando::before {
    content: "\2190\00a0";
}

.odm-continuar-comprando:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 899px) {
    /* No celular a caixa volta a ficar abaixo da tabela — mas com 30px de
       respiro, não com os 90px que o WooCommerce impõe. */
    body.woocommerce-cart .woocommerce > .cart_totals {
        width: 100%;
        float: none;
        margin-top: 30px;
    }

    body.woocommerce-cart td.product-thumbnail img {
        width: 72px;
        height: 72px;
    }
}

/* Nota do frete fixo — carrinho e checkout */
.odm-frete-nota-linha td {
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--odm-gray-2) !important;
}

.odm-frete-nota {
    margin: 0;
    padding: 12px 14px;
    background: var(--odm-cream-2);
    border-left: 3px solid var(--odm-laca);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--odm-gray-1);
}

.odm-frete-nota strong {
    color: var(--odm-ink);
}

.odm-frete-nota .amount {
    font-weight: 700;
    color: var(--odm-ink);
    white-space: nowrap;
}

/* Nota do PRAZO de produção (carrinho/checkout) — mesma família visual da nota
   do frete, mas com a borda em carvão: uma fala de tempo, a outra de dinheiro. */
.odm-prazo-nota {
    border-left-color: var(--odm-charcoal);
}

/* Instrução da retirada, logo abaixo da opção "Retirada combinada" */
.odm-retirada-instrucao {
    margin: 6px 0 2px;
    padding: 8px 12px;
    background: var(--odm-cream-2);
    border-left: 3px solid var(--odm-laca);
    line-height: 1.5;
}

.odm-retirada-instrucao small {
    font-size: 12px;
    color: var(--odm-gray-1);
}

/* Correções da nota do frete e do botão de cupom.
   A nota herdava `text-align: right` da tabela de totais e ficava espremida
   contra a borda. E o "Aplicar cupom" saía com o texto cinza, parecendo
   desabilitado — a regra do Botiga vencia a nossa por especificidade. */
.odm-frete-nota-linha td {
    text-align: left !important;
}

.odm-frete-nota {
    text-align: left;
}

body.woocommerce-cart .coupon button[name="apply_coupon"],
body.woocommerce-cart .coupon .button[name="apply_coupon"] {
    color: var(--odm-charcoal);
    border-color: var(--odm-charcoal);
    background: transparent;
}

body.woocommerce-cart .coupon button[name="apply_coupon"]:hover {
    color: var(--odm-paper);
    background: var(--odm-charcoal);
}

/* link do Conjunto dentro da nota do frete */
.odm-frete-nota a {
    color: var(--odm-laca-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--odm-gray-2);
}

.odm-frete-nota a:hover {
    text-decoration-color: var(--odm-laca);
}


/* "Atualizar carrinho": o texto saía BRANCO sobre fundo claro — ilegível.
   O Botiga impõe `color: #FFF` via seletores do tipo
   `.button:not(.wc-forward):not(.has-text-color)` — especificidade (0,3,0).
   A minha regra era (0,2,2) e perdia. Aqui ela sobe para (0,3,2) e vence.
   (O "Aplicar cupom" já funcionava porque, por acaso, eu o havia escrito com
   `.coupon` no caminho, o que o deixava em (0,3,2).) */
body.woocommerce-cart .woocommerce button[name="update_cart"],
body.woocommerce-cart .woocommerce button[name="update_cart"]:not(.has-text-color) {
    border: 1px solid var(--odm-charcoal);
    background: transparent;
    color: var(--odm-charcoal);
}

body.woocommerce-cart .woocommerce button[name="update_cart"]:not(:disabled):hover {
    background: var(--odm-charcoal);
    color: var(--odm-paper);
}

/* Desabilitado precisa PARECER desabilitado — não um botão que o visitante
   clica e não entende por que não reage. */
body.woocommerce-cart .woocommerce button[name="update_cart"]:disabled,
body.woocommerce-cart .woocommerce button[name="update_cart"]:disabled:not(.has-text-color) {
    border-color: var(--odm-gray-2);
    background: transparent;
    color: var(--odm-gray-1);
    opacity: 1;
    cursor: not-allowed;
}