/* Tintas Darka — tema canônico (atualizado 2026-05-28)
   Fonte: temp/tintasdarka/tema/home.html (mockup do cliente)
   Substitui completamente o tema herdado de cmarceneiro.
   Aditivos por componente vêm nas próximas fases via apêndice. */

    /* ===================== FALLBACK DE FONTE (anti-CLS) =====================
       A Poppins carrega não-bloqueante (display=swap, ver Base.astro). O swap
       reflowava o texto denso (ex.: buybox da PDP) → CLS 0.27 medido no Lighthouse.
       Este @font-face é o fallback (Arial local) com métricas SOBRESCRITAS pras da
       Poppins: a caixa de linha fica idêntica antes/depois do swap → reflow ~0.
       (ascent+descent+line-gap) × size-adjust = (0.9375+0.3125+0) × 1.12 = 1.40em,
       igual à Poppins. Usado logo após 'Poppins' no font-family. Em sistemas sem
       Arial (Android/Linux) cai no system-ui — sem o benefício, mas sem regressão. */
    @font-face {
      font-family: 'Poppins Fallback';
      src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
      font-weight: 400 900;
      ascent-override: 93.75%;
      descent-override: 31.25%;
      line-gap-override: 0%;
      size-adjust: 112%;
    }

    /* ===================== TOKENS — IDENTIDADE DARKA OFICIAL ===================== */
    :root {
/* Brand — extracted from agency CSS (quem-somos/index.html) */
--darka-green: #00665c;          /* verde petróleo OFICIAL */
--darka-green-dark: #0d2825;     /* verde quase preto OFICIAL */
--darka-green-light: #1e8478;
--darka-yellow: #7fb539;         /* verde lima OFICIAL — usado como CTA secundário */
--darka-yellow-hover: #6aa030;
--darka-terracotta: #B87333;         /* terracota — pigmento de pintor, acento comercial */
--darka-terracotta-hover: #9C6028;
--darka-terracotta-text: #935A26;    /* terracota p/ TEXTO sobre branco — #B87333 dá só 3.8:1; #935A26 ≈ 5.6:1 (WCAG AA) */

/* Neutrals — base branca (creme removido em 2026-05-15: não é cor oficial Darka) */
--bg-primary: #FFFFFF;           /* branco puro — era #f4ede0 creme */
--bg-soft: #F7F7F4;              /* off-white frio quase imperceptível — era #fbf7ef cream-soft */
--bg-darker: #EFEEEA;            /* neutro claro warm leve — era #ebe2d0 bege */
--bg-card: #FFFFFF;
--bg-product: #FFFFFF;           /* fundo do slot de foto */

--text-primary: #1A1A1A;
--text-secondary: #595959;
--text-tertiary: #6A6A66;        /* era #8A8A8A (3.45:1, reprovava WCAG); #6A6A66 ≈ 5.4:1 no branco */
--text-inverse: #FFFFFF;

--border-subtle: #EAEAE6;        /* cinza-warm neutro — era #E8E5E0 bege */
--border-strong: #D5D5D0;        /* base mantida, neutralizada — era #D5D0C8 */

--discount-green: #5A8A4A;
--discount-green-text: #3E6B30;   /* verde p/ TEXTO sobre --discount-bg — #5A8A4A dá 3.5:1; #3E6B30 ≈ 5.4:1 (WCAG AA) */
--discount-bg: #E8F0E2;

/* Aliases semânticos usados em estilos inline (carrinho, checkout, conta…).
   Antes referenciados sem fallback como var(--tintasdarka-*) e resolviam
   pra nada → cor não aplicava. Mantêm os mesmos valores dos fallbacks que
   já apareciam espalhados no código. */
--tintasdarka-green: #5A8A4A;        /* = --discount-green (sucesso/desconto) */
--tintasdarka-green-hover: #4A7A3C;  /* verde mais escuro p/ texto sobre fundo claro */
--tintasdarka-red: #b91c1c;          /* erro/perigo (CEP inválido, sem estoque…) */

/* Spacing */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 40px;
--space-6: 48px;
--space-8: 64px;
--space-10: 80px;
--space-12: 96px;

/* Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 9999px;

/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

--duration-fast: 150ms;
--duration-base: 240ms;
--easing: cubic-bezier(0.4, 0, 0.2, 1);

--container-max: 1320px;
--container-padding: 24px;
    }

    /* ===================== RESET ===================== */
    *,
    *::before,
    *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
    }

    html {
font-size: 16px;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
scroll-behavior: smooth;
    }

    body {
font-family: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, Arial, sans-serif;
font-size: 15px;
line-height: 1.6;
color: var(--text-primary);
background: var(--bg-primary);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
    }

    /* ===================== LUCIDE ICONS (substituiram emojis) ===================== */
    [data-lucide] {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: middle;
stroke-width: 2;
    }
    .icon-lg [data-lucide] { width: 1.5em; height: 1.5em; }
    .icon-xl [data-lucide] { width: 2em; height: 2em; }

    a {
color: inherit;
text-decoration: none;
    }

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

    button {
font: inherit;
cursor: pointer;
border: none;
background: none;
    }

    /* Previne auto-zoom do iOS Safari ao tocar em inputs (exige font-size ≥ 16px) */
    input,
    select,
    textarea {
font-size: 16px;
    }

    ul {
list-style: none;
    }

    .container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding);
    }

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

    /* ===================== TYPOGRAPHY ===================== */
    .heading-xl {
font-weight: 800;
font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--darka-green);
    }

    .heading-lg {
font-weight: 800;
font-size: clamp(1.375rem, 1.5vw + 0.5rem, 1.75rem);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--darka-green);
text-transform: uppercase;
    }

    .heading-md {
font-weight: 700;
font-size: 1.25rem;
line-height: 1.25;
    }

    .heading-sm {
font-weight: 700;
font-size: 1rem;
line-height: 1.3;
    }

    .text-base {
font-size: 0.9375rem;
line-height: 1.6;
    }

    .text-small {
font-size: 0.8125rem;
line-height: 1.5;
color: var(--text-secondary);
    }

    .text-tiny {
font-size: 0.75rem;
line-height: 1.4;
color: var(--text-tertiary);
    }

    .label-up {
font-size: 0.6875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
    }

    /* ===================== BUTTON STYLES ===================== */
    .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
font-family: inherit;
font-size: 0.9375rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
border: 2px solid transparent;
border-radius: var(--radius-pill);
transition: all var(--duration-fast) var(--easing);
    }

    .btn:focus-visible {
outline: 2px solid var(--darka-terracotta);
outline-offset: 2px;
    }

    .btn:active {
transform: translateY(1px);
    }

    .btn--yellow {
background: var(--darka-yellow);
color: white;
    }

    .btn--yellow:hover {
background: var(--darka-yellow-hover);
    }

    .btn--terracotta {
background: var(--darka-terracotta);
color: white;
border-radius: var(--radius-md);
    }

    .btn--terracotta:hover {
background: var(--darka-terracotta-hover);
    }

    .btn--green {
background: var(--darka-green);
color: white;
    }

    .btn--green:hover {
background: var(--darka-green-dark);
    }

    .btn--ghost {
background: transparent;
color: var(--darka-green);
border-color: var(--darka-green);
    }

    .btn--ghost:hover {
background: var(--darka-green);
color: white;
    }

    .btn--lg {
padding: 16px 36px;
font-size: 1rem;
    }

    .btn--sm {
padding: 8px 18px;
font-size: 0.8125rem;
min-height: 36px;
    }

    /* ===================== UTILITY BAR ===================== */
    .utility-bar {
background: var(--darka-green-dark);
color: rgba(255, 255, 255, 0.9);
font-size: 0.75rem;
    }

    .utility-bar__inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 36px;
    }

    .utility-bar__left,
    .utility-bar__right {
display: flex;
gap: var(--space-3);
align-items: center;
    }

    /* Carrossel rotativo de mensagens promocionais */
    .utility-bar__rotator {
position: relative;
flex: 1;
min-width: 0;
height: 20px;
overflow: hidden;
    }

    .utility-bar__slide {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
gap: 6px;
opacity: 0;
transform: translateY(8px);
transition: opacity var(--duration-base) var(--easing), transform var(--duration-base) var(--easing);
pointer-events: none;
white-space: nowrap;
    }

    .utility-bar__slide.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
    }

    .utility-bar__slide [data-lucide] {
width: 14px;
height: 14px;
flex-shrink: 0;
    }

    @media (prefers-reduced-motion: reduce) {
.utility-bar__slide {
  transition: opacity var(--duration-fast) linear;
  transform: none;
}
    }

    .utility-bar a {
color: rgba(255, 255, 255, 0.85);
display: inline-flex;
align-items: center;
gap: 6px;
transition: color var(--duration-fast);
    }

    .utility-bar a:hover {
color: var(--darka-yellow);
    }

    .utility-bar strong {
color: white;
font-weight: 700;
    }

    /* ===================== HEADER ===================== */
    .header {
background: var(--bg-primary);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow-sm);
    }

    /* Hamburger button — desktop hidden, mobile visible */
    .header__menu-toggle {
display: none;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
color: var(--darka-green);
background: var(--bg-soft);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--duration-fast);
    }

    .header__menu-toggle:hover {
background: var(--darka-green);
color: white;
    }

    .header__menu-toggle [data-lucide] {
width: 22px;
height: 22px;
stroke-width: 2.25;
    }

    /* Mobile nav drawer */
    .mobile-nav {
position: fixed;
inset: 0;
background: rgba(13, 40, 37, 0.55);
display: none;
z-index: 200;
backdrop-filter: blur(2px);
    }

    .mobile-nav.is-open {
display: block;
animation: mn-fade var(--duration-fast) ease-out;
    }

    @keyframes mn-fade {
from { opacity: 0; }
to { opacity: 1; }
    }

    .mobile-nav__panel {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 84vw;
max-width: 320px;
background: var(--bg-primary);
padding: var(--space-3);
overflow-y: auto;
transform: translateX(-100%);
transition: transform var(--duration-base) var(--easing);
    }

    .mobile-nav.is-open .mobile-nav__panel {
transform: translateX(0);
    }

    .mobile-nav__head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-3);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--border-subtle);
    }

    .mobile-nav__head img {
height: 40px;
    }

    .mobile-nav__close {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: var(--darka-green);
background: var(--bg-soft);
border-radius: var(--radius-md);
cursor: pointer;
    }

    .mobile-nav__close [data-lucide] {
width: 18px;
height: 18px;
stroke-width: 2.5;
    }

    .mobile-nav__list {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 0;
    }

    .mobile-nav__item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 4px;
border-bottom: 1px solid var(--border-subtle);
color: var(--darka-green);
font-weight: 700;
font-size: 0.9375rem;
    }

    .mobile-nav__item:hover {
color: var(--darka-yellow-hover);
    }

    .mobile-nav__item [data-lucide] {
width: 16px;
height: 16px;
opacity: 0.5;
    }

    .mobile-nav__cta {
margin-top: var(--space-3);
padding: var(--space-2);
background: var(--darka-green);
border-radius: var(--radius-md);
color: white;
    }

    .mobile-nav__cta strong {
display: block;
font-size: 0.8125rem;
margin-bottom: 4px;
    }

    .mobile-nav__cta a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--darka-yellow);
font-size: 0.8125rem;
font-weight: 700;
    }

    .header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-4);
align-items: center;
padding-block: var(--space-2);
    }

    .logo img {
height: 64px;
width: auto;
    }

    .header__search {
position: relative;
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-soft);
border: 2px solid transparent;
border-radius: var(--radius-pill);
padding: 4px 4px 4px 20px;
transition: border-color var(--duration-fast);
    }

    .header__search:focus-within {
border-color: var(--darka-green);
background: white;
    }

    .header__search input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
font: inherit;
font-size: 16px;
outline: none;
padding-block: 8px;
    }

    .header__search input::placeholder {
color: var(--text-tertiary);
    }

    .header__search button {
background: var(--darka-green);
color: white;
border-radius: var(--radius-pill);
padding: 10px 24px;
font-size: 0.875rem;
font-weight: 700;
transition: background var(--duration-fast);
    }

    .header__search button:hover {
background: var(--darka-green-dark);
    }

    /* ===== Autocomplete da busca (dropdown de sugestões) =====
       Markup/JS em public/site.js (data-search-suggest). O container
       .header__search é position:relative; o dropdown ancora abaixo dele. */
    .search-suggest {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
z-index: 300; /* acima do header (sticky, 100) e do megamenu (99) */
background: white;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 8px;
max-height: min(70vh, 520px);
overflow-y: auto;
    }
    .search-suggest[hidden] { display: none; }

    .search-suggest__group { padding: 4px 0; }
    .search-suggest__group + .search-suggest__group {
margin-top: 4px;
border-top: 1px solid var(--border-subtle);
    }
    .search-suggest__title {
padding: 6px 10px;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-tertiary);
    }

    .search-suggest__item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: var(--radius-md);
color: var(--text-primary);
text-decoration: none;
transition: background var(--duration-fast);
    }
    .search-suggest__item:hover,
    .search-suggest__item.is-active {
background: var(--bg-soft);
    }
    .search-suggest__item img,
    .search-suggest__noimg {
width: 44px;
height: 44px;
flex-shrink: 0;
object-fit: contain;
background: var(--bg-soft);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
    }
    .search-suggest__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
    }
    .search-suggest__info strong {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
    }
    .search-suggest__info small {
font-size: 0.75rem;
color: var(--text-tertiary);
    }
    .search-suggest__price {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
font-size: 0.875rem;
font-weight: 700;
color: var(--darka-green);
white-space: nowrap;
line-height: 1.2;
    }
    .search-suggest__price small {
font-size: 0.625rem;
font-weight: 500;
color: var(--text-tertiary);
    }

    .search-suggest__chip {
display: inline-block;
margin: 2px 4px 2px 0;
padding: 5px 12px;
background: var(--bg-soft);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
font-size: 0.8125rem;
color: var(--text-secondary);
text-decoration: none;
transition: border-color var(--duration-fast), color var(--duration-fast);
    }
    .search-suggest__chip:hover {
border-color: var(--darka-green);
color: var(--darka-green);
    }

    .search-suggest__all {
display: block;
margin-top: 6px;
padding: 10px;
border-top: 1px solid var(--border-subtle);
text-align: center;
font-size: 0.8125rem;
font-weight: 700;
color: var(--darka-terracotta);
text-decoration: none;
    }
    .search-suggest__all:hover { color: var(--darka-terracotta-hover); }

    .search-suggest__empty {
padding: 16px;
text-align: center;
font-size: 0.875rem;
color: var(--text-secondary);
    }
    .search-suggest__empty strong { color: var(--text-primary); }

    .header__actions {
display: flex;
gap: var(--space-1);
align-items: center;
    }

    .header__action {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 14px;
border-radius: var(--radius-md);
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
transition: background var(--duration-fast), color var(--duration-fast);
position: relative;
    }

    .header__action:hover {
background: var(--bg-soft);
color: var(--darka-green);
    }

    .header__action__icon {
font-size: 1.25rem;
    }

    .header__action .badge {
position: absolute;
top: 2px;
right: 4px;
background: var(--darka-terracotta);
color: white;
font-size: 0.625rem;
font-weight: 800;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
    }

    /* ===================== NAV ===================== */
    .nav-bar {
background: var(--darka-green);
position: relative;
    }

    .nav {
display: flex;
gap: 0;
justify-content: center;
    }

    .nav__item {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 13px 13px;
font-size: 0.8125rem;
font-weight: 600;
color: white;
transition: background var(--duration-fast);
position: relative;
white-space: nowrap;
    }

    .nav__item:hover {
background: var(--darka-green-dark);
    }

    .nav__chevron {
width: 13px;
height: 13px;
opacity: 0.7;
stroke-width: 2.5;
    }

    /* Dropdown abaixo do item (não largura da tela): ancora no .nav__cell. */
    .nav__cell {
position: relative;
    }

    .megamenu {
position: absolute;
top: 100%;
left: 0;
right: auto;
width: 280px;
max-width: calc(100vw - 24px);
background: white;
box-shadow: var(--shadow-lg);
border-top: 3px solid var(--darka-yellow);
border-radius: 0 0 var(--radius-md) var(--radius-md);
display: none;
z-index: 99;
    }

    .megamenu.is-open {
display: block;
    }

    /* container interno não centraliza em largura cheia dentro do dropdown */
    .megamenu .container {
max-width: none;
margin: 0;
padding: var(--space-3) var(--space-4);
    }

    .megamenu__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-5);
padding: 0;
    }

    .megamenu__col h4 {
font-size: 0.6875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--darka-green);
margin-bottom: var(--space-2);
font-weight: 800;
    }

    .megamenu__col li {
margin-bottom: 8px;
    }

    .megamenu__col a {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
color: var(--text-primary);
padding: 4px 0;
transition: color var(--duration-fast);
    }

    .megamenu__col a:hover {
color: var(--darka-terracotta);
    }

    .megamenu__col a span {
color: var(--text-tertiary);
font-size: 0.75rem;
    }

    .megamenu__col a.megamenu__all {
color: var(--darka-terracotta);
font-weight: 600;
    }

    .megamenu__feature {
background: linear-gradient(135deg, var(--darka-green) 0%, var(--darka-green-dark) 100%);
border-radius: var(--radius-md);
padding: var(--space-3);
color: white;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 220px;
position: relative;
overflow: hidden;
    }

    .megamenu__feature__label {
font-size: 0.625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.7;
margin-bottom: 4px;
font-weight: 700;
    }

    .megamenu__feature__title {
font-weight: 800;
font-size: 1.25rem;
margin-bottom: 12px;
line-height: 1.2;
    }

    .megamenu__feature .btn {
align-self: flex-start;
    }

    /* ===================== HERO CARROSSEL ===================== */
    .hero {
position: relative;
background: var(--bg-soft);
    }

    .hero__track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
    }

    .hero__track::-webkit-scrollbar {
display: none;
    }

    .hero__slide {
flex: 0 0 100%;
scroll-snap-align: start;
position: relative;
    }

    .hero__slide picture,
    .hero__slide img {
width: 100%;
height: auto;
display: block;
    }

    .hero__slide img {
/* Aspect-ratio fixo reserva a altura ANTES da imagem carregar — sem pulo de
   layout (CLS) e todos os slides na mesma altura. Banners desktop = 1600x408. */
aspect-ratio: 1600 / 408;
max-height: 600px;
object-fit: cover;
    }

    /* Mobile: banner quadrado (900x900 = 1:1). */
    @media (max-width: 720px) {
.hero__slide img {
  aspect-ratio: 1 / 1;
  max-height: none;
}
    }

    .hero__dots {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 2;
    }

    .hero__dot {
width: 32px;
height: 4px;
background: rgba(255, 255, 255, 0.5);
border-radius: 2px;
transition: background var(--duration-fast);
cursor: pointer;
    }

    .hero__dot.is-active {
background: var(--darka-yellow);
    }

    .hero__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: var(--darka-green);
box-shadow: var(--shadow-md);
z-index: 2;
transition: all var(--duration-fast);
    }

    .hero__arrow:hover {
background: white;
transform: translateY(-50%) scale(1.05);
    }

    .hero__arrow--prev {
left: 16px;
    }

    .hero__arrow--next {
right: 16px;
    }

    /* ===================== BENEFITS STRIP ===================== */
    .benefits {
background: var(--bg-primary);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border-subtle);
    }

    .benefits__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
    }

    .benefit {
display: flex;
align-items: center;
gap: var(--space-2);
    }

    .benefit__icon {
width: 48px;
height: 48px;
background: var(--bg-soft);
color: var(--darka-green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.375rem;
flex-shrink: 0;
    }

    .benefit__text strong {
display: block;
font-weight: 700;
font-size: 0.875rem;
line-height: 1.2;
color: var(--darka-green);
    }

    .benefit__text span {
font-size: 0.75rem;
color: var(--text-secondary);
    }

    /* ===================== SECTION HEADER ===================== */
    .section {
padding-block: var(--space-8);
    }

    .section--soft {
background: var(--bg-soft);
    }

    .section__head {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-bottom: var(--space-4);
gap: var(--space-2);
    }

    .section__head h2 {
line-height: 1.1;
    }

    .section__head__link {
color: var(--darka-terracotta-text);
font-weight: 700;
font-size: 0.875rem;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap var(--duration-fast);
    }

    .section__head__link:hover {
gap: 10px;
    }

    /* Decorative pincelada SVG between sections */
    .pincelada-divider {
height: 60px;
background-image: url("data:image/svg+xml,%3Csvg width='1320' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-10,30 Q300,5 660,30 T1340,30' stroke='%230E5840' stroke-width='3' fill='none' opacity='0.15'/%3E%3Cpath d='M-10,35 Q280,55 660,35 T1340,40' stroke='%23F4C430' stroke-width='2' fill='none' opacity='0.4'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
    }

    /* ===================== CATEGORIAS ===================== */
    .cat-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--space-2);
    }

    .cat-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: var(--space-3) var(--space-1);
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
text-align: center;
transition: all var(--duration-fast) var(--easing);
    }

    .cat-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--darka-green);
    }

    .cat-card__icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--bg-soft);
color: var(--darka-green);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.625rem;
transition: all var(--duration-fast);
    }

    .cat-card:hover .cat-card__icon {
background: var(--darka-green);
color: var(--darka-yellow);
    }

    .cat-card__name {
font-size: 0.8125rem;
font-weight: 700;
line-height: 1.2;
color: var(--darka-green);
    }

    .cat-card__count {
font-size: 0.6875rem;
color: var(--text-tertiary);
font-weight: 500;
    }

    /* ===================== TABS (Mais Vendidos) ===================== */
    .tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: var(--space-3);
    }

    .tab {
padding: 10px 22px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-secondary);
background: white;
transition: all var(--duration-fast);
cursor: pointer;
    }

    .tab:hover {
border-color: var(--darka-green);
color: var(--darka-green);
    }

    .tab.is-active {
background: var(--darka-green);
border-color: var(--darka-green);
color: white;
    }

    /* ===================== CARROSSEL HORIZONTAL ===================== */
    .carousel {
position: relative;
    }

    .carousel__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - var(--space-2) * 4) / 5);
gap: var(--space-2);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
padding-bottom: var(--space-2);
    }

    .carousel__track::-webkit-scrollbar {
display: none;
    }

    .carousel__track>* {
scroll-snap-align: start;
    }

    .carousel__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: white;
border: 1px solid var(--border-subtle);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
color: var(--darka-green);
font-weight: 700;
box-shadow: var(--shadow-md);
z-index: 2;
transition: all var(--duration-fast);
    }

    .carousel__arrow:hover {
background: var(--darka-green);
color: white;
    }

    .carousel__arrow--prev {
left: -22px;
    }

    .carousel__arrow--next {
right: -22px;
    }

    .carousel__dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: var(--space-2);
    }

    .carousel__dot {
width: 24px;
height: 4px;
border-radius: 2px;
background: var(--border-subtle);
transition: background var(--duration-fast);
    }

    .carousel__dot.is-active {
background: var(--darka-green);
    }

    /* ===================== PRODUCT CARD ===================== */
    .product-card {
background: white;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
display: flex;
flex-direction: column;
transition: all var(--duration-fast) var(--easing);
position: relative;
    }

    .product-card:hover {
border-color: var(--darka-terracotta);
box-shadow: var(--shadow-md);
    }

    .product-card.is-featured {
border-color: var(--darka-terracotta);
border-width: 2px;
    }

    .product-card__photo {
aspect-ratio: 1;
background: var(--bg-product);
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
    }

    .product-card__photo-label {
position: absolute;
bottom: 6px;
right: 8px;
font-size: 0.5625rem;
color: rgba(0, 0, 0, 0.25);
font-style: italic;
    }

    .product-card__photo > a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
    }

    .product-card__photo img {
max-width: 80%;
max-height: 80%;
width: auto;
height: auto;
object-fit: contain;
transition: transform var(--duration-base) var(--easing);
    }

    .product-card:hover .product-card__photo img {
transform: scale(1.04);
    }

    /* Hover swap da foto: a 2ª imagem (--secondary) fica SOBREPOSTA e oculta;
       sem isto as duas fotos empilhavam (apareciam 2 ao mesmo tempo). Especificidade
       .product-card__photo .…--secondary (0,2,0) vence .product-card__photo img (0,1,1). */
    .product-card__photo--has-secondary > a { position: relative; }
    .product-card__photo .product-card__img--secondary {
position: absolute;
inset: 0;
margin: auto;
opacity: 0;
transition: opacity var(--duration-base) var(--easing);
    }
    @media (hover: hover) {
.product-card:hover .product-card__img--secondary { opacity: 1; }
    }

    .product-card__can {
width: 70%;
aspect-ratio: 0.85;
border-radius: 4px;
box-shadow: var(--shadow-md);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px 8px;
    }

    .product-card__can::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 16%;
background: linear-gradient(180deg, #4A4540, #2A2826);
border-radius: 4px 4px 0 0;
    }

    .product-card__can-brand {
font-weight: 800;
font-size: 1.0625rem;
line-height: 1;
margin-top: 28%;
letter-spacing: -0.01em;
    }

    .product-card__can-line {
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.05em;
margin-top: 6px;
opacity: 0.65;
text-align: center;
    }

    .product-card__fav {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.95);
border: none;
padding: 0;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.0625rem;
color: var(--text-tertiary);
transition: color var(--duration-fast);
z-index: 1;
    }

    .product-card__fav:hover {
color: var(--darka-terracotta);
    }

    /* Estado "favoritado": coração preenchido em terracota. favorites.js só
       adiciona a classe .is-favorited (+ aria-pressed); o feedback visual mora
       aqui. Sem esta regra o clique persistia no localStorage mas não mudava
       nada na tela — parecia que o favoritar "não funcionava". */
    .product-card__fav.is-favorited {
color: var(--darka-terracotta);
    }

    .product-card__fav.is-favorited svg {
fill: currentColor;
    }

    .product-card__color-strip {
background: var(--bg-soft);
padding: 6px 14px;
display: flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
color: var(--text-secondary);
font-weight: 500;
border-block: 1px solid var(--border-subtle);
    }

    .product-card__color-strip::before {
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
background: currentColor;
opacity: 0.4;
    }

    .product-card__body {
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
    }

    .product-card__tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
    }

    .product-card__tag {
background: var(--bg-soft);
color: var(--darka-green);
padding: 3px 10px;
border-radius: var(--radius-pill);
font-size: 0.6875rem;
font-weight: 600;
    }

    .product-card__tag--accent {
background: var(--darka-green);
color: white;
    }

    .product-card__name {
font-size: 0.875rem;
font-weight: 700;
line-height: 1.3;
color: var(--text-primary);
min-height: 3.9em; /* reserva 3 linhas para alinhar botões */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
    }

    /* Novo padrão de preço: foco no PIX */
    .product-card__price-line {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
margin-top: 2px;
    }

    .product-card__price {
font-weight: 800;
font-size: 1.5rem;
line-height: 1;
color: var(--darka-green);
letter-spacing: -0.01em;
    }

    .product-card__price-tag {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
font-size: 0.75rem;
font-weight: 700;
color: var(--darka-green);
    }

    .product-card__price-tag b {
background: var(--discount-bg);
color: var(--discount-green-text);
padding: 1px 6px;
border-radius: var(--radius-pill);
/* Destaque do "X%": +50% sobre os 0.6875rem originais (2026-06-19). */
font-size: 1.03125rem;
font-weight: 800;
    }

    /* Linha do preço cheio abaixo do PIX ("De <s>X</s> por Y" ou "Ou Y").
       O margin-top cria a "linha vazia" entre o PIX e esta linha. */
    .product-card__price-full {
margin-top: 12px;
font-size: 0.8125rem;
color: var(--text-secondary);
    }

    .product-card__price-full s {
color: var(--text-tertiary);
    }

    /* "De <s>X</s>" inline ao lado do preço cheio quando NÃO há desconto PIX. */
    .product-card__price-de {
font-size: 0.8125rem;
color: var(--text-secondary);
    }

    .product-card__installment {
font-size: 0.75rem;
color: var(--text-secondary);
    }

    .product-card__installment strong { font-weight: 600; }

    .product-card__savings {
font-size: 0.75rem;
font-weight: 700;
color: var(--darka-terracotta-text);
display: inline-flex;
align-items: center;
gap: 4px;
    }

    .product-card__savings [data-lucide] {
width: 12px;
height: 12px;
    }

    .product-card__cta {
margin-top: auto;
padding-top: 10px;
    }

    .product-card .btn--terracotta {
width: 100%;
padding: 10px 16px;
font-size: 0.8125rem;
/* "COMPRAR" do card na mesma cor do botão Buscar do topo (verde petróleo).
   Sobrescreve só no card — o .btn--terracotta de checkout/carrinho/calculadora
   continua terracota. */
background: var(--darka-green);
    }
    .product-card .btn--terracotta:hover {
background: var(--darka-green-dark);
    }

    /* ===================== AMBIENTES ===================== */
    .ambient-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--space-2);
    }

    /* Cards "Tintas para cada superfície" — compactos, ícone + título (sem foto). */
    .surface-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--space-2);
    }
    .surface-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
padding: 20px 10px;
min-height: 118px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-soft);
color: var(--text-primary);
transition: transform var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
    }
    .surface-card:hover {
transform: translateY(-3px);
border-color: var(--darka-green);
background: #fff;
box-shadow: var(--shadow-md);
    }
    .surface-card [data-lucide] {
width: 30px;
height: 30px;
color: var(--darka-green);
stroke-width: 1.6;
    }
    .surface-card span {
font-size: 0.8125rem;
font-weight: 700;
line-height: 1.25;
    }
    @media (max-width: 980px) { .surface-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 560px) { .surface-grid { grid-template-columns: repeat(2, 1fr); } }

    .ambient-card {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
border-radius: var(--radius-md);
cursor: pointer;
transition: transform var(--duration-base) var(--easing);
    }

    .ambient-card:hover {
transform: translateY(-3px);
    }

    .ambient-card__photo {
position: absolute;
inset: 0;
transition: transform var(--duration-base);
    }

    .ambient-card:hover .ambient-card__photo {
transform: scale(1.05);
    }

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

    .ambient-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(14, 88, 64, 0.85) 100%);
    }

    .ambient-card__caption {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
color: white;
    }

    .ambient-card__caption h3 {
font-weight: 800;
font-size: 1.125rem;
line-height: 1.1;
    }

    .ambient-card__caption span {
font-size: 0.75rem;
opacity: 0.9;
display: flex;
align-items: center;
gap: 4px;
margin-top: 2px;
    }

    .ambient-card__photo-label {
position: absolute;
top: 8px;
left: 10px;
font-size: 0.5625rem;
color: rgba(255, 255, 255, 0.5);
font-style: italic;
    }

    /* ============== SOLUÇÕES POR APLICAÇÃO ============== */
    .vertical-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
    }
    @media (max-width: 880px) {
.vertical-grid { grid-template-columns: 1fr; }
    }

    /* Soluções por aplicação — 3 banners (1200x675) lado a lado, clicáveis. */
    .app-banners {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
    }
    @media (max-width: 880px) {
.app-banners { grid-template-columns: 1fr; }
    }
    .app-banner {
display: block;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform var(--duration-base) var(--easing), box-shadow var(--duration-base) var(--easing);
    }
    .app-banner:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
    }
    .app-banner img {
display: block;
width: 100%;
height: auto;
    }
    .vertical-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
display: block;
min-height: 200px;
aspect-ratio: 16 / 9;
transition: transform var(--duration-fast), box-shadow var(--duration-fast);
color: white;
isolation: isolate;
    }
    .vertical-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(13, 40, 37, 0.2);
    }
    .vertical-card__bg {
position: absolute;
inset: 0;
z-index: 0;
    }
    .vertical-card__bg-icon {
position: absolute;
right: -40px;
top: -40px;
opacity: 0.14;
pointer-events: none;
z-index: 1;
color: white;
    }
    .vertical-card__bg-icon svg {
width: 240px;
height: 240px;
stroke-width: 1;
    }
    .vertical-card__content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 22px 24px;
    }
    .vertical-card__eyebrow {
display: inline-block;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 800;
margin-bottom: 10px;
color: var(--darka-yellow);
    }
    .vertical-card__title {
font-size: 1.75rem;
font-weight: 800;
margin: 0 0 8px;
color: white;
line-height: 1.05;
letter-spacing: -0.01em;
    }
    .vertical-card__sub {
font-size: 0.8125rem;
line-height: 1.45;
margin: 0 0 14px;
color: rgba(255, 255, 255, 0.88);
max-width: 320px;
    }
    .vertical-card__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
font-weight: 700;
color: white;
padding-bottom: 3px;
border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
align-self: flex-start;
transition: border-color var(--duration-fast), gap var(--duration-fast);
    }
    .vertical-card__cta [data-lucide] {
width: 14px;
height: 14px;
transition: transform var(--duration-fast);
    }
    .vertical-card:hover .vertical-card__cta {
border-color: var(--darka-yellow);
    }
    .vertical-card:hover .vertical-card__cta [data-lucide] {
transform: translateX(3px);
    }
    /* Variants */
    .vertical-card--imobiliario .vertical-card__bg {
background: linear-gradient(135deg, #0d2825 0%, #1e8478 100%);
    }
    .vertical-card--industrial .vertical-card__bg {
background: linear-gradient(135deg, #1a1d24 0%, #3a4250 65%, #5a6478 100%);
    }
    .vertical-card--automotivo .vertical-card__bg {
background: linear-gradient(135deg, #2a1a12 0%, #6b3818 50%, #B87333 100%);
    }

    .mood-sala {
background: linear-gradient(135deg, #6B2E1A 0%, #C26B4D 50%, #E89968 100%);
    }

    .mood-quarto {
background: linear-gradient(160deg, #2D3A2A 0%, #5C7158 50%, #A8B5A0 100%);
    }

    .mood-cozinha {
background: linear-gradient(135deg, #8B5A1F 0%, #D49B47 50%, #E8C480 100%);
    }

    .mood-externa {
background: linear-gradient(150deg, #A85838 0%, #C26B4D 40%, #E8DFD3 100%);
    }

    .mood-piso {
background: linear-gradient(180deg, #2A2826 0%, #4A4540 50%, #6B6358 100%);
    }

    .mood-madeira {
background: linear-gradient(135deg, #3D2818 0%, #6B4C2D 50%, #A07B4B 100%);
    }

    /* ===================== ESCOLHA SUA COR ===================== */
    .color-section {
background: var(--bg-soft);
border-radius: var(--radius-md);
padding: var(--space-4);
display: grid;
grid-template-columns: 240px 1fr;
gap: var(--space-4);
align-items: center;
    }

    .color-section__intro h3 {
font-weight: 800;
font-size: 1.5rem;
line-height: 1.1;
color: var(--darka-green);
text-transform: uppercase;
margin-bottom: 8px;
    }

    .color-section__intro a {
color: var(--darka-terracotta-text);
font-weight: 700;
font-size: 0.875rem;
display: inline-flex;
align-items: center;
gap: 6px;
    }

    .color-families {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: var(--space-2);
    }

    .color-family {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
transition: transform var(--duration-fast);
    }

    .color-family:hover {
transform: translateY(-2px);
    }

    .color-family__swatches {
width: 56px;
height: 64px;
display: flex;
flex-direction: column;
border-radius: 6px;
overflow: hidden;
box-shadow: var(--shadow-sm);
    }

    .color-family__swatches>div {
flex: 1;
    }

    .color-family__name {
font-size: 0.6875rem;
color: var(--text-secondary);
font-weight: 600;
text-align: center;
line-height: 1.1;
    }

    .cf-cores-prontas .color-family__swatches {
background: conic-gradient(from 0deg, #E63946, #F4A261, #E9C46A, #2A9D8F, #264653, #6F4E7C, #E63946);
border-radius: 50%;
width: 56px;
height: 56px;
    }

    .cf-tons-suaves .color-family__swatches>div:nth-child(1) {
background: #F5F0E8;
    }

    .cf-tons-suaves .color-family__swatches>div:nth-child(2) {
background: #EBE5DA;
    }

    .cf-tons-suaves .color-family__swatches>div:nth-child(3) {
background: #DBD3C5;
    }

    .cf-marrons .color-family__swatches>div:nth-child(1) {
background: #B8B0A8;
    }

    .cf-marrons .color-family__swatches>div:nth-child(2) {
background: #8B7E6E;
    }

    .cf-marrons .color-family__swatches>div:nth-child(3) {
background: #5C4F40;
    }

    .cf-laranjas .color-family__swatches>div:nth-child(1) {
background: #F4A261;
    }

    .cf-laranjas .color-family__swatches>div:nth-child(2) {
background: #E76F2E;
    }

    .cf-laranjas .color-family__swatches>div:nth-child(3) {
background: #B85518;
    }

    .cf-amarelos .color-family__swatches>div:nth-child(1) {
background: #FCEFAA;
    }

    .cf-amarelos .color-family__swatches>div:nth-child(2) {
background: #F4C430;
    }

    .cf-amarelos .color-family__swatches>div:nth-child(3) {
background: #C19A1B;
    }

    .cf-verdes .color-family__swatches>div:nth-child(1) {
background: #B8C9A4;
    }

    .cf-verdes .color-family__swatches>div:nth-child(2) {
background: #5C7158;
    }

    .cf-verdes .color-family__swatches>div:nth-child(3) {
background: #2D3A2A;
    }

    .cf-azuis .color-family__swatches>div:nth-child(1) {
background: #B0CADC;
    }

    .cf-azuis .color-family__swatches>div:nth-child(2) {
background: #4A7B8B;
    }

    .cf-azuis .color-family__swatches>div:nth-child(3) {
background: #264653;
    }

    .cf-rosas .color-family__swatches>div:nth-child(1) {
background: #F2D5D5;
    }

    .cf-rosas .color-family__swatches>div:nth-child(2) {
background: #D9A4A0;
    }

    .cf-rosas .color-family__swatches>div:nth-child(3) {
background: #A66D6A;
    }

    .cf-vermelhos .color-family__swatches>div:nth-child(1) {
background: #F1A8A8;
    }

    .cf-vermelhos .color-family__swatches>div:nth-child(2) {
background: #E63946;
    }

    .cf-vermelhos .color-family__swatches>div:nth-child(3) {
background: #8B0F23;
    }

    /* ===================== MARCAS CARROSSEL ===================== */
    .brands-carousel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - var(--space-2) * 7) / 8);
gap: var(--space-2);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-block: 6px var(--space-2);
    }

    .brands-carousel::-webkit-scrollbar {
display: none;
    }

    .brand-tile {
background: white;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: var(--space-2);
display: flex;
align-items: center;
justify-content: center;
min-height: 100px;
transition: all var(--duration-fast);
scroll-snap-align: start;
    }

    .brand-tile:hover {
transform: translateY(-2px);
border-color: var(--darka-green);
box-shadow: var(--shadow-sm);
    }

    .brand-tile img {
max-width: 80%;
max-height: 60px;
width: auto;
height: auto;
object-fit: contain;
transition: transform var(--duration-fast);
    }

    .brand-tile:hover img {
transform: scale(1.05);
    }

    .b-suvinil span {
color: #1A4D8F;
    }

    .b-coral span {
color: #C8362D;
    }

    .b-tigre span {
color: #E76F2E;
    }

    .b-atlas span {
color: #2D7A3F;
    }

    .b-3m span {
color: #C5163A;
font-weight: 900;
    }

    .b-alessi span {
color: #2A8C9C;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 1rem;
    }

    .b-montana span {
color: #1A1A1A;
letter-spacing: 0.05em;
    }

    .b-vonder span {
color: #1F2C5C;
    }

    .b-colorgin span {
color: #E68425;
    }

    .b-sparlack span {
color: #6B4C2D;
    }

    .b-mirka span {
color: #FFB800;
background: #1A1A1A;
padding: 4px 12px;
border-radius: 4px;
font-size: 0.875rem;
    }

    .b-isabela span {
color: #5A8A4A;
font-style: italic;
    }

    /* ===================== CALCULADORA SECTION ===================== */
    .calculadora {
background: #FFFFFF;
padding-block: var(--space-8);
position: relative;
overflow: hidden;
scroll-margin-top: 180px;
    }

    .calculadora::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='1320' height='280' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-100,200 Q400,40 800,180 T1500,140' stroke='%237fb539' stroke-width='60' fill='none' opacity='0.08' stroke-linecap='round'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
    }

    .calculadora__inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--space-6);
align-items: center;
position: relative;
z-index: 1;
    }

    .calculadora__content .label-up {
color: var(--darka-yellow-hover);
display: block;
margin-bottom: 8px;
    }

    .calculadora__content h2 {
margin-bottom: var(--space-2);
    }

    .calculadora__content h2 strong {
color: var(--darka-yellow-hover);
    }

    .calculadora__content p {
color: var(--text-secondary);
max-width: 50ch;
margin-bottom: var(--space-3);
    }

    .calculadora__features {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: var(--space-3);
    }

    .calculadora__feature {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.875rem;
color: var(--text-primary);
font-weight: 500;
    }

    .calculadora__feature [data-lucide] {
width: 18px;
height: 18px;
color: var(--darka-yellow-hover);
flex-shrink: 0;
    }

    .calculadora__visual {
background: var(--bg-soft);
border-radius: var(--radius-lg);
padding: var(--space-4);
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
gap: var(--space-2);
position: relative;
color: inherit;
text-decoration: none;
cursor: pointer;
transition: transform var(--duration-base) var(--easing), box-shadow var(--duration-base) var(--easing);
    }

    a.calculadora__visual:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
    }

    .calculadora__visual::before {
content: '';
position: absolute;
top: -12px;
left: var(--space-3);
width: 64px;
height: 64px;
background: var(--darka-yellow);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
    }

    .calculadora__visual__icon {
position: absolute;
top: -12px;
left: var(--space-3);
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
color: white;
    }

    .calculadora__visual__icon [data-lucide] {
width: 30px;
height: 30px;
stroke-width: 2.5;
    }

    .calculadora__steps {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: var(--space-5);
    }

    .calculadora__step {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
background: #FFFFFF;
border-radius: var(--radius-md);
border-left: 3px solid var(--darka-yellow);
    }

    .calculadora__step__num {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--darka-green);
color: white;
font-weight: 800;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
    }

    .calculadora__step__label {
font-weight: 700;
font-size: 0.875rem;
color: var(--darka-green);
    }

    .calculadora__step__sub {
font-size: 0.75rem;
color: var(--text-secondary);
    }

    .calculadora__result {
background: var(--darka-green);
color: white;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 4px;
    }

    .calculadora__result__label {
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.85;
font-weight: 600;
    }

    .calculadora__result__value {
font-weight: 800;
font-size: 1.125rem;
color: var(--darka-yellow);
    }

    @media (max-width: 1024px) {
.calculadora__inner {
  grid-template-columns: 1fr;
}
    }

    /* ===================== CLUBE DO PINTOR ===================== */
    .clube {
background: linear-gradient(135deg, var(--darka-green-dark) 0%, var(--darka-green) 100%);
color: white;
padding-block: var(--space-8);
position: relative;
overflow: hidden;
    }

    .clube::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='1320' height='320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-100,180 Q400,40 800,200 T1500,160' stroke='%237fb539' stroke-width='80' fill='none' opacity='0.08' stroke-linecap='round'/%3E%3Cpath d='M-100,80 Q500,200 900,80 T1500,120' stroke='%23F4C430' stroke-width='40' fill='none' opacity='0.06' stroke-linecap='round'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
    }

    .clube__inner {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--space-6);
align-items: center;
position: relative;
z-index: 1;
    }

    .clube__content .label-up {
color: var(--darka-yellow);
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
    }

    .clube__content .label-up::before {
content: '';
width: 28px;
height: 2px;
background: var(--darka-yellow);
display: inline-block;
    }

    .clube__content h2 {
font-weight: 800;
font-size: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
line-height: 1.1;
letter-spacing: -0.01em;
margin-bottom: 14px;
color: white;
    }

    .clube__content h2 strong {
color: var(--darka-yellow);
    }

    .clube__content p {
color: rgba(255, 255, 255, 0.85);
max-width: 52ch;
margin-bottom: var(--space-3);
font-size: 0.9375rem;
    }

    .clube__benefits {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: var(--space-3);
    }

    .clube__benefit {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.9);
    }

    .clube__benefit [data-lucide] {
width: 20px;
height: 20px;
color: var(--darka-yellow);
flex-shrink: 0;
margin-top: 1px;
    }

    .clube__benefit strong {
display: block;
color: white;
font-weight: 700;
margin-bottom: 2px;
    }

    .clube__cta {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
align-items: center;
    }

    .clube__cta-note {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
font-style: italic;
    }

    .clube__visual {
position: relative;
aspect-ratio: 4/3;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
background: var(--bg-soft);
    }

    .clube__visual img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
    }

    @media (max-width: 1024px) {
.clube__inner {
  grid-template-columns: 1fr;
}
    }

    @media (max-width: 720px) {
.clube__benefits {
  grid-template-columns: 1fr;
}
    }

    /* ===================== ECOLATA ===================== */
    .ecolata {
background: var(--darka-green);
color: white;
position: relative;
overflow: hidden;
    }

    .ecolata::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='1320' height='280' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-100,140 Q300,40 700,140 T1500,140' stroke='%23F4C430' stroke-width='80' fill='none' opacity='0.08' stroke-linecap='round'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
    }

    .ecolata__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
align-items: center;
padding-block: var(--space-6);
position: relative;
z-index: 1;
    }

    .ecolata__photo {
aspect-ratio: 19/10;
border-radius: var(--radius-md);
position: relative;
box-shadow: var(--shadow-lg);
overflow: hidden;
    }

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

    .ecolata__photo-label {
position: absolute;
bottom: 8px;
right: 12px;
font-size: 0.6875rem;
color: rgba(255, 255, 255, 0.5);
font-style: italic;
    }

    .ecolata__content .label-up {
color: var(--darka-yellow);
display: block;
margin-bottom: 8px;
    }

    .ecolata__content h2 {
font-weight: 800;
font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
line-height: 1.1;
margin-bottom: 12px;
    }

    .ecolata__content h2 strong {
color: var(--darka-yellow);
    }

    .ecolata__content p {
color: rgba(255, 255, 255, 0.85);
margin-bottom: var(--space-3);
max-width: 50ch;
font-size: 0.9375rem;
    }

    .ecolata__cta {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
    }

    /* ===================== TRUST STRIP ===================== */
    .trust-strip {
background: var(--bg-darker);
padding: var(--space-3) 0;
    }

    .trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
    }

    .trust-item {
display: flex;
align-items: center;
gap: 12px;
    }

    .trust-item__icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--darka-green);
color: var(--darka-yellow);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.125rem;
font-weight: 700;
    }

    .trust-item__title {
font-weight: 700;
font-size: 0.875rem;
line-height: 1.2;
color: var(--darka-green);
    }

    .trust-item__sub {
font-size: 0.75rem;
color: var(--text-secondary);
    }

    /* ===================== STORES ===================== */
    .stores-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--space-2);
    }

    .store-card {
cursor: pointer;
transition: transform var(--duration-fast);
    }

    .store-card:hover {
transform: translateY(-3px);
    }

    .store-card__photo {
aspect-ratio: 4/3;
border-radius: var(--radius-md);
margin-bottom: 10px;
box-shadow: var(--shadow-sm);
overflow: hidden;
position: relative;
background: var(--bg-soft);
    }

    .store-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--duration-base) var(--easing);
    }

    .store-card:hover .store-card__photo img {
transform: scale(1.05);
    }

    .store-card__placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--darka-green-light);
    }

    .store-card__placeholder [data-lucide] {
width: 36px;
height: 36px;
    }

    .store-card__city {
font-weight: 800;
font-size: 1rem;
color: var(--darka-green);
    }

    .store-card__addr {
font-size: 0.75rem;
color: var(--text-secondary);
    }

    .mood-curitiba {
background: linear-gradient(135deg, #5C7158, #A8B5A0);
    }

    .mood-londrina {
background: linear-gradient(135deg, #8B5A1F, #D49B47);
    }

    .mood-maringa {
background: linear-gradient(135deg, #6B2E1A, #C26B4D);
    }

    .mood-cascavel {
background: linear-gradient(135deg, #2D3A2A, #5C7158);
    }

    .mood-pontagrossa {
background: linear-gradient(135deg, #4A4540, #8B8278);
    }

    .mood-foz {
background: linear-gradient(135deg, #A85838, #E89968);
    }

    /* ===================== NEWSLETTER ===================== */
    .newsletter {
background: var(--darka-green-dark);
color: white;
padding-block: var(--space-6);
position: relative;
overflow: hidden;
    }

    .newsletter::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='1320' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-100,100 Q400,140 800,80 T1500,100' stroke='%23F4C430' stroke-width='60' fill='none' opacity='0.07' stroke-linecap='round'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
    }

    .newsletter__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
align-items: center;
position: relative;
z-index: 1;
    }

    .newsletter h2 {
color: white;
font-weight: 800;
font-size: 1.5rem;
line-height: 1.1;
    }

    .newsletter h2 strong {
color: var(--darka-yellow);
    }

    .newsletter p {
color: rgba(255, 255, 255, 0.7);
margin-top: 6px;
font-size: 0.875rem;
    }

    .newsletter__form {
display: flex;
flex-direction: column;
gap: 12px;
    }

    .newsletter__row {
display: flex;
gap: 8px;
    }

    .newsletter__input {
flex: 1;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 14px 18px;
border-radius: var(--radius-pill);
font: inherit;
outline: none;
transition: border-color var(--duration-fast);
    }

    .newsletter__input::placeholder {
color: rgba(255, 255, 255, 0.5);
    }

    .newsletter__input:focus {
border-color: var(--darka-yellow);
    }

    .newsletter__lgpd {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
display: flex;
align-items: flex-start;
gap: 8px;
    }

    /* ===================== FOOTER ===================== */
    .footer {
background: #0A3328;
color: white;
padding-block: var(--space-6) var(--space-3);
    }

    .footer__top {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
gap: var(--space-4);
padding-bottom: var(--space-4);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer__brand img {
height: 68px;
width: auto;
margin-bottom: 12px;
    }

    .footer__brand p {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.6);
max-width: 26ch;
    }

    .footer__col h2 {
font-size: 0.6875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--darka-yellow);
margin-bottom: 12px;
font-weight: 700;
    }

    .footer__col li {
margin-bottom: 6px;
    }

    .footer__col a {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.85);
transition: color var(--duration-fast);
    }

    .footer__col a:hover {
color: var(--darka-yellow);
    }

    .footer__pag {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
align-items: center;
    }

    .footer__pag img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: contain;
background: #fff;
border-radius: 4px;
padding: 5px;
box-sizing: border-box;
transition: opacity var(--duration-fast);
    }

    .footer__pag img:hover {
opacity: 1;
    }

    .footer__safebrowsing {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 28px;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-sm);
transition: background var(--duration-fast);
    }

    .footer__safebrowsing:hover {
background: rgba(255, 255, 255, 0.1);
    }

    .footer__safebrowsing img {
height: 32px;
width: auto;
    }

    .footer__safebrowsing__text {
font-size: 0.6875rem;
line-height: 1.3;
color: rgba(255, 255, 255, 0.7);
    }

    .footer__safebrowsing__text strong {
display: block;
color: rgba(255, 255, 255, 0.9);
font-weight: 700;
font-size: 0.75rem;
    }

    .footer__bottom {
padding-top: var(--space-3);
padding-right: 96px; /* afasta do WhatsApp FAB fixo */
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-1) var(--space-2);
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
    }

    .footer__bottom__copy,
    .footer__bottom__policies {
display: inline-flex;
align-items: center;
gap: 6px;
    }

    .footer__bottom__policies a {
color: rgba(255, 255, 255, 0.7);
transition: color var(--duration-fast);
    }

    .footer__bottom__policies a:hover {
color: var(--darka-yellow);
    }

    .footer__credits {
display: inline-flex;
align-items: center;
gap: 6px;
    }

    .footer__credits img {
height: 13px;
width: auto;
vertical-align: middle;
opacity: 0.85;
transition: opacity var(--duration-fast);
    }

    .footer__credits a:hover img {
opacity: 1;
    }

    .footer__social {
display: flex;
gap: 10px;
margin-top: 16px;
    }

    .footer__social a {
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.85);
transition: all var(--duration-fast) var(--easing);
    }

    .footer__social a:hover {
background: var(--darka-yellow);
color: white;
transform: translateY(-2px);
    }

    .footer__social a svg {
width: 22px;
height: 22px;
display: block;
    }

    /* ===================== WHATSAPP FLOATING BUTTON ===================== */
    .whatsapp-fab {
position: fixed;
bottom: 24px;
right: 24px;
width: 60px;
height: 60px;
background: #25D366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
z-index: 150;
transition: transform var(--duration-base) var(--easing), box-shadow var(--duration-base) var(--easing);
    }

    .whatsapp-fab:hover {
transform: scale(1.08);
box-shadow: 0 8px 28px rgba(37, 211, 102, 0.6);
    }

    .whatsapp-fab svg {
width: 30px;
height: 30px;
    }

    .whatsapp-fab__pulse {
position: absolute;
inset: 0;
border-radius: 50%;
background: #25D366;
opacity: 0.4;
animation: wa-pulse 2s ease-out infinite;
    }

    @keyframes wa-pulse {
0% { transform: scale(1); opacity: 0.4; }
100% { transform: scale(1.5); opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
.whatsapp-fab__pulse { display: none; }
    }

    @media (max-width: 720px) {
.whatsapp-fab {
  bottom: 16px;
  right: 16px;
  width: 52px;
  height: 52px;
}
.whatsapp-fab svg { width: 26px; height: 26px; }
    }

    /* ===================== RESPONSIVE ===================== */
    @media (max-width: 1200px) {
.cat-grid {
  grid-template-columns: repeat(4, 1fr);
}

.carousel__track {
  grid-auto-columns: calc((100% - var(--space-2) * 3) / 4);
}

.stores-grid {
  grid-template-columns: repeat(3, 1fr);
}

.color-families {
  grid-template-columns: repeat(5, 1fr);
}
    }

    @media (max-width: 1024px) {
.header__inner {
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2);
}

.nav {
  overflow-x: auto;
  justify-content: flex-start;
}

.ecolata__inner {
  grid-template-columns: 1fr;
}

.newsletter__grid {
  grid-template-columns: 1fr;
}

.footer__top {
  grid-template-columns: 1fr 1fr;
}

.megamenu__feature {
  display: none;
}

.megamenu__grid {
  grid-template-columns: repeat(2, 1fr);
}

.ambient-grid {
  grid-template-columns: repeat(3, 1fr);
}

.carousel__track {
  grid-auto-columns: calc((100% - var(--space-2) * 2) / 3);
}

.color-section {
  grid-template-columns: 1fr;
}

.trust-grid {
  grid-template-columns: repeat(2, 1fr);
}
    }

    @media (max-width: 720px) {
:root {
  --container-padding: 16px;
}

/* Header 2 linhas mobile: linha 1 = hamburger + logo + ações, linha 2 = busca full-width */
.header__inner {
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 10px var(--space-1);
  padding-block: 10px;
  align-items: center;
}

.header__menu-toggle {
  display: inline-flex;
  grid-row: 1;
  grid-column: 1;
}

.logo {
  grid-row: 1;
  grid-column: 2;
  justify-self: start;
  margin-left: 8px;
}

.logo img {
  height: 44px;
}

.header__actions {
  grid-row: 1;
  grid-column: 3;
  gap: 0;
}

.header__search {
  grid-row: 2;
  grid-column: 1 / -1;
  padding: 4px 4px 4px 14px;
}

/* Esconde a nav-bar de 7 itens em mobile — virou drawer */
.nav-bar {
  display: none;
}

.header__search button {
  padding: 8px 14px;
  font-size: 0.75rem;
}

/* font-size mantido em 16px (regra global) para evitar auto-zoom iOS */

.header__action {
  padding: 6px 8px;
}

/* Esconde apenas o LABEL textual; mantém o ícone e o badge */
.header__action > span:not(.header__action__icon):not(.badge) {
  display: none;
}

.header__action__icon {
  font-size: 1rem;
}

.header__action [data-lucide] {
  width: 20px;
  height: 20px;
}

/* Hero arrows menores no mobile */
.hero__arrow {
  width: 36px;
  height: 36px;
}

.hero__arrow [data-lucide] {
  width: 18px;
  height: 18px;
}

.hero__dots {
  bottom: 10px;
}

.hero__dot {
  width: 24px;
  height: 3px;
}

.benefits__grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Categorias: 7 cards em 3-3-1 ficam ruim. Faço 3 cols com último ocupando 1 */
.cat-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.cat-card {
  padding: var(--space-2) 8px;
}

.cat-card__icon {
  width: 48px;
  height: 48px;
}

.cat-card__name {
  font-size: 0.75rem;
}

/* Carrossel cards mobile */
.carousel__track {
  grid-auto-columns: 78%;
}

.carousel__arrow {
  width: 36px;
  height: 36px;
}

.carousel__arrow--prev {
  left: -12px;
}

.carousel__arrow--next {
  right: -12px;
}

/* Tabs Mais Vendidos - scroll horizontal */
.tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--container-padding));
  padding-inline: var(--container-padding);
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex-shrink: 0;
  font-size: 0.75rem;
  padding: 8px 16px;
}

.ambient-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.ambient-card__caption h3 {
  font-size: 1rem;
}

/* Color families: 3 cols mantém. Ajuste de tamanho */
.color-families {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.color-family__swatches {
  width: 48px;
  height: 56px;
}

.cf-cores-prontas .color-family__swatches {
  width: 48px;
  height: 48px;
}

.color-section {
  padding: var(--space-3);
}

/* Calculadora — ajustes mobile */
.calculadora__visual {
  padding: var(--space-3);
}

.calculadora__visual::before,
.calculadora__visual__icon {
  width: 48px;
  height: 48px;
  top: -8px;
  left: var(--space-2);
}

.calculadora__visual__icon [data-lucide] {
  width: 22px;
  height: 22px;
}

.calculadora__steps {
  margin-top: var(--space-4);
}

.calculadora__step {
  padding: 10px 12px;
}

.calculadora__feature {
  font-size: 0.8125rem;
}

/* Marcas: 2 cols no mobile pra logos não ficarem espremidos */
.brands-carousel {
  grid-auto-columns: calc((100% - var(--space-1)) / 2);
  gap: 8px;
}

.brand-tile {
  min-height: 80px;
}

.brand-tile img {
  max-height: 44px;
}

.stores-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.store-card__city {
  font-size: 0.875rem;
}

.store-card__addr {
  font-size: 0.6875rem;
}

/* Trust strip mobile */
.trust-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.trust-item__title {
  font-size: 0.8125rem;
}

.trust-item__sub {
  font-size: 0.6875rem;
}

/* Section heads mobile */
.section__head {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.section__head__link {
  font-size: 0.75rem;
}

/* Banner faixa mobile */
.banner-faixa__inner {
  grid-template-columns: 1fr;
  text-align: center;
}

.banner-faixa__text strong {
  font-size: 1.125rem;
}

/* Newsletter mobile — empilha input + botão */
.newsletter__row {
  flex-direction: column;
  gap: 10px;
}

.newsletter__input {
  width: 100%;
}

.newsletter__row .btn {
  width: 100%;
}

/* Footer */
.footer__top {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.footer__pag {
  max-width: 280px;
}

/* Toast global (cart.js + share da PDP criam .cart-toast via JS e alternam
   .is-visible). Sem estas regras o elemento era inserido no body mas ficava
   sem estilo/invisível — por isso "adicionar ao carrinho" não dava aviso. */
.cart-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--darka-green);
  color: #fff;
  padding: 13px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  font-weight: 600;
  max-width: calc(100vw - 32px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-base), transform var(--duration-base), visibility var(--duration-base);
}
.cart-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.cart-toast__icon { width: 20px; height: 20px; flex-shrink: 0; color: #fff; }
.cart-toast a {
  color: var(--darka-yellow);
  font-weight: 800;
  text-decoration: underline;
  white-space: nowrap;
  margin-left: 4px;
}
.cart-toast a:hover { color: #fff; }

.footer__bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-right: 80px; /* afasta do WhatsApp FAB mobile (16+52+12) */
}

.utility-bar__inner {
  height: auto;
  padding-block: 6px;
}

.utility-bar__left a:not(.utility-bar__keep),
.utility-bar__left span:not(:first-child) {
  display: none;
}

.utility-bar__left {
  gap: var(--space-1);
  font-size: 0.6875rem;
}

.utility-bar__right {
  gap: var(--space-1);
  font-size: 0.6875rem;
}
    }

    /* Refinamentos para telas muito pequenas (≤ 380px) */
    @media (max-width: 380px) {
.logo img {
  height: 38px;
}

.header__action {
  padding: 4px 6px;
}

.cat-grid {
  gap: 8px;
}

.hero__arrow {
  display: none;
}

.carousel__arrow--prev {
  left: -6px;
}

.carousel__arrow--next {
  right: -6px;
}
    }
    /* =====================================================================
       PDP — ESTILOS ESPECÍFICOS DA PÁGINA DE PRODUTO
       ===================================================================== */

    /* ----- BREADCRUMB ----- */
    .breadcrumb { padding-block: var(--space-2); }
    .breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-secondary); }
    .breadcrumb__list li { display: inline-flex; align-items: center; gap: 6px; }
    .breadcrumb__list a { color: var(--text-secondary); transition: color var(--duration-fast); }
    .breadcrumb__list a:hover { color: var(--darka-terracotta); text-decoration: underline; }
    .breadcrumb__sep { opacity: 0.5; color: var(--text-tertiary); font-size: 1rem; line-height: 1; user-select: none; }
    .breadcrumb__list li[aria-current="page"] { color: var(--text-secondary); font-weight: 600; }

    /* ----- PDP LAYOUT (galeria + buybox) ----- */
    .pdp { padding-block: var(--space-4) var(--space-6); }
    .pdp__layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--space-5); align-items: flex-start; }

    /* ----- GALERIA ----- */
    .gallery { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-2); position: sticky; top: 120px; }
    .gallery__thumbs { display: flex; flex-direction: column; gap: 10px; }
    .gallery__thumb { width: 80px; height: 80px; border: 2px solid var(--border-subtle); border-radius: var(--radius-md); background: white; padding: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--duration-fast); overflow: hidden; }
    .gallery__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .gallery__thumb:hover { border-color: var(--darka-green-light); }
    .gallery__thumb.is-active { border-color: var(--darka-green); }
    .gallery__main { background: white; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: var(--space-5); overflow: hidden; }
    /* Produto com 1 imagem só: sem .gallery__thumbs, a main seria auto-colocada na
       coluna de 80px do grid (80px 1fr) e colapsaria num quadradinho. Ocupar as duas
       colunas devolve a largura cheia. */
    .gallery__main:only-child { grid-column: 1 / -1; }
    .gallery__main img { max-width: 78%; max-height: 78%; object-fit: contain; transition: transform var(--duration-base) var(--easing); }
    .gallery__main:hover img { transform: scale(1.05); }
    /* Vídeo na área principal: preenche o quadrado (mesmo padrão do .pdp-video__frame).
       O toggle img↔vídeo usa o atributo `hidden`; como a regra global `img { display:
       block }` (autor) vence o `[hidden]` do user-agent (autor > UA), o `hidden` só
       esconde de fato com esta regra de autor de maior especificidade — sem ela a img
       continua visível e divide a área com o vídeo. */
    .gallery__main [hidden] { display: none; }
    .gallery__main-video { position: absolute; inset: 0; background: #000; }
    .gallery__main-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
    .gallery__illustrative { position: absolute; bottom: 14px; left: 14px; font-size: 0.625rem; color: var(--text-tertiary); font-style: italic; background: rgba(255, 255, 255, 0.85); padding: 4px 8px; border-radius: var(--radius-sm); }
    /* Selos do produto no PDP (mesmo cadastro que aparece nos cards). Coluna no
       canto superior direito, abaixo do botão compartilhar — evita o badge de
       desconto (top-left) e o share (top-right). */
    .pdp__seals { position: absolute; top: 56px; right: 14px; z-index: 3; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
    .pdp__seal { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 4px 10px; border-radius: var(--radius-sm); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
    .pdp__seal img { width: 40px; height: 40px; object-fit: contain; }

    /* ----- BUYBOX ----- */
    .buybox { display: flex; flex-direction: column; gap: var(--space-2); }
    .buybox__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
    .buybox__brand-name { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--darka-green); }
    .buybox__brand-name::before { content: ''; width: 4px; height: 14px; background: var(--darka-terracotta); border-radius: 2px; }
    .buybox__brand-actions { display: inline-flex; gap: 6px; }
    .buybox__icon-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-soft); color: var(--text-secondary); border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; transition: all var(--duration-fast); }
    .buybox__icon-btn:hover { background: white; color: var(--darka-terracotta); border-color: var(--darka-terracotta); }
    /* Favoritado: coração preenchido em terracota (mesmo padrão dos cards). */
    .buybox__icon-btn.is-favorited { color: var(--darka-terracotta); border-color: var(--darka-terracotta); }
    .buybox__icon-btn.is-favorited svg { fill: currentColor; }
    .buybox__icon-btn [data-lucide] { width: 18px; height: 18px; }
    .buybox__title { font-weight: 800; font-size: 1.5rem; line-height: 1.2; color: var(--text-primary); letter-spacing: -0.01em; }
    .buybox__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 0.75rem; color: var(--text-secondary); }
    .buybox__sku { font-family: 'SF Mono', Consolas, monospace; }
    .buybox__rating { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); }
    .buybox__rating-stars { color: #F4A623; font-size: 0.875rem; letter-spacing: 1px; line-height: 1; }
    .buybox__rating a { color: var(--darka-terracotta-text); text-decoration: underline; }

    /* ----- VARIANTES (cor + litragem) ----- */
    .buybox__variant { display: flex; flex-direction: column; gap: 10px; padding-block: var(--space-2); border-top: 1px solid var(--border-subtle); }
    .buybox__variant-head { display: flex; justify-content: space-between; align-items: center; }
    .buybox__variant-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
    .buybox__variant-value { font-size: 0.8125rem; font-weight: 700; color: var(--darka-green); }
    .buybox__variant-value strong { color: var(--text-primary); }

    /* "Outras cores" — irmãos do grupo de cor (foto + nome da cor, link p/ o produto). */
    .color-siblings { display: flex; flex-wrap: wrap; gap: 8px; }
    .color-sibling { display: flex; flex-direction: column; align-items: center; width: 64px; text-decoration: none; }
    .color-sibling__img { width: 56px; height: 56px; object-fit: contain; border: 2px solid var(--border-subtle); border-radius: var(--radius-md); background: #fff; padding: 4px; transition: border-color var(--duration-fast); }
    .color-sibling:hover .color-sibling__img { border-color: var(--darka-green-light); }
    .color-sibling__label { font-size: 0.6875rem; color: var(--text-secondary); margin-top: 4px; text-align: center; line-height: 1.2; max-width: 64px; overflow: hidden; }
    .color-sibling.is-out { opacity: 0.5; } /* sem estoque — ainda navegável */

    /* Color display — estilo minimalista (referência Suvinil) */
    .color-display { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 12px; background: white; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
    .color-display__swatch { width: 72px; height: 72px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); display: block; }
    .color-display__info { min-width: 0; }
    .color-display__name { display: block; font-size: 1rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
    .color-display__code { display: block; font-size: 0.75rem; color: var(--text-tertiary); margin-top: 2px; font-family: 'SF Mono', Consolas, monospace; }
    .color-display__change { padding: 10px 16px; background: white; color: var(--darka-green); border: 1.5px solid var(--darka-green); border-radius: var(--radius-md); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; transition: all var(--duration-fast); display: inline-flex; align-items: center; gap: 6px; }
    .color-display__change:hover { background: var(--darka-green); color: white; }
    .color-display__change [data-lucide] { width: 14px; height: 14px; }

    .lit-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .lit-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; background: white; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; text-align: left; transition: all var(--duration-fast); position: relative; }
    .lit-opt:hover { border-color: var(--darka-green-light); }
    .lit-opt.is-active { border-color: var(--darka-green); background: rgba(0, 102, 92, 0.04); }
    .lit-opt.is-active::after { content: ''; position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; background: var(--darka-green); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size: 10px; background-position: center; background-repeat: no-repeat; }
    .lit-opt__size { font-weight: 800; font-size: 0.9375rem; color: var(--text-primary); }
    .lit-opt__price { font-size: 0.6875rem; color: var(--text-secondary); font-weight: 600; }
    .lit-opt[disabled] { opacity: 0.45; cursor: not-allowed; }
    .lit-opt[disabled]::before { content: 'Indisponível'; position: absolute; top: 6px; right: 8px; font-size: 0.5625rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }

    /* ----- PREÇO ----- */
    .price-block { padding: var(--space-3); background: var(--bg-soft); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 6px; }
    /* O wrapper precisa empilhar as linhas (senão os <span> fluem inline/grudados). */
    .price-block [data-pdp-price-content] { display: flex; flex-direction: column; gap: 4px; }
    .price-block__row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
    .price-block__valor { font-size: 2.25rem; font-weight: 800; line-height: 1; color: var(--darka-green); letter-spacing: -0.02em; }
    .price-block__pix-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--discount-bg); color: var(--discount-green-text); font-weight: 800; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.75rem; }
    /* Destaque do "X%": +50% sobre os 0.75rem do selo (2026-06-19), igual aos cards. */
    .price-block__pix-tag b { font-size: 1.125rem; }
    .price-block__pix-tag [data-lucide] { width: 12px; height: 12px; }
    .price-block__base { font-size: 0.875rem; color: var(--text-secondary); }
    .price-block__base strong { color: var(--text-primary); font-weight: 700; }
    .price-block__base--compare { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .price-block__off { display: inline-flex; align-items: center; background: var(--darka-terracotta); color: #fff; font-weight: 800; font-size: 0.6875rem; line-height: 1; padding: 4px 8px; border-radius: var(--radius-pill); letter-spacing: 0.02em; }
    .price-block__off[hidden] { display: none; }
    /* Linha do preço cheio abaixo do PIX ("De <s>X</s> por Y" ou "Ou Y"); margin cria a "linha vazia". */
    .price-block__full { margin-top: 16px; font-size: 0.9375rem; color: var(--text-secondary); }
    .price-block__full s { color: var(--text-tertiary); }
    /* Economia em destaque (igual ao card): terracota + negrito + ícone. */
    .price-block__savings { display: inline-flex; align-items: center; gap: 4px; font-size: 0.875rem; font-weight: 700; color: var(--darka-terracotta-text); }
    .price-block__savings [data-lucide] { width: 14px; height: 14px; }
    .price-block__installment { font-size: 0.875rem; color: var(--text-secondary); }
    .price-block__installment strong { font-weight: 600; }

    /* ================== MODAL LEQUE DE CORES ================== */
    .color-picker { position: fixed; inset: 0; z-index: 300; background: rgba(13, 40, 37, 0.55); display: none; align-items: center; justify-content: center; padding: var(--space-3); backdrop-filter: blur(2px); }
    .color-picker.is-open { display: flex; animation: cp-fade var(--duration-fast) ease-out; }
    @keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } }
    .color-picker__panel { width: 100%; max-width: 1280px; max-height: calc(100vh - 32px); background: white; border-radius: var(--radius-lg); display: grid; grid-template-rows: auto auto auto 1fr; overflow: hidden; box-shadow: var(--shadow-lg); }

    /* HEAD — título + busca compacta + fechar */
    .color-picker__head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); }
    .color-picker__head h2 { font-size: 1.125rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 10px; }
    .color-picker__head h2::before { content: ''; width: 4px; height: 20px; background: var(--darka-terracotta); border-radius: 2px; }
    .color-picker__search { position: relative; display: flex; align-items: center; background: var(--bg-soft); border: 1.5px solid transparent; border-radius: var(--radius-pill); padding: 0 14px; transition: border-color var(--duration-fast); max-width: 320px; width: 100%; justify-self: end; margin-right: var(--space-2); }
    .color-picker__search:focus-within { border-color: var(--darka-green); background: white; }
    .color-picker__search [data-lucide] { width: 16px; height: 16px; color: var(--text-tertiary); }
    .color-picker__search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 9px 8px; font-size: 0.875rem; font-family: inherit; }
    .color-picker__search input::placeholder { color: var(--text-tertiary); }
    .color-picker__close { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--bg-soft); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; transition: all var(--duration-fast); }
    .color-picker__close:hover { background: var(--text-primary); color: white; }
    .color-picker__close [data-lucide] { width: 18px; height: 18px; }

    /* CP-SCROLL — wrapper transparente no desktop (vira scroll container no mobile) */
    .cp-scroll { display: contents; }

    /* TABS — segment control central */
    .cp-tabs-wrap { padding: var(--space-2) var(--space-3) 0; display: flex; justify-content: center; }
    .cp-tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--bg-darker); border-radius: var(--radius-pill); }
    .cp-tab { padding: 9px 26px; font-size: 0.875rem; font-weight: 700; color: var(--text-secondary); border-radius: var(--radius-pill); transition: all var(--duration-fast); white-space: nowrap; }
    .cp-tab:hover { color: var(--text-primary); }
    .cp-tab.is-active { background: var(--darka-green); color: white; box-shadow: 0 2px 8px rgba(0, 102, 92, 0.25); }

    /* SUBCHIPS — chips coloridos centrados */
    .cp-subchips { display: flex; gap: 8px; padding: var(--space-2) var(--space-3) var(--space-2); flex-wrap: wrap; justify-content: center; }
    .cp-subchip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 2px solid transparent; border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 700; cursor: pointer; transition: all var(--duration-fast); white-space: nowrap; flex-shrink: 0; background: var(--c-bg, var(--bg-soft)); color: var(--c-fg, var(--text-primary)); }
    .cp-subchip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
    .cp-subchip.is-active { border-color: var(--text-primary); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); transform: translateY(-1px); }
    .cp-subchip__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c-dot, white); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }

    /* CORPO — grid de cores + preview */
    .cp-body { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-3); padding: 0 var(--space-3) var(--space-3); overflow: hidden; min-height: 0; }

    /* Coluna do grid com paginação dentro */
    .cp-grid-col { display: grid; grid-template-rows: 1fr auto; gap: var(--space-2); min-height: 0; }
    .cp-grid-wrap { overflow-y: auto; padding-right: 6px; }
    .cp-grid-wrap::-webkit-scrollbar { width: 6px; }
    .cp-grid-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
    .cp-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
    .cp-color { aspect-ratio: 1; border-radius: var(--radius-sm); border: 2px solid transparent; padding: 6px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; cursor: pointer; transition: transform var(--duration-fast); font-family: inherit; position: relative; overflow: hidden; text-align: left; }
    .cp-color:hover { transform: scale(1.06); z-index: 2; box-shadow: var(--shadow-md); }
    .cp-color.is-active { border-color: var(--text-primary); box-shadow: 0 0 0 2px white inset, var(--shadow-md); }
    .cp-color__bucket { font-size: 0.75rem; opacity: 0.55; }
    .cp-color__bucket [data-lucide] { width: 14px; height: 14px; }
    .cp-color__check { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); display: inline-flex; align-items: center; justify-content: center; color: var(--text-primary); }
    .cp-color__check [data-lucide] { width: 12px; height: 12px; stroke-width: 3; }
    .cp-color__name { font-size: 0.6875rem; font-weight: 700; line-height: 1.15; opacity: 0.92; word-break: break-word; }
    .cp-color[data-dark="true"] { color: white; }
    .cp-color[data-dark="false"] { color: rgba(0, 0, 0, 0.78); }
    .cp-color[data-dark="false"] .cp-color__check { background: var(--text-primary); color: white; }

    /* PAGINAÇÃO — dentro da coluna do grid, botões pílula sutis */
    .cp-pagination { display: flex; justify-content: space-between; gap: 10px; }
    .cp-pagination button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: none; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: opacity var(--duration-fast); background: var(--c-bg, var(--bg-soft)); color: var(--c-fg, var(--text-primary)); opacity: 0.85; }
    .cp-pagination button:hover { opacity: 1; }
    .cp-pagination button [data-lucide] { width: 13px; height: 13px; }

    /* PREVIEW — carrossel com setas, fundo recebe cor selecionada */
    .cp-preview { display: grid; grid-template-rows: 1fr auto auto; gap: var(--space-2); min-height: 0; overflow: hidden; }
    .cp-preview__carousel { position: relative; border-radius: var(--radius-md); overflow: hidden; min-height: 0; background-color: var(--preview-color, #C4A574); transition: background-color 220ms var(--easing); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
    .cp-preview__track { display: flex; height: 100%; transition: transform 500ms var(--easing); }
    .cp-preview__slide { flex: 0 0 100%; height: 100%; }
    .cp-preview__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
    .cp-preview__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: background var(--duration-fast); z-index: 2; }
    .cp-preview__arrow:hover { background: white; }
    .cp-preview__arrow [data-lucide] { width: 18px; height: 18px; }
    .cp-preview__arrow--prev { left: 10px; }
    .cp-preview__arrow--next { right: 10px; }
    .cp-preview__dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; z-index: 2; }
    .cp-preview__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); cursor: pointer; transition: all var(--duration-fast); border: none; }
    .cp-preview__dot.is-active { background: white; width: 18px; border-radius: 3px; }
    .cp-preview__warning { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; }
    .cp-preview__warning strong { display: block; color: var(--text-primary); margin-top: 4px; }
    .cp-preview__actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
    .cp-preview__chip { display: inline-flex; align-items: center; gap: 8px; padding: 14px 16px; border-radius: var(--radius-md); font-weight: 700; font-size: 0.875rem; background: var(--preview-color, #C4A574); color: white; min-height: 50px; transition: background-color 220ms var(--easing); }
    .cp-preview__chip[data-light="true"] { color: rgba(0, 0, 0, 0.82); }
    .cp-preview__chip [data-lucide] { width: 16px; height: 16px; }
    .cp-preview__select { background: var(--darka-terracotta); color: white; padding: 0 28px; border-radius: var(--radius-md); font-weight: 800; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.04em; min-height: 50px; transition: background var(--duration-fast); }
    .cp-preview__select:hover { background: var(--darka-terracotta-hover); }

    @media (max-width: 1024px) {
      .cp-body { grid-template-columns: 1fr; overflow-y: auto; }
      .cp-grid { grid-template-columns: repeat(6, 1fr); }
      .cp-preview { order: -1; max-height: 340px; }
    }

    @media (max-width: 720px) {
      /* ============================================================
         MOBILE — sequência LINEAR de cima pra baixo:
         (1) tabs (2) chips família (3) grid cores
         (4) paginação (5) foto (6) texto (7) chip+selecionar
         ============================================================ */

      /* PANEL full-screen, com header sticky e body rolável */
      .color-picker { padding: 0; }
      .color-picker__panel {
        width: 100vw; max-width: 100vw;
        height: 100vh; max-height: 100vh;
        border-radius: 0;
        display: grid;
        grid-template-rows: auto 1fr;  /* head fixo + restante rolável */
        overflow: hidden;
      }

      /* HEAD: busca + close */
      .color-picker__head {
        grid-template-columns: 1fr auto;
        gap: 8px; padding: 10px 14px;
        background: white;
        border-bottom: 1px solid var(--border-subtle);
      }
      .color-picker__head h2 { display: none; }
      .color-picker__search { max-width: 100%; margin: 0; padding: 0 12px; }
      .color-picker__search input { padding: 8px 6px; font-size: 0.8125rem; }
      .color-picker__close { width: 32px; height: 32px; }
      .color-picker__close [data-lucide] { width: 16px; height: 16px; }

      /* Container rolável (envolve tudo abaixo do head) */
      .cp-scroll {
        overflow-y: auto; overflow-x: hidden;
        display: flex; flex-direction: column;
      }

      /* (1) TABS principais — 3 colunas iguais */
      .cp-tabs-wrap { padding: 10px 14px 0; }
      .cp-tabs {
        display: grid; grid-template-columns: repeat(3, 1fr);
        width: 100%; padding: 4px;
      }
      .cp-tab { padding: 8px 4px; font-size: 0.75rem; text-align: center; }

      /* (2) CHIPS de família — linha horizontal scrollável */
      .cp-subchips {
        padding: 12px 14px;
        gap: 6px;
        overflow-x: auto; overflow-y: hidden;
        flex-wrap: nowrap; justify-content: flex-start;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
      }
      .cp-subchips::-webkit-scrollbar { display: none; }
      .cp-subchip {
        padding: 7px 12px; font-size: 0.75rem; gap: 6px;
        flex-shrink: 0; scroll-snap-align: start;
      }
      .cp-subchip__dot { width: 12px; height: 12px; }

      /* BODY: 1 coluna, padding lateral, sem grid */
      .cp-body {
        display: block;
        grid-template-columns: none;
        padding: 0 14px 14px;
        overflow: visible;
        min-height: auto;
      }

      /* GRID-COL: bloco flat (sem grid-template) */
      .cp-grid-col {
        display: block;
        grid-template-rows: none;
        min-height: auto;
        margin-bottom: 12px;
      }

      /* (3) GRID de cores — linha horizontal */
      .cp-grid-wrap {
        overflow: visible;
        padding: 0;
        margin-bottom: 8px;
      }
      .cp-grid {
        display: flex; flex-wrap: nowrap;
        overflow-x: auto; overflow-y: hidden;
        gap: 5px; padding: 2px 0 6px;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        grid-template-columns: none;  /* reseta herança grid */
      }
      .cp-grid::-webkit-scrollbar { display: none; }
      .cp-color {
        flex: 0 0 72px; aspect-ratio: 1;
        scroll-snap-align: start; padding: 6px;
      }
      .cp-color__name { font-size: 0.625rem; }
      .cp-color__bucket [data-lucide] { width: 12px; height: 12px; }

      /* (4) PAGINAÇÃO */
      .cp-pagination { padding: 0; }
      .cp-pagination button {
        font-size: 0.6875rem; padding: 6px 12px;
        opacity: 1;
      }
      .cp-pagination button [data-lucide] { width: 12px; height: 12px; }

      /* (5) PREVIEW — reseta herança tablet (order:-1, max-height) */
      .cp-preview {
        order: 0 !important;
        display: block !important;
        grid-template-rows: none;
        max-height: none;
        overflow: visible;
        margin-top: 12px;
      }
      .cp-preview__carousel {
        height: 220px;
        margin-bottom: 10px;
      }
      .cp-preview__arrow { width: 28px; height: 28px; }
      .cp-preview__arrow [data-lucide] { width: 14px; height: 14px; }

      /* (6) WARNING */
      .cp-preview__warning {
        display: block;
        font-size: 0.6875rem; line-height: 1.45;
        margin-bottom: 10px;
      }
      .cp-preview__warning strong { font-size: 0.75rem; }

      /* (7) ACTIONS — chip + selecionar inline */
      .cp-preview__actions {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
      }
      .cp-preview__chip {
        padding: 12px 14px; min-height: 44px;
        font-size: 0.8125rem;
      }
      .cp-preview__select {
        padding: 0 18px; min-height: 44px;
        font-size: 0.8125rem;
      }

      /* Esconde footer sticky mobile (não usamos no fluxo linear) */
      .cp-mobile-footer { display: none !important; }
    }

    /* Footer mobile só aparece no mobile */
    .cp-mobile-footer { display: none; }

    /* ----- QTY + CTAs ----- */
    .buy-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: stretch; }
    .buy-row--full { grid-template-columns: 1fr; }
    .qty { display: inline-flex; align-items: center; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; background: white; height: 54px; }
    .qty__btn { width: 44px; height: 100%; color: var(--darka-green); font-weight: 800; font-size: 1.125rem; transition: background var(--duration-fast); }
    .qty__btn:hover { background: var(--bg-soft); }
    .qty__btn:disabled { color: var(--text-tertiary); cursor: not-allowed; }
    .qty__input { width: 48px; height: 100%; text-align: center; font-weight: 800; font-size: 1rem; border: none; outline: none; background: transparent; border-inline: 1px solid var(--border-subtle); -moz-appearance: textfield; }
    .qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    /* CTA primário — COMPRAR */
    /* "Comprar agora": mesma cor do botão Buscar do topo (verde petróleo). */
    .btn--buy { background: var(--darka-green); color: white; border-radius: var(--radius-md); padding: 14px 16px; font-weight: 800; font-size: 1rem; height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background var(--duration-fast); white-space: nowrap; min-width: 0; }
    .btn--buy:hover { background: var(--darka-green-dark); }
    .btn--buy [data-lucide] { width: 18px; height: 18px; flex-shrink: 0; }

    /* CTAs secundários — carrinho + WhatsApp empilhados */
    .buy-secondary { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
    .btn--cart { background: white; color: var(--darka-green); border: 1.5px solid var(--darka-green); border-radius: var(--radius-md); padding: 12px 24px; font-weight: 700; font-size: 0.875rem; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all var(--duration-fast); }
    .btn--cart:hover:not(:disabled) { background: var(--darka-green); color: white; }
    .btn--cart:disabled { background: var(--bg-soft); color: var(--text-tertiary); border-color: var(--border-subtle); cursor: not-allowed; }
    .btn--cart [data-lucide] { width: 16px; height: 16px; }
    /* Verde escurecido (era #25D366 — branco sobre ele dava só ~2:1, reprovava
       WCAG). #157A47 dá ~5.4:1 com texto branco, mantendo a leitura "verde WhatsApp". */
    .btn--whatsapp { background: #157A47; color: white; border: 1.5px solid #157A47; border-radius: var(--radius-md); padding: 12px 24px; font-weight: 700; font-size: 0.875rem; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; transition: background var(--duration-fast), border-color var(--duration-fast); white-space: nowrap; }
    .btn--whatsapp:hover { background: #11633A; border-color: #11633A; }
    .btn--whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; }

    /* ----- BLOCO ENTREGA / RETIRADA ----- */
    .delivery { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: white; overflow: hidden; }
    .delivery__tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-soft); border-bottom: 1px solid var(--border-subtle); }
    .delivery__tab { padding: 12px 14px; font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all var(--duration-fast); position: relative; }
    .delivery__tab [data-lucide] { width: 16px; height: 16px; }
    .delivery__tab:hover { color: var(--darka-green); }
    .delivery__tab.is-active { background: white; color: var(--darka-green); }
    .delivery__tab.is-active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--darka-terracotta); }
    .delivery__tab__hint { display: inline-block; background: var(--darka-yellow); color: white; font-size: 0.5625rem; font-weight: 800; padding: 2px 6px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.04em; margin-left: 4px; }
    .delivery__panel { display: none; padding: var(--space-2) var(--space-3) var(--space-3); }
    .delivery__panel.is-active { display: block; }

    /* CEP form */
    .cep-form { display: flex; gap: 8px; align-items: stretch; margin-block: 8px var(--space-2); }
    .cep-form input { flex: 1; min-width: 0; padding: 12px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); font-size: 0.875rem; outline: none; transition: border-color var(--duration-fast); background: white; }
    .cep-form input:focus { border-color: var(--darka-green); }
    .cep-form button { background: var(--darka-green); color: white; border-radius: var(--radius-md); padding: 12px 18px; font-size: 0.8125rem; font-weight: 700; transition: background var(--duration-fast); }
    .cep-form button:hover { background: var(--darka-green-dark); }
    .cep-form__help { font-size: 0.6875rem; color: var(--text-tertiary); }
    .cep-form__help a { color: var(--darka-terracotta-text); text-decoration: underline; }

    .shipping-list { display: flex; flex-direction: column; gap: 6px; }
    .shipping-option { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-soft); font-size: 0.8125rem; }
    .shipping-option__name { font-weight: 700; color: var(--text-primary); }
    .shipping-option__sub { font-size: 0.6875rem; color: var(--text-tertiary); display: block; margin-top: 2px; }
    .shipping-option__price { font-weight: 800; color: var(--darka-green); }
    .shipping-option--free .shipping-option__price { color: var(--darka-yellow-hover); }
    .shipping-option--highlight { background: rgba(231, 111, 46, 0.06); border-color: rgba(231, 111, 46, 0.3); }
    .shipping-option__icon { width: 15px; height: 15px; vertical-align: -3px; margin-right: 7px; color: var(--darka-green); }

    /* Retirada na loja — destaque (opção grátis/recomendada), com a lista de
       lojas que cobrem o CEP bem apresentada (pin + nome + endereço). */
    .shipping-pickup { border: 1.5px solid var(--darka-green); border-radius: var(--radius-md); background: var(--discount-bg); padding: 12px 14px; }
    .shipping-pickup__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .shipping-pickup__title { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--darka-green); font-size: 0.875rem; }
    .shipping-pickup__title [data-lucide] { width: 17px; height: 17px; }
    .shipping-pickup__badge { font-weight: 800; font-size: 0.6875rem; color: white; background: var(--darka-green); padding: 3px 11px; border-radius: var(--radius-pill); letter-spacing: 0.02em; }
    .shipping-pickup__prazo { font-size: 0.6875rem; color: var(--text-secondary); margin: 5px 0 11px; }
    .shipping-pickup__prazo strong { color: var(--text-primary); font-weight: 700; }
    .shipping-pickup__stores { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
    .shipping-pickup__stores li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
    .shipping-pickup__stores li [data-lucide] { width: 14px; height: 14px; color: var(--darka-terracotta); margin-top: 2px; flex-shrink: 0; }
    .shipping-pickup__stores strong { display: block; font-size: 0.75rem; color: var(--text-primary); font-weight: 700; line-height: 1.3; }
    .shipping-pickup__stores small { display: block; font-size: 0.6875rem; color: var(--text-tertiary); line-height: 1.35; margin-top: 1px; }
    .shipping-pickup__more { display: inline-block; margin-top: 11px; font-size: 0.6875rem; font-weight: 700; color: var(--darka-terracotta); }
    .shipping-pickup__more:hover { text-decoration: underline; }

    /* Lojas com estoque */
    .pickup-intro { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-secondary); margin-block: 4px 12px; }
    .pickup-intro [data-lucide] { width: 14px; height: 14px; color: var(--darka-terracotta); flex-shrink: 0; }
    .pickup-intro strong { color: var(--text-primary); }
    .pickup-intro__change { margin-left: auto; font-size: 0.6875rem; color: var(--darka-terracotta); font-weight: 700; white-space: nowrap; }
    .pickup-intro__change:hover { text-decoration: underline; }
    .pickup-list { display: flex; flex-direction: column; gap: 8px; }
    .store-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-soft); }
    .store-item__pin { width: 32px; height: 32px; border-radius: 50%; background: var(--darka-green); color: var(--darka-yellow); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .store-item__pin [data-lucide] { width: 16px; height: 16px; }
    .store-item__info { min-width: 0; }
    .store-item__city { font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); }
    .store-item__addr { font-size: 0.6875rem; color: var(--text-tertiary); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    .store-item__stock { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6875rem; font-weight: 700; padding: 4px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
    .store-item__stock--ok { background: var(--discount-bg); color: var(--discount-green); }
    .store-item__stock--low { background: rgba(231, 111, 46, 0.1); color: var(--darka-terracotta); }
    .store-item__stock--out { background: var(--bg-darker); color: var(--text-tertiary); }
    .store-item__stock [data-lucide] { width: 12px; height: 12px; }
    .pickup-more { text-align: center; padding-top: 10px; }
    .pickup-more a { font-size: 0.75rem; color: var(--darka-terracotta); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
    .pickup-more a:hover { text-decoration: underline; }
    .pickup-more a [data-lucide] { width: 14px; height: 14px; }

    /* Mini stock ribbon at top of delivery */
    .stock-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--discount-bg); color: var(--discount-green); font-size: 0.75rem; font-weight: 700; margin-bottom: 4px; }
    .stock-status [data-lucide] { width: 14px; height: 14px; }
    .stock-status--low { background: rgba(231, 111, 46, 0.1); color: var(--darka-terracotta); }

    /* ----- FORMAS DE PAGAMENTO (abaixo do buybox) ----- */
    .buybox-payments { display: flex; flex-direction: column; gap: 6px; }
    .buybox-payment { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: white; }
    .buybox-payment__logo { width: 38px; height: 28px; object-fit: contain; flex-shrink: 0; }
    .buybox-payment__brands { display: inline-flex; gap: 4px; align-items: center; flex-shrink: 0; }
    .buybox-payment__brands img { width: 30px; height: 22px; object-fit: contain; }
    .buybox-payment__text { font-size: 0.75rem; line-height: 1.3; }
    .buybox-payment__text strong { display: block; font-size: 0.875rem; color: var(--text-primary); font-weight: 700; }
    .buybox-payment__text span { color: var(--text-secondary); }

    /* ----- CALCULADORA INLINE PDP ----- */
    .pdp-calc { background: linear-gradient(135deg, var(--darka-green) 0%, var(--darka-green-dark) 100%); color: white; border-radius: var(--radius-lg); padding: var(--space-3); display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: center; }
    .pdp-calc__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--darka-yellow); color: var(--darka-green-dark); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .pdp-calc__icon [data-lucide] { width: 24px; height: 24px; }
    .pdp-calc__text strong { display: block; font-size: 1rem; font-weight: 800; }
    .pdp-calc__text span { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); }
    .pdp-calc__form { display: inline-flex; gap: 6px; align-items: center; }
    .pdp-calc__input-wrap { display: inline-flex; align-items: center; background: white; color: var(--text-primary); border-radius: var(--radius-md); overflow: hidden; }
    .pdp-calc__input-wrap input { width: 60px; padding: 8px 10px; border: none; outline: none; font-size: 0.875rem; font-weight: 700; text-align: right; }
    .pdp-calc__input-wrap span { padding-right: 10px; font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); }
    .pdp-calc__btn { background: var(--darka-terracotta); color: white; border-radius: var(--radius-md); padding: 10px 16px; font-size: 0.8125rem; font-weight: 700; }
    .pdp-calc__btn:hover { background: var(--darka-terracotta-hover); }
    .pdp-calc__result { font-size: 0.8125rem; color: white; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, 0.25); margin-top: 10px; grid-column: 1 / -1; display: none; }
    .pdp-calc__result.is-visible { display: block; }
    .pdp-calc__result strong { color: var(--darka-yellow); }

    /* ----- VÍDEO DO PRODUTO (após a descrição) ----- */
    .pdp-video { margin-top: var(--space-5); }
    .pdp-video__frame { position: relative; width: 100%; max-width: 820px; aspect-ratio: 16 / 9; margin-top: var(--space-3); border-radius: var(--radius-lg); overflow: hidden; background: #000; box-shadow: var(--shadow-sm); }
    .pdp-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

    /* ----- ABAS DETALHE ----- */
    .pdp-tabs { margin-top: var(--space-6); }
    .pdp-tabs__nav { display: flex; gap: 0; border-bottom: 1px solid var(--border-subtle); overflow-x: auto; scrollbar-width: none; }
    .pdp-tabs__nav::-webkit-scrollbar { display: none; }
    .pdp-tab { padding: 14px 20px; font-size: 0.875rem; font-weight: 700; color: var(--text-secondary); position: relative; white-space: nowrap; transition: color var(--duration-fast); }
    .pdp-tab:hover { color: var(--darka-green); }
    .pdp-tab.is-active { color: var(--darka-green); }
    .pdp-tab.is-active::after { content: ''; position: absolute; bottom: -1px; left: 12px; right: 12px; height: 3px; background: var(--darka-terracotta); border-radius: 2px 2px 0 0; }
    .pdp-tab__count { display: inline-block; background: var(--bg-soft); color: var(--text-tertiary); font-size: 0.6875rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); margin-left: 6px; }
    .pdp-tab.is-active .pdp-tab__count { background: var(--darka-green); color: white; }

    .pdp-panel { display: none; padding-block: var(--space-4); }
    .pdp-panel.is-active { display: block; }
    .pdp-panel h3 { font-size: 1.125rem; color: var(--darka-green); margin-bottom: 10px; font-weight: 800; }
    .pdp-panel p { font-size: 0.9375rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 14px; max-width: 75ch; }
    .pdp-panel ul.bullets { margin-left: 0; padding-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; max-width: 880px; }
    .pdp-panel ul.bullets li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; color: var(--text-secondary); }

    /* Especificações técnicas */
    .specs-section { margin-bottom: 28px; max-width: 880px; }
    .specs-section:last-child { margin-bottom: 0; }
    .specs-section__title { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--darka-green); font-weight: 800; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }
    .specs-list { display: grid; grid-template-columns: 220px 1fr; gap: 10px 28px; font-size: 0.875rem; margin: 0; }
    .specs-list dt { color: var(--text-tertiary); font-weight: 500; line-height: 1.5; }
    .specs-list dd { color: var(--text-primary); font-weight: 600; margin: 0; line-height: 1.5; font-variant-numeric: tabular-nums; }
    @media (max-width: 640px) {
      .specs-list { grid-template-columns: 1fr; gap: 2px 0; }
      .specs-list dt { color: var(--text-tertiary); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 8px; font-weight: 700; }
      .specs-list dt:first-child { margin-top: 0; }
    }
    .pdp-panel ul.bullets li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--darka-terracotta); margin-top: 9px; flex-shrink: 0; }

    /* Avaliações */
    .reviews-summary { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-4); padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
    .reviews-summary__score { text-align: center; padding: var(--space-2); background: var(--bg-soft); border-radius: var(--radius-md); }
    .reviews-summary__score-num { font-size: 2.5rem; font-weight: 800; color: var(--darka-green); line-height: 1; }
    .reviews-summary__score-stars { color: #F4A623; margin-block: 6px; font-size: 1.125rem; letter-spacing: 2px; line-height: 1; }
    .reviews-summary__score-count { font-size: 0.75rem; color: var(--text-tertiary); }
    .reviews-summary__bars { display: flex; flex-direction: column; gap: 4px; }
    .review-bar { display: grid; grid-template-columns: 30px 1fr 40px; align-items: center; gap: 10px; font-size: 0.75rem; color: var(--text-secondary); }
    .review-bar__fill { height: 8px; background: var(--bg-darker); border-radius: 4px; overflow: hidden; }
    .review-bar__fill span { display: block; height: 100%; background: var(--darka-yellow); border-radius: 4px; }
    .review-list { display: flex; flex-direction: column; gap: var(--space-2); }
    .review-item { padding: var(--space-2); background: white; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
    .review-item__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
    .review-item__author { font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); }
    .review-item__author span { font-weight: 500; color: var(--text-tertiary); font-size: 0.6875rem; margin-left: 6px; }
    .review-item__stars { color: #F4A623; font-size: 0.8125rem; letter-spacing: 1px; line-height: 1; }
    .review-item__title { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
    .review-item__text { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; }
    /* Estado vazio da aba Avaliações (mockup só tem o estado com dados). Usa a
       linguagem visual do tema: card de fundo suave, ícone em "badge" e verde da
       marca. O CTA (entrar/avaliar) renderiza logo abaixo via JS. */
    .reviews-empty { text-align: center; padding: var(--space-5) var(--space-3); background: var(--bg-soft); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
    .reviews-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: white; border: 1px solid var(--border-subtle); color: var(--darka-green); margin-bottom: 12px; }
    .reviews-empty__icon svg { width: 26px; height: 26px; }
    .pdp-panel .reviews-empty__title { font-size: 1.125rem; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
    .pdp-panel .reviews-empty__text { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; max-width: 46ch; margin: 0 auto; }
    /* CTA de avaliação (entrar / avaliar / editar / remover) — injetado por JS no
       .pdp-reviews__cta. Sem estilo o texto herdava `.pdp-panel p` (alinhado à
       esquerda, largura cheia) e ficava solto sob o card. Centraliza e dá respiro. */
    .pdp-reviews__cta { text-align: center; margin-top: var(--space-3); }
    .pdp-panel .pdp-reviews__cta p { font-size: 0.875rem; color: var(--text-secondary); margin: 0; max-width: none; }
    .pdp-reviews__cta a, .pdp-reviews__cta .auth-link { color: var(--darka-green); font-weight: 700; }
    .pdp-reviews__cta a:hover, .pdp-reviews__cta .auth-link:hover { color: var(--darka-terracotta); }

    /* ----- RESPONSIVE PDP ----- */
    @media (max-width: 1100px) {
      .pdp__layout { grid-template-columns: 1fr; gap: var(--space-4); }
      .gallery { position: static; max-width: 600px; margin-inline: auto; }
    }

    @media (max-width: 1200px) {
      .carousel__track { grid-auto-columns: calc((100% - var(--space-2) * 3) / 4); }
    }

    @media (max-width: 1024px) {
      .header__inner { grid-template-columns: auto 1fr auto; gap: var(--space-2); }
      .nav { overflow-x: auto; justify-content: flex-start; }
      .footer__top { grid-template-columns: 1fr 1fr; }
      .megamenu__feature { display: none; }
      .megamenu__grid { grid-template-columns: 1fr; }
      .carousel__track { grid-auto-columns: calc((100% - var(--space-2) * 2) / 3); }
      .trust-grid { grid-template-columns: repeat(2, 1fr); }
      .reviews-summary { grid-template-columns: 1fr; }
    }

    @media (max-width: 720px) {
      :root { --container-padding: 16px; }

      /* Header — mesma estratégia da home */
      .header__inner { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 10px var(--space-1); padding-block: 10px; align-items: center; }
      .header__menu-toggle { display: inline-flex; grid-row: 1; grid-column: 1; }
      .logo { grid-row: 1; grid-column: 2; justify-self: start; margin-left: 8px; }
      .logo img { height: 44px; }
      .header__actions { grid-row: 1; grid-column: 3; gap: 0; }
      .header__search { grid-row: 2; grid-column: 1 / -1; padding: 4px 4px 4px 14px; }
      .nav-bar { display: none; }
      .header__search button { padding: 8px 14px; font-size: 0.75rem; }
      .header__action { padding: 6px 8px; }
      .header__action > span:not(.header__action__icon):not(.badge) { display: none; }
      .header__action__icon { font-size: 1rem; }
      .header__action [data-lucide] { width: 20px; height: 20px; }

      /* Utility bar */
      .utility-bar__inner { height: auto; padding-block: 6px; }
      .utility-bar__right { display: none; }

      /* PDP */
      .breadcrumb__list { font-size: 0.6875rem; }
      .breadcrumb__list li:not([aria-current]):not(:nth-last-child(-n+3)) { display: none; }
      .gallery { grid-template-columns: 1fr; }
      .gallery__thumbs { flex-direction: row; order: 2; overflow-x: auto; scrollbar-width: none; }
      .gallery__thumbs::-webkit-scrollbar { display: none; }
      .gallery__thumb { width: 64px; height: 64px; flex-shrink: 0; }
      .gallery__main { padding: var(--space-2); }
      .gallery__main img { max-width: 94%; max-height: 94%; }
      .gallery__discount-badge { top: 12px; left: 12px; font-size: 0.75rem; padding: 6px 10px; }
      .gallery__share { top: 12px; right: 12px; }
      .buybox__title { font-size: 1.25rem; }
      .price-block__valor { font-size: 1.875rem; }
      .buy-row { grid-template-columns: 1fr; }
      .qty { width: fit-content; height: 48px; }
      .btn--buy { height: 48px; }
      .delivery__tabs { grid-template-columns: 1fr; }
      .lit-options { grid-template-columns: repeat(2, 1fr); }
      .pdp-calc { grid-template-columns: 1fr; text-align: center; }
      .pdp-calc__icon { margin-inline: auto; }
      .pdp-tabs__nav { margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); }
      .pdp-panel ul.bullets { grid-template-columns: 1fr; }

      /* Trust strip */
      .trust-grid { grid-template-columns: 1fr; gap: 12px; }

      /* Carrossel cards mobile */
      .carousel__track { grid-auto-columns: 78%; }
      .carousel__arrow { width: 36px; height: 36px; }
      .carousel__arrow--prev { left: -12px; }
      .carousel__arrow--next { right: -12px; }

      /* Section heads mobile */
      .section__head { flex-direction: column; align-items: flex-start; gap: 4px; }

      /* Footer compacto mobile: marca full-width + colunas de links em 2×2 */
      .footer { padding-block: var(--space-4) var(--space-2); }
      .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); padding-bottom: var(--space-3); }
      .footer__brand { grid-column: 1 / -1; }
      .footer__brand img { height: 52px; margin-bottom: 8px; }
      .footer__brand p { font-size: 0.75rem; }
      .footer__social { margin-top: 12px; gap: 8px; }
      .footer__social a { width: 38px; height: 38px; }
      .footer__social a svg { width: 18px; height: 18px; }
      .footer__col h2 { margin-bottom: 8px; }
      .footer__col li { margin-bottom: 4px; }
      .footer__pag { max-width: 220px; }
      .footer__safebrowsing { margin-top: 16px; }
      .footer__bottom { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: var(--space-2); padding-right: 80px; }

      /* WhatsApp */
      .whatsapp-fab { bottom: 16px; right: 16px; width: 52px; height: 52px; }
      .whatsapp-fab svg { width: 26px; height: 26px; }
    }

    /* Sticky buy bar mobile (aparece ao rolar para fora do buybox) */
    .sticky-buy { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 1px solid var(--border-subtle); padding: 10px 14px; display: none; z-index: 140; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08); align-items: center; gap: 10px; }
    .sticky-buy.is-visible { display: flex; }
    .sticky-buy__price { flex: 1; min-width: 0; }
    .sticky-buy__price small { display: block; font-size: 0.625rem; color: var(--text-tertiary); }
    .sticky-buy__price strong { font-size: 1.125rem; color: var(--darka-green); font-weight: 800; }
    .sticky-buy .btn--buy { height: 44px; padding: 0 18px; font-size: 0.875rem; flex-shrink: 0; }
    @media (max-width: 720px) {
      .footer__bottom { padding-bottom: 80px; } /* afasta da sticky bar mobile */
    }

/* =====================================================================
   LISTAGENS — categoria, busca, marca, coleção, produtos, marcas
   ===================================================================== */
.listing-head { padding-block: var(--space-3) var(--space-2); }
.listing-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--text-primary); margin: 0 0 6px; letter-spacing: -0.01em; }
.listing-head__sub { color: var(--text-secondary); font-size: 0.9375rem; max-width: 65ch; }

.listing-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-4); align-items: flex-start; padding-bottom: var(--space-6); }
.listing-layout__main { min-width: 0; }
.listing-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-block: var(--space-2); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-3); }
.listing-toolbar__count { font-size: 0.8125rem; color: var(--text-secondary); }
.listing-toolbar__count strong { color: var(--text-primary); font-weight: 700; }
.listing-toolbar__sort { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--text-secondary); }
.listing-toolbar__sort select { border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); padding: 8px 12px; background: white; font-family: inherit; font-size: 0.8125rem; color: var(--text-primary); }
.listing-toolbar__sort select:focus { border-color: var(--darka-green); outline: none; }

.listing-empty { text-align: center; padding: var(--space-6) var(--space-3); background: var(--bg-soft); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); color: var(--text-secondary); }
.listing-empty h2 { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; }
.listing-empty p { font-size: 0.9375rem; max-width: 50ch; margin-inline: auto; }

.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); }
@media (max-width: 720px) {
  .listing-layout { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Spinner de carregamento da paginação automática (lazy-grid.js) */
.lazy-loader { display: none; align-items: center; justify-content: center; gap: 10px; padding: var(--space-4); color: var(--text-tertiary); font-size: 0.875rem; }
.lazy-loader.is-active { display: flex; }
.lazy-loader__spinner { width: 22px; height: 22px; border: 2px solid var(--border-subtle); border-top-color: var(--darka-terracotta); border-radius: 50%; animation: lazy-spin 0.7s linear infinite; }
@keyframes lazy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lazy-loader__spinner { animation-duration: 1.6s; } }

/* ===================== LOJAS (/lojas) — card rico ===================== */
/* Grid responsivo: 1 col mobile, 2 col tablet, 3 col desktop (36 lojas). */
.lojas-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 720px)  { .lojas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .lojas-grid { grid-template-columns: repeat(3, 1fr); } }

/* Busca + filtro de lojas (stores-filter.js). Reusa tokens do tema; sort reusa
   .listing-toolbar__sort. Card escondido usa .is-hidden (não o attr [hidden],
   que .store-card-x{display:flex} sobreporia). */
.stores-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.stores-search { position: relative; flex: 1 1 320px; min-width: 0; }
.stores-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-tertiary); pointer-events: none; }
.stores-search__input { width: 100%; height: 46px; padding: 0 42px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-card); font-family: inherit; font-size: 0.9375rem; color: var(--text-primary); transition: border-color var(--duration-fast); }
.stores-search__input::placeholder { color: var(--text-tertiary); }
.stores-search__input:focus { border-color: var(--darka-green); outline: none; }
.stores-search__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-secondary); transition: background var(--duration-fast), color var(--duration-fast); }
.stores-search__clear:hover { background: var(--bg-soft); color: var(--darka-terracotta); }
.stores-search__clear [data-lucide] { width: 16px; height: 16px; }
.stores-filter__meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-bottom: var(--space-2); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
[data-store-card].is-hidden { display: none !important; }
.store-card-x.is-match { border-color: var(--darka-green); box-shadow: var(--shadow-md); }
@media (max-width: 600px) {
  .stores-filter { flex-direction: column; align-items: stretch; }
  .stores-filter__sort { justify-content: space-between; }
}

.store-card-x { background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; transition: transform var(--duration-fast), box-shadow var(--duration-fast); }
.store-card-x:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.store-card-x__photo { aspect-ratio: 16/9; position: relative; overflow: hidden; background: var(--bg-soft); }
.store-card-x__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-base); }
.store-card-x:hover .store-card-x__photo img { transform: scale(1.04); }
.store-card-x__badge { position: absolute; top: 12px; left: 12px; background: var(--darka-terracotta-text); color: #fff; padding: 5px 12px; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: var(--shadow-sm); }  /* terracota-text (#935A26): branco sobre #B87333 dava só 3.8:1 */
.store-card-x__badge--alt { background: var(--darka-green); }
.store-card-x__content { padding: var(--space-3); display: flex; flex-direction: column; flex: 1; }
.store-card-x__content h3 { color: var(--darka-green); margin-bottom: var(--space-2); }
.store-card-x__details { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-3); flex: 1; }
.store-card-x__detail { display: flex; align-items: flex-start; gap: 10px; font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.45; }
.store-card-x__detail [data-lucide] { width: 16px; height: 16px; color: var(--darka-terracotta); flex-shrink: 0; margin-top: 3px; }
.store-card-x__detail a { color: var(--darka-green); font-weight: 700; transition: color var(--duration-fast); }
.store-card-x__detail a:hover { color: var(--darka-terracotta); }
.store-card-x__cta { display: flex; gap: 8px; flex-wrap: wrap; }

/* Modal de mapa (<dialog id="map-dialog">, aberto por [data-map-open]) */
.map-modal { width: 90vw; max-width: 880px; height: 70vh; max-height: 640px; border: 0; border-radius: var(--radius-md); padding: 0; background: #fff; overflow: hidden; box-shadow: var(--shadow-lg); margin: auto; }
.map-modal[open] { display: block; }
.map-modal::backdrop { background: #0f0f0f99; backdrop-filter: blur(2px); }
.map-modal__close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: #fffffff2; border: 1px solid var(--border-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--darka-green); cursor: pointer; z-index: 10; box-shadow: var(--shadow-sm); transition: all var(--duration-fast); }
.map-modal__close:hover { background: var(--darka-green); color: #fff; }
.map-modal__iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Filter sidebar — extraído do mockup com paleta Tintas Darka */
.filter-mobile-toggle { display: none; }
.filter-mobile-backdrop { display: none; }

.filter-sidebar { background: white; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-3); position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow-y: auto; }
/* Margin no último grupo: padding-bottom de container com scroll é ignorado no
   fim do scroll (Chrome/Safari) e o botão "Aplicar preço" encostava na borda
   arredondada do card. Margin é respeitado, garante folga. */
.filter-sidebar > details:last-of-type { margin-bottom: var(--space-2); }
.filter-sidebar__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-2); }
.filter-sidebar__title { font-size: 0.6875rem; font-weight: 800; color: var(--darka-green); text-transform: uppercase; letter-spacing: 0.1em; }
.filter-sidebar__head-actions { display: inline-flex; gap: 8px; align-items: center; }
.filter-sidebar__clear { font-size: 0.75rem; color: var(--darka-terracotta); font-weight: 700; }
.filter-sidebar__clear:hover { text-decoration: underline; }
.filter-sidebar__close { display: none; }

.filter-group { border-bottom: 1px solid var(--border-subtle); padding-block: var(--space-2); }
.filter-group:last-of-type { border-bottom: 0; }
.filter-group__summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-size: 0.875rem; font-weight: 700; color: var(--text-primary); padding-block: 4px; }
.filter-group__summary::-webkit-details-marker { display: none; }
.filter-group__summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); transform: rotate(45deg); transition: transform var(--duration-fast); }
.filter-group[open] .filter-group__summary::after { transform: rotate(-135deg); }
.filter-group__badge { background: var(--darka-green); color: white; font-size: 0.625rem; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-pill); margin-left: 8px; }
.filter-group__list { display: flex; flex-direction: column; gap: 6px; padding-top: var(--space-1); max-height: 240px; overflow-y: auto; }
.filter-group__item { padding-inline: 2px; }

.filter-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.filter-checkbox input { width: 16px; height: 16px; accent-color: var(--darka-green); cursor: pointer; flex-shrink: 0; }
.filter-checkbox__label { font-size: 0.8125rem; color: var(--text-secondary); transition: color var(--duration-fast); flex: 1; min-width: 0; word-break: break-word; }
.filter-checkbox:hover .filter-checkbox__label { color: var(--text-primary); }
.filter-checkbox input:checked ~ .filter-checkbox__label { color: var(--darka-green); font-weight: 600; }
.filter-checkbox__count { font-size: 0.6875rem; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

.filter-price { padding-block: var(--space-1); }
.filter-price__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.filter-price__row label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 0.6875rem; font-weight: 700; color: var(--text-secondary); }
.filter-price__row input { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 10px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); font-size: 0.8125rem; font-family: inherit; background: white; }
.filter-price__row input:focus { border-color: var(--darka-green); outline: none; }
.filter-price__hint { color: var(--text-tertiary); }

/* Navegação por categoria dentro do filtro (links, não checkboxes). */
.filter-nav__item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--radius-md); font-size: 0.8125rem; color: var(--text-secondary); transition: color var(--duration-fast), background var(--duration-fast); }
.filter-nav__item:hover { color: var(--text-primary); background: var(--bg-soft); }
.filter-nav__label { flex: 1; min-width: 0; word-break: break-word; }
.filter-nav__item.is-active { color: var(--darka-green); font-weight: 700; background: color-mix(in srgb, var(--darka-green) 8%, transparent); }
.filter-nav__item.is-active::before { content: '✓'; color: var(--darka-green); font-weight: 800; font-size: 0.75rem; }

/* Chip de marca-contexto (página de marca). */
.filter-brand-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-1); padding: 6px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--darka-green) 10%, transparent); }
.filter-brand-chip__name { font-size: 0.8125rem; font-weight: 700; color: var(--darka-green); }
.filter-brand-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 0.9375rem; line-height: 1; color: var(--text-inverse); background: var(--darka-green); }
.filter-brand-chip__remove:hover { background: var(--darka-green-dark); }

@media (max-width: 1024px) {
  .filter-sidebar { position: static; max-height: none; }
}

@media (max-width: 720px) {
  .filter-mobile-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--darka-green); color: white; border-radius: var(--radius-md); font-size: 0.8125rem; font-weight: 700; margin-bottom: var(--space-2); }
  .filter-mobile-toggle [data-lucide] { width: 16px; height: 16px; }
  .filter-mobile-backdrop { display: block; position: fixed; inset: 0; background: rgba(13, 40, 37, 0.55); z-index: 199; opacity: 0; pointer-events: none; transition: opacity var(--duration-fast); }
  .filter-mobile-backdrop.is-visible { opacity: 1; pointer-events: auto; }
  .filter-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 85vw; max-width: 360px; max-height: 100vh; z-index: 200; border-radius: 0; transform: translateX(-100%); transition: transform var(--duration-base) var(--easing); }
  .filter-sidebar.is-open { transform: translateX(0); }
  .filter-sidebar__close { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--bg-soft); color: var(--text-secondary); }
  .filter-sidebar__close [data-lucide] { width: 18px; height: 18px; }
}

/* =====================================================================
   CARRINHO + CHECKOUT + CONTA + PEDIDO + PÁGINAS UTILITÁRIAS
   ===================================================================== */
.cart { padding-block: var(--space-3) var(--space-6); }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-4); align-items: flex-start; }
.cart-items { display: flex; flex-direction: column; gap: 12px; }
.cart-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto auto; grid-template-areas: "photo info qty price remove"; gap: 16px; padding: 16px; background: white; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); align-items: center; }
.cart-item__photo { grid-area: photo; width: 96px; height: 96px; border-radius: var(--radius-md); background: var(--bg-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cart-item__photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cart-item__name { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.cart-item__name a:hover { color: var(--darka-green); }
.cart-item__brand { font-size: 0.6875rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 4px; }
.cart-item__variant { font-size: 0.75rem; color: var(--text-secondary); margin-top: 4px; }
/* .cart-item__price e .cart-item__remove redefinidos no apêndice do carrinho
   abaixo (layout novo: preço em coluna + remover como botão de ícone). */

.cart-summary { background: white; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-3); position: sticky; top: 120px; display: flex; flex-direction: column; gap: 12px; }
.cart-summary h3 { font-size: 1rem; font-weight: 800; color: var(--darka-green); margin-bottom: 4px; }
.cart-summary__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.875rem; color: var(--text-secondary); }
.cart-summary__row--total { font-size: 1.125rem; font-weight: 800; color: var(--text-primary); padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.cart-summary__row--total strong { color: var(--darka-green); }
.cart-summary__row--pix { color: var(--discount-green); font-size: 0.8125rem; }

.cart-empty { text-align: center; padding: var(--space-6) var(--space-3); background: var(--bg-soft); border-radius: var(--radius-lg); }
.cart-empty [data-lucide] { width: 48px; height: 48px; color: var(--darka-green); margin-bottom: 16px; }
.cart-empty h2 { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; }
.cart-empty p { color: var(--text-secondary); max-width: 40ch; margin: 0 auto var(--space-3); }

/* --- Componentes do layout novo do carrinho (stepper de quantidade, barra de
   frete grátis, cupom, calculadora de frete). As regras acima cobriam só
   foto/nome/preço; estas completam o restante da marcação de carrinho.astro.
   Obs.: .cart-shipping-option* são criadas via innerHTML no <script> da página;
   como este CSS é global (não scoped), as regras se aplicam normalmente. --- */

/* Coluna central: nome, SKU, m², avisos de estoque */
.cart-item__info { grid-area: info; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-item__meta { color: var(--text-tertiary); }
.cart-item__m2 { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); }
.cart-item__warn { font-size: 0.75rem; font-weight: 700; color: var(--tintasdarka-red); margin-top: 2px; }
.cart-item__warn--soft { color: var(--darka-terracotta); font-weight: 600; }

/* Stepper de quantidade (− [n] +) */
.cart-item__qty { grid-area: qty; display: inline-flex; align-items: center; height: 40px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: white; overflow: hidden; }
.cart-qty-btn { width: 36px; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; line-height: 1; font-weight: 700; color: var(--darka-green); background: transparent; border: 0; cursor: pointer; transition: background var(--duration-fast); }
.cart-qty-btn:hover { background: var(--bg-soft); }
.cart-qty-input { width: 44px; height: 100%; text-align: center; border: 0; border-inline: 1px solid var(--border-subtle); font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); background: white; -moz-appearance: textfield; appearance: textfield; }
.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Preço do item: valor unitário + total da linha */
.cart-item__price { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cart-item__unit { color: var(--text-tertiary); }
.cart-item__total { font-size: 0.9375rem; font-weight: 800; color: var(--darka-green); white-space: nowrap; }

/* Remover (ícone lixeira) — substitui o estilo de texto antigo */
.cart-item__remove { grid-area: remove; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 6px; color: var(--text-tertiary); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; transition: color var(--duration-fast), background var(--duration-fast); }
.cart-item__remove:hover { color: var(--tintasdarka-red); background: var(--bg-soft); }
.cart-item__remove [data-lucide] { width: 18px; height: 18px; }

/* Barra de progresso "faltam R$ X pra frete grátis" */
.free-shipping-bar { background: var(--bg-soft); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.free-shipping-bar__msg { font-size: 0.8125rem; color: var(--text-secondary); margin: 0; }
.free-shipping-bar__msg strong { color: var(--darka-green); }
.free-shipping-bar__msg--won,
.free-shipping-bar__msg--won strong { color: var(--tintasdarka-green-hover); font-weight: 700; }
.free-shipping-bar__track { height: 8px; background: var(--border-subtle); border-radius: var(--radius-pill); overflow: hidden; }
.free-shipping-bar__fill { height: 100%; background: linear-gradient(90deg, var(--darka-green-light), var(--darka-green)); border-radius: inherit; transition: width var(--duration-base) var(--easing); }

/* CTA + avisos do resumo */
.cart-summary__cta { width: 100%; justify-content: center; margin-top: var(--space-1); }
.cart-summary__warn { font-size: 0.8125rem; line-height: 1.45; color: var(--tintasdarka-red); background: #FDECEA; border: 1px solid #F3C0BB; border-radius: var(--radius-md); padding: 10px 12px; }

/* Campo de cupom */
.cart-coupon { display: flex; flex-direction: column; gap: 6px; }
.cart-coupon__form { display: flex; gap: 8px; }
.cart-coupon__form input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-size: 0.875rem; }
.cart-coupon__form input:focus { outline: none; border-color: var(--darka-green); }
.cart-coupon__feedback { margin: 0; min-height: 1em; }

/* Calcular frete (CEP + resultado) */
.cart-shipping { display: flex; flex-direction: column; gap: 6px; }
.cart-shipping__form { display: flex; gap: 8px; }
.cart-shipping__form input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-size: 0.875rem; }
.cart-shipping__form input:focus { outline: none; border-color: var(--darka-green); }
.cart-shipping__result { margin-top: 4px; }

/* Opções de frete retornadas pela cotação (radios) */
.cart-shipping-options { display: flex; flex-direction: column; gap: 8px; }
.cart-shipping-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast); }
.cart-shipping-option:hover { border-color: var(--border-strong); }
.cart-shipping-option:has(input:checked) { border-color: var(--darka-green); background: var(--discount-bg); }
.cart-shipping-option > input { margin-top: 3px; accent-color: var(--darka-green); }
.cart-shipping-option__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-shipping-option__body strong { font-size: 0.875rem; color: var(--text-primary); }
.cart-shipping-option__price { font-size: 0.9375rem; font-weight: 800; color: var(--darka-green); white-space: nowrap; }

/* O atributo HTML `hidden` é só `display:none` do UA stylesheet — qualquer regra
   de autor com `display:` (ex.: .free-shipping-bar{display:flex}) o derrota e o
   elemento fica SEMPRE visível (barra de frete grátis vazia no checkout). Reset
   global restaura o comportamento esperado (JS mostra via removeAttribute). */
[hidden] { display: none !important; }

/* Opções de frete no checkout — espelha o cart-shipping-option (estava sem CSS:
   nome e prazo saíam grudados "Entrega Darka2 dias úteis" e o preço solto). */
.checkout-shipping-options { display: flex; flex-direction: column; gap: 8px; }
.checkout-shipping-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast); }
.checkout-shipping-option:hover { border-color: var(--border-strong); }
.checkout-shipping-option:has(input:checked) { border-color: var(--darka-green); background: var(--discount-bg); }
.checkout-shipping-option > input { accent-color: var(--darka-green); }
.checkout-shipping-option__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checkout-shipping-option__body strong { font-size: 0.875rem; color: var(--text-primary); }
.checkout-shipping-option__body .text-tiny { color: var(--text-tertiary); }
.checkout-shipping-option__price { font-size: 0.9375rem; font-weight: 800; color: var(--darka-green); white-space: nowrap; }

/* Toggle "Entrega ou retirada?" (1º step) — espelha o .checkout-fulfillment. */
.cart-fulfillment-wrap { display: flex; flex-direction: column; gap: 6px; }
.cart-fulfillment { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cart-fulfillment__opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast); }
.cart-fulfillment__opt:hover { border-color: var(--darka-green-light); }
.cart-fulfillment__opt:has(input:checked) { border-color: var(--darka-green); background: rgba(0, 102, 92, 0.04); }
.cart-fulfillment__opt input { accent-color: var(--darka-green); }
.cart-fulfillment__txt { display: flex; flex-direction: column; }
.cart-fulfillment__txt strong { font-size: 0.8125rem; color: var(--text-primary); }
.cart-fulfillment__txt small { font-size: 0.6875rem; color: var(--text-tertiary); }

@media (max-width: 720px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  /* Foto ocupa as 2 linhas; info+remover em cima, quantidade+preço embaixo. */
  .cart-item { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "photo info remove" "photo qty price"; align-items: start; column-gap: 12px; row-gap: 12px; }
  .cart-item__photo { width: 72px; height: 72px; grid-row: 1 / span 2; align-self: center; }
  .cart-item__qty { align-self: center; }
  .cart-item__price { align-self: center; }
}

/* Checkout */
.checkout { padding-block: var(--space-3) var(--space-6); }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-4); align-items: flex-start; }
.checkout-section { background: white; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-3); margin-bottom: var(--space-3); }
.checkout-section__title { font-size: 0.6875rem; font-weight: 800; color: var(--darka-green); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
.checkout-section h2 { font-size: 1.0625rem; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; letter-spacing: -0.01em; }

/* Fluxo invertível: escolha entrega vs retirada no topo (antes do endereço). */
.checkout-fulfillment { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkout-fulfillment__opt { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast); }
.checkout-fulfillment__opt:hover { border-color: var(--darka-green-light); }
.checkout-fulfillment__opt:has(input:checked) { border-color: var(--darka-green); background: rgba(0, 102, 92, 0.04); }
.checkout-fulfillment__txt { display: flex; flex-direction: column; }
.checkout-fulfillment__txt strong { font-size: 0.9375rem; color: var(--text-primary); }
.checkout-fulfillment__txt small { font-size: 0.75rem; color: var(--text-tertiary); }
@media (max-width: 600px) { .checkout-fulfillment { grid-template-columns: 1fr; } }
.checkout-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-2); }
.checkout-field label { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.checkout-field input, .checkout-field select, .checkout-field textarea { padding: 10px 12px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); font-family: inherit; font-size: 0.875rem; background: white; transition: border-color var(--duration-fast); }
.checkout-field input:focus, .checkout-field select:focus, .checkout-field textarea:focus { border-color: var(--darka-green); outline: none; }
.checkout-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkout-row--three { grid-template-columns: 2fr 1fr 1fr; }

@media (max-width: 720px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-row, .checkout-row--three { grid-template-columns: 1fr; }
}

/* --- Componentes do checkout redesenhado ("checkout invertível", commit
   48fc075). O bloco acima cobria só o shell (.checkout-section/.checkout-row/
   .checkout-field/.checkout-fulfillment) e o layout antigo de campos; estas
   regras completam header numerado, grids de campos, endereços salvos, retirada,
   pagamento, resumo lateral e modal de login. Estilos de .checkout-card-block /
   .checkout-doc-toggle / .checkout-ie-* / .checkout-privacy-consent vivem no
   <style> scoped da própria checkout.astro — não duplicar aqui. --- */

.checkout-form { display: block; }

/* Header numerado da seção (1·2·3·4) — substitui o .checkout-section__title antigo */
.checkout-section__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.checkout-section__head h2 { margin-bottom: 0; }
.checkout-section__num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--darka-green); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 800; }
.checkout-section__body { display: flex; flex-direction: column; gap: 4px; }
.checkout-identity { font-size: 0.9375rem; color: var(--text-primary); }

/* Banner "Já tem conta? Entrar" — destaca o login pro visitante achar fácil. */
.checkout-login-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0, 102, 92, 0.06);
  border: 1px solid var(--darka-green-light, #4a9d92);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.checkout-login-prompt__txt { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.checkout-login-prompt__btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 480px) {
  .checkout-login-prompt { flex-direction: column; align-items: stretch; }
  .checkout-login-prompt__btn { text-align: center; }
}

/* Grids de campos: identificação (2 col) e endereço (3 col, com __span2). */
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.checkout-grid__street { grid-column: 1 / -1; }
.checkout-address-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.checkout-address-grid__span2 { grid-column: span 2; }

/* Labels/inputs dos grids do checkout (mesmo visual do .checkout-field). */
.checkout-grid label,
.checkout-address-grid label,
.checkout-note { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.checkout-grid label > span,
.checkout-address-grid label > span,
.checkout-note > span { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.checkout-grid input, .checkout-grid select,
.checkout-address-grid input, .checkout-address-grid select,
.checkout-note textarea { width: 100%; min-width: 0; padding: 10px 12px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); font-family: inherit; font-size: 0.875rem; background: white; transition: border-color var(--duration-fast); }
.checkout-grid input:focus, .checkout-grid select:focus,
.checkout-address-grid input:focus, .checkout-address-grid select:focus,
.checkout-note textarea:focus { border-color: var(--darka-green); outline: none; }
.checkout-note { margin-top: 12px; }
.checkout-cep-feedback { font-size: 0.75rem; color: var(--text-tertiary); min-height: 1em; }
.checkout-cep-feedback.is-error { color: var(--tintasdarka-red); }
.checkout-cep-feedback.is-ok { color: var(--tintasdarka-green-hover); }

/* Endereços salvos (cliente logado) */
.checkout-saved-addresses { margin-bottom: 16px; }
.checkout-saved-addresses__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.checkout-saved-address { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: white; cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast); }
.checkout-saved-address:hover { border-color: var(--darka-green-light); }
.checkout-saved-address.is-active { border-color: var(--darka-green); background: rgba(0, 102, 92, 0.04); }
.checkout-saved-address strong { font-size: 0.8125rem; color: var(--text-primary); }
.checkout-saved-address span { font-size: 0.75rem; color: var(--text-secondary); }
.checkout-saved-address--new { border-style: dashed; align-items: flex-start; justify-content: center; }

/* Picker de loja para retirada */
.checkout-pickup { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.checkout-pickup[hidden] { display: none; }
.checkout-pickup__label { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.checkout-pickup__select { padding: 10px 12px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); font-family: inherit; font-size: 0.875rem; background: white; }
.checkout-pickup__select:focus { border-color: var(--darka-green); outline: none; }
.checkout-pickup__info { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.45; margin: 0; }

/* Métodos de pagamento — colunas lado a lado (cards), com auto-fit pra quebrar
   em telas estreitas. Cada card empilha radio+título/descrição e marcas embaixo. */
.checkout-payments { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: stretch; }
.checkout-payment-option { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "radio title" "radio desc" "brands brands"; column-gap: 10px; row-gap: 4px; align-content: start; padding: 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast); }
.checkout-payment-option:hover { border-color: var(--darka-green-light); }
.checkout-payment-option:has(input:checked) { border-color: var(--darka-green); background: rgba(0, 102, 92, 0.04); }
.checkout-payment-option > input { grid-area: radio; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--darka-green); }
.checkout-payment-option > strong { grid-area: title; font-size: 0.875rem; color: var(--text-primary); }
.checkout-payment-option > span { grid-area: desc; font-size: 0.75rem; color: var(--text-secondary); }
.checkout-payment-option__brands { grid-area: brands; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.checkout-payment-option__brands img { height: 26px; width: auto; }
@media (max-width: 360px) { .checkout-payments { grid-template-columns: 1fr; } }

/* Consentimento, feedback, turnstile e botão de envio do form */
.checkout-feedback { font-size: 0.875rem; color: var(--text-secondary); text-align: center; margin: 12px 0 0; min-height: 1em; }
.checkout-feedback.is-error { color: var(--tintasdarka-red); }
.checkout-feedback.is-success { color: var(--tintasdarka-green-hover); }
.checkout-turnstile { display: flex; justify-content: center; margin-top: 12px; }
.checkout-submit { margin-top: 16px; }
.checkout-submit .btn { width: 100%; }

/* Sidebar de resumo do pedido */
.checkout-summary { background: white; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-3); position: sticky; top: 120px; display: flex; flex-direction: column; gap: 12px; }
.checkout-summary__items { display: flex; flex-direction: column; gap: 12px; max-height: 320px; overflow-y: auto; }
.checkout-summary__item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.checkout-summary__item > img,
.checkout-summary__item .product-card__placeholder { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--bg-soft); }
.checkout-summary__item > img { object-fit: contain; }
.checkout-summary__item .product-card__placeholder { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.checkout-summary__item .product-card__placeholder img { max-width: 100%; max-height: 100%; object-fit: contain; }
.checkout-summary__name { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.checkout-summary__item strong { font-size: 0.875rem; color: var(--darka-green); white-space: nowrap; }
.checkout-summary__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.875rem; color: var(--text-secondary); }
.checkout-summary__row--total { font-size: 1.125rem; font-weight: 800; color: var(--text-primary); }
.checkout-summary__row--total strong { color: var(--darka-green); }

/* Modal de login (<dialog>) — o card reusa .auth-layout mas está excluído do
   :not() lá em cima, então recebe fundo/padding próprios aqui.
   margin:auto é obrigatório: o reset global (* { margin: 0 }) anula o margin:auto
   do user-agent que centraliza <dialog> no showModal() — sem ele o modal cola à
   esquerda (mesmo caso do .map-modal). */
.checkout-login-modal { width: min(480px, 92vw); max-width: 480px; margin: auto; padding: 0; border: 0; border-radius: var(--radius-lg); background: transparent; overflow: visible; }
.checkout-login-modal::backdrop { background: rgba(0, 0, 0, 0.5); }
.checkout-login-modal__card { position: relative; max-height: 90vh; overflow-y: auto; padding: var(--space-4); background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.checkout-login-modal__close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; color: var(--text-tertiary); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; z-index: 2; }
.checkout-login-modal__close:hover { color: var(--text-primary); background: var(--bg-soft); }

@media (max-width: 720px) {
  /* Campos em coluna única no mobile: 2 colunas em ~390px ficam espremidas e os
     placeholders longos (CPF/CNPJ) forçavam overflow horizontal (ver min-width:0
     acima). Coluna única elimina os dois problemas. */
  .checkout-grid, .checkout-address-grid { grid-template-columns: 1fr; }
  .checkout-grid__street, .checkout-address-grid__span2 { grid-column: 1 / -1; }
  /* No mobile o resumo do pedido vem ANTES do formulário (cliente vê o que
     vai pagar antes de preencher os dados). No desktop segue como sidebar
     à direita via order natural do grid. */
  .checkout-summary { position: static; order: -1; }
  .checkout-summary__items { max-height: 220px; }
  /* Botão de finalizar fixo no rodapé (único botão do checkout no mobile).
     padding-bottom respeita o notch (safe-area). O .checkout-layout ganha
     espaço extra embaixo pra a barra não cobrir o último bloco. */
  .checkout-layout { padding-bottom: 84px; }
  .checkout-submit {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: white;
    border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    z-index: 50;
  }
}

/* Conta hub */
.account-hub { padding-block: var(--space-4) var(--space-6); }
.account-hub__welcome { background: linear-gradient(135deg, var(--darka-green) 0%, var(--darka-green-dark) 100%); color: white; border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); }
.account-hub__welcome h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: white; margin-bottom: 4px; letter-spacing: -0.01em; }
.account-hub__welcome p { color: rgba(255, 255, 255, 0.8); font-size: 0.9375rem; }
.account-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2); }
.account-card { display: flex; flex-direction: column; gap: 8px; padding: var(--space-3); background: white; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); transition: transform var(--duration-fast), box-shadow var(--duration-fast); text-decoration: none; }
.account-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--darka-green-light); }
.account-card__icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 102, 92, 0.08); color: var(--darka-green); display: inline-flex; align-items: center; justify-content: center; }
.account-card__icon [data-lucide] { width: 22px; height: 22px; }
.account-card__title { font-size: 1rem; font-weight: 800; color: var(--text-primary); }
.account-card__desc { font-size: 0.8125rem; color: var(--text-secondary); }

/* Auth */
.auth-form { display: flex; flex-direction: column; gap: 12px; }
/* Wrappers PF/PJ (div com vários campos) precisam do mesmo gap do form, senão
   os labels internos (Razão social/Nome fantasia/IE) colam no campo de cima.
   :not([hidden]) preserva o toggle (el.hidden = true → display:none). */
.auth-form div[data-doc-block-pf]:not([hidden]),
.auth-form div[data-doc-block-pj]:not([hidden]) { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.auth-form label span:first-child { font-weight: 700; }
.auth-form input { padding: 10px 12px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); font-family: inherit; font-size: 0.875rem; background: white; transition: border-color var(--duration-fast); text-transform: none; letter-spacing: normal; }
.auth-form input:focus { border-color: var(--darka-green); outline: none; }
.auth-form__check { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 0.8125rem !important; text-transform: none !important; letter-spacing: normal !important; color: var(--text-secondary); }
.auth-form__check input { width: 16px; height: 16px; accent-color: var(--darka-green); cursor: pointer; }
.auth-form__feedback { font-size: 0.8125rem; color: var(--text-secondary); }
.auth-form__feedback.is-error { color: var(--darka-terracotta); }
.auth-form__feedback.is-success { color: var(--discount-green); }
.auth-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 0.6875rem; font-weight: 800; color: #4D7A1F; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }  /* era --darka-yellow #7fb539 (2.45:1 no branco) → #4D7A1F ≈ 5.1:1 */
.auth-doc-toggle__opt input { display: none; }
.auth-doc-toggle__opt span { padding: 8px 16px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: all var(--duration-fast); display: inline-block; }
.auth-doc-toggle__opt input:checked ~ span { border-color: var(--darka-green); background: var(--darka-green); color: white; }

/* Tarja superior (faixa promocional sitewide, configurável em admin/loja).
   Mensagens sobrepostas; só a .is-active aparece (fade); JS alterna se 2+. */
.topbar { width: 100%; font-size: 0.8125rem; font-weight: 600; }
.topbar__track { position: relative; max-width: var(--container-max); margin-inline: auto; height: 34px; }
.topbar__msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 0 16px; opacity: 0; transition: opacity var(--duration-base) ease; pointer-events: none; }
.topbar__msg.is-active { opacity: 1; pointer-events: auto; }

/* Auth — layout/abas/social que o markup usava SEM CSS (página esticada +
   abas sem estilo). Container scopado p/ NÃO afetar o card do modal de login
   do checkout (.checkout-login-modal__card compartilha .auth-layout). */
.auth-layout:not(.checkout-login-modal__card) {
  max-width: 460px;
  margin-inline: auto;
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.auth-layout .listing-head { padding-block: 0 var(--space-3); }

/* CRÍTICO: o attr `hidden` precisa vencer .auth-form{display:flex} (e
   .auth-form label{display:flex}). Sem isto, os 3 painéis (login/criar conta/
   link) e os blocos PF/PJ aparecem TODOS empilhados e trocar de aba não esconde
   nada — era o que fazia parecer que "as abas não carregavam". */
.auth-form[hidden], .auth-form [hidden] { display: none !important; }

/* Abas Entrar / Criar conta / Link por email — controle segmentado.
   auth.js alterna .is-active + [hidden] nos [data-auth-panel]. */
.auth-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: var(--space-3); background: var(--bg-soft); border-radius: var(--radius-md); }
.auth-tab { flex: 1; padding: 9px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; font-family: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast); }
.auth-tab:hover { color: var(--text-primary); }
.auth-tab.is-active { background: var(--bg-card); color: var(--darka-green); box-shadow: var(--shadow-sm); }

/* Login social + divisor */
.auth-social { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-2); }
.auth-social__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: white; font-family: inherit; font-size: 0.875rem; font-weight: 700; color: var(--text-primary); cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast); }
.auth-social__btn:hover { border-color: var(--darka-green); background: var(--bg-soft); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: var(--space-2) 0 var(--space-3); color: var(--text-tertiary); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

/* Alertas, links inline e textos auxiliares */
.auth-alert { padding: 10px 14px; border-radius: var(--radius-md); background: var(--bg-soft); color: var(--text-secondary); font-size: 0.8125rem; margin-bottom: var(--space-2); }
.auth-alert--error { color: var(--darka-terracotta); border: 1px solid var(--darka-terracotta); }
.auth-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--darka-green); cursor: pointer; text-decoration: underline; }
.auth-link:hover { color: var(--darka-terracotta); }
.auth-form__hint { font-size: 0.8125rem; font-weight: 400; color: var(--text-secondary); text-transform: none; letter-spacing: normal; }
.auth-form__hint .auth-link { font-size: inherit; }
.auth-form__intro { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 4px; }

/* Erros por campo (auth.js injeta em runtime) + feedback (--error/--success
   são as strings que auth.js escreve; antes só existia .is-error/.is-success). */
.auth-form input.is-invalid { border-color: var(--darka-terracotta); }
.auth-form__field-error { margin: -6px 0 0; font-size: 0.75rem; font-weight: 600; color: var(--darka-terracotta); text-transform: none; letter-spacing: normal; }
.auth-form__feedback--error { color: var(--darka-terracotta); }
.auth-form__feedback--success { color: var(--discount-green); }

/* Gerador de senha inline (auth-password-gen.js → .auth-password-wrap) */
.auth-password-wrap { display: flex; gap: 8px; }
.auth-password-wrap input { flex: 1; min-width: 0; }
.auth-password-gen { flex-shrink: 0; padding: 0 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-soft); font-family: inherit; font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; white-space: nowrap; transition: border-color var(--duration-fast), color var(--duration-fast); }
.auth-password-gen:hover { border-color: var(--darka-green); color: var(--darka-green); }

/* PF/PJ toggle (fieldset) + Inscrição estadual com "Isento" inline */
.auth-doc-toggle { display: flex; gap: 12px; border: 0; padding: 0; margin: 0 0 4px; }
.auth-ie-cell { display: flex; gap: 12px; align-items: flex-end; }
.auth-ie-cell > label:first-child { flex: 1; }
.auth-ie-exempt-inline { flex-direction: row !important; align-items: center; gap: 6px !important; padding-bottom: 10px; white-space: nowrap; text-transform: none !important; letter-spacing: normal !important; }
.auth-ie-exempt-inline input { width: 16px; height: 16px; accent-color: var(--darka-green); cursor: pointer; }

/* Conta logada — banner "confirme seu email" + variante "Sair" do account-card */
.account-banner { display: flex; gap: 12px; align-items: flex-start; padding: var(--space-3); margin-bottom: var(--space-4); background: var(--bg-soft); border: 1px solid var(--border-subtle); border-left: 3px solid var(--darka-yellow); border-radius: var(--radius-md); }
.account-banner [data-lucide] { width: 22px; height: 22px; color: var(--darka-yellow); flex-shrink: 0; }
.account-banner strong { display: block; margin-bottom: 2px; color: var(--text-primary); }
.account-banner p { margin-bottom: 8px; font-size: 0.8125rem; color: var(--text-secondary); }
.account-banner__feedback { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--text-secondary); }
.account-card--danger { font: inherit; text-align: left; cursor: pointer; }
.account-card--danger .account-card__icon { background: var(--bg-soft); color: var(--darka-terracotta); }
.account-card--danger:hover { border-color: var(--darka-terracotta); }

/* Pedido detalhe */
.order-detail { padding-block: var(--space-3) var(--space-6); }
.order-detail__head { background: linear-gradient(135deg, var(--darka-green) 0%, var(--darka-green-dark) 100%); color: white; border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); }
.order-detail__head h1 { font-size: clamp(1.5rem, 3vw, 1.875rem); color: white; font-weight: 800; }
.order-detail__head__meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.8); }
.order-detail__head__meta strong { color: white; font-weight: 700; }
.order-timeline { list-style: none; padding-left: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 8px; background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); margin-top: var(--space-2); }
.order-timeline__step { padding: 8px; text-align: center; font-size: 0.6875rem; font-weight: 700; color: rgba(255, 255, 255, 0.5); border-radius: var(--radius-sm); }
.order-timeline__step.is-done { background: var(--darka-yellow); color: var(--darka-green-dark); }
.order-timeline__step.is-current { background: white; color: var(--darka-green-dark); }

@media (max-width: 720px) {
  .order-timeline { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; }
}

/* Subtítulo do cabeçalho (a página usa .order-detail__meta) */
.order-detail__meta { margin-top: 6px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.85); }
.order-detail__meta strong { color: white; font-weight: 700; }

/* Selo de status (dentro do cabeçalho verde) */
.order-status {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: white;
}
.order-status--paid,
.order-status--delivered { background: var(--darka-yellow); border-color: transparent; color: var(--darka-green-dark); }
.order-status--preparing,
.order-status--shipped { background: rgba(255, 255, 255, 0.28); border-color: transparent; }
.order-status--cancelled,
.order-status--refunded { background: rgba(0, 0, 0, 0.22); border-color: transparent; }

/* Grid itens / resumo / endereço — cards brancos no padrão do carrinho */
.order-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 32%, 340px);
  grid-template-areas: "items summary" "address summary";
  gap: var(--space-3);
  align-items: start;
  margin-top: var(--space-3);
}
.order-detail__items   { grid-area: items; }
.order-detail__address { grid-area: address; }
.order-detail__summary { grid-area: summary; position: sticky; top: 120px; display: flex; flex-direction: column; gap: 10px; }

.order-detail__items,
.order-detail__summary,
.order-detail__address {
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.order-detail__items > h2,
.order-detail__summary > h2,
.order-detail__address > h2 { margin-bottom: var(--space-2); color: var(--darka-green); }

.order-detail__items ul { list-style: none; margin: 0; padding: 0; }
.order-detail__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border-subtle);
}
.order-detail__item:first-child { border-top: 0; padding-top: 0; }
.order-detail__item > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.order-detail__item > div > strong { color: var(--text-primary); font-weight: 700; line-height: 1.3; }
.order-detail__item > strong { color: var(--darka-green); font-weight: 800; white-space: nowrap; }

.order-detail__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.875rem; color: var(--text-secondary); }
.order-detail__row strong { color: var(--text-primary); font-weight: 700; }
.order-detail__row--total { padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: 1.125rem; font-weight: 800; color: var(--text-primary); }
.order-detail__row--total strong { color: var(--darka-green); }

.order-detail__pay { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.order-detail__pay > strong { color: var(--text-primary); font-weight: 700; }

.order-detail__address p { font-size: 0.9375rem; line-height: 1.6; color: var(--text-secondary); }
.order-detail__address strong { color: var(--text-primary); }

.order-detail__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-4); }

/* Banner "pagamento aprovado" */
.order-paid-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--darka-green);
  border-radius: var(--radius-md);
}
.order-paid-banner [data-lucide] { width: 28px; height: 28px; color: var(--darka-green); flex-shrink: 0; }
.order-paid-banner strong { display: block; color: var(--text-primary); margin-bottom: 2px; }
.order-paid-banner p { font-size: 0.875rem; color: var(--text-secondary); }

/* CTA de avaliação (pedido entregue) */
.order-review-cta {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.order-review-cta h2 { color: var(--darka-green); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.order-review-cta h2 i { width: 20px; height: 20px; }
.order-review-cta__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.order-review-cta__item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-soft); border-radius: var(--radius-md); }
.order-review-cta__name { font-weight: 700; color: var(--text-primary); font-size: 0.9375rem; }

@media (max-width: 720px) {
  .order-detail__grid { grid-template-columns: 1fr; grid-template-areas: "items" "summary" "address"; }
  .order-detail__summary { position: static; }
}

/* Páginas estáticas / FAQ / 404 */
.static-page { padding-block: var(--space-4) var(--space-6); }
.static-page h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: var(--text-primary); margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.static-page__body { max-width: 70ch; font-size: 1rem; line-height: 1.7; color: var(--text-secondary); }
.static-page__body p { margin-bottom: var(--space-2); }
.static-page__body h2 { font-size: 1.5rem; font-weight: 800; color: var(--darka-green); margin: var(--space-3) 0 var(--space-1); }
.static-page__body h3 { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); margin: var(--space-2) 0 8px; }
.static-page__body a { color: var(--darka-terracotta); text-decoration: underline; }
.static-page__body ul, .static-page__body ol { padding-left: 1.25rem; margin-bottom: var(--space-2); }

.faq-list { display: flex; flex-direction: column; gap: 8px; max-width: 880px; }
.faq-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: white; overflow: hidden; }
.faq-item__summary { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); cursor: pointer; font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); list-style: none; }
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary::after { content: '+'; font-size: 1.5rem; font-weight: 300; color: var(--darka-green); transition: transform var(--duration-fast); line-height: 1; }
.faq-item[open] .faq-item__summary::after { transform: rotate(45deg); }
.faq-item__body { padding: 0 var(--space-3) var(--space-2); font-size: 0.9375rem; line-height: 1.6; color: var(--text-secondary); }

/* 404 */
.not-found { padding-block: var(--space-6); text-align: center; }
.not-found__code { font-size: clamp(4rem, 12vw, 8rem); font-weight: 900; color: var(--darka-green); line-height: 1; letter-spacing: -0.03em; }
.not-found h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--text-primary); margin: var(--space-2) 0 var(--space-1); }
.not-found p { color: var(--text-secondary); max-width: 45ch; margin: 0 auto var(--space-3); font-size: 1rem; }

/* Pagination */
.pagination { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; max-width: 480px; margin: var(--space-3) auto 0; padding-block: var(--space-3); }
.pagination__current { font-weight: 700; font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; }
.pagination__link { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); transition: all var(--duration-fast); }
.pagination__link:hover { border-color: var(--darka-green); color: var(--darka-green); }
.pagination__link.is-current { background: var(--darka-green); border-color: var(--darka-green); color: white; }
.pagination__link.is-disabled { opacity: 0.4; pointer-events: none; }

/* Breadcrumb (reusable for listings) */
.breadcrumb { padding-block: var(--space-2); }
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-secondary); }
.breadcrumb__list li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb__list a { color: var(--text-secondary); transition: color var(--duration-fast); }
.breadcrumb__list a:hover { color: var(--darka-terracotta); text-decoration: underline; }
.breadcrumb__sep { opacity: 0.5; color: var(--text-tertiary); font-size: 1rem; line-height: 1; user-select: none; }
.breadcrumb__list li[aria-current="page"] { color: var(--text-secondary); font-weight: 600; }