/* =====================================================================
   Veraneo Novo — Stylesheet principal
   Direção: Editorial Modernism Brasileiro
   Cream surface, navy ink, orange punctuation, hairline rules.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root {
  /* Color */
  --color-ink:        #1B1C39;
  --color-ink-soft:   #2D2E5C;
  --color-sun:        #F39200;
  --color-sun-soft:   #F8B864;
  --color-sand:       #FDEFD9;
  --color-stone:      #F4F3F3;
  --color-paper:      #FFFFFF;
  --color-bone:       #FAF8F4;
  --color-coal:       #0A0A0F;
  --color-gray-100:   #ECECEC;
  --color-gray-300:   #C9C7C2;
  --color-gray-500:   #767676;
  --color-gray-700:   #3D3D44;

  /* Type */
  --font-display: "Museo", "Bodoni Moda", Georgia, serif;
  --font-sans:    "Museo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale (clamp para fluidez) */
  --fs-micro:  0.6875rem;       /* 11px */
  --fs-eyebrow: 0.75rem;        /* 12px */
  --fs-small:  0.875rem;        /* 14px */
  --fs-body:   1rem;            /* 16px */
  --fs-lead:   clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  --fs-h6:     clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --fs-h5:     clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --fs-h4:     clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-h3:     clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  --fs-h2:     clamp(2.75rem, 1.8rem + 3.6vw, 4.75rem);
  --fs-h1:     clamp(3.25rem, 2rem + 5vw, 6.5rem);

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-uber:   0.18em;

  /* Spacing scale (8px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* Layout */
  --container-max:    1320px;
  --container-pad:    24px;
  --container-pad-lg: 48px;
  --grid-gap:         24px;
  --grid-gap-lg:      32px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Border */
  --hairline:   1px solid var(--color-ink);
  --hairline-soft: 1px solid rgba(27, 28, 57, 0.12);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --ease-stand: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   620ms;

  /* Z */
  --z-header:  100;
  --z-menu:    200;
  --z-modal:   300;
}

/* ---------------------------------------------------------------------
   2. FONTS
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Museo";
  src: url("../fonts/Museo-300.woff2") format("woff2"),
       url("../fonts/Museo-300.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo";
  src: url("../fonts/Museo-500.woff2") format("woff2"),
       url("../fonts/Museo-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo";
  src: url("../fonts/Museo-700.woff2") format("woff2"),
       url("../fonts/Museo-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   3. RESET + BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-paper);
  overflow-x: hidden;
  min-height: 100vh;
}

img, picture, svg, video {
  max-width: 100%;
  display: block;
  height: auto;
}

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

a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-sun); }

ul, ol { list-style: none; }

input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--color-sun); color: var(--color-paper); }

/* ---------------------------------------------------------------------
   4. TYPOGRAPHY
   --------------------------------------------------------------------- */
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px 7px 30px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  line-height: 1;
}
.t-eyebrow--sun { color: var(--color-sun); }
/* Bolinha sólida — ponto fixo */
.t-eyebrow::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--color-sun);
}
/* Ripple — anel expandindo e fadeando */
.t-eyebrow::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--color-sun);
  animation: eyebrow-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}
@keyframes eyebrow-ping {
  0%   { transform: scale(1);   opacity: 0.55; }
  80%, 100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .t-eyebrow::after { animation: none; opacity: 0; }
}

/* Spacing padrão entre eyebrow e o heading que vem logo depois — aplica em
   todo o site sempre que o pattern <span class="t-eyebrow">…</span> +
   <h1/h2/h3/h4> existir como irmãos diretos. */
.t-eyebrow + h1,
.t-eyebrow + h2,
.t-eyebrow + h3,
.t-eyebrow + h4 {
  margin-top: var(--space-4);
}
.t-lead { font-size: var(--fs-lead); line-height: 1.55; font-weight: 300; }
.t-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
h1 { font-size: var(--fs-h1); line-height: 0.92; }
h2 { font-size: clamp(3rem, 2rem + 2.5vw, 4rem); line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: 1.1; }
h5 { font-size: var(--fs-h5); line-height: 1.2; }
h6 { font-size: var(--fs-h6); line-height: 1.3; }

p { max-width: 64ch; }
p + p { margin-top: 1em; }

/* Itálico-feel: usar peso 300 + tracking apertado em algumas displays */
.t-display--soft { font-weight: 300; letter-spacing: -0.025em; }

/* ---------------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (min-width: 1024px) {
  .container { padding-inline: var(--container-pad-lg); }
}

.container--bleed { max-width: none; padding-inline: 0; }

.section { padding-block: var(--space-9); position: relative; }
.section--lg { padding-block: var(--space-10); }
.section--sm { padding-block: var(--space-7); }

.surface-cream { background: var(--color-sand); }
.surface-stone { background: var(--color-stone); }
.surface-ink   { background: var(--color-ink); color: var(--color-sand); }
.surface-paper { background: var(--color-paper); }

.surface-ink h1, .surface-ink h2, .surface-ink h3, .surface-ink h4, .surface-ink h5, .surface-ink h6 { color: var(--color-sand); }
.surface-ink .t-eyebrow { color: var(--color-sun); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}
@media (min-width: 1024px) {
  .grid { gap: var(--grid-gap-lg); }
}

.col-12  { grid-column: span 12; }
.col-md-6 { grid-column: span 12; }
.col-md-7 { grid-column: span 12; }
.col-md-5 { grid-column: span 12; }
.col-md-8 { grid-column: span 12; }
.col-md-4 { grid-column: span 12; }

@media (min-width: 768px) {
  .col-md-6 { grid-column: span 6; }
  .col-md-7 { grid-column: span 7; }
  .col-md-5 { grid-column: span 5; }
  .col-md-8 { grid-column: span 8; }
  .col-md-4 { grid-column: span 4; }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* ---------------------------------------------------------------------
   6. BUTTONS
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-sand);
  border-radius: var(--radius-pill);
  transition: all var(--dur-base) var(--ease-out);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "→";
  display: inline-block;
  font-size: 1.05em;
  transform: translateX(0);
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover { background: var(--color-sun); border-color: var(--color-sun); color: var(--color-paper); }
.btn:hover::after { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
}
.btn--ghost:hover { background: var(--color-ink); color: var(--color-sand); border-color: var(--color-ink); }

.btn--sun {
  background: var(--color-sun);
  border-color: var(--color-sun);
  color: var(--color-paper);
}
.btn--sun:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-sand); }

.btn--big { padding: 20px 40px; font-size: var(--fs-body); }

.btn--bare {
  border: 0;
  background: transparent;
  padding: 8px 0;
  color: var(--color-ink);
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}
.btn--bare:hover { color: var(--color-sun); background: transparent; }

/* Link "ver mais" estilo editorial */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 4px;
}
.link-arrow::after {
  content: "→";
  transition: transform var(--dur-base) var(--ease-out);
}
.link-arrow:hover { color: var(--color-sun); border-color: var(--color-sun); }
.link-arrow:hover::after { transform: translateX(6px); }

/* ---------------------------------------------------------------------
   7. FORMS
   --------------------------------------------------------------------- */
.field {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--color-gray-300);
  background: var(--color-paper);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  font-weight: 300;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field:focus { outline: 0; border-color: var(--color-ink); background: var(--color-bone); }

/* ---------------------------------------------------------------------
   8. SITE HEADER
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: var(--hairline-soft);
  transition: background var(--dur-base) var(--ease-out);
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  height: 40px;
}
.site-header__logo img { height: 100%; width: auto; }

.site-header__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .site-header__nav { display: flex; }
}
.site-header__nav-item {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  position: relative;
  padding-block: 8px;
}
.site-header__nav-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--color-sun);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.site-header__nav-item:hover::after { transform: scaleX(1); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.site-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  position: relative;
  transition: all var(--dur-fast) var(--ease-out);
}
.site-header__action:hover { border-color: var(--color-ink); background: var(--color-paper); color: var(--color-ink); }
.site-header__action svg { width: 18px; height: 18px; }

/* Mobile: esconde busca, favoritos e conta — sobra só carrinho + burger */
@media (max-width: 1023px) {
  .site-header__action--desktop { display: none; }
}

.site-header__action-count {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-sun);
  color: var(--color-paper);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.site-header__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-sand);
}
@media (min-width: 1024px) {
  .site-header__burger { display: none; }
}
.site-header__burger span {
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  position: relative;
}
.site-header__burger span::before,
.site-header__burger span::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: currentColor;
}
.site-header__burger span::before { top: -5px; }
.site-header__burger span::after  { top: 5px; }

/* Mobile: nav some, vira 2 cols (logo flex / actions direita) +
   header mais compacto (logo + burger menores, carrinho mantém o tamanho).
   IMPORTANTE: este bloco vem DEPOIS das regras desktop pra ganhar
   o cascade (mesma especificidade, regra posterior vence). */
@media (max-width: 1023px) {
  .site-header__inner {
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    padding-block: var(--space-3);
  }
  .site-header__logo { height: 32px; }
  .site-header__burger { width: 40px; height: 40px; }
  .site-header__burger span { width: 15px; }
  .site-header__burger span::before { top: -5px; }
  .site-header__burger span::after  { top: 5px; }
}

/* Search overlay (desktop + mobile) */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
  display: grid;
  grid-template-rows: auto 1fr;
}
.search-overlay[aria-hidden="false"] { pointer-events: auto; }

.search-overlay__panel {
  background: var(--color-bone);
  border-bottom: var(--hairline);
  padding: var(--space-7) 0 var(--space-9);
  transform: translateY(-100%);
  transition: transform 480ms var(--ease-out);
  position: relative;
}
.search-overlay[aria-hidden="false"] .search-overlay__panel { transform: translateY(0); }

.search-overlay__backdrop {
  background: rgba(27, 28, 57, 0);
  border: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  transition: background var(--dur-base) var(--ease-out);
}
.search-overlay[aria-hidden="false"] .search-overlay__backdrop { background: rgba(27, 28, 57, 0.4); }

.search-overlay__close {
  position: absolute;
  top: var(--space-5);
  right: var(--container-pad);
  width: 44px; height: 44px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
@media (min-width: 1024px) { .search-overlay__close { right: var(--container-pad-lg); } }
.search-overlay__close:hover { background: var(--color-ink); color: var(--color-sand); }

.search-overlay__eyebrow {
  margin-bottom: var(--space-5);
}

.search-overlay__form {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: var(--space-3);
}
.search-overlay__input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-ink);
  outline: 0;
  padding: 8px 0;
  min-width: 0;
}
.search-overlay__input::placeholder { color: var(--color-gray-300); font-weight: 700; }
.search-overlay__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-overlay__submit {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 24px;
  background: var(--color-ink);
  color: var(--color-sand);
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.search-overlay__submit:hover { background: var(--color-sun); color: var(--color-paper); }
.search-overlay__submit svg { width: 16px; height: 16px; }
.search-overlay__submit span { display: none; }
@media (min-width: 640px) { .search-overlay__submit span { display: inline; } }

.search-overlay__hints {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
}
.search-overlay__hints-title {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-right: var(--space-2);
}
.search-overlay__hint {
  padding: 8px 14px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  transition: all var(--dur-fast) var(--ease-out);
}
.search-overlay__hint:hover {
  background: var(--color-ink);
  color: var(--color-sand);
  border-color: var(--color-ink);
}

/* Promo bar acima do header */
.site-promo {
  position: relative;   /* âncora das setas */
  background: var(--color-ink);
  color: var(--color-sand);
  text-align: center;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  /* O respiro horizontal vem do .container interno — é ele que alinha o
     conteúdo da barra com o resto do site. */
  padding: 10px 0;
  font-weight: 500;
}
.site-promo strong { color: var(--color-sun); }
/* Rodízio dos avisos. Com effect: fade os slides ficam empilhados, então a
   altura da barra é a do texto mais alto e não pula a cada troca — o que
   deslocaria a página inteira, já que a barra fica acima do header. */
.site-promo__inner { position: relative; }   /* âncora das setas */

/* O padding lateral reserva a faixa das setas: sem ele, um aviso longo
   correria por baixo dos chevrons em tela estreita. */
.site-promo .swiper { width: 100%; padding: 0 30px; }
.site-promo .swiper-slide { text-align: center; }

.site-promo__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--color-sand);
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.site-promo__nav:hover { opacity: 1; color: var(--color-sun); }
.site-promo__nav:focus-visible {
  opacity: 1;
  outline: 2px solid var(--color-sun);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.site-promo__nav svg { width: 14px; height: 14px; }

/* Alinhadas com a borda de conteúdo do .container — o mesmo eixo do logo e
   do menu logo abaixo. O deslocamento acompanha o padding do container, que
   muda no breakpoint de 1024px. */
.site-promo__nav--prev { left: var(--container-pad); }
.site-promo__nav--next { right: var(--container-pad); }
@media (min-width: 1024px) {
  .site-promo__nav--prev { left: var(--container-pad-lg); }
  .site-promo__nav--next { right: var(--container-pad-lg); }
}

/* ---------------------------------------------------------------------
   9. OFF-CANVAS MENU (mobile)
   --------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  background: var(--color-ink);
  color: var(--color-sand);
  z-index: var(--z-menu);
  padding: var(--space-7) var(--container-pad);
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.menu.is-open { transform: translateY(0); }
.menu__close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.menu__close svg { width: 14px; height: 14px; }
.menu__close svg path { fill: var(--color-sand); }

/* Busca dentro do menu — input-like button que abre o search overlay */
.menu__search {
  margin-top: var(--space-7);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: rgba(253, 239, 217, 0.08);
  border: 1px solid rgba(253, 239, 217, 0.18);
  border-radius: var(--radius-pill);
  color: rgba(253, 239, 217, 0.55);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: all var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.menu__search:hover {
  background: rgba(253, 239, 217, 0.12);
  border-color: var(--color-sun);
  color: var(--color-sand);
}
.menu__search svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-sun);
}

.menu__nav {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.menu__nav a {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1;
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
}
.menu__nav a::after {
  content: "↗";
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 8px;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.menu__nav a:hover::after { opacity: 1; }

.menu__contact {
  margin-top: auto;
  padding-top: var(--space-7);
  border-top: 1px solid rgba(253, 239, 217, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: var(--fs-small);
}
.menu__contact a { display: inline-flex; align-items: center; gap: var(--space-2); }
/* WhatsApp + email icons (FA brands têm viewBoxes não-quadrados) */
.menu__contact a svg {
  height: 16px;
  width: auto;
  max-width: 18px;
  color: var(--color-sun);
  flex-shrink: 0;
}
.menu__contact a svg path { fill: currentColor; }

.menu__social {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-3);
}
.menu__social a { width: 36px; height: 36px; border: 1px solid rgba(253, 239, 217, 0.3); border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; color: var(--color-sand); transition: all var(--dur-fast) var(--ease-out); }
.menu__social a:hover { background: var(--color-sun); border-color: var(--color-sun); color: var(--color-paper); }
/* FA brands têm viewBoxes diferentes — height fixa, width auto */
.menu__social svg {
  height: 14px;
  width: auto;
  max-width: 16px;
  display: block;
  color: inherit;
}
.menu__social svg path { fill: currentColor; }

/* ---------------------------------------------------------------------
   10. SITE FOOTER
   --------------------------------------------------------------------- */
.site-footer {
  background: var(--color-ink);
  color: var(--color-sand);
  padding-top: var(--space-9);
  position: relative;
  overflow: hidden;
}
.site-footer__inner { position: relative; z-index: 1; }
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(253, 239, 217, 0.15);
}
@media (min-width: 768px) {
  .site-footer__top { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.site-footer__brand img { height: 44px; width: auto; }
.site-footer__tag {
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  font-weight: 300;
  max-width: 28ch;
  line-height: 1.4;
  font-family: var(--font-display);
}

.site-footer__col-title {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  color: var(--color-sun);
  margin-bottom: var(--space-5);
}
.site-footer__nav { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__nav a { font-size: var(--fs-small); opacity: 0.85; transition: opacity var(--dur-fast); }
.site-footer__nav a:hover { opacity: 1; color: var(--color-sun); }

.site-footer__contact { font-size: var(--fs-small); display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__contact a { display: inline-flex; align-items: center; gap: var(--space-2); }

.site-footer__social {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-3);
}
.site-footer__social a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(253, 239, 217, 0.3);
}
.site-footer__social a:hover { background: var(--color-sun); border-color: var(--color-sun); }
/* SVGs FontAwesome têm viewBoxes diferentes (não-quadrados).
   Fixamos a height e deixamos width auto pra manter aspect ratio. */
.site-footer__social svg {
  height: 14px;
  width: auto;
  max-width: 16px;
  display: block;
  color: var(--color-sand);
}
.site-footer__social svg path { fill: currentColor; }
.site-footer__social a:hover svg { color: var(--color-paper); }

.site-footer__bottom {
  padding-block: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.site-footer__bottom img {
  height: 12px;
  width: auto;
}

/* WhatsApp flutuante (canto inferior direito, global) */
.whatsapp-float {
  /* Distância do rodapé como variável: a barra de compra flutuante soma a
     própria altura a este valor pra não colidir (ver seção 37). */
  --wf-bottom: 24px;
  position: fixed;
  right: 24px;
  bottom: var(--wf-bottom);
  z-index: 200;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 0;
  /* rgba de --color-sun (#F39200) — o alpha é o que dá o que borrar ao
     backdrop-filter; opaco demais e o blur não apareceria. */
  background: rgba(243, 146, 0, 0.65);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  color: var(--color-paper);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
/* rgba de --color-ink (#1B1C39), o azul da paleta. Mantém o alpha pra que o
   blur continue valendo no hover — sólido aqui quebraria o efeito de vidro. */
.whatsapp-float:hover {
  transform: translateY(-2px);
  background: rgba(27, 28, 57, 0.75);
  color: var(--color-paper);
}
.whatsapp-float svg { display: block; width: 26px; height: 26px; }
@media (max-width: 600px) {
  .whatsapp-float {
    --wf-bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
  }
  .whatsapp-float svg { width: 22px; height: 22px; }
}

/* ---------------------------------------------------------------------
   11. HOME — HERO
   --------------------------------------------------------------------- */
.hero {
  padding-block: var(--space-8) var(--space-9);
  position: relative;
  overflow: hidden;
  background: var(--color-bone);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-9);
    min-height: 80vh;
  }
}

.hero__copy { position: relative; z-index: 2; }
.hero__copy .t-eyebrow { margin-bottom: var(--space-5); }

.hero__title {
  font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-5);
  text-wrap: balance;
  max-width: 14ch;
}
.hero__title em {
  font-style: normal;
  color: var(--color-sun);
  position: relative;
  white-space: nowrap;
}
.hero__title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4%;
  height: 3px;
  background: var(--color-sun);
  opacity: 0.25;
}
.hero__subtitle {
  font-size: var(--fs-lead);
  max-width: 44ch;
  margin-bottom: var(--space-6);
  color: var(--color-gray-700);
  line-height: 1.5;
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-bottom: var(--space-7);
}

/* Coluna media — wrapper pra acomodar o card + badges flutuantes */
.hero__media-wrap {
  position: relative;
  z-index: 1;
}

.hero__media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-stone);
  margin: 0;
  box-shadow:
    0 30px 60px -20px rgba(27, 28, 57, 0.18),
    0 18px 36px -18px rgba(27, 28, 57, 0.12);
}
@media (min-width: 1024px) { .hero__media { aspect-ratio: 5/6; } }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 1.6s var(--ease-out);
}
.hero__media:hover img { transform: scale(1.04); }

/* Badge "live" — top-left, sobreposto */
.hero__badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: var(--color-sand);
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0 8px 24px -8px rgba(27, 28, 57, 0.25);
  z-index: 2;
}
.hero__badge--live {
  top: 24px;
  left: 24px;
}
.hero__badge-pulse {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-sun);
  flex-shrink: 0;
}
.hero__badge-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-sun);
  animation: hero-badge-ping 2.2s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes hero-badge-ping {
  0%   { transform: scale(1); opacity: 0.6; }
  80%, 100% { transform: scale(2.6); opacity: 0; }
}

/* Card flutuante de produto — bottom-right (card todo é <a>) */
.hero__product-card {
  position: absolute;
  bottom: -28px;
  right: -16px;
  background: var(--color-paper);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  min-width: 240px;
  box-shadow:
    0 24px 48px -16px rgba(27, 28, 57, 0.22),
    0 8px 24px -8px rgba(27, 28, 57, 0.12);
  display: flex; flex-direction: column; gap: 6px;
  z-index: 2;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.hero__product-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 28px 56px -16px rgba(27, 28, 57, 0.28),
    0 10px 28px -8px rgba(27, 28, 57, 0.16);
}
@media (min-width: 1024px) {
  .hero__product-card { right: -32px; bottom: -32px; }
}
.hero__product-card-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-sun);
  font-weight: 700;
}
.hero__product-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  line-height: 1.15;
}
.hero__product-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-gray-300);
}
.hero__product-card-price {
  font-size: 12px;
  color: var(--color-ink-soft);
}
.hero__product-card-price strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
/* wc_price() embrulha em spans (amount, bdi, currencySymbol) — herda do strong */
.hero__product-card-price strong .amount,
.hero__product-card-price strong bdi,
.hero__product-card-price strong .woocommerce-Price-currencySymbol {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.hero__product-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-sand);
  flex-shrink: 0;
  transition: all var(--dur-base) var(--ease-out);
}
.hero__product-card:hover .hero__product-card-link {
  background: var(--color-sun);
  transform: rotate(-45deg);
}

/* Mobile: simplifica o overflow */
@media (max-width: 1023px) {
  .hero__product-card { right: 12px; bottom: -24px; min-width: 220px; }
}

/* Hero Slider — quando há slides ACF, vira swiper */
.hero-slider { position: relative; }
.hero-slider .swiper-slide { display: grid; }
.hero-slider .hero__inner { width: 100%; }

/* Marquee inferior do hero (selos / vantagens) */
.marquee {
  background: var(--color-ink);
  color: var(--color-sand);
  padding: var(--space-4) 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(253, 239, 217, 0.1);
}
.marquee__track {
  display: flex;
  gap: var(--space-7);
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.marquee__item span {
  width: 6px; height: 6px; background: var(--color-sun); border-radius: 50%;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.6); }
}

/* ---------------------------------------------------------------------
   12. HOME — MANIFESTO
   --------------------------------------------------------------------- */
.manifesto { padding-block: var(--space-9); position: relative; }
.manifesto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: end;
}
@media (min-width: 1024px) { .manifesto__grid { grid-template-columns: auto 1fr; gap: var(--space-9); } }

.manifesto__index {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 700;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-ink);
  letter-spacing: -0.04em;
}

.manifesto__copy { max-width: 56ch; }
.manifesto__title {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}
.manifesto__title em { font-style: normal; color: var(--color-sun); }
.manifesto__lead {
  font-size: var(--fs-lead);
  color: var(--color-gray-700);
  line-height: 1.55;
}

/* ── Manifesto v2 (quote editorial + 3 pilares) ───────────────────────── */
.manifesto--v2 {
  padding-block: var(--space-9);
  background: var(--color-paper);
}

.manifesto__head {
  max-width: 80ch;
  margin: 0 auto var(--space-9);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-5);
}

/* Quote editorial */
.manifesto__quote {
  margin: 0;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  font-weight: 500;
  text-wrap: balance;
}
.manifesto__quote p { margin: 0; position: relative; }
.manifesto__quote em {
  font-style: normal;
  color: var(--color-sun);
}
.manifesto__quote-mark {
  font-family: var(--font-display);
  font-size: 1.6em;
  line-height: 0;
  color: var(--color-sun);
  font-weight: 700;
  vertical-align: -0.25em;
  margin-right: 0.05em;
  display: inline-block;
}
.manifesto__quote-mark--close {
  margin-right: 0;
  margin-left: 0.05em;
}
.manifesto__quote-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: var(--space-5);
  font-style: normal;
}
.manifesto__quote-line {
  display: inline-block;
  width: 40px; height: 1px;
  background: var(--color-ink-soft);
}
.manifesto__quote-footer cite {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
  color: var(--color-ink-soft);
}

/* Pilares — 3 cols horizontais */
.manifesto__pillars {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  border-top: 1px solid var(--color-gray-300);
  padding-top: var(--space-7);
}
@media (min-width: 768px) {
  .manifesto__pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
}

.manifesto__pillar {
  display: flex; flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-3);
  position: relative;
}
@media (min-width: 768px) {
  .manifesto__pillar {
    padding-inline: var(--space-5);
    border-right: 1px solid var(--color-gray-300);
  }
  .manifesto__pillar:first-child { padding-left: 0; }
  .manifesto__pillar:last-child  { padding-right: 0; border-right: 0; }
}

.manifesto__pillar-icon {
  color: var(--color-sun);
  display: inline-flex;
  align-items: center;
}
.manifesto__pillar-icon svg {
  width: 48px;
  height: 48px;
  display: block;
}
.manifesto__pillar-body {
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.manifesto__pillar-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  line-height: 1.1;
  margin: 0;
}
.manifesto__pillar-text {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-gray-700);
  margin: 0;
}

/* ---------------------------------------------------------------------
   13. HOME — CATEGORIAS
   --------------------------------------------------------------------- */
.collection { padding-block: var(--space-9); background: var(--color-sand); }
.collection__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
.collection__title {
  font-size: clamp(3rem, 2rem + 2.5vw, 4rem);
  line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem);
  letter-spacing: -0.025em;
  max-width: 22ch;
  text-wrap: balance;
}
@media (min-width: 1024px) { .collection__title { max-width: 820px; } }

.collection__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 768px) { .collection__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
@media (min-width: 1280px) { .collection__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }

.cat-card {
  position: relative;
  display: block;
  background: var(--color-paper);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3/4;
  transition: transform var(--dur-base) var(--ease-out);
}
.cat-card:hover { transform: translateY(-4px); }
.cat-card__media {
  position: absolute;
  inset: 0;
  background: var(--color-stone);
  overflow: hidden;
}
.cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.cat-card:hover .cat-card__media img { transform: scale(1.06); }

/* Overlay gradient pra garantir leitura do label inferior — só nos cards com foto,
   não no feature card (que tem decoração própria via ::after). */
.cat-card__media:not(.cat-card__media--feature)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, transparent 0%, rgba(27, 28, 57, 0.55) 100%);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.cat-card__label {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-paper);
  z-index: 1;
}
.cat-card__label::after {
  content: "→";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--color-paper);
  border-radius: var(--radius-pill);
  font-size: 14px;
  color: var(--color-paper);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all var(--dur-base) var(--ease-out);
}
.cat-card:hover .cat-card__label::after {
  background: var(--color-sun);
  border-color: var(--color-sun);
  color: var(--color-paper);
  transform: translateX(4px);
}

/* Card destacado (4º bloco fixo "Toda a coleção") — fundo escuro, contraste editorial */
.cat-card--feature {
  background: var(--color-ink);
  color: var(--color-sand);
}
.cat-card__media--feature {
  background: var(--color-ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--space-5);
  gap: var(--space-3);
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* Decoração orgânica — círculo sun no canto */
.cat-card__media--feature::after {
  content: "";
  position: absolute;
  right: -28%;
  top: -22%;
  width: 70%;
  aspect-ratio: 1/1;
  background: radial-gradient(circle, var(--color-sun) 0%, var(--color-sun) 60%, transparent 62%);
  opacity: 0.18;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.cat-card--feature:hover .cat-card__media--feature::after { transform: scale(1.15); opacity: 0.28; }

.cat-card__feature-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  color: var(--color-sun);
  font-weight: 600;
  position: relative; z-index: 1;
}
.cat-card__feature-heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-sand);
  margin: 0;
  position: relative; z-index: 1;
  max-width: 10ch;
}
/* Label inferior do feature card — herda layout mas inverte cores */
.cat-card--feature .cat-card__label { color: var(--color-sand); }
.cat-card--feature .cat-card__label::after {
  border-color: var(--color-sand);
  color: var(--color-sand);
}
.cat-card--feature:hover .cat-card__label::after {
  background: var(--color-sun);
  border-color: var(--color-sun);
  color: var(--color-paper);
}

/* ---------------------------------------------------------------------
   14. HOME — PROCESSO (Como funciona)
   --------------------------------------------------------------------- */
.process { padding-block: var(--space-9); background: var(--color-bone); }
.process__head { margin-bottom: var(--space-8); max-width: 56ch; }
.process__title {
  font-size: clamp(3rem, 2rem + 2.5vw, 4rem);
  line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem);
  letter-spacing: -0.025em;
  margin-top: var(--space-4);
  text-wrap: balance;
}
@media (min-width: 1024px) { .process__head { max-width: 900px; } }

.process__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  position: relative;
}
@media (min-width: 1024px) { .process__steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

.step {
  background: var(--color-paper);
  border: 1px solid var(--color-gray-100);
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-md);
  position: relative;
}

.step__num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-sun);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid currentColor;
  border-radius: 50%;
  line-height: 1;
  box-sizing: border-box;
  padding-top: 4px;
}
.step__title {
  font-size: var(--fs-h5);
  margin-bottom: var(--space-3);
  letter-spacing: -0.015em;
}
.step__text { color: var(--color-gray-700); line-height: 1.55; }

/* ---------------------------------------------------------------------
   15. HOME — PRODUTOS DESTACADOS
   --------------------------------------------------------------------- */
.featured { padding-block: var(--space-9); background: var(--color-paper); position: relative; }
.featured__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
.featured__title {
  font-size: clamp(3rem, 2rem + 2.5vw, 4rem);
  line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem);
  max-width: 14ch;
  letter-spacing: -0.025em;
}
@media (min-width: 1024px) { .featured__title { max-width: none; white-space: nowrap; } }

.featured__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 768px) { .featured__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
@media (min-width: 1280px) { .featured__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bone);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-ink);
  transition: transform var(--dur-base) var(--ease-out);
}
.product-card:hover { transform: translateY(-4px); color: var(--color-ink); }
.product-card__media {
  aspect-ratio: 1/1;
  background: var(--color-bone);
  position: relative;
  overflow: hidden;
}
.product-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 6px 10px;
  background: var(--color-ink);
  color: var(--color-sand);
  font-size: 10px;
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  font-weight: 500;
}
.product-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.product-card__title {
  font-size: var(--fs-h6);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.product-card__price {
  font-size: var(--fs-small);
  color: var(--color-gray-700);
  margin-top: auto;
}
.product-card__price .amount { color: var(--color-ink); font-weight: 500; }
.product-card__price del { color: var(--color-gray-500); margin-right: 6px; }
.product-card__price-from { color: var(--color-gray-500); font-size: 0.85em; }
.product-card__cta {
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-sun);
}
.product-card__cta::after {
  content: "→";
  transition: transform var(--dur-base) var(--ease-out);
}
.product-card:hover .product-card__cta::after { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   16. HOME — CONFIGURADOR PITCH (3D)
   --------------------------------------------------------------------- */
.configurator {
  padding-block: var(--space-9);
  background: var(--color-ink);
  color: var(--color-sand);
  overflow: hidden;
  position: relative;
}
.configurator::before {
  content: "3D";
  position: absolute;
  top: -10%;
  right: -5%;
  font-family: var(--font-display);
  font-size: clamp(20rem, 50vw, 50rem);
  font-weight: 700;
  line-height: 0.8;
  color: rgba(243, 146, 0, 0.06);
  letter-spacing: -0.05em;
  pointer-events: none;
}
.configurator__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) { .configurator__inner { grid-template-columns: 1fr 1fr; gap: var(--space-10); } }

.configurator__copy { max-width: 48ch; }
.configurator__title {
  color: var(--color-sand);
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -0.025em;
  margin-block: var(--space-4) var(--space-5);
}
.configurator__title em { font-style: normal; color: var(--color-sun); }
.configurator__text { color: rgba(253, 239, 217, 0.85); margin-bottom: var(--space-6); }
.configurator__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(253, 239, 217, 0.15);
}
.configurator__features li {
  font-size: var(--fs-small);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: rgba(253, 239, 217, 0.85);
}
.configurator__features li::before {
  content: "+";
  color: var(--color-sun);
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1;
}
.configurator .btn--sun { transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.configurator .btn--sun:hover { background: transparent; border-color: var(--color-sun); color: var(--color-sun); }

.configurator__media {
  position: relative;
  aspect-ratio: 5/4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(160deg, #2D2E5C 0%, #1B1C39 100%);
}
.configurator__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  padding: 8%;
  transition: transform var(--dur-slow) var(--ease-out);
}
.configurator__media:hover img { transform: scale(1.04) rotate(-2deg); }

/* HUD-like overlay */
.configurator__media::before {
  content: "";
  position: absolute;
  inset: var(--space-3);
  border: 1px solid rgba(253, 239, 217, 0.12);
  border-radius: calc(var(--radius-md) - 4px);
  pointer-events: none;
}
.configurator__media-tag {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  background: rgba(253, 239, 217, 0.08);
  border: 1px solid rgba(253, 239, 217, 0.2);
  color: var(--color-sand);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
}
.configurator__media-tag span {
  width: 6px; height: 6px; background: var(--color-sun); border-radius: 50%;
  animation: pulse 2.4s infinite var(--ease-out);
}

/* ---------------------------------------------------------------------
   16.5 HOME — REVIEW EM VÍDEO (YouTube)
   --------------------------------------------------------------------- */
.video-review {
  padding-block: var(--space-9);
  background: var(--color-bone);
  position: relative;
  overflow: hidden;
}
.video-review__swiper { position: relative; padding-bottom: calc(var(--space-7) + 16px); }
.video-review__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-gray-300);
  background: var(--color-paper);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.video-review__nav:hover { background: var(--color-sun); border-color: var(--color-sun); color: var(--color-paper); }
.video-review__nav--prev { left: 8px; }
.video-review__nav--next { right: 8px; }
.video-review__nav.swiper-button-disabled { opacity: 0; pointer-events: none; }
@media (max-width: 767px) {
  .video-review__nav { display: none; }
}
.video-review__pagination {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.video-review__pagination .swiper-pagination-bullet {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-gray-300);
  opacity: 1;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.video-review__pagination .swiper-pagination-bullet-active {
  background: var(--color-sun);
  transform: scale(1.3);
}
.video-review__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 1024px) {
  .video-review__grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-9);
  }
}

/* Media — iframe embed responsivo */
.video-review__media {
  position: relative;
  width: 100%;
}
.video-review__embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-ink);
}
.video-review__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Placeholder quando não há vídeo definido — leva pro canal */
.video-review__placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-ink) 0%, #2a2c5c 60%, var(--color-ink) 100%);
  color: var(--color-sand);
  text-decoration: none;
  overflow: hidden;
  box-shadow:
    0 24px 48px -16px rgba(27, 28, 57, 0.25),
    0 8px 20px -8px rgba(27, 28, 57, 0.15);
  transition: transform var(--dur-base) var(--ease-out);
}
.video-review__placeholder::before {
  content: "";
  position: absolute;
  right: -25%;
  top: -40%;
  width: 70%;
  aspect-ratio: 1/1;
  background: radial-gradient(circle, var(--color-sun) 0%, transparent 70%);
  opacity: 0.25;
  pointer-events: none;
}
.video-review__placeholder:hover { transform: translateY(-3px); }
.video-review__placeholder-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--color-sun);
  color: var(--color-paper);
  position: relative;
  z-index: 1;
  transition: transform var(--dur-base) var(--ease-out);
}
.video-review__placeholder:hover .video-review__placeholder-play { transform: scale(1.08); }
.video-review__placeholder-play svg { margin-left: 4px; /* compensa peso visual do triângulo */ }
.video-review__placeholder-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(253, 239, 217, 0.7);
  position: relative;
  z-index: 1;
}

/* Copy lado direito */
.video-review__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* eyebrow + author não esticam */
  gap: var(--space-5);
}

.video-review__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  font-weight: 600;
  text-wrap: balance;
  position: relative;
}
.video-review__quote-mark {
  font-family: var(--font-display);
  font-size: 1.6em;
  line-height: 0;
  color: var(--color-sun);
  font-weight: 700;
  vertical-align: -0.25em;
  margin-right: 0.05em;
  display: inline-block;
}
.video-review__quote-mark--close { margin-right: 0; margin-left: 0.05em; }

/* Author — card linkado pro canal */
.video-review__author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  background: var(--color-paper);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-ink);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  box-shadow: 0 8px 20px -10px rgba(27, 28, 57, 0.12);
  align-self: flex-start;
  max-width: 100%;
}
.video-review__author:hover { background: var(--color-paper); transform: translateY(-2px); }
.video-review__author-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #FF0000; /* YouTube red */
  color: var(--color-paper);
  flex-shrink: 0;
}
.video-review__author-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.video-review__author-name strong {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: 0;
}
.video-review__author-name span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 500;
}
.video-review__author-arrow {
  font-size: 18px;
  color: var(--color-ink-soft);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.video-review__author:hover .video-review__author-arrow {
  transform: translateX(4px);
  color: var(--color-sun);
}

/* ---------------------------------------------------------------------
   17. HOME — DEPOIMENTOS
   --------------------------------------------------------------------- */
.testimonies {
  padding-block: var(--space-9);
  background: var(--color-sun);
  color: var(--color-ink);
  position: relative;
  overflow: hidden;
}
.testimonies__head { margin-bottom: var(--space-8); max-width: 50ch; }
.testimonies__title {
  font-size: clamp(3rem, 2rem + 2.5vw, 4rem);
  line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem);
  letter-spacing: -0.025em;
  margin-top: var(--space-4);
}
.testimonies__title em { font-style: normal; }
.testimonies__title em::before { content: "“ "; }
.testimonies__title em::after  { content: " ”"; }

.testimonies__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) { .testimonies__track { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testimonies__track { grid-template-columns: repeat(3, 1fr); } }

.testimony {
  background: var(--color-sand);
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  transition: transform var(--dur-base) var(--ease-out);
}
.testimony:hover { transform: translateY(-4px); }
.testimony__stars { display: inline-flex; gap: 4px; color: var(--color-sun); }
.testimony__text {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.testimony__author {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(27, 28, 57, 0.12);
}
.testimony__name {
  display: block;
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.testimony__city {
  display: block;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-top: 4px;
}

/* ---------------------------------------------------------------------
   18. HOME — BLOG
   --------------------------------------------------------------------- */
.journal { padding-block: var(--space-9); }
.journal__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end;
  gap: var(--space-5); margin-bottom: var(--space-8);
}
.journal__title {
  font-size: clamp(3rem, 2rem + 2.5vw, 4rem);
  line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem);
  letter-spacing: -0.025em;
}
.journal__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 768px) { .journal__grid { grid-template-columns: repeat(3, 1fr); } }

.post-card { display: flex; flex-direction: column; gap: var(--space-4); }
.post-card__media {
  aspect-ratio: 4/3;
  background: var(--color-stone);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.post-card__title { font-size: var(--fs-h6); letter-spacing: -0.01em; }
.post-card__excerpt { color: var(--color-gray-700); font-size: var(--fs-small); }

/* ---------------------------------------------------------------------
   19. HOME — FAQ
   --------------------------------------------------------------------- */
.faq { padding-block: var(--space-9); background: var(--color-bone); }
.faq__head { text-align: center; max-width: 48ch; margin: 0 auto var(--space-8); }
.faq__title {
  font-size: clamp(3rem, 2rem + 2.5vw, 4rem);
  line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem);
  letter-spacing: -0.025em;
}
.faq__lead { margin-top: var(--space-4); color: var(--color-gray-700); margin-inline: auto; }

.faq__list { max-width: 760px; margin-inline: auto; border-top: 1px solid var(--color-ink); }
.faq__item { border-bottom: 1px solid var(--color-ink); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__q:hover { color: var(--color-sun); }
.faq__q-icon {
  width: 36px; height: 36px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--dur-base) var(--ease-out);
  position: relative;
}
.faq__q-icon::before, .faq__q-icon::after {
  content: ""; position: absolute; background: var(--color-ink);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__q-icon::before { width: 12px; height: 1px; }
.faq__q-icon::after  { width: 1px; height: 12px; }
.faq__item.is-open .faq__q-icon { background: var(--color-ink); }
.faq__item.is-open .faq__q-icon::before,
.faq__item.is-open .faq__q-icon::after { background: var(--color-sand); }
.faq__item.is-open .faq__q-icon::after { transform: rotate(90deg); }

.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-out);
  color: var(--color-gray-700);
}
.faq__item.is-open .faq__a { max-height: 600px; }
.faq__a-inner { padding-bottom: var(--space-5); max-width: 64ch; }

/* ---------------------------------------------------------------------
   20. CTA STRIPE
   --------------------------------------------------------------------- */
.cta-stripe {
  background: var(--color-ink);
  color: var(--color-sand);
  padding-block: var(--space-9);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-stripe__title {
  color: var(--color-sand);
  font-size: clamp(3rem, 2rem + 2.5vw, 4rem);
  line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem);
  letter-spacing: -0.025em;
  max-width: 18ch;
  margin-inline: auto;
}
.cta-stripe__title em { font-style: normal; color: var(--color-sun); }
.cta-stripe__text { margin-top: var(--space-4); color: rgba(253, 239, 217, 0.8); margin-inline: auto; max-width: 80ch; text-wrap: balance; }
.cta-stripe .btn { margin-top: var(--space-6); }
.cta-stripe .btn--sun { transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.cta-stripe .btn--sun:hover { background: transparent; border-color: var(--color-sun); color: var(--color-sun); }

/* ---------------------------------------------------------------------
   21. UTILITIES
   --------------------------------------------------------------------- */
.sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Utilitário .hide — usado pelos textareas/inputs do customizador */
.hide { display: none !important; }
.text-balance { text-wrap: balance; }
.center { display: flex; align-items: center; justify-content: center; }
.hide-md { display: block; }
@media (min-width: 768px) { .hide-md { display: none; } }
.show-md { display: none; }
@media (min-width: 768px) { .show-md { display: block; } }

/* ---------------------------------------------------------------------
   22. REVEAL ANIMATIONS
   --------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }
.reveal--delay-4 { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   24. SHOP — Archive de produtos
   --------------------------------------------------------------------- */

.shop-hero {
  padding-block: var(--space-9) var(--space-7);
  border-bottom: var(--hairline-soft);
}
.shop-hero__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: end;
}
@media (min-width: 1024px) {
  .shop-hero__top { grid-template-columns: 1fr auto; gap: var(--space-7); }
}

.shop-hero__title {
  font-size: clamp(2.5rem, 1.5rem + 3.5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-top: var(--space-3);
}
.shop-hero__lead {
  margin-top: var(--space-4);
  color: var(--color-gray-700);
  max-width: 56ch;
  font-size: var(--fs-lead);
}

.shop-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.shop-hero__count {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.shop-hero__filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 20px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  background: var(--color-paper);
  transition: all var(--dur-fast) var(--ease-out);
}
.shop-hero__filter-toggle:hover { background: var(--color-ink); color: var(--color-sand); }
@media (min-width: 1024px) { .shop-hero__filter-toggle { display: none; } }

.shop-hero__order select.orderby,
.shop-hero__order select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%231B1C39' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 16px center;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  padding: 12px 40px 12px 20px;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-sans);
}
.shop-hero__order .woocommerce-ordering { margin: 0; }

.shop { padding-block: var(--space-7) var(--space-10); }
.shop__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  position: relative;
}
@media (min-width: 1024px) {
  .shop__layout { grid-template-columns: 260px 1fr; gap: var(--space-8); align-items: start; }
}

.shop__filters {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--color-bone);
  padding: var(--space-7) var(--container-pad) var(--space-9);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.shop__filters.is-open { transform: translateX(0); }

@media (min-width: 1024px) {
  .shop__filters {
    position: sticky;
    top: calc(var(--space-7) + 80px); /* sticky abaixo do header */
    /* Sai do nível de modal: fora do drawer mobile, --z-modal (300) deixava
       a coluna de filtros passar POR CIMA do header sticky (--z-header, 100)
       durante o scroll. */
    z-index: auto;
    inset: auto;
    background: transparent;
    padding: 0;
    /* Sem max-height, o `overflow-y: auto` que existia aqui não teria o que
       rolar — e um contêiner de rolagem ainda recorta descendentes e briga
       com position: sticky. Fica só o `overflow: visible` acima. */
    overflow: visible;
    transform: none;
  }
}

.shop-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: var(--hairline);
}
.shop-filters__close {
  width: 36px; height: 36px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
}
.shop-filters__close svg { width: 12px; height: 12px; }
@media (min-width: 1024px) { .shop-filters__close { display: none; } }

.shop-filters__group { border-bottom: var(--hairline-soft); }
.shop-filters__group[open] { padding-bottom: var(--space-4); }
.shop-filters__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.shop-filters__group-head::-webkit-details-marker { display: none; }
.shop-filters__group-icon {
  width: 16px;
  height: 16px;
  position: relative;
  display: inline-block;
}
.shop-filters__group-icon::before,
.shop-filters__group-icon::after {
  content: "";
  position: absolute;
  background: var(--color-ink);
  transition: transform var(--dur-base) var(--ease-out);
}
.shop-filters__group-icon::before { top: 50%; left: 0; right: 0; height: 1px; }
.shop-filters__group-icon::after  { left: 50%; top: 0; bottom: 0; width: 1px; }
.shop-filters__group[open] .shop-filters__group-icon::after { transform: scaleY(0); }

.shop-filters__list { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-2); }
.shop-filters__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-small);
  padding: 6px 0;
  color: var(--color-gray-700);
  transition: color var(--dur-fast) var(--ease-out);
}
.shop-filters__link:hover { color: var(--color-ink); }

/* Ativa marcada só pela cor de destaque + peso — sem fundo e sem ícone (o
   ::before de antes era item flex e desalinhava a linha das demais). O
   contador acompanha, pra linha inteira se ler como uma peça só. */
.shop-filters__link.is-active { color: var(--color-sun); font-weight: 500; }
.shop-filters__link.is-active .shop-filters__count { color: var(--color-sun); }
.shop-filters__count {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-500);
}

.shop-filters__terms { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-3); }
.shop-filters__check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--fs-small);
  user-select: none;
}
.shop-filters__check input { position: absolute; opacity: 0; pointer-events: none; }
.shop-filters__check-box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-ink);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-paper);
  position: relative;
  transition: all var(--dur-fast) var(--ease-out);
}
/* Check desenhado com duas bordas de um retângulo girado 45° — sem SVG e
   sem fonte de ícones. O -2px no topo corrige o deslocamento visual que a
   rotação causa dentro da caixa centralizada. */
.shop-filters__check-box::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border: solid var(--color-sun);
  border-width: 0 2px 2px 0;
  /* O rotate é a forma do check, não a animação — fica fixo. Quem entra e
     sai é a opacidade. */
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
/* Sem preenchimento: marcado é a borda em destaque + o check. */
.shop-filters__check input:checked + .shop-filters__check-box { border-color: var(--color-sun); }
.shop-filters__check input:checked + .shop-filters__check-box::after { opacity: 1; }
.shop-filters__check:hover .shop-filters__check-box { border-color: var(--color-sun); }

.shop-architect { padding: var(--space-6) 0 var(--space-2); }
.shop-architect__card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7);
  background: var(--color-bone);
  border-radius: 12px;
}
.shop-architect__body .t-eyebrow { align-self: flex-start; }
.shop-architect__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-stone);
}
.shop-architect__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-architect__body { display: flex; flex-direction: column; gap: var(--space-2); }
.shop-architect__name {
  font-family: inherit;
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.1;
  margin: 0;
  color: var(--color-ink);
}
.shop-architect__bio {
  font-size: var(--fs-small);
  color: var(--color-ink);
  max-width: 60ch;
}
.shop-architect__bio p { margin: 0 0 var(--space-2); }
.shop-architect__bio p:last-child { margin-bottom: 0; }
.shop-architect__instagram {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.shop-architect__instagram:hover { color: var(--color-sun); }
@media (max-width: 720px) {
  .shop-architect__card { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-4); }
  .shop-architect__photo { width: 120px; height: 120px; }
}

.shop-filters__check--avatar { gap: var(--space-2); }
.shop-filters__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-stone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-stone);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.shop-filters__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-filters__avatar-fallback {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-ink);
  text-transform: uppercase;
}
.shop-filters__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.shop-filters__actions .btn { width: 100%; justify-content: center; }
@media (min-width: 1024px) {
  .shop-filters__actions .btn { width: auto; }
}

.shop__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(27, 28, 57, 0.4);
  z-index: calc(var(--z-modal) - 1);
  border: 0;
  cursor: pointer;
}
.shop__filters.is-open ~ .shop__backdrop { display: block; }
@media (min-width: 1024px) { .shop__backdrop { display: none !important; } }

/* Grid — usa auto-fill+minmax pra resolver colunas automaticamente
   sem depender do viewport exato e sem brigar com o WC */
.shop__grid-wrap { min-width: 0; } /* evita que o grid estoure o layout */
.shop-grid,
.woocommerce ul.products.shop-grid,
.woocommerce-page ul.products.shop-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: var(--space-4) !important;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
@media (min-width: 768px) {
  .shop-grid { gap: var(--space-5) !important; }
}

/* WC adiciona ::before e ::after como clearfix (display:table) — em grid
   esses pseudo-elementos viram grid items e ocupam células fantasma.
   Removemos para o auto-flow funcionar corretamente. */
.shop-grid::before,
.shop-grid::after,
.woocommerce ul.products.shop-grid::before,
.woocommerce ul.products.shop-grid::after,
.woocommerce-page ul.products.shop-grid::before,
.woocommerce-page ul.products.shop-grid::after {
  content: none !important;
  display: none !important;
}

/* Reseta TODOS os defaults do WC nos cards
   (width fixo, float, margin, grid placement, clear) */
.woocommerce ul.products.shop-grid li.product,
.woocommerce-page ul.products.shop-grid li.product,
.shop-grid > li,
.shop-grid > li.product-card,
.shop-grid > li.first,
.shop-grid > li.last {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
  position: relative;
}

/* Card overrides — o LI vira o container flex pro link interno preencher */
.shop-grid > li.product-card {
  display: flex !important;
  flex-direction: column;
  background: transparent;
}
.shop-grid .product-card__inner {
  display: flex;
  flex-direction: column;
  background: var(--color-bone);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-ink);
  transition: transform var(--dur-base) var(--ease-out);
  width: 100%;
}
.shop-grid .product-card:hover .product-card__inner { transform: translateY(-4px); }
.shop-grid .product-card__media { aspect-ratio: 1/1; background: var(--color-bone); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.shop-grid .product-card__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform var(--dur-slow) var(--ease-out); }
.woocommerce ul.products li.product a img { margin-bottom: 0; }
.shop-grid .product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__badge--sale { background: var(--color-sun); }

/* Estado vazio */
.shop__empty {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
}
.shop__empty h2 { margin-bottom: var(--space-3); font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem); line-height: clamp(2rem, 1.8rem + 0.6vw, 2.5rem); }

/* Pagination (WC default + tweaks) */
.woocommerce-pagination { margin-top: var(--space-8); }
.woocommerce-pagination ul.page-numbers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  padding: 0;
}
.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.woocommerce-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers.current {
  background: var(--color-ink);
  color: var(--color-sand);
  border-color: var(--color-ink);
}
.woocommerce-pagination .page-numbers.dots {
  border: 0;
  background: transparent;
  color: var(--color-gray-500);
}

/* ---------------------------------------------------------------------
   25. SINGLE PRODUCT — Layout, viewer, customizer, gallery, specs, reviews
   --------------------------------------------------------------------- */

/* Padding aplicado SÓ na section do single product, não no <body>
   (WC adiciona a class .single-product no body em páginas de produto,
   o que causaria gap branco enorme depois do footer). */
.single-product:not(body) { padding-bottom: 0; }
body.single-product { padding-bottom: 0; }

/* Breadcrumbs (WC default + filter custom) */
.wc-wrapper { display: contents; }
.woocommerce-breadcrumb,
.single-product__crumbs-nav {
  display: block;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-5) var(--container-pad);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
@media (min-width: 1024px) {
  .woocommerce-breadcrumb,
  .single-product__crumbs-nav { padding-inline: var(--container-pad-lg); }
}
.woocommerce-breadcrumb a,
.single-product__crumbs-nav a { color: var(--color-ink-soft); transition: color var(--dur-fast) var(--ease-out); }
.woocommerce-breadcrumb a:hover,
.single-product__crumbs-nav a:hover { color: var(--color-sun); }
.single-product__crumbs-sep { margin: 0 6px; opacity: 0.5; }

/* Main layout (viewer + summary) */
.single-product__main { padding-block: var(--space-3) var(--space-9); }
.single-product__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 1024px) {
  .single-product__layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
}

/* Viewer (sticky em desktop) */
.single-product__viewer { position: relative; }
@media (min-width: 1024px) {
  .single-product__viewer {
    position: sticky;
    top: 96px; /* abaixo do header */
  }
}

.single-product__viewer-inner { display: block; }
.single-product__viewer-stage {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-stone);
  user-select: none;
}

.single-product__viewer-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: opacity 480ms var(--ease-out);
}
.single-product__viewer-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.single-product__viewer-thumb.hide { opacity: 0; pointer-events: none; }

.single-product__viewer-cue {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 22px;
  background: var(--color-ink);
  color: var(--color-sand);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  pointer-events: none;
}
.single-product__viewer-cue-dot {
  width: 6px; height: 6px;
  background: var(--color-sun);
  border-radius: 50%;
  animation: pulse 2.4s infinite var(--ease-out);
}

.single-product__viewer-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 1;
  background: var(--color-stone);
}
.single-product__viewer-canvas.active { display: block; }

/* Status do viewer — carregando / erro (markup em product-image.php).
   pointer-events:none: o clique atravessa até a thumbnail, que é o alvo
   do "tentar novamente". */
.single-product__viewer-status {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
  z-index: 4;
  pointer-events: none;
  background: rgba(244, 243, 243, 0.78);
}
.single-product__viewer-stage.is-loading .single-product__viewer-status,
.single-product__viewer-stage.is-error .single-product__viewer-status {
  display: flex;
}

.single-product__viewer-status-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--color-gray-300);
  border-top-color: var(--color-sun);
  border-radius: 50%;
  animation: viewer-spin 0.9s linear infinite;
}
.single-product__viewer-stage.is-error .single-product__viewer-status-spinner { display: none; }
.single-product__viewer-stage.is-error .single-product__viewer-status { background: rgba(253, 239, 217, 0.92); }

.single-product__viewer-status-text {
  max-width: 36ch;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-ink);
}

/* Evita CTA "Clique para personalizar" duplicado com o overlay ativo */
.single-product__viewer-stage.is-loading .single-product__viewer-cue,
.single-product__viewer-stage.is-error .single-product__viewer-cue { opacity: 0; }

@keyframes viewer-spin {
  to { transform: rotate(360deg); }
}

.single-product__viewer-tag {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  background: var(--color-sand);
  color: var(--color-ink);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  z-index: 3;
  pointer-events: none;
}
.single-product__viewer-tag span:first-child {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-sun);
  animation: pulse 2.4s infinite var(--ease-out);
}

/* Summary (right column) */
.single-product__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.single-product__summary .product_title,
.single-product__summary h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-3);
}
.single-product__summary .price {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.015em;
  margin: 0;
}
.single-product__summary .price del { color: var(--color-gray-500); margin-right: 8px; opacity: 0.7; font-weight: 500; }
.single-product__summary .price ins { text-decoration: none; }
.single-product__summary .veraneo-product-sale-price { color: var(--color-sun); }

.single-product__installments {
  margin: calc(var(--space-3) * -1 + 6px) 0 0;
  padding: 8px 16px 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  background: rgba(243, 146, 0, 0.10);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: 0;
  line-height: 1;
}
.single-product__installments svg { color: var(--color-sun); flex-shrink: 0; }
.single-product__installments span { line-height: 1.2; }

.single-product__deliver {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  background: var(--color-paper);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-sm);
  margin-block: var(--space-3) 0;
}
.single-product__deliver-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-sand);
  color: var(--color-ink);
  flex-shrink: 0;
}
.single-product__deliver-text {
  font-size: var(--fs-small);
  color: var(--color-gray-700);
  margin: 0;
  line-height: 1.4;
}

/* Add to cart button */
.single-product__summary form.cart {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--hairline-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: stretch;
}
.single-product__summary .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  padding: 4px 6px;
  background: var(--color-paper);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.single-product__summary .quantity:hover { border-color: var(--color-ink); }
.single-product__summary .quantity:focus-within { box-shadow: 0 0 0 3px rgba(27, 28, 57, 0.08); }
.single-product__summary .quantity input.qty {
  border: 0;
  background: transparent;
  width: 44px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  outline: 0;
  padding: 12px 0;
}
.single-product__summary .quantity input.qty::-webkit-outer-spin-button,
.single-product__summary .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.single-product__summary .quantity .qty-stepper {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
  user-select: none;
}
.single-product__summary .quantity .qty-stepper:hover { background: var(--color-bone); }
.single-product__summary .quantity .qty-stepper:active { background: var(--color-stone); }
.single-product__summary .quantity .qty-stepper:disabled { opacity: 0.3; cursor: not-allowed; }

.single-product__summary .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 16px 32px;
  background: var(--color-sun);
  color: var(--color-paper);
  border: 1px solid var(--color-sun);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  flex: 1;
  justify-content: center;
}
.single-product__summary .single_add_to_cart_button::after {
  content: "→";
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.single-product__summary .single_add_to_cart_button:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-sand);
}
.single-product__summary .single_add_to_cart_button:hover::after { transform: translateX(4px); }

.single-product__favorite {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 22px;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  margin-top: var(--space-3);
  align-self: flex-start;
}
.single-product__favorite svg { width: 16px; height: 16px; }
.single-product__favorite:hover { background: var(--color-ink); color: var(--color-sand); }

/* ---- CUSTOMIZER (mantém class names legados pra contrato com JS) ---- */
.veraneo-single-options {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--hairline-soft);
}
.veraneo-single-options.is-busy .fields {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
  cursor: wait;
}
.veraneo-single-options.is-busy .fields-input { pointer-events: none; }
.veraneo-single-options-header {
  margin-top: 0 !important;
  margin-bottom: var(--space-5);
}
.single-options-title {
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  font-family: var(--font-display);
}
.single-options-title::before {
  content: "PERSONALIZE  /  ";
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  color: var(--color-sun);
  display: block;
  margin-bottom: 6px;
}

.fields { display: flex; flex-direction: column; }

/* Configurador recolhido — só o header aparece até o usuário pedir o 3D */
.veraneo-single-options.is-collapsed .fields { display: none; }
.veraneo-single-options:not(.is-collapsed) .veraneo-single-options__start { display: none; }

.veraneo-single-options__start {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out);
}
.veraneo-single-options__start:hover {
  background: var(--color-sun);
}
.veraneo-single-options__start:focus-visible {
  outline: 2px solid var(--color-sun);
  outline-offset: 3px;
}

.fields-section { border-top: 1px solid var(--color-gray-300); }
.fields-section:last-child { border-bottom: 1px solid var(--color-gray-300); }

.fields-section-top {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: var(--space-4) 0;
  user-select: none;
  color: var(--color-ink);
}
.fields-section-top h2 {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: inherit;
  line-height: 1;
  flex: 1;
}
/* SVG dentro do H2 (ícone da seção) — tamanho consistente */
.fields-section-top h2 svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-ink-soft);
  display: block;
}
.fields-section-top h2 svg path,
.fields-section-top h2 svg rect,
.fields-section-top h2 svg line,
.fields-section-top h2 svg circle { stroke: currentColor; }
.fields-section-top-arrow {
  width: 32px; height: 32px;
  border: 1px solid var(--color-sun);
  border-radius: var(--radius-pill);
  background: var(--color-sun);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-paper);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.fields-section-top-arrow svg {
  display: block;
  transition: transform var(--dur-base) var(--ease-out);
}

.fields-section-top:hover .fields-section-top-arrow {
  background: var(--color-ink);
  border-color: var(--color-ink);
}
.fields-section-top.active .fields-section-top-arrow {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-sand);
}
.fields-section-top.active .fields-section-top-arrow svg {
  transform: rotate(-180deg);
}

.fields-section-content {
  max-height: 0;
  overflow: visible;
  clip-path: polygon(-32px 0, calc(100% + 32px) 0, calc(100% + 32px) 100%, -32px 100%);
  transition: max-height 480ms var(--ease-out);
}
.fields-section-content.active {
  max-height: 2000px;
  padding-bottom: var(--space-5);
}

.fields-section-content-styles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 480px) { .fields-section-content-styles { grid-template-columns: repeat(3, 1fr); } }

.fields-section-content-styles-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background: var(--color-paper);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  text-align: center;
}
.fields-section-content-styles-item img { width: 40px; height: 40px; object-fit: contain; }
.fields-section-content-styles-item-title {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
  color: var(--color-ink);
}
.fields-section-content-styles-item:hover { border-color: var(--color-ink); }
.fields-section-content-styles-item.active {
  background: var(--color-ink);
  border-color: var(--color-ink);
}
.fields-section-content-styles-item.active .fields-section-content-styles-item-title { color: var(--color-sand); }
.fields-section-content-styles-item.active img { filter: brightness(0) invert(1); }

/* Slider (range-fields) */
.range-fields { padding: 0 0 var(--space-4); }
.range-fields + .range-fields {
  border-top: 1px dashed var(--color-gray-300);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}
.fields-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-3);
  font-weight: 600;
}
.range-fields-content {
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: var(--space-3);
  align-items: center;
}

.fields-range-area {
  position: relative;
  padding-top: 36px; /* espaço pro tooltip de valor flutuante */
}
.fields-range-value {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--color-ink);
  color: var(--color-sand);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  /* a posição left é setada via JS em updateRangeField() —
     o JS já calcula thumbX - tooltipWidth/2, sem precisar de transform aqui */
}
.fields-range-value::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 6px; height: 6px;
  background: var(--color-ink);
}

input[type="range"].fields-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--color-gray-300);
  border-radius: var(--radius-pill);
  outline: 0;
  cursor: pointer;
  margin: 0;
  display: block;
}
input[type="range"].fields-range::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--color-gray-300);
  border-radius: var(--radius-pill);
}
input[type="range"].fields-range::-moz-range-track {
  height: 4px;
  background: var(--color-gray-300);
  border-radius: var(--radius-pill);
}
input[type="range"].fields-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--color-sun);
  border: 2.5px solid var(--color-ink);
  border-radius: 50%;
  cursor: pointer;
  margin-top: -7px;
  transition: transform var(--dur-fast) var(--ease-out);
  box-shadow: 0 2px 6px rgba(27, 28, 57, 0.18);
}
input[type="range"].fields-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--color-sun);
  border: 2.5px solid var(--color-ink);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(27, 28, 57, 0.18);
}
input[type="range"].fields-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"].fields-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(243, 146, 0, 0.25);
}

.fields-range-number {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-gray-300);
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  background: var(--color-bone);
  color: var(--color-ink);
  outline: 0;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  -moz-appearance: textfield;
}
.fields-range-number::-webkit-outer-spin-button,
.fields-range-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fields-range-number:focus {
  border-color: var(--color-ink);
  background: var(--color-paper);
}

/* Valor fora da faixa min/max — o campo não é corrigido sozinho, fica
   vermelho e trava a compra até o usuário ajustar. */
.fields-range-number.is-invalid,
.fields-range-number.is-invalid:focus {
  border-color: #c0392b;
  color: #c0392b;
  background: rgba(192, 57, 43, 0.06);
}
.range-fields.has-invalid .fields-label { color: #c0392b; }

/* Color swatches */
.fields-color { padding: var(--space-3) 0; }
.fields-color + .fields-color,
.fields-color + .fields-radio,
.fields-radio + .fields-color { border-top: 1px dashed var(--color-gray-100); margin-top: var(--space-3); padding-top: var(--space-4); }
.fields-color-header { margin-bottom: var(--space-3); }
.fields-color-title {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 500;
  margin: 0;
}
.fields-color-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.fields-color-item {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  background-color: var(--color-stone);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  transition: all var(--dur-fast) var(--ease-out);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.fields-color-item:hover { transform: scale(1.05); }
.fields-color-item.active {
  border-color: var(--color-paper);
  outline-color: var(--color-ink);
}
.fields-color-item-label {
  position: absolute;
  white-space: nowrap;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-ink);
  color: var(--color-sand);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.fields-color-item:hover .fields-color-item-label { opacity: 1; }

/* Radio chips — segmented selector que se adapta a quantidade de opções */
.fields-radio { padding: 0 0 var(--space-4); }
.fields-radio + .fields-color,
.fields-radio + .fields-radio,
.fields-color + .fields-radio {
  border-top: 1px dashed var(--color-gray-300);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}
.fields-radio > div:first-child { margin-bottom: var(--space-3); }
.fields-radio > div:first-child label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 600;
}

/* Lista de chips — auto-fit grid pra quebrar bonito sem pill background */
.fields-radio-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  width: 100%;
}
.fields-radio-options-item { display: flex; }
.fields-radio-options-item input.hide,
.fields-radio-options-item input[type="radio"].fields-input {
  position: absolute; opacity: 0; pointer-events: none;
}
.fields-radio-options-item label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  color: var(--color-ink);
  background: var(--color-bone);
  border: 1px solid transparent;
  text-align: center;
  user-select: none;
}
.fields-radio-options-item label:hover {
  background: var(--color-paper);
  border-color: var(--color-gray-300);
}
.fields-radio-options-item input:checked + label {
  background: var(--color-ink);
  color: var(--color-sand);
  border-color: var(--color-ink);
  font-weight: 600;
}

/* Hidden input — completamente escondido */
.fields-input.hide,
input[type="hidden"].fields-input { display: none !important; }

/* Excerpt do produto */
.single-product__summary .woocommerce-product-details__short-description {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--hairline-soft);
  color: var(--color-gray-700);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.single-product__summary .product_meta { display: none; } /* hide categories meta */
.single-product__summary .woocommerce-variation-add-to-cart { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---- GALERIA ---- */
.single-product__gallery { padding-block: var(--space-7); border-top: var(--hairline-soft); }
.single-product__gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) { .single-product__gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
.single-product__gallery-item {
  margin: 0;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-stone);
}
.single-product__gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.single-product__gallery-item:hover img { transform: scale(1.04); }

/* ---- SECTION HEADERS (specs / reviews) ---- */
.single-product__section-head {
  margin-bottom: var(--space-6);
}
.single-product__specs .single-product__section-head,
.single-product__reviews .single-product__section-head { margin-bottom: var(--space-8); }
.single-product__section-title {
  margin-top: var(--space-3);
  font-size: clamp(3rem, 2rem + 2.5vw, 4rem);
  line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem);
  letter-spacing: -0.02em;
}

/* ---- ESPECIFICAÇÕES ---- */
.single-product__specs { padding-block: var(--space-9); background: var(--color-sand); }
.single-product__specs-list {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--color-ink);
}
.single-product__spec { border-bottom: 1px solid var(--color-ink); }
.single-product__spec[open] { padding-bottom: var(--space-4); }
.single-product__spec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  font-weight: 700;
  letter-spacing: -0.01em;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.single-product__spec-head::-webkit-details-marker { display: none; }
.single-product__spec-head:hover { color: var(--color-sun); }
.single-product__spec-icon {
  width: 32px; height: 32px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  position: relative;
  flex-shrink: 0;
  transition: all var(--dur-base) var(--ease-out);
}
.single-product__spec-icon::before,
.single-product__spec-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--color-ink);
  transition: transform var(--dur-base) var(--ease-out);
}
.single-product__spec-icon::before { width: 12px; height: 1px; transform: translate(-50%, -50%); }
.single-product__spec-icon::after  { width: 1px; height: 12px; transform: translate(-50%, -50%); }
.single-product__spec[open] .single-product__spec-icon { background: var(--color-ink); }
.single-product__spec[open] .single-product__spec-icon::before,
.single-product__spec[open] .single-product__spec-icon::after { background: var(--color-sand); }
.single-product__spec[open] .single-product__spec-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.single-product__spec-body {
  padding-bottom: var(--space-5);
  color: var(--color-gray-700);
  max-width: 64ch;
}

/* ---- REVIEWS ---- */
.single-product__reviews { padding-block: var(--space-9); }
.reviews__stats {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-block: var(--space-4);
  border-block: 1px solid var(--color-ink);
}
.reviews__rating { display: inline-flex; align-items: baseline; }
.reviews-number {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1;
  color: var(--color-ink);
}
.reviews__rating-of {
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  color: var(--color-gray-500);
  margin-left: 4px;
}
.reviews__stars { display: inline-flex; gap: 2px; color: var(--color-gray-300); }
.reviews__stars .star.active { color: var(--color-sun); }
.reviews__count {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.my-review {
  margin-top: var(--space-7);
  padding: var(--space-6);
  background: var(--color-bone);
  border-radius: var(--radius-md);
}
.my-review__title {
  font-size: var(--fs-h6);
  margin: var(--space-3) 0 var(--space-4);
  letter-spacing: -0.01em;
}
.my-review-stars { margin: 0 0 var(--space-4); }
.my-review-stars .stars { gap: 4px; }
.my-review-star {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-gray-300);
  padding: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.my-review-star:hover, .my-review-star.active { color: var(--color-sun); }
.my-review-textarea { min-height: 120px; resize: vertical; }
.my-review-form { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }

.reviews__login {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--color-bone);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  color: var(--color-gray-700);
  max-width: 480px;
}
.reviews__login a { color: var(--color-sun); border-bottom: 1px solid currentColor; }

.reviews__list {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) { .reviews__list { grid-template-columns: repeat(2, 1fr); } }
.reviews-comment {
  padding: var(--space-5);
  background: var(--color-paper);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
}
.reviews-comment-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.reviews-author {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  margin: 0;
  color: var(--color-ink);
}
.reviews-comment .stars { color: var(--color-gray-300); }
.reviews-comment .star.active { color: var(--color-sun); }
.reviews-text { font-size: var(--fs-small); color: var(--color-gray-700); margin: 0; line-height: 1.55; }
.reviews__more { margin-top: var(--space-6); display: flex; justify-content: center; }

/* ---- VEJA TAMBÉM — 4 produtos aleatórios na single ---- */
.related-also {
  padding-block: var(--space-9);
  border-top: var(--hairline-soft);
  background: var(--color-paper);
}
.related-also__head {
  margin-bottom: var(--space-6);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
}
.related-also__title {
  font-size: clamp(3rem, 2rem + 2.5vw, 4rem);
  line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem);
  letter-spacing: -0.02em;
  margin: 0;
}
.related-also__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 768px)  { .related-also__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
@media (min-width: 1024px) { .related-also__grid { grid-template-columns: repeat(4, 1fr); } }

/* Override do float/margin default do WC nos <li class="product"> dentro do veja também */
.related-also__grid > li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}

/* Mantém regras legacy pro caso de outras telas usarem .related.products */
.upsells.products { padding-block: var(--space-9); border-top: var(--hairline-soft); }
.upsells.products > h2 { font-size: clamp(3rem, 2rem + 2.5vw, 4rem); line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem); margin-bottom: var(--space-6); letter-spacing: -0.02em; }
.upsells.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-5);
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}
.upsells.products ul.products::before, .upsells.products ul.products::after { content: none !important; display: none !important; }
.upsells.products ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}

/* ---------------------------------------------------------------------
   26. CART PAGE
   --------------------------------------------------------------------- */
.cart-page { padding-block: var(--space-9) var(--space-10); }
.cart-page__head { margin-bottom: var(--space-7); }
.cart-page__title { font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.025em; margin-top: var(--space-3); }
.cart-page__count { margin-top: var(--space-3); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-uber); text-transform: uppercase; color: var(--color-ink-soft); }

.cart-page__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 1024px) {
  .cart-page__layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
}

.cart-page__items { min-width: 0; }
.cart-items { list-style: none; padding: 0; margin: 0; }
.cart-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-gray-100);
}
.cart-item:first-child { padding-top: 0; }
@media (min-width: 640px) { .cart-item { grid-template-columns: 200px 1fr; gap: var(--space-6); } }

.cart-item__media {
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bone);
  display: block;
}
.cart-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.cart-item__media:hover img { transform: scale(1.04); }

.cart-item__body {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding-top: 4px;
}
.cart-item__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.cart-item__title {
  font-size: clamp(18px, 1.1rem + 0.3vw, 22px);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.25;
  font-family: var(--font-display);
  color: var(--color-ink);
}
.cart-item__title a { color: inherit; text-decoration: none; transition: color var(--dur-fast); }
.cart-item__title a:hover { color: var(--color-sun); }

/* Remover — botão horizontal vermelho com ícone lixeira (substitui X circular) */
.cart-item__remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border: 1px solid rgba(192, 57, 43, 0.25);
  border-radius: var(--radius-pill);
  color: #c0392b;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
  cursor: pointer;
  line-height: 1;
}
.cart-item__remove svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.cart-item__remove:hover {
  background: #c0392b;
  border-color: #c0392b;
  color: var(--color-paper);
}
.cart-item__remove:hover svg { transform: rotate(-8deg); }

.cart-item__meta { font-size: var(--fs-small); color: var(--color-gray-700); }
.cart-item__meta dl { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.cart-item__meta dt { font-weight: 500; }
.cart-item__meta dd { margin: 0; }

.cart-item__custom {
  border-top: 1px dashed var(--color-gray-300);
  padding-top: var(--space-3);
}
.cart-item__custom-head {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink); font-weight: 600;
  padding: 8px 14px;
  background: var(--color-bone);
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out);
}
.cart-item__custom-head:hover { background: var(--color-stone); }
.cart-item__custom[open] .cart-item__custom-head { background: var(--color-stone); }
.cart-item__custom-head::-webkit-details-marker { display: none; }
.cart-item__custom-icon {
  width: 22px; height: 22px;
  border: 1px solid var(--color-ink-soft);
  border-radius: var(--radius-pill);
  position: relative;
  transition: all var(--dur-base) var(--ease-out);
}
.cart-item__custom-icon::before, .cart-item__custom-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--color-ink-soft);
  transition: transform var(--dur-base) var(--ease-out);
}
.cart-item__custom-icon::before { width: 8px; height: 1px; transform: translate(-50%, -50%); }
.cart-item__custom-icon::after { width: 1px; height: 8px; transform: translate(-50%, -50%); }
.cart-item__custom[open] .cart-item__custom-icon { background: var(--color-ink); border-color: var(--color-ink); }
.cart-item__custom[open] .cart-item__custom-icon::before, .cart-item__custom[open] .cart-item__custom-icon::after { background: var(--color-sand); }
.cart-item__custom[open] .cart-item__custom-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.cart-item__custom-body { padding-top: var(--space-3); font-size: var(--fs-small); color: var(--color-gray-700); }
.cart-item__custom-body p { margin: 4px 0; }

.cart-item__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--space-4); border-top: 1px solid var(--color-gray-100);
  flex-wrap: wrap; gap: var(--space-4);
}
/* Quantity stepper — wrapper outlined com botões −/+ funcionais */
.cart-item__qty .quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-gray-300);
  border-radius: 8px;
  background: var(--color-paper);
  overflow: hidden;
  height: 42px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.cart-item__qty .quantity:hover { border-color: var(--color-ink-soft); }
.cart-item__qty .quantity:focus-within { border-color: var(--color-ink); box-shadow: 0 0 0 3px rgba(27, 28, 57, 0.06); }

/* Botões −/+ (injetados via JS no main.js) */
.cart-item__qty .qty-stepper {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  width: 36px;
  cursor: pointer;
  color: var(--color-ink-soft);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
  user-select: none;
}
.cart-item__qty .qty-stepper:hover {
  background: var(--color-bone);
  color: var(--color-ink);
}
.cart-item__qty .qty-stepper:active { background: var(--color-stone); }
.cart-item__qty .qty-stepper:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cart-item__qty input.qty {
  border: 0;
  background: transparent;
  width: 44px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
  outline: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--color-ink);
  height: 100%;
  -moz-appearance: textfield;
  /* Separadores sutis entre input e botões */
  border-left: 1px solid var(--color-gray-100);
  border-right: 1px solid var(--color-gray-100);
}
.cart-item__qty input.qty::-webkit-outer-spin-button,
.cart-item__qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Preço — refinado, menos dominante */
.cart-item__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.1rem + 0.4vw, 22px);
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.cart-item__price .amount,
.cart-item__price bdi { font-family: inherit; font-weight: inherit; font-size: inherit; }

.cart-page__actions {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  display: flex; justify-content: flex-start;
}
.cart-page__actions button[name="update_cart"] {
  background: transparent !important;
  color: var(--color-ink-soft) !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid currentColor !important;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
}
.cart-page__actions button[name="update_cart"]:hover { color: var(--color-sun) !important; }
.cart-page__actions button[name="update_cart"]::after { content: none !important; }

/* Sidebar de totais */
.cart-page__sidebar { position: relative; }
@media (min-width: 1024px) {
  .cart-page__sidebar { position: sticky; top: 96px; }
}
.cart-totals {
  background: var(--color-bone);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.cart-totals__title {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 500;
  font-family: var(--font-sans);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-ink);
}
.cart-totals__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.cart-totals__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-block: var(--space-3); border-bottom: 1px dashed var(--color-gray-300);
  font-size: var(--fs-small); gap: var(--space-3);
}
.cart-totals__row:last-child { border-bottom: 0; }
.cart-totals__row > span:first-child,
.cart-totals__row > th { color: var(--color-gray-700); font-weight: 400; }
.cart-totals__row > span:last-child,
.cart-totals__row > td { font-weight: 500; color: var(--color-ink); text-align: right; }
.cart-totals__row .amount { color: var(--color-ink); font-weight: 500; }
.cart-totals__shipping-notice {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--color-gray-700);
  font-style: italic;
  text-align: right;
}
.cart-totals__row--shipping-notice { border-bottom: 0; }

.cart-totals__row--total {
  border-top: 1px solid var(--color-ink); border-bottom: 0;
  margin-top: var(--space-3); padding-top: var(--space-5);
  align-items: baseline;
}
.cart-totals__row--total > span:first-child,
.cart-totals__row--total > th {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 500;
}
.cart-totals__row--total > span:last-child,
.cart-totals__row--total > td,
.cart-totals__row--total .amount {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.cart-totals__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: stretch; /* full width pra todos (botão + link) */
}
.cart-totals__actions .button,
.cart-totals__actions .checkout-button,
.cart-totals .wc-proceed-to-checkout .button,
.cart-totals .wc-proceed-to-checkout .checkout-button {
  width: 100% !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 18px 24px !important;
  background: var(--color-sun) !important;
  color: var(--color-paper) !important;
  border: 1px solid var(--color-sun) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all var(--dur-base) var(--ease-out);
  cursor: pointer;
  line-height: 1.2 !important;
  box-shadow: 0 8px 24px -8px rgba(243, 146, 0, 0.4);
  box-sizing: border-box !important;
}
.cart-totals__actions .button:hover,
.cart-totals__actions .checkout-button:hover,
.cart-totals .wc-proceed-to-checkout .checkout-button:hover {
  background: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
  color: var(--color-sand) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(27, 28, 57, 0.3);
}
.cart-totals .wc-proceed-to-checkout {
  padding: 0 !important;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}
.cart-totals__continue {
  align-self: center;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.cart-totals__continue:hover { color: var(--color-sun); }

/* Shipping methods refinados */
.cart-shipping { padding: 0 !important; }
.cart-shipping__label {
  display: block;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 500;
  margin-bottom: var(--space-3);
  padding-top: var(--space-3);
}
.cart-shipping__methods { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cart-shipping__method {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--color-paper);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.cart-shipping__method:hover { border-color: var(--color-ink-soft); }
.cart-shipping__method.is-chosen { border-color: var(--color-ink); background: var(--color-stone); }
.cart-shipping__method:has(> input[type="hidden"]) { grid-template-columns: 1fr; }
.cart-shipping__radio {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 1px solid var(--color-gray-300);
  border-radius: 50%;
  background: var(--color-paper);
  cursor: pointer;
  position: relative;
  transition: all var(--dur-fast) var(--ease-out);
}
.cart-shipping__radio:checked { border-color: var(--color-ink); background: var(--color-paper); }
.cart-shipping__radio:checked::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  background: var(--color-sun); border-radius: 50%;
}
.cart-shipping__name {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: var(--fs-small); cursor: pointer;
  letter-spacing: 0; text-transform: none; color: var(--color-ink); font-weight: 400;
}
.cart-shipping__name .amount { font-weight: 500; color: var(--color-ink); }
.cart-shipping__destination {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-gray-300);
  font-size: var(--fs-small);
  color: var(--color-gray-700);
  line-height: 1.5;
}
.cart-shipping__destination strong { color: var(--color-ink); font-weight: 500; }
.cart-shipping__destination .shipping-calculator-button,
.cart-totals .shipping-calculator-button {
  display: inline-block; margin-top: var(--space-2);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-uber); text-transform: uppercase;
  color: var(--color-ink-soft); border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.cart-shipping__destination .shipping-calculator-button:hover,
.cart-totals .shipping-calculator-button:hover { color: var(--color-sun); }
/* Esconde o ícone awkward que vem por padrão no calculator-button */
.cart-shipping__destination .shipping-calculator-button img,
.cart-totals .shipping-calculator-button img,
.cart-shipping__destination .shipping-calculator-button svg:last-child,
.cart-totals .shipping-calculator-button svg:last-child { display: none; }

/* Shipping calculator (CEP form na sidebar do cart) — outlined consistente */
.cart-totals .shipping-calculator-form,
.cart-totals .woocommerce-shipping-calculator,
.cart-totals .shipping-calculator-form > * {
  margin: 0 !important;
}
.cart-totals .shipping-calculator-form {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3) !important;
}
.cart-totals .shipping-calculator-form .form-row,
.cart-totals .shipping-calculator-form > p {
  margin: 0 !important;
  padding: 0 !important;
  display: flex; flex-direction: column; gap: 6px;
  width: 100% !important;
}
.cart-totals .shipping-calculator-form label {
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--color-ink-soft) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.cart-totals .shipping-calculator-form input[type="text"],
.cart-totals .shipping-calculator-form input.input-text {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid var(--color-gray-300) !important;
  background: var(--color-paper) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  color: var(--color-ink) !important;
  outline: 0 !important;
  margin: 0 !important;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.cart-totals .shipping-calculator-form input[type="text"]:focus,
.cart-totals .shipping-calculator-form input.input-text:focus {
  border-color: var(--color-ink) !important;
  box-shadow: 0 0 0 3px rgba(27, 28, 57, 0.08) !important;
}
.cart-totals .shipping-calculator-form input::placeholder { color: var(--color-gray-500); font-weight: 400; }

/* Botão "Atualizar" do CEP — compacto, alinhado à direita */
.cart-totals .shipping-calculator-form button[name="calc_shipping"],
.cart-totals .shipping-calculator-form button[type="submit"] {
  width: auto !important;
  align-self: flex-end !important;
  height: 36px !important;
  padding: 0 18px !important;
  background: var(--color-ink) !important;
  color: var(--color-sand) !important;
  border: 1px solid var(--color-ink) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all var(--dur-fast) var(--ease-out);
  margin: 0 !important;
}
.cart-totals .shipping-calculator-form button[name="calc_shipping"]:hover,
.cart-totals .shipping-calculator-form button[type="submit"]:hover {
  background: var(--color-sun) !important;
  border-color: var(--color-sun) !important;
  color: var(--color-paper) !important;
}

/* Cart vazio */
/* Carrinho vazio — bloco central compacto, sem excesso vertical */
.cart-page--empty { padding-block: var(--space-6) var(--space-7); }
.cart-page--empty .cart-page__empty { text-align: center; padding-block: var(--space-4); max-width: 56ch; margin: 0 auto; }
.cart-page__empty-title { font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem); line-height: 1; letter-spacing: -0.025em; margin: var(--space-3) 0 var(--space-3); }
.cart-page__empty-title em { color: var(--color-sun); font-style: normal; }
.cart-page__empty-text { color: var(--color-gray-700); margin: 0 auto var(--space-5); font-size: var(--fs-lead); }

/* ---------------------------------------------------------------------
   27. CHECKOUT PAGE — Veraneo Novo (Senior UX redesign v3)
   Princípios: hierarquia clara · ritmo consistente · acabamento editorial
   --------------------------------------------------------------------- */

.checkout-page {
  padding-block: var(--space-6) var(--space-10);
  background: var(--color-paper);
}

/* ── Progress steps ─────────────────────────────────────────────────── */
.checkout-steps {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-gray-100);
}
.checkout-steps__step {
  display: inline-flex; align-items: baseline; gap: 10px;
  text-decoration: none;
  padding: 4px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.checkout-steps__num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
  font-weight: 600;
}
.checkout-steps__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 500;
}
a.checkout-steps__step:hover .checkout-steps__label,
a.checkout-steps__step:hover .checkout-steps__num { color: var(--color-sun); }
.checkout-steps__step.is-active .checkout-steps__num { color: var(--color-sun); }
.checkout-steps__step.is-active .checkout-steps__label { color: var(--color-ink); font-weight: 600; }
.checkout-steps__step.is-pending .checkout-steps__num,
.checkout-steps__step.is-pending .checkout-steps__label { color: var(--color-gray-300); }
.checkout-steps__divider {
  flex: 0 0 28px; height: 1px; background: var(--color-gray-300);
}

/* ── Header ─────────────────────────────────────────────────────────── */
.checkout-page__head { margin-bottom: var(--space-5); max-width: 64ch; }
.checkout-page__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
  line-height: 1; letter-spacing: -0.025em;
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
}
.checkout-page__lead { color: var(--color-gray-700); margin: 0; font-size: var(--fs-body); line-height: 1.6; max-width: 56ch; }

/* ── Layout grid ────────────────────────────────────────────────────── */
.checkout-page__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 1024px) {
  .checkout-page__layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--space-8);
    align-items: start;
  }
}

/* ============== FORM (esquerda) ================================ */
.checkout-page__customer {
  min-width: 0;
  /* Anula CSS vars do WC */
  --wc-form-border-color: transparent;
  --wc-form-border-width: 0;
  --wc-form-border-radius: 0;
  /* CSS counter pra numerar as seções (h3) */
  counter-reset: ck-section;
}

/* Section wrapper (cada bloco billing/shipping/additional) */
.checkout-page__customer .woocommerce-billing-fields,
.checkout-page__customer .woocommerce-shipping-fields,
.checkout-page__customer .woocommerce-additional-fields {
  margin: 0 0 var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-gray-100);
}
.checkout-page__customer .woocommerce-billing-fields { border-top: 0; padding-top: 0; margin-bottom: var(--space-4); }
.checkout-page__customer .woocommerce-additional-fields:last-of-type { margin-bottom: 0; }

/* Section header (h3) — número monoespaçado + título display */
.checkout-page__customer h3 {
  display: flex; align-items: baseline; gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
  padding: 0;
  counter-increment: ck-section;
}
.checkout-page__customer h3::before {
  content: counter(ck-section, decimal-leading-zero);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-sun);
  font-weight: 600;
  background: transparent;
  width: auto; height: auto;
  display: inline-block;
  margin: 0;
  transform: none;
  vertical-align: baseline;
  flex-shrink: 0;
  padding-top: 4px;
}

/* Field grid (12-col) — controle preciso de larguras */
.checkout-page__customer .woocommerce-billing-fields__field-wrapper,
.checkout-page__customer .woocommerce-shipping-fields__field-wrapper,
.checkout-page__customer .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px 16px; /* row 14 / col 16 — mais compacto que --space-5 */
}

/* Form-row defaults: span 12 mobile (uma coluna) */
.checkout-page__customer .form-row {
  /* Anula width:47%/float do WC */
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 6px; /* gap label→input mais apertado */
  grid-column: span 12;
  position: relative;
}

/* Loading do CEP: spinner discreto enquanto consulta ViaCEP */
.checkout-page__customer .form-row.is-loading .woocommerce-input-wrapper {
  position: relative;
}
.checkout-page__customer .form-row.is-loading .woocommerce-input-wrapper::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  width: 14px; height: 14px;
  margin-top: -7px;
  border: 2px solid rgba(0,0,0,.15);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: veraneo-cep-spin .7s linear infinite;
  pointer-events: none;
}
@keyframes veraneo-cep-spin { to { transform: rotate(360deg); } }

/* Desktop: padrão span-6, com overrides específicos por campo
   (precisamos ser explícitos por id porque o plugin BR aplica .form-row-wide
   em todos os campos persontype/cpf/cnpj/country/state, o que sem overrides
   forçaria todo mundo pra span 12) */
@media (min-width: 720px) {
  .checkout-page__customer .form-row { grid-column: span 6; }
  .checkout-page__customer .notes { grid-column: span 12; }
  /* form-row-wide só pra rows sem id (genéricas) */
  .checkout-page__customer .form-row.form-row-wide:not([id]) { grid-column: span 12; }

  /* === Larguras explícitas por id — todos com !important pra ganhar do plugin === */
  /* Nome | Sobrenome */
  .checkout-page__customer #billing_first_name_field,
  .checkout-page__customer #shipping_first_name_field,
  .checkout-page__customer #billing_last_name_field,
  .checkout-page__customer #shipping_last_name_field { grid-column: span 6 !important; }

  /* Tipo pessoa (6) | CPF/CNPJ (6) */
  .checkout-page__customer #billing_persontype_field { grid-column: span 6 !important; }
  .checkout-page__customer #billing_cpf_field,
  .checkout-page__customer #billing_cnpj_field { grid-column: span 6 !important; }

  /* País (6) + CEP (6) */
  .checkout-page__customer #billing_country_field,
  .checkout-page__customer #shipping_country_field { grid-column: span 6 !important; }
  .checkout-page__customer #billing_postcode_field,
  .checkout-page__customer #shipping_postcode_field { grid-column: span 6 !important; }

  /* Endereço (8) + Número (4) */
  .checkout-page__customer #billing_address_1_field,
  .checkout-page__customer #shipping_address_1_field { grid-column: span 8 !important; }
  .checkout-page__customer #billing_number_field,
  .checkout-page__customer #shipping_number_field { grid-column: span 4 !important; }

  /* Complemento full-width (placeholder longo) */
  .checkout-page__customer #billing_address_2_field,
  .checkout-page__customer #shipping_address_2_field { grid-column: span 12 !important; }

  /* Bairro (6) + Cidade (6) */
  .checkout-page__customer #billing_neighborhood_field,
  .checkout-page__customer #shipping_neighborhood_field { grid-column: span 6 !important; }
  .checkout-page__customer #billing_city_field,
  .checkout-page__customer #shipping_city_field { grid-column: span 6 !important; }

  /* Estado (6) + Celular (6) */
  .checkout-page__customer #billing_state_field,
  .checkout-page__customer #shipping_state_field { grid-column: span 6 !important; }
  .checkout-page__customer #billing_phone_field,
  .checkout-page__customer #shipping_phone_field { grid-column: span 6 !important; }

  /* Email (6) + Data Nascimento (6) */
  .checkout-page__customer #billing_email_field { grid-column: span 6 !important; }
  .checkout-page__customer #billing_birthdate_field { grid-column: span 6 !important; }
}

/* Labels — uppercase mini, refinadas, alinhadas */
.checkout-page__customer .form-row label,
.checkout-page__customer .form-row > label.required_field {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}
.checkout-page__customer .required {
  color: var(--color-sun);
  margin-left: 1px;
  text-decoration: none;
  border: 0;
  font-weight: 700;
  vertical-align: super;
  font-size: 0.7em;
}

/* OVERRIDE: APARTAMENTO label deve ser visível (WC marca como screen-reader-text) */
.checkout-page__customer #billing_address_2_field label,
.checkout-page__customer #shipping_address_2_field label {
  position: static !important;
  width: auto !important; height: auto !important;
  clip: auto !important; clip-path: none !important;
  overflow: visible !important;
  margin: 0 !important;
  white-space: normal !important;
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--color-ink-soft) !important;
  font-weight: 600 !important;
}

/* Wrapper interno */
.checkout-page__customer .woocommerce-input-wrapper { display: block; width: 100%; }
.checkout-page__customer .woocommerce-input-wrapper > * { width: 100%; }

/* INPUTS — outlined (border 1px gray-300, sem fill, radius 8px, altura 48) */
.checkout-page__customer input[type="text"],
.checkout-page__customer input[type="email"],
.checkout-page__customer input[type="tel"],
.checkout-page__customer input[type="number"],
.checkout-page__customer input[type="password"],
.checkout-page__customer input[type="date"],
.checkout-page__customer textarea,
.checkout-page__customer select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-sizing: border-box !important;
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--color-gray-300) !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-size: 15px;
  font-weight: 400;
  font-family: var(--font-sans);
  color: var(--color-ink);
  outline: 0;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  line-height: 1.4 !important;
  box-shadow: none;
  margin: 0;
  vertical-align: middle;
}

/* SELECTS — seta SVG custom em todos */
.checkout-page__customer select {
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%231B1C39' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 14px center !important;
  padding-right: 36px !important;
  cursor: pointer;
}
/* Textarea sobrescreve a altura fixa de 48px — multiline precisa crescer */
.checkout-page__customer textarea {
  height: auto !important;
  min-height: 96px !important;
  max-height: none !important;
  padding: 12px 14px;
  line-height: 1.5 !important;
  resize: vertical;
}

/* Hover + focus */
.checkout-page__customer input:hover:not(:focus),
.checkout-page__customer textarea:hover:not(:focus),
.checkout-page__customer select:hover:not(:focus) {
  border-color: var(--color-ink-soft) !important;
}
.checkout-page__customer input:focus,
.checkout-page__customer textarea:focus,
.checkout-page__customer select:focus {
  border-color: var(--color-ink) !important;
  box-shadow: 0 0 0 3px rgba(27, 28, 57, 0.08);
}
.checkout-page__customer input::placeholder,
.checkout-page__customer textarea::placeholder { color: var(--color-gray-500); font-weight: 400; }

/* Autofill — mantém transparente, sem highlight amarelo */
.checkout-page__customer input:-webkit-autofill,
.checkout-page__customer input:-webkit-autofill:hover,
.checkout-page__customer input:-webkit-autofill:focus,
.checkout-page__customer input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--color-paper) inset !important;
  -webkit-text-fill-color: var(--color-ink) !important;
  caret-color: var(--color-ink);
  transition: background-color 9999s ease-in-out 0s;
}

/* Reset HTML5 validation styling (sem border verde/vermelho do browser) */
.checkout-page__customer input:invalid,
.checkout-page__customer input:valid,
.checkout-page__customer input:user-invalid,
.checkout-page__customer input:user-valid {
  outline: none !important;
}

/* country_to_state / state_select — mesmo padrão outlined */
.checkout-page__customer select.country_to_state,
.checkout-page__customer select.country_to_state--single,
.checkout-page__customer select.state_select {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  line-height: 1.4 !important;
  appearance: none !important; -webkit-appearance: none !important;
  border: 1px solid var(--color-gray-300) !important;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%231B1C39' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 14px center !important;
  border-radius: 8px !important;
  box-shadow: none;
  padding: 0 36px 0 14px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  color: var(--color-ink) !important;
  cursor: pointer;
  margin: 0 !important;
  vertical-align: middle;
}
.checkout-page__customer select.country_to_state:focus,
.checkout-page__customer select.state_select:focus {
  border-color: var(--color-ink) !important;
  box-shadow: 0 0 0 3px rgba(27, 28, 57, 0.08);
}

/* Select2 (caso esteja ativo) — herda visual outlined */
.checkout-page__customer .select2-container--default .select2-selection--single {
  box-sizing: border-box !important;
  border: 1px solid var(--color-gray-300) !important;
  border-radius: 8px !important;
  background: transparent !important;
  padding: 0 14px !important;
  height: 48px !important;
  min-height: 48px !important;
  box-shadow: none;
}
.checkout-page__customer .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 48px !important; padding: 0 24px 0 0 !important; color: var(--color-ink) !important;
  font-size: 15px;
}
.checkout-page__customer .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 48px !important; right: 8px !important;
}

/* PAÍS read-only (caso vire <strong>) — outlined igual aos inputs */
.checkout-page__customer #billing_country_field strong,
.checkout-page__customer #shipping_country_field strong,
.checkout-page__customer .form-row .woocommerce-input-wrapper > strong {
  display: inline-flex; align-items: center;
  box-sizing: border-box;
  height: 48px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--color-gray-300);
  border-radius: 8px;
  box-shadow: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
  width: 100%;
}

/* "Entregar em endereço diferente" — virado em toggle limpo */
.checkout-page__customer .woocommerce-shipping-fields {
  border-top: 1px dashed var(--color-gray-300);
  padding-top: var(--space-4);
  padding-bottom: 0;
  margin-bottom: var(--space-4);
}
.checkout-page__customer .woocommerce-shipping-fields h3 {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
  margin-bottom: 0;
  counter-increment: none;
}
.checkout-page__customer .woocommerce-shipping-fields h3::before { display: none; content: none; }
.checkout-page__customer #ship-to-different-address-checkbox {
  appearance: none !important; -webkit-appearance: none !important;
  box-sizing: border-box !important;
  width: 18px; height: 18px;
  border: 1.5px solid var(--color-ink) !important;
  border-radius: 3px !important;
  background: var(--color-paper) !important; cursor: pointer;
  position: relative;
  margin: 0 !important; padding: 0 !important;
  flex-shrink: 0;
  box-shadow: none !important;
  height: 18px !important;
}
.checkout-page__customer #ship-to-different-address-checkbox:checked {
  background: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
}
.checkout-page__customer #ship-to-different-address-checkbox:checked::after {
  content: ""; position: absolute;
  top: 2px; left: 5px;
  width: 5px; height: 9px;
  border: solid var(--color-sand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkout-page__customer #ship-to-different-address-checkbox + label,
.checkout-page__customer #ship-to-different-address-checkbox + span {
  font-size: var(--fs-small);
  letter-spacing: 0; text-transform: none;
  color: var(--color-ink); font-weight: 500;
  cursor: pointer;
  margin: 0;
}

/* Label engloba checkbox + texto (markup default do WC).
   Faz da própria label o container flex pra alinhar verticalmente.
   line-height:1 colapsa o leading do texto pro line-box bater com a altura
   do checkbox — sem isso, a métrica da fonte joga o glifo pra cima do centro. */
.checkout-page__customer .woocommerce-shipping-fields h3 label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  line-height: 1;
}
/* Field wrapper do shipping aparece com margem só quando aberto */
.checkout-page__customer .shipping_address {
  margin-top: var(--space-3);
}

/* Esconde os campos de shipping quando checkbox não está marcado.
   Usa :has() (suporte amplo em browsers modernos). Se WC JS rodar e
   adicionar style="display:block" inline, ele vence essa regra. */
.checkout-page__customer:has(#ship-to-different-address-checkbox:not(:checked)) .shipping_address {
  display: none;
}

/* Order notes textarea */
.checkout-page__customer .notes textarea { min-height: 100px; }

/* Trust signals — equilibram a coluna e reforçam confiança */
.checkout-trust {
  list-style: none; padding: 0; margin: var(--space-5) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-gray-100);
}
@media (min-width: 720px) {
  .checkout-trust { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}
.checkout-trust__item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 0;
}
.checkout-trust__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-bone);
  color: var(--color-sun);
  flex-shrink: 0;
}
.checkout-trust__item div {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.checkout-trust__item strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.3;
}
.checkout-trust__item span {
  font-size: 11.5px;
  color: var(--color-gray-700);
  line-height: 1.4;
}

/* ============== SIDEBAR (direita) ================================ */
.checkout-page__summary { min-width: 0; }
@media (min-width: 1024px) {
  .checkout-page__summary { position: sticky; top: 100px; }
}
.checkout-page__summary-inner {
  background: var(--color-bone);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex; flex-direction: column;
}

.checkout-page__summary-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-gray-300);
}
.checkout-page__summary-head h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  margin: 0;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--color-ink);
}
.checkout-page__summary-edit {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--color-gray-300);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.checkout-page__summary-edit:hover { color: var(--color-sun); border-color: var(--color-sun); }

/* Items list */
.checkout-summary { display: flex; flex-direction: column; gap: var(--space-5); }
.checkout-summary__items {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.checkout-summary__item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
}
.checkout-summary__item-thumb {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 4px;
  background: var(--color-paper);
}
.checkout-summary__item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; }
.checkout-summary__item-qty {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  background: var(--color-ink);
  color: var(--color-sand);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  line-height: 1;
}
.checkout-summary__item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checkout-summary__item-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.35;
}
.checkout-summary__item-meta {
  font-size: 11px;
  color: var(--color-gray-500);
  line-height: 1.3;
}
.checkout-summary__item-meta dl { margin: 0; display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 11px; }
.checkout-summary__item-meta dt { font-weight: 500; }
.checkout-summary__item-meta dd { margin: 0; }
.checkout-summary__item-price {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Totals */
.checkout-summary__totals {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-gray-300);
  display: flex; flex-direction: column;
}
.checkout-summary__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-block: 8px;
  font-size: 13.5px;
  gap: var(--space-3);
}
.checkout-summary__row dt {
  color: var(--color-gray-700);
  font-weight: 400;
  display: flex; flex-direction: column; gap: 2px;
}
.checkout-summary__row-sub {
  font-size: 11px;
  color: var(--color-gray-500);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.checkout-summary__row dd {
  margin: 0;
  font-weight: 600;
  color: var(--color-ink);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.checkout-summary__row dd .amount,
.checkout-summary__row dd bdi { color: var(--color-ink); font-weight: 600; }
.checkout-summary__row--discount dd { color: var(--color-sun); }

.checkout-summary__row--total {
  border-top: 1px solid var(--color-ink);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  align-items: center;
}
.checkout-summary__row--total dt {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 600;
}
.checkout-summary__row--total dd,
.checkout-summary__row--total dd .amount,
.checkout-summary__row--total dd bdi {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  line-height: 1;
}

/* Métodos de envio — sempre visíveis entre Subtotal e Total */
.checkout-shipping {
  border: 0; padding: 0; margin: 0;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-gray-300);
}
.checkout-shipping__legend {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 600;
  padding: 0;
  margin: 0 0 12px;
  display: block;
}
.checkout-shipping__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.checkout-shipping__item {
  position: relative;
  background: var(--color-paper);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--color-gray-300);
  transition: box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.checkout-shipping__item:hover { box-shadow: inset 0 0 0 1px var(--color-ink-soft); }
.checkout-shipping__item.is-selected {
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
  background: var(--color-paper);
}

/* Radio — visualmente nativo, mas redesenhado */
.checkout-shipping__radio {
  appearance: none !important; -webkit-appearance: none !important;
  position: absolute;
  top: 50%; left: 14px;
  transform: translateY(-50%);
  width: 18px !important; height: 18px !important;
  border: 1.5px solid var(--color-gray-300) !important;
  border-radius: 50% !important;
  background: var(--color-paper) !important;
  cursor: pointer;
  margin: 0 !important; padding: 0 !important;
  box-shadow: none !important;
}
.checkout-shipping__radio:checked {
  border-color: var(--color-ink) !important;
}
.checkout-shipping__radio:checked::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 9px; height: 9px;
  background: var(--color-sun);
  border-radius: 50%;
}

/* Label clicável cobre todo o item */
.checkout-shipping__label {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 11px 14px 11px 44px;
  cursor: pointer;
  line-height: 1.35;
  margin: 0 !important;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
  font-weight: 500;
}
.checkout-shipping__name {
  flex: 1; min-width: 0;
  font-size: 13px;
  color: var(--color-ink);
  font-weight: 500;
}
.checkout-shipping__item.is-selected .checkout-shipping__name { font-weight: 600; }
.checkout-shipping__price {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.checkout-shipping__empty {
  font-size: 12.5px;
  color: var(--color-gray-700);
  background: var(--color-paper);
  padding: 12px 14px;
  border-radius: 6px;
  margin: 0;
}

/* Bloco final (Total) — sem border-top do dl original, pq vem depois do shipping */
.checkout-summary__totals--final {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.checkout-summary__totals--final .checkout-summary__row--total {
  border-top: 1px solid var(--color-ink);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
}

/* Cupom toggle */
.checkout-coupon {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px dashed var(--color-gray-300);
}
.checkout-coupon__toggle {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 600;
}
.checkout-coupon__toggle::-webkit-details-marker { display: none; }
.checkout-coupon__toggle:hover { color: var(--color-sun); }
.checkout-coupon__toggle-icon {
  width: 18px; height: 18px;
  border: 1px solid currentColor; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
  margin-left: auto;
}
.checkout-coupon__toggle-icon::before, .checkout-coupon__toggle-icon::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out);
}
.checkout-coupon__toggle-icon::before { width: 8px; height: 1px; }
.checkout-coupon__toggle-icon::after { width: 1px; height: 8px; }
.checkout-coupon[open] .checkout-coupon__toggle-icon::after { transform: scaleY(0); }
.checkout-coupon__body { padding-top: var(--space-3); }
.checkout-coupon__row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-2);
}
.checkout-coupon__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-gray-300);
  background: var(--color-paper);
  border-radius: 4px;
  font-size: var(--fs-small);
  font-family: var(--font-sans);
  color: var(--color-ink);
  outline: 0;
}
.checkout-coupon__input:focus { border-color: var(--color-ink); }
.checkout-coupon__btn {
  padding: 10px 16px;
  background: var(--color-ink);
  color: var(--color-sand);
  border: 1px solid var(--color-ink);
  border-radius: 4px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.checkout-coupon__btn:hover { background: var(--color-sun); border-color: var(--color-sun); color: var(--color-paper); }

/* Payment block */
.checkout-page__summary #payment {
  background: transparent;
  margin-top: var(--space-5);
  padding: 0;
}
.checkout-page__summary #payment .wc_payment_methods,
.checkout-page__summary #payment ul.payment_methods {
  list-style: none; padding: 0; margin: 0 0 var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
/* LI vira flex pra alinhar radio + label/icon na mesma linha;
   payment_box wrappa pra próxima linha em 100% via flex-basis */
.checkout-page__summary #payment ul.payment_methods > li.wc_payment_method {
  background: var(--color-paper);
  border-radius: 6px;
  padding: 14px;
  transition: box-shadow var(--dur-fast) var(--ease-out);
  box-shadow: inset 0 0 0 1px var(--color-gray-300);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
}
.checkout-page__summary #payment ul.payment_methods > li.wc_payment_method:has(input:checked) {
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}
.checkout-page__summary #payment ul.payment_methods input[type="radio"] {
  appearance: none !important; -webkit-appearance: none !important;
  width: 18px !important; height: 18px !important;
  border: 1.5px solid var(--color-gray-300) !important; border-radius: 50% !important;
  background: var(--color-paper) !important; cursor: pointer; position: relative;
  margin: 0 !important; vertical-align: middle;
  box-shadow: none !important;
  flex-shrink: 0;
}
.checkout-page__summary #payment ul.payment_methods input[type="radio"]:checked { border-color: var(--color-ink) !important; }
.checkout-page__summary #payment ul.payment_methods input[type="radio"]:checked::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 9px; height: 9px;
  background: var(--color-sun); border-radius: 50%;
}
/* Label vira inline-flex — texto à esquerda, ícone empurrado pra direita */
.checkout-page__summary #payment ul.payment_methods label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500; font-size: 14px;
  letter-spacing: 0; text-transform: none; color: var(--color-ink); cursor: pointer;
  margin: 0;
  flex: 1;
  min-width: 0;
}
.checkout-page__summary #payment ul.payment_methods label img {
  vertical-align: middle;
  max-height: 20px;
  width: auto;
  margin: 0 0 0 auto !important;
  display: inline-block;
  flex-shrink: 0;
}
/* Payment box (descrição + steps) — 100% width na próxima linha */
.checkout-page__summary #payment ul.payment_methods .payment_box {
  flex-basis: 100%;
  background: var(--color-bone);
  padding: var(--space-4);
  margin-top: var(--space-3);
  border-radius: 6px;
  font-size: 13px; color: var(--color-gray-700);
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
}
.checkout-page__summary #payment ul.payment_methods .payment_box::before { display: none; }
.checkout-page__summary #payment ul.payment_methods .payment_box p { margin: 0 0 var(--space-2); }
.checkout-page__summary #payment ul.payment_methods .payment_box ol,
.checkout-page__summary #payment ul.payment_methods .payment_box ul {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pix-step;
  display: flex; flex-direction: column; gap: 10px;
}
.checkout-page__summary #payment ul.payment_methods .payment_box ol li {
  counter-increment: pix-step;
  position: relative;
  padding-left: 28px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-gray-700);
}
.checkout-page__summary #payment ul.payment_methods .payment_box ol li::before {
  content: counter(pix-step);
  position: absolute; left: 0; top: 0;
  width: 20px; height: 20px;
  background: var(--color-ink); color: var(--color-sand);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* PIX steps do plugin AppMax — full-width, compactos verticalmente
   (todas as regras com !important pra ganhar do CSS do plugin) */
.payment_box .pagamentos-para-woocommerce-com-appmax--wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: var(--space-3) 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
  align-items: stretch !important;
  list-style: none !important;
}
.payment_box .pagamentos-para-woocommerce-com-appmax--step {
  position: relative !important;
  display: block !important;
  padding: 12px 14px 12px 44px !important;
  background: var(--color-paper) !important;
  border-radius: 6px !important;
  text-align: left !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
}
.payment_box .pagamentos-para-woocommerce-com-appmax--step::before {
  content: attr(data-step) !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  background: var(--color-ink) !important;
  color: var(--color-sand) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  border: 0 !important;
  box-shadow: none !important;
}
.payment_box .pagamentos-para-woocommerce-com-appmax--step p {
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  color: var(--color-gray-700) !important;
  text-align: left !important;
}

/* ── Cartão de Crédito (AppMax) — bandeiras + mockup + form ─────────── */
/* Bandeiras (AmEx, Visa, Master, etc.) — row inline, menores e dessaturadas */
.payment_box .card-flags {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 0 var(--space-4) !important;
  padding: 12px !important;
  background: var(--color-paper);
  border-radius: 6px;
  text-align: left !important;
}
.payment_box .card-flags > svg,
.payment_box .card-flags > img {
  width: 32px !important;
  height: auto !important;
  max-height: 22px !important;
  display: inline-block !important;
  margin: 0 !important;
  filter: grayscale(0.2);
  opacity: 0.85;
  transition: all var(--dur-fast) var(--ease-out);
}
.payment_box .card-flags > svg.active,
.payment_box .card-flags > img.active {
  filter: none;
  opacity: 1;
  transform: scale(1.1);
}

/* Card mockup — paleta brand (ink + sun) em vez do gradient padrão pastel */
.payment_box .credit-card {
  background: linear-gradient(135deg, var(--color-ink) 0%, #2a2c5c 60%, var(--color-ink) 100%) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 180px !important;
  margin: 0 0 var(--space-5) !important;
  box-sizing: border-box !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 12px 32px -10px rgba(27, 28, 57, 0.35),
    0 4px 12px -4px rgba(27, 28, 57, 0.2);
  color: var(--color-sand) !important;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
}
/* Decoração orgânica — bolha sun no canto */
.payment_box .credit-card::before {
  content: "";
  position: absolute;
  right: -30%;
  top: -50%;
  width: 80%;
  aspect-ratio: 1/1;
  background: radial-gradient(circle, var(--color-sun) 0%, transparent 70%);
  opacity: 0.3;
  pointer-events: none;
}
/* Chip dourado do cartão */
.payment_box .credit-card .credit-card-chip {
  width: 42px !important;
  height: auto !important;
  fill: var(--color-sun) !important;
  position: relative; z-index: 1;
}
.payment_box .credit-card .credit-card-chip path { fill: var(--color-sun) !important; }

/* Linhas internas */
.payment_box .credit-card .credit-card-flex-row {
  display: flex !important;
  gap: 16px;
  align-items: flex-end;
  position: relative; z-index: 1;
}
.payment_box .credit-card .credit-card-flex-column {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}
/* Coluna do nome ganha mais espaço (texto mais longo) */
.payment_box .credit-card .credit-card-flex-row > .credit-card-flex-column:first-child { flex: 2 1 0; }

/* Labels dentro do card */
.payment_box .credit-card .credit-card-label,
.payment_box .credit-card .credit-card-title {
  font-family: var(--font-sans) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(253, 239, 217, 0.6) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Valores dinâmicos */
.payment_box .credit-card .credit-card-value {
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--color-sand) !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  min-height: 1.2em;
}

/* Form do cartão (campos abaixo do mockup)
   Estrutura: wrapper → fieldset.wc-credit-card-form → <p class="form-row...">.
   Como os campos estão dentro do FIELDSET (não do wrapper direto), aplicamos
   o grid 2-col NO FIELDSET. */
.payment_box .wc-credit-card-form,
.payment_box .wc-payment-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) 12px;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
/* Wide rows (form-row-wide e <p> sem classe específica) ocupam full width */
.payment_box .wc-credit-card-form > p,
.payment_box .wc-credit-card-form > .form-row,
.payment_box .wc-payment-form > p,
.payment_box .wc-payment-form > .form-row {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  grid-column: 1 / -1;
}
/* form-row-first + form-row-last viram metade cada (lado a lado) */
.payment_box .wc-credit-card-form > p.form-row-first,
.payment_box .wc-payment-form > p.form-row-first {
  grid-column: 1 / 2 !important;
}
.payment_box .wc-credit-card-form > p.form-row-last,
.payment_box .wc-payment-form > p.form-row-last {
  grid-column: 2 / 3 !important;
}
/* Garantir que o fieldset ocupe full width DENTRO do wrapper pai
   (caso o wrapper tenha qualquer grid/flex próprio do plugin) */
.payment_box [id$="credit_card"] > .wc-credit-card-form,
.payment_box [id$="credit_card"] > .wc-payment-form,
.payment_box [id$="credit_card"] .wc-credit-card-form,
.payment_box [id$="credit_card"] .wc-payment-form {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* Labels do form do cartão — eyebrow style consistente */
.payment_box .wc-credit-card-form label,
.payment_box .wc-payment-form label,
.payment_box .form-row label {
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--color-ink-soft) !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  font-family: var(--font-sans) !important;
}
.payment_box .form-row .required {
  color: var(--color-sun);
  margin-left: 1px;
  font-weight: 700;
  vertical-align: super;
  font-size: 0.7em;
  border: 0;
  text-decoration: none;
}

/* Inputs do form do cartão — outlined, mesma altura/visual do checkout */
.payment_box input[type="text"],
.payment_box input[type="number"],
.payment_box input[type="tel"],
.payment_box select {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid var(--color-gray-300) !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: var(--font-sans) !important;
  color: var(--color-ink) !important;
  outline: 0 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.payment_box select {
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%231B1C39' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 12px center !important;
  padding-right: 32px !important;
  cursor: pointer;
}
.payment_box input:focus,
.payment_box select:focus {
  border-color: var(--color-ink) !important;
  box-shadow: 0 0 0 3px rgba(27, 28, 57, 0.08) !important;
}
.payment_box input::placeholder { color: var(--color-gray-500); font-weight: 400; }

/* Terms */
.checkout-page__summary #payment .terms,
.checkout-page__summary #payment .woocommerce-terms-and-conditions-wrapper {
  font-size: 11.5px;
  color: var(--color-gray-500);
  line-height: 1.5;
  padding: var(--space-3) 0;
  margin: 0;
}
.checkout-page__summary #payment .terms a,
.checkout-page__summary #payment .woocommerce-terms-and-conditions-wrapper a {
  color: var(--color-ink); border-bottom: 1px solid currentColor;
}

/* CONFIRMAR PEDIDO — botão principal */
.checkout-page__summary #payment .place-order { margin-top: var(--space-4); padding: 0; }
.checkout-page__summary #payment #place_order {
  width: 100%;
  padding: 18px 28px;
  background: var(--color-sun);
  color: var(--color-paper);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(243, 146, 0, 0.25);
}
.checkout-page__summary #payment #place_order::after {
  content: "→";
  transition: transform var(--dur-base) var(--ease-out);
  font-size: 16px; line-height: 1;
}
.checkout-page__summary #payment #place_order:hover {
  background: var(--color-ink);
  color: var(--color-sand);
  box-shadow: 0 6px 20px rgba(27, 28, 57, 0.25);
  transform: translateY(-1px);
}
.checkout-page__summary #payment #place_order:hover::after { transform: translateX(4px); }
.checkout-page__summary #payment #place_order:active { transform: translateY(0); }

/* Loading state */
.processing .blockUI.blockOverlay { background: rgba(250, 248, 244, 0.7) !important; }

/* Gate (sem login) */
.checkout-page--gate .checkout-page__gate { text-align: center; max-width: 56ch; margin: 0 auto; padding-block: var(--space-9); }
.checkout-page__gate-actions { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   28. THANK YOU
   --------------------------------------------------------------------- */
.thankyou { padding-block: var(--space-10); }
.thankyou__head { max-width: 64ch; margin-bottom: var(--space-8); }
.thankyou__title { font-size: clamp(2.5rem, 1.5rem + 3.5vw, 5rem); line-height: 0.95; letter-spacing: -0.025em; margin: var(--space-4) 0; }
.thankyou__title em { color: var(--color-sun); font-style: normal; }
.thankyou__lead { font-size: var(--fs-lead); color: var(--color-gray-700); max-width: 56ch; }

.thankyou__meta {
  display: grid; grid-template-columns: 1fr; gap: 0;
  list-style: none; padding: 0; margin-block: var(--space-7);
  border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink);
}
@media (min-width: 768px) {
  .thankyou__meta { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
.thankyou__meta li {
  padding: var(--space-5);
  border-right: 1px solid var(--color-gray-300);
  display: flex; flex-direction: column; gap: var(--space-2);
}
@media (max-width: 767px) {
  .thankyou__meta li { border-right: 0; border-bottom: 1px solid var(--color-gray-300); }
  .thankyou__meta li:last-child { border-bottom: 0; }
}
.thankyou__meta li:last-child { border-right: 0; }
.thankyou__meta strong { font-family: var(--font-display); font-size: var(--fs-h6); font-weight: 700; letter-spacing: -0.01em; color: var(--color-ink); }

.thankyou__actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }

/* Bank/PIX/Boleto details */
.thankyou .woocommerce-bacs-bank-details,
.thankyou .woocommerce-order-overview,
.thankyou .woocommerce-order-details {
  margin-top: var(--space-7);
  padding: var(--space-6);
  background: var(--color-bone);
  border-radius: var(--radius-md);
}
.thankyou .woocommerce-order-details h2,
.thankyou .woocommerce-order-details__title { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem); line-height: clamp(2rem, 1.8rem + 0.6vw, 2.5rem); margin-bottom: var(--space-4); letter-spacing: -0.015em; }
.thankyou .woocommerce-table--order-details { width: 100%; border-collapse: collapse; }
.thankyou .woocommerce-table--order-details th, .thankyou .woocommerce-table--order-details td {
  padding: 12px 0; border-bottom: 1px dashed var(--color-gray-300);
  text-align: left; font-size: var(--fs-small);
}

/* ---------------------------------------------------------------------
   29. AUTH (login + register)
   --------------------------------------------------------------------- */
.auth { padding-block: var(--space-9) var(--space-10); }
.auth__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start; /* topo de ambas colunas alinhado */
}
@media (min-width: 1024px) {
  .auth__layout { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
}

.auth__aside { padding: 0; }
.auth__aside-title {
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  line-height: 1; letter-spacing: -0.025em;
  margin: var(--space-4) 0 var(--space-5);
}
.auth__aside-title em { color: var(--color-sun); font-style: normal; }
.auth__aside-text { color: var(--color-gray-700); font-size: var(--fs-lead); margin-bottom: var(--space-6); max-width: 44ch; }
.auth__aside-perks { display: flex; flex-direction: column; gap: var(--space-3); }
.auth__aside-perks li {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-small); color: var(--color-gray-700);
}
.auth__aside-perks li::before {
  content: "+"; color: var(--color-sun); font-weight: 700; font-size: 1.2em;
  width: 24px; height: 24px; border: 1px solid var(--color-sun); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.auth__card {
  background: var(--color-bone);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-6);
}
@media (min-width: 768px) { .auth__card { padding: var(--space-8) var(--space-7); } }

.auth__card-head { margin-bottom: var(--space-6); }
.auth__card-title { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem); line-height: clamp(2rem, 1.8rem + 0.6vw, 2.5rem); margin-bottom: var(--space-2); letter-spacing: -0.02em; }
.auth__card-text { color: var(--color-gray-700); font-size: var(--fs-small); }
.auth__link { color: var(--color-sun); border-bottom: 1px solid currentColor; }
.auth__link:hover { color: var(--color-ink); }

/* Remove o border/padding/radius/margin default que o WC aplica em form.login/form.register */
.auth__form.login,
.auth__form.register,
.woocommerce form.login.auth__form,
.woocommerce form.register.auth__form {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Grid 12-col pro form: first/last viram metade, todo o resto full width */
.auth__form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
}
/* DEFAULT: qualquer child direto ocupa 12 cols (full). Isso pega <p> simples
   sem classe (ex: WC privacy policy text injetado via action hook). */
.auth__form > * { grid-column: 1 / -1; }

.auth__form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}
/* OVERRIDE: só os first/last viram metade */
.auth__form > .form-row-first { grid-column: span 6; }
.auth__form > .form-row-last  { grid-column: span 6; }
@media (max-width: 540px) {
  .auth__form > .form-row-first,
  .auth__form > .form-row-last { grid-column: 1 / -1; }
}

.auth__form .form-row--note { color: var(--color-gray-700); font-size: var(--fs-small); padding: var(--space-3); background: var(--color-stone); border-radius: var(--radius-sm); }
.auth__form .form-row--checkbox {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2) !important;
}
.auth__form .form-row--checkbox .auth__remember { margin-right: auto; }
.auth__form .form-row--checkbox .auth__forgot { margin-left: auto; }
.auth__form .form-row--submit { margin-top: var(--space-3) !important; }
.auth__form label { font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-soft); font-weight: 500; }
.auth__form .required { color: var(--color-sun); }

/* Inputs do auth — full-width dentro da célula do grid + visual consistente com checkout
   Usa !important pra vencer o WC default (.woocommerce form .form-row .input-text)
   e os defaults do Brazilian Checkout Fields. */
.auth__form input[type="text"],
.auth__form input[type="email"],
.auth__form input[type="password"],
.auth__form input[type="tel"],
.auth__form input[type="date"],
.auth__form input[type="number"],
.auth__form input.input-text,
.auth__form input.field,
.auth__form input.woocommerce-Input,
.auth__form select {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border: 1px solid var(--color-gray-300);
  background: var(--color-paper);
  border-radius: 8px;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--color-ink);
  outline: 0;
  margin: 0;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* Password com toggle eye precisa de padding-right pra acomodar o ícone */
.auth__form input[type="password"] { padding-right: 44px !important; }
.auth__form input:hover:not(:focus) { border-color: var(--color-ink-soft); }
.auth__form input:focus {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px rgba(27, 28, 57, 0.08);
}

.auth__remember { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); cursor: pointer; }
.auth__forgot { font-size: var(--fs-small); color: var(--color-ink-soft); border-bottom: 1px solid currentColor; }
.auth__forgot:hover { color: var(--color-sun); }

/* ---------------------------------------------------------------------
   30. ACCOUNT (logged area)
   --------------------------------------------------------------------- */
.account { padding-block: var(--space-9) var(--space-10); }
.account__head { margin-bottom: var(--space-7); }
.account__title { font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); line-height: 1; letter-spacing: -0.025em; margin-top: var(--space-3); }
.account__title em { color: var(--color-sun); font-style: normal; }

.account__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .account__layout { grid-template-columns: 240px 1fr; gap: var(--space-8); align-items: start; }
}

/* WC nav reset */
.account__nav .woocommerce-MyAccount-navigation { display: block; width: 100%; }
.account__nav .woocommerce-MyAccount-navigation ul {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--color-ink);
  display: block; width: 100%;
}
.account__nav .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--color-ink);
  display: block; width: 100%; margin: 0; padding: 0;
  white-space: normal;
}
.account__nav .woocommerce-MyAccount-navigation a {
  display: block; width: 100%;
  padding: 14px 0;
  font-size: var(--fs-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 500;
  color: var(--color-ink); transition: all var(--dur-fast) var(--ease-out); position: relative;
}
.account__nav .woocommerce-MyAccount-navigation a::before {
  content: "→"; opacity: 0; margin-right: 0; transition: all var(--dur-fast) var(--ease-out);
  color: var(--color-sun); display: inline-block;
}
.account__nav .woocommerce-MyAccount-navigation a:hover { color: var(--color-sun); padding-left: var(--space-3); }
.account__nav .woocommerce-MyAccount-navigation a:hover::before { opacity: 1; margin-right: 4px; }
.account__nav .woocommerce-MyAccount-navigation li.is-active a,
.account__nav .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a { color: var(--color-sun); padding-left: var(--space-3); }
.account__nav .woocommerce-MyAccount-navigation li.is-active a::before { opacity: 1; margin-right: 4px; }

/* Anula o float:right + width:73% que o WC default aplica em
   .woocommerce-MyAccount-content (e o float:left/22% no nav) — usamos grid. */
.account__content,
.woocommerce-account .woocommerce-MyAccount-content {
  min-width: 0;
  width: 100% !important;
  float: none !important;
}
.account__nav,
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none !important;
  width: 100% !important;
}

/* Headings genéricos do conteúdo */
.account__content h2 { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem); line-height: clamp(2rem, 1.8rem + 0.6vw, 2.5rem); margin-bottom: var(--space-4); letter-spacing: -0.01em; }
.account__content h3 { font-size: var(--fs-h6); margin-bottom: var(--space-4); letter-spacing: -0.01em; }

/* Tabela de pedidos */
.account__content .woocommerce-orders-table {
  width: 100%; border-collapse: collapse;
  border-top: 1px solid var(--color-ink);
}
.account__content .woocommerce-orders-table th, .account__content .woocommerce-orders-table td {
  padding: var(--space-4) var(--space-3); text-align: left;
  border-bottom: 1px solid var(--color-gray-100); font-size: var(--fs-small);
}
.account__content .woocommerce-orders-table thead th {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-uber); text-transform: uppercase; color: var(--color-ink-soft); font-weight: 500;
  border-bottom-color: var(--color-ink);
}
.account__content .woocommerce-orders-table .button {
  display: inline-flex; padding: 8px 16px; background: var(--color-ink); color: var(--color-sand);
  border-radius: var(--radius-pill); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 500; text-decoration: none;
}
.account__content .woocommerce-orders-table .button:hover { background: var(--color-sun); }

/* Botão genérico nas páginas de account */
.account__content .button {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 14px 24px;
  background: var(--color-ink); color: var(--color-sand); border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.account__content .button:hover { background: var(--color-sun); border-color: var(--color-sun); color: var(--color-paper); }

/* Endereços */
.account__content .woocommerce-Addresses { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-5); }
@media (min-width: 768px) { .account__content .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } }
.account__content .woocommerce-Address { background: var(--color-bone); padding: var(--space-5); border-radius: var(--radius-md); }
.account__content .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.account__content .woocommerce-Address-title h2 { margin: 0; font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem); line-height: clamp(2rem, 1.8rem + 0.6vw, 2.5rem); }
.account__content .woocommerce-Address-title h3 { margin: 0; font-size: var(--fs-h6); }
.account__content .woocommerce-Address address { font-style: normal; font-size: var(--fs-small); color: var(--color-gray-700); line-height: 1.6; }

/* Dashboard */
.dashboard__welcome { font-size: var(--fs-lead); }
.dashboard__welcome a { color: var(--color-sun); border-bottom: 1px solid currentColor; }
.dashboard__lead { color: var(--color-gray-700); margin-block: var(--space-4) var(--space-7); max-width: 64ch; }

.dashboard__stats {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  margin-bottom: var(--space-8);
}
@media (min-width: 640px) { .dashboard__stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dashboard__stats { grid-template-columns: repeat(4, 1fr); } }
.dashboard__stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-bone);
  border-radius: var(--radius-md);
  text-decoration: none; color: var(--color-ink);
  transition: transform var(--dur-base) var(--ease-out);
  position: relative;
}
.dashboard__stat > :not(.t-eyebrow) { align-self: stretch; }
.dashboard__stat:hover { transform: translateY(-3px); }
.dashboard__stat strong { font-family: var(--font-display); font-size: var(--fs-h4); letter-spacing: -0.02em; line-height: 1; color: var(--color-ink); }
.dashboard__stat-link {
  margin-top: var(--space-3);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-uber); text-transform: uppercase;
  color: var(--color-sun); font-weight: 500;
}

.dashboard__section { margin-block: var(--space-7); }
.dashboard__section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); flex-wrap: wrap; gap: var(--space-3); }
.dashboard__section-title { font-size: var(--fs-h6); margin: 0; }

.dashboard__orders { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--color-ink); }
.dashboard__order {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-4); align-items: center;
  padding: var(--space-4) 0; border-bottom: 1px solid var(--color-gray-100);
}
.dashboard__order-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.dashboard__order-date { font-size: var(--fs-small); color: var(--color-gray-700); }
.dashboard__order-info { display: flex; flex-direction: column; gap: 4px; }
.dashboard__order-status { font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-uber); text-transform: uppercase; color: var(--color-ink-soft); }
.dashboard__order-total { font-weight: 500; color: var(--color-ink); }
.dashboard__order-cta { font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-uber); text-transform: uppercase; color: var(--color-sun); font-weight: 500; }

/* ===== ACCOUNT SUBPAGES — refinement ===== */

/* Header padrão de cada subpágina */
.account__page-head { margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-gray-100); }
.account__page-title { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem); line-height: clamp(2rem, 1.8rem + 0.6vw, 2.5rem); margin: 0 0 var(--space-2); letter-spacing: -0.015em; }
.account__page-text { color: var(--color-gray-700); font-size: var(--fs-small); margin: 0; max-width: 60ch; }
.account__back {
  display: inline-flex; align-items: center;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-uber); text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-3);
  transition: color var(--dur-fast) var(--ease-out);
}
.account__back:hover { color: var(--color-sun); }

.account__empty {
  padding: var(--space-7) var(--space-5); text-align: center;
  background: var(--color-bone); border-radius: var(--radius-md);
  color: var(--color-gray-700);
}
.account__empty p { margin-bottom: var(--space-4); }

.account__pagination { margin-top: var(--space-5); display: flex; gap: var(--space-3); }
.btn--small { padding: 10px 18px; font-size: var(--fs-eyebrow); }

/* Status pills (orders) */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 10px; letter-spacing: var(--tracking-uber); text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill--completed   { background: rgba(46, 125, 50, 0.1);  color: #2e7d32; }
.status-pill--processing  { background: rgba(243, 146, 0, 0.12); color: #b87000; }
.status-pill--em-producao { background: rgba(106, 27, 154, 0.10); color: #6a1b9a; }
.status-pill--enviado     { background: rgba(21, 101, 192, 0.10); color: #1565c0; }
.status-pill--on-hold     { background: rgba(255, 193, 7, 0.15); color: #a07300; }
.status-pill--pending     { background: rgba(120, 120, 120, 0.12); color: #555; }
.status-pill--cancelled   { background: rgba(120, 120, 120, 0.10); color: #767676; }
.status-pill--refunded    { background: rgba(120, 120, 120, 0.10); color: #767676; }
.status-pill--failed      { background: rgba(192, 57, 43, 0.12); color: #c0392b; }

/* Tabela de pedidos */
.account-orders { overflow-x: auto; }
.account-orders__table {
  width: 100%; border-collapse: collapse;
  border-top: 1px solid var(--color-ink);
}
.account-orders__th {
  padding: var(--space-4) var(--space-3); text-align: left;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-uber); text-transform: uppercase;
  color: var(--color-ink-soft); font-weight: 500;
  border-bottom: 1px solid var(--color-ink); white-space: nowrap;
}
.account-orders__td {
  padding: var(--space-4) var(--space-3); text-align: left;
  border-bottom: 1px solid var(--color-gray-100); font-size: var(--fs-small); vertical-align: middle;
}
.account-orders__row:hover { background: var(--color-bone); }
.account-orders__num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); color: var(--color-ink); }
.account-orders__num:hover { color: var(--color-sun); }
.account-orders__total { display: block; font-weight: 500; color: var(--color-ink); }
.account-orders__items { display: block; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide); color: var(--color-ink-soft); margin-top: 2px; }

.account-orders__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.account-orders__action {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  background: var(--color-ink); color: var(--color-sand);
  border-radius: var(--radius-pill);
  font-size: 10px; letter-spacing: var(--tracking-uber); text-transform: uppercase; font-weight: 500;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.account-orders__action:hover { background: var(--color-sun); color: var(--color-paper); }
.account-orders__action--cancel { background: transparent; color: var(--color-ink-soft); border: 1px solid var(--color-gray-300); }
.account-orders__action--cancel:hover { background: #c0392b; border-color: #c0392b; color: var(--color-paper); }
.account-orders__action--pay { background: var(--color-sun); color: var(--color-paper); }
.account-orders__action--pay:hover { background: var(--color-ink); }

/* Address cards (grid) */
.address-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 768px) { .address-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
.address-card {
  background: var(--color-bone);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}
.address-card__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--space-3); margin-bottom: var(--space-3);
  border-bottom: 1px dashed var(--color-gray-300);
}
.address-card__title { font-size: var(--fs-h6); margin: 0; letter-spacing: -0.01em; }
.address-card__body {
  font-style: normal; font-size: var(--fs-small);
  color: var(--color-gray-700); line-height: 1.6;
}
.address-card__empty { color: var(--color-gray-500); font-style: italic; }

/* Account form (edit-account, edit-address, lost-password) */
.account-form { display: flex; flex-direction: column; gap: var(--space-5); }
.account-form__group {
  background: var(--color-bone);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.account-form__legend {
  font-size: var(--fs-h6); font-weight: 700; font-family: var(--font-display);
  letter-spacing: -0.01em; color: var(--color-ink); padding: 0; margin: 0;
}
.account-form__row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) {
  .account-form__row--two { grid-template-columns: 1fr 1fr; }
}
.account-form__field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.account-form__field label {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-ink-soft); font-weight: 500;
}
.account-form__field .required { color: var(--color-sun); }

/* Inputs com a mesma altura/visual dos auth forms — !important pra vencer
   o WC default (.woocommerce form .form-row .input-text) e garantir consistência.
   Cobre tanto os inputs do nosso markup (.account-form__field input) quanto os
   do plugin Brazilian Checkout Fields (.input-text dentro do form), incluindo
   os campos extras renderizados via `woocommerce_edit_account_form_fields`
   (CPF, data de nascimento, etc.). */
.account-form__field input[type="text"],
.account-form__field input[type="email"],
.account-form__field input[type="password"],
.account-form__field input[type="tel"],
.account-form__field input[type="date"],
.account-form input.input-text,
.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"],
.account-form input[type="tel"],
.account-form input[type="date"],
.account-form input[type="number"],
.account-form select {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border: 1px solid var(--color-gray-300) !important;
  background: var(--color-paper) !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  color: var(--color-ink) !important;
  outline: 0;
  margin: 0;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.account-form input:hover:not(:focus) { border-color: var(--color-ink-soft) !important; }
.account-form input:focus { border-color: var(--color-ink) !important; box-shadow: 0 0 0 3px rgba(27, 28, 57, 0.08) !important; }

/* Labels dos campos do plugin (vem como <label> dentro de .form-row) seguem
   o mesmo eyebrow style dos labels do nosso markup. */
.account-form .form-row > label,
.account-form .woocommerce-input-wrapper + label {
  display: block;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 500;
  margin-bottom: 6px;
}
.account-form .form-row { margin: 0 !important; padding: 0 !important; }
.account-form .woocommerce-input-wrapper { display: block; width: 100%; }

.account-form__hint { font-size: var(--fs-small); color: var(--color-gray-500); margin: 0; line-height: 1.5; }
.account-form__submit { margin: var(--space-3) 0 0; }

/* WC form fields gerais (form-edit-address, etc.) */
.account__content .woocommerce-address-fields__field-wrapper {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
}
@media (min-width: 640px) {
  .account__content .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .account__content .form-row-wide,
  .account__content .form-row-full { grid-column: 1 / -1; }
}
.account__content .form-row { margin: 0; }
.account__content .form-row > label {
  display: block; margin-bottom: 6px;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-ink-soft); font-weight: 500;
}

/* View Order */
.view-order__head-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.view-order__updates { margin-block: var(--space-7); }
.view-order__section-title { font-size: var(--fs-h6); margin-bottom: var(--space-4); letter-spacing: -0.01em; }
.view-order__updates-list { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--color-sun); padding-left: var(--space-5); }
.view-order__update { padding-block: var(--space-3); border-bottom: 1px dashed var(--color-gray-300); }
.view-order__update:last-child { border-bottom: 0; }
.view-order__update-time { font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-uber); text-transform: uppercase; color: var(--color-ink-soft); display: block; margin-bottom: 4px; }
.view-order__update-text p { margin: 0; font-size: var(--fs-small); color: var(--color-gray-700); }

/* Código de rastreamento */
.view-order__tracking { margin-block: var(--space-7); }
.view-order__tracking-box {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-5); background: var(--color-bone); border-radius: var(--radius-md);
}
.view-order__tracking-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-h6); letter-spacing: var(--tracking-wide);
  color: var(--color-ink); word-break: break-all;
}
.view-order__tracking-copy {
  margin-left: auto; cursor: pointer;
  padding: 8px 18px; border: 1px solid var(--color-ink);
  background: transparent; color: var(--color-ink);
  border-radius: var(--radius-pill);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 500;
  transition: background .2s, color .2s;
}
.view-order__tracking-copy:hover { background: var(--color-ink); color: var(--color-sand); }
.view-order__tracking-copy.is-copied { background: var(--color-sun); border-color: var(--color-sun); color: var(--color-ink); }
.view-order__tracking-hint { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--color-gray-700); }

/* WC order details table dentro de view-order */
.account__content .woocommerce-order-details {
  margin-top: var(--space-7); padding: var(--space-6);
  background: var(--color-bone); border-radius: var(--radius-md);
}
.account__content .woocommerce-order-details h2,
.account__content .woocommerce-order-details__title { font-size: var(--fs-h6); margin-bottom: var(--space-4); letter-spacing: -0.01em; }
.account__content .woocommerce-table--order-details { width: 100%; border-collapse: collapse; }
.account__content .woocommerce-table--order-details th,
.account__content .woocommerce-table--order-details td {
  padding: 12px 0; border-bottom: 1px dashed var(--color-gray-300);
  text-align: left; font-size: var(--fs-small);
}
.account__content .woocommerce-customer-details { margin-top: var(--space-7); }
.account__content .woocommerce-customer-details address {
  font-style: normal; padding: var(--space-5); background: var(--color-bone);
  border-radius: var(--radius-md); font-size: var(--fs-small); line-height: 1.6;
}

/* Lost password */
.lost-password {
  max-width: 520px; margin: 0 auto;
  background: var(--color-bone); padding: var(--space-7);
  border-radius: var(--radius-md);
}
.lost-password__head { margin-bottom: var(--space-5); }
.lost-password__title { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem); line-height: clamp(2rem, 1.8rem + 0.6vw, 2.5rem); margin-block: var(--space-3) var(--space-3); letter-spacing: -0.02em; }
.lost-password__text { color: var(--color-gray-700); font-size: var(--fs-small); }
.lost-password__back { margin-top: var(--space-5); text-align: center; }

/* Comissões refinadas */
.commissions { display: flex; flex-direction: column; gap: var(--space-5); }

.commissions__stats {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
}
@media (min-width: 640px) { .commissions__stats { grid-template-columns: repeat(3, 1fr); } }
.commissions__stat {
  background: var(--color-bone);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.commissions__stat strong { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 700; letter-spacing: -0.015em; color: var(--color-ink); line-height: 1; }
.commissions__stat--highlight { background: var(--color-ink); color: var(--color-sand); }
.commissions__stat--highlight .t-eyebrow { color: var(--color-sun); }
.commissions__stat--highlight strong { color: var(--color-sand); }

.commissions__filter {
  display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: end;
  padding: var(--space-4); background: var(--color-bone); border-radius: var(--radius-md);
}
.commissions__filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.commissions__filter-field label {
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-ink-soft); font-weight: 500;
}
.commissions__filter-field input[type="date"] {
  padding: 12px 14px; border: 1px solid var(--color-gray-300); background: var(--color-paper);
  border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--fs-small); color: var(--color-ink);
}
.commissions__filter-actions { display: flex; gap: var(--space-3); align-items: center; margin-left: auto; }

.commissions__table-wrap { overflow-x: auto; }
.commissions__coupon {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide);
  background: var(--color-stone); padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.commissions__value { font-weight: 500; color: var(--color-sun); font-family: var(--font-display); }

/* ── WooCommerce notices (editorial — sem o estilo verde default) ────── */
.woocommerce-notices-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  position: relative;
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 16px 20px 16px 60px;
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-300);
  border-left: 4px solid var(--color-sun);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  box-shadow: 0 6px 18px -8px rgba(27, 28, 57, 0.12);
  animation: notice-slide-in 360ms cubic-bezier(0, 0, 0.2, 1);
}
.woocommerce-error { border-left-color: #c0392b; }
.woocommerce-info  { border-left-color: var(--color-ink); }

/* Ícone circular à esquerda — substitui o ✓ verde default */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-sun);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  margin: 0;
  padding: 0;
  font-family: inherit !important;
  /* SVG check inline (sand fill) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDEFD9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.woocommerce-info::before {
  background-color: var(--color-ink);
  /* SVG info "i" — sand fill */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDEFD9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
}
.woocommerce-error::before {
  background-color: #c0392b;
  /* SVG ! triangle — paper fill */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF8F4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}

/* Texto principal — quando o WC envolve em <li> dentro de <ul> */
.woocommerce-message > li,
.woocommerce-info > li,
.woocommerce-error > li {
  flex: 1;
  margin: 0;
  list-style: none;
}

/* Link "Ver carrinho" / "Continuar comprando" / outros CTAs dentro da notice */
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-error .button,
.woocommerce-info .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: var(--color-ink);
  color: var(--color-sand);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}
.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
  background: var(--color-sun);
  border-color: var(--color-sun);
  color: var(--color-paper);
}

/* Links inline dentro do texto */
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
  color: var(--color-ink);
  border-bottom: 1px solid currentColor;
  font-weight: 500;
}

@keyframes notice-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Notice "Já é cliente?" do checkout — variante mais compacta + inline ── */
.woocommerce-form-login-toggle {
  margin: 0 0 var(--space-6);
}
.woocommerce-form-login-toggle .container { padding: 0; max-width: none; }
.woocommerce-form-login-toggle .grid-12 { padding: 0; margin: 0; }
.woocommerce-form-login-toggle .woocommerce-info {
  padding: 12px 16px 12px 56px;
  font-size: 13.5px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
}
.woocommerce-form-login-toggle .woocommerce-info::before {
  width: 28px; height: 28px;
  left: 14px;
  background-size: 12px;
}
.woocommerce-form-login-toggle .woocommerce-info a.showlogin {
  margin-left: auto;
  padding: 6px 14px;
  background: var(--color-ink);
  color: var(--color-sand);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 0;
  transition: all var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
  white-space: nowrap;
}
.woocommerce-form-login-toggle .woocommerce-info a.showlogin:hover {
  background: var(--color-sun);
  border-color: var(--color-sun);
  color: var(--color-paper);
}

/* ---------------------------------------------------------------------
   31. FAVORITES (Meus Designs)
   --------------------------------------------------------------------- */
.favorites { padding-block: var(--space-9) var(--space-10); }
.favorites__head { margin-bottom: var(--space-8); max-width: 56ch; }
.favorites__title {
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  line-height: 1; letter-spacing: -0.025em;
  margin-top: var(--space-3);
}
.favorites__title em { color: var(--color-sun); font-style: normal; }

.favorites__gate,
.favorites__empty {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  background: var(--color-bone);
  border-radius: var(--radius-md);
  max-width: 640px;
  margin: 0 auto;
}
.favorites__gate-text,
.favorites__empty-text {
  font-size: var(--fs-lead);
  color: var(--color-gray-700);
  margin-bottom: var(--space-5);
}
.favorites__empty-text em { color: var(--color-sun); font-style: normal; font-weight: 500; }

.favorites__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
  list-style: none;
  padding: 0; margin: 0;
}

.favorite-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bone);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out);
}
.favorite-card:hover { transform: translateY(-3px); }

.favorite-card__media {
  display: block;
  aspect-ratio: 4/3;
  background: var(--color-paper);
  overflow: hidden;
}
.favorite-card__media img {
  width: 100%; height: 100%; object-fit: contain;
  padding: var(--space-3);
  transition: transform var(--dur-slow) var(--ease-out);
}
.favorite-card:hover .favorite-card__media img { transform: scale(1.04); }

.favorite-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  flex: 1;
}
.favorite-card__body > :not(.t-eyebrow) { align-self: stretch; }
.favorite-card__title {
  font-size: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 4px 0 0;
}
.favorite-card__title a { color: inherit; text-decoration: none; }
.favorite-card__title a:hover { color: var(--color-sun); }
.favorite-card__price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin: 0;
}

.favorite-card__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-gray-300);
  align-items: stretch;
}
.favorite-card__actions .btn {
  flex: 1;
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}
.favorite-card__remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 42px;
  padding: 0 14px;
  background: transparent;
  color: var(--color-ink-soft);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.favorite-card__remove:hover {
  background: var(--color-ink);
  color: var(--color-sand);
  border-color: var(--color-ink);
}
.favorite-card__remove svg { width: 13px; height: 13px; }

/* ---------------------------------------------------------------------
   32. SOBRE (about)
   --------------------------------------------------------------------- */
.about-hero { padding-block: var(--space-9) var(--space-8); background: var(--color-bone); }
.about-hero__inner {
  display: grid; grid-template-columns: 1fr; gap: var(--space-7);
  align-items: start;
}
@media (min-width: 1024px) { .about-hero__inner { grid-template-columns: 1.05fr 1fr; gap: var(--space-9); } }

.about-hero__copy {
  padding-block: var(--space-5);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
}
.about-hero__copy > :not(.t-eyebrow) { align-self: stretch; }
.about-hero__title {
  font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  line-height: 0.95; letter-spacing: -0.025em;
  margin: 0;
}
.about-hero__title em { color: var(--color-sun); font-style: normal; }

.about-hero__media {
  position: relative;
  border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 4/5; background: var(--color-stone);
}
.about-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.about-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Controles do vídeo do hero */
.about-hero__video-btn {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; color: var(--color-sun);
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.about-hero__video-btn:hover { background: rgba(0, 0, 0, 0.65); }
.about-hero__video-btn:focus-visible { outline: 2px solid var(--color-sun); outline-offset: 2px; }
.about-hero__video-btn svg { display: block; }

/* Play/Pause — centralizado */
.about-hero__video-play {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px;
}
.about-hero__video-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.about-hero__video-play .icon-pause,
.about-hero__video-play.is-playing .icon-play { display: none; }
.about-hero__video-play.is-playing .icon-pause { display: block; }
/* Esconde o Play/Pause quando tocando, revela ao passar o mouse na mídia */
.about-hero__media:hover .about-hero__video-play,
.about-why__media:hover .about-hero__video-play,
.about-hero__video-play:not(.is-playing),
.about-hero__video-play:focus-visible { opacity: 1; }
.about-hero__video-play.is-playing { opacity: 0; }

/* Mute — canto inferior direito (oculto: vídeos sem áudio) */
.about-hero__video-mute {
  display: none;
  right: var(--space-4); bottom: var(--space-4);
  width: 44px; height: 44px;
}
.about-hero__video-mute .icon-sound-on { display: block; }
.about-hero__video-mute .icon-sound-off { display: none; }
.about-hero__video-mute.is-muted .icon-sound-on { display: none; }
.about-hero__video-mute.is-muted .icon-sound-off { display: block; }

.about-hero__lead {
  margin-top: var(--space-3); padding-top: var(--space-5);
  border-top: 1px solid var(--color-ink);
  font-size: var(--fs-lead); color: var(--color-gray-700);
  line-height: 1.55;
}
.about-hero__lead p { margin: 0; }

/* Pilares */
.about-pillars { padding-block: var(--space-9); }
.about-pillars__head { margin-bottom: var(--space-8); }
.about-pillars__title { font-size: clamp(3rem, 2rem + 2.5vw, 4rem); line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem); letter-spacing: -0.025em; margin-top: var(--space-3); }
.about-pillars__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 1024px) { .about-pillars__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

.pillar {
  padding: var(--space-7) var(--space-6);
  background: var(--color-bone);
  border-radius: var(--radius-md);
}
.pillar__icon { color: var(--color-sun); display: inline-flex; align-items: center; margin-bottom: var(--space-4); }
.pillar__icon svg { width: 56px; height: 56px; display: block; }
.pillar__title { font-size: var(--fs-h5); margin-bottom: var(--space-3); letter-spacing: -0.015em; }
.pillar__text { color: var(--color-gray-700); line-height: 1.55; }

/* Split sections */
.about-split { padding-block: var(--space-9); }
.surface-cream { background: var(--color-sand); }
.about-split__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; }
@media (min-width: 1024px) { .about-split__inner { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.about-split__media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; }
.about-split__media img { width: 100%; height: 100%; object-fit: cover; }
.about-split__title {
  font-size: clamp(3rem, 2rem + 2.5vw, 4rem); line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem); letter-spacing: -0.025em;
  margin-block: var(--space-3) var(--space-4);
}
.about-split__title em { color: var(--color-sun); font-style: normal; }
.about-split__subtitle { font-size: var(--fs-lead); color: var(--color-ink-soft); margin-bottom: var(--space-3); }
.about-split__text { color: var(--color-gray-700); margin-bottom: var(--space-6); max-width: 56ch; }

/* Why (navy split) */
.about-why { padding-block: var(--space-9); }
.surface-ink { background: var(--color-ink); color: var(--color-sand); }
.surface-ink p { color: rgba(253, 239, 217, 0.85); }
.about-why__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; }
@media (min-width: 1024px) { .about-why__inner { grid-template-columns: 1fr 1fr; gap: var(--space-9); } }
.about-why__title {
  color: var(--color-sand);
  font-size: clamp(3rem, 2rem + 2.5vw, 4rem); line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem); letter-spacing: -0.025em;
  margin-block: var(--space-3) var(--space-4);
}
.about-why__title em { color: var(--color-sun); font-style: normal; }
.about-why__text { color: rgba(253, 239, 217, 0.85); margin-bottom: var(--space-6); max-width: 48ch; }
.about-why .btn--sun { transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.about-why .btn--sun:hover { background: transparent; border-color: var(--color-sun); color: var(--color-sun); }
.about-why__media { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/5; }
.about-why__media img { width: 100%; height: 100%; object-fit: cover; }
.about-why__video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Highlights */
.about-highlights { padding-block: var(--space-9); }
.about-highlights__head { margin-bottom: var(--space-8); }
.about-highlights__title { font-size: clamp(3rem, 2rem + 2.5vw, 4rem); line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem); letter-spacing: -0.025em; margin-top: var(--space-3); }
.about-highlights__title em { color: var(--color-sun); font-style: normal; }

.about-highlights__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
}
@media (min-width: 640px) { .about-highlights__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .about-highlights__grid { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); } }

.highlight {
  display: flex; flex-direction: column;
  background: var(--color-bone);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.highlight:hover { transform: translateY(-3px); background: var(--color-sand); }
.highlight__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-sun);
  margin-bottom: var(--space-4);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.highlight__icon svg { width: 28px; height: 28px; }
.highlight:hover .highlight__icon { background: var(--color-ink); color: var(--color-sun); }
.highlight__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.highlight__title { font-size: var(--fs-h6); margin: 0; letter-spacing: -0.01em; line-height: 1.15; }
.highlight__text { color: var(--color-gray-700); font-size: var(--fs-small); line-height: 1.55; margin: 0; }

/* ---------------------------------------------------------------------
   33. CONTATO
   --------------------------------------------------------------------- */
.contact { padding-block: var(--space-9) var(--space-10); }
.contact__head { margin-bottom: var(--space-8); max-width: 56ch; }
.contact__title { font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.025em; margin-top: var(--space-3); }
.contact__title em { color: var(--color-sun); font-style: normal; }
.contact__lead { margin-top: var(--space-4); color: var(--color-gray-700); font-size: var(--fs-lead); }

.contact__layout {
  display: grid; grid-template-columns: 1fr; gap: var(--space-7);
}
@media (min-width: 1024px) { .contact__layout { grid-template-columns: 1fr 1.4fr; gap: var(--space-9); align-items: start; } }

.contact__channels { padding-block: var(--space-3); }
.contact__channels-list {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--color-ink);
}
.contact__channels-list li {
  border-bottom: 1px solid var(--color-ink);
  padding: var(--space-5) 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
}
.contact__channels-list li a {
  font-family: var(--font-display); font-size: var(--fs-h6); font-weight: 700; letter-spacing: -0.015em;
  color: var(--color-ink); transition: color var(--dur-fast) var(--ease-out);
}
.contact__channels-list li a:hover { color: var(--color-sun); }

.contact__social { margin-top: var(--space-7); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.contact__social-title { margin-bottom: 0; }
.contact__social-row { display: flex; gap: var(--space-3); }
.contact__social-row a {
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-ink); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-ink);
  transition: all var(--dur-fast) var(--ease-out);
}
.contact__social-row a svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.contact__social-row a:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }

.contact__form-wrap {
  background: var(--color-bone); padding: var(--space-7);
  border-radius: var(--radius-md);
}
.contact__form-title { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem); line-height: clamp(2rem, 1.8rem + 0.6vw, 2.5rem); margin-bottom: var(--space-2); letter-spacing: -0.015em; }
.contact__form-text { color: var(--color-gray-700); font-size: var(--fs-small); margin-bottom: var(--space-5); }

/* CF7 form styling */
.contact__form-wrap .wpcf7-form { display: flex; flex-direction: column; gap: var(--space-4); }
.contact__form-wrap .wpcf7-form p { margin: 0; }
.contact__form-wrap .hidden-fields-container { display: none; }
.contact__form-wrap label { display: block; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: 6px; font-weight: 500; }
.contact__form-wrap input[type="text"],
.contact__form-wrap input[type="email"],
.contact__form-wrap input[type="tel"],
.contact__form-wrap textarea,
.contact__form-wrap select {
  width: 100%; padding: 14px 18px;
  border: 1px solid var(--color-gray-300); background: var(--color-paper);
  border-radius: var(--radius-sm); font-size: var(--fs-body); font-weight: 300;
  font-family: var(--font-sans); color: var(--color-ink); outline: 0;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.contact__form-wrap input:focus, .contact__form-wrap textarea:focus, .contact__form-wrap select:focus { border-color: var(--color-ink); }
.contact__form-wrap .wpcf7-submit {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 14px 28px; background: var(--color-sun); color: var(--color-paper);
  border: 1px solid var(--color-sun); border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  cursor: pointer; transition: all var(--dur-base) var(--ease-out);
  font-family: var(--font-sans); width: auto;
}
.contact__form-wrap .wpcf7-submit:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-sand); }
.contact__form-wrap .wpcf7-response-output {
  border: 0 !important; padding: var(--space-4) !important;
  background: var(--color-stone); border-radius: var(--radius-sm); font-size: var(--fs-small);
}
.contact__form-wrap .wpcf7-response-output:empty { display: none; }

/* ---------------------------------------------------------------------
   34. BLOG / JOURNAL PAGE
   --------------------------------------------------------------------- */
.journal-page { padding-block: var(--space-9) var(--space-10); }
.journal-page__head { margin-bottom: var(--space-8); max-width: 64ch; }
.journal-page__title {
  font-size: clamp(2.5rem, 1.5rem + 3.5vw, 5rem);
  line-height: 0.95; letter-spacing: -0.025em;
  margin-top: var(--space-3);
}
.journal-page__title em { color: var(--color-sun); font-style: normal; }

.journal-hero {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-bottom: var(--space-9);
  background: var(--color-bone); border-radius: var(--radius-md);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform var(--dur-base) var(--ease-out);
}
.journal-hero:hover { transform: translateY(-4px); color: inherit; }
@media (min-width: 1024px) { .journal-hero { grid-template-columns: 1.1fr 1fr; align-items: stretch; } }
.journal-hero__media { aspect-ratio: 4/3; overflow: hidden; }
@media (min-width: 1024px) { .journal-hero__media { aspect-ratio: auto; height: 100%; min-height: 420px; } }
.journal-hero__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.journal-hero:hover .journal-hero__media img { transform: scale(1.04); }
.journal-hero__body { padding: var(--space-7); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); justify-content: center; }
.journal-hero__body > :not(.t-eyebrow) { align-self: stretch; }
.journal-hero__title { font-size: clamp(3rem, 2rem + 2.5vw, 4rem); line-height: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem); letter-spacing: -0.025em; }
.journal-hero__excerpt { color: var(--color-gray-700); line-height: 1.55; }
.journal-hero__meta {
  display: flex; gap: var(--space-2); align-items: center;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-uber); text-transform: uppercase;
  color: var(--color-ink-soft); margin-top: var(--space-3);
}

.journal-page__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-6);
}
@media (min-width: 768px) { .journal-page__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .journal-page__grid { grid-template-columns: repeat(3, 1fr); } }

.journal-page__pagination { margin-top: var(--space-8); display: flex; justify-content: center; }
.journal-page__pagination ul { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.journal-page__pagination .page-numbers {
  min-width: 44px; height: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-gray-300); border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: 500; color: var(--color-ink); text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.journal-page__pagination .page-numbers:hover, .journal-page__pagination .page-numbers.current {
  background: var(--color-ink); color: var(--color-sand); border-color: var(--color-ink);
}
.journal-page__pagination .page-numbers.dots { border: 0; background: transparent; color: var(--color-gray-500); }
.journal-page__empty { padding: var(--space-7); background: var(--color-bone); border-radius: var(--radius-md); color: var(--color-gray-700); }

/* ---------------------------------------------------------------------
   34a. ORDER ITEM PERSONALIZATION (Detalhes do pedido — minha conta)
   --------------------------------------------------------------------- */
.veraneo-personalizacao { margin-top: var(--space-3); display: flex; flex-direction: column; gap: 4px; }
.veraneo-personalizacao__title { display: block; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: 4px; }
.veraneo-personalizacao__list { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); color: var(--color-ink); line-height: 1.5; }
.veraneo-personalizacao__list p { margin: 0; }
.veraneo-personalizacao__list strong { font-weight: 600; }

/* ---------------------------------------------------------------------
   34b. SINGLE POST (artigo do blog)
   Nota: .single-post:not(body) — o WP adiciona essa classe no <body> em
   páginas de post (single.php), o que aplicaria padding no body inteiro.
   --------------------------------------------------------------------- */
article.single-post { padding-block: var(--space-9); }
body.single-post { padding-block: 0; }
.single-post__head { margin-bottom: var(--space-7); }
.single-post__meta { margin-bottom: var(--space-3); color: var(--color-gray-700); font-size: var(--fs-small); display: flex; gap: var(--space-2); }
.single-post__title {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.single-post__cover {
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-7);
}
.single-post__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.single-post__content { font-size: var(--fs-lead); line-height: 1.7; }
.single-post__content > * + * { margin-top: var(--space-4); }
.single-post__content h2 { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem); line-height: clamp(2rem, 1.8rem + 0.6vw, 2.5rem); margin-top: var(--space-7); letter-spacing: -0.015em; }
.single-post__content h3 { font-size: var(--fs-h5); margin-top: var(--space-6); letter-spacing: -0.01em; }

/* Layout em 2 colunas: conteúdo + aside de sugestões */
.single-post__layout { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: start; }
@media (min-width: 1024px) {
  .single-post__layout { grid-template-columns: minmax(0, 72ch) minmax(280px, 1fr); gap: var(--space-9); }
}
.single-post__aside { position: sticky; top: calc(var(--space-6) + 80px); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.single-post__suggestions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-6); width: 100%; }
.suggestion__link { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: inherit; transition: transform var(--dur-base) var(--ease-out); }
.suggestion__link:hover { transform: translateY(-2px); }
.suggestion__link:hover .suggestion__title { color: var(--color-sun); }
.suggestion__media { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius-md); background: var(--color-bone); }
.suggestion__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.suggestion__link:hover .suggestion__media img { transform: scale(1.04); }
.suggestion__body { display: flex; flex-direction: column; gap: 6px; }
.suggestion__date { font-size: var(--fs-small); color: var(--color-gray-700); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.suggestion__title { font-family: var(--font-display); font-size: var(--fs-h6); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0; transition: color var(--dur-fast) var(--ease-out); }

/* ---------------------------------------------------------------------
   35. LEGAL PAGE (Política / Termos)
   --------------------------------------------------------------------- */
.legal-page { padding-block: var(--space-9) var(--space-10); }
.legal-page__head {
  max-width: 720px; margin: 0 auto var(--space-8); text-align: center;
  border-bottom: 1px solid var(--color-ink); padding-bottom: var(--space-6);
}
.legal-page__title { font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem); line-height: 1; letter-spacing: -0.025em; margin-top: var(--space-3); }
.legal-page__updated { margin-top: var(--space-3); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-uber); text-transform: uppercase; color: var(--color-ink-soft); }

.legal-page__prose {
  max-width: 720px; margin: 0 auto;
  font-size: var(--fs-body); line-height: 1.7; color: var(--color-gray-700);
}
.legal-page__prose h2 { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem); line-height: clamp(2rem, 1.8rem + 0.6vw, 2.5rem); margin: var(--space-7) 0 var(--space-3); color: var(--color-ink); letter-spacing: -0.015em; }
.legal-page__prose h3 { font-size: var(--fs-h6); margin: var(--space-6) 0 var(--space-2); color: var(--color-ink); letter-spacing: -0.01em; }
.legal-page__prose p { margin-bottom: var(--space-4); max-width: none; }
.legal-page__prose ul, .legal-page__prose ol { margin: var(--space-3) 0 var(--space-4) var(--space-5); padding: 0; }
.legal-page__prose ul li, .legal-page__prose ol li { margin-bottom: var(--space-2); list-style: disc; }
.legal-page__prose ol li { list-style: decimal; }
.legal-page__prose a { color: var(--color-sun); border-bottom: 1px solid currentColor; }
.legal-page__prose a:hover { color: var(--color-ink); }
.legal-page__prose strong { color: var(--color-ink); font-weight: 500; }

/* ---------------------------------------------------------------------
   36. WOO MIN CARRY-OVER (botão "Personalize", preços etc.)
   --------------------------------------------------------------------- */
.woocommerce-loop-product__title { display: none; }
ul.products { list-style: none; padding: 0; }

/* (estilização das mensagens WC consolidada na seção de notices acima) */

/* ---------------------------------------------------------------------
   37. BARRA DE COMPRA FLUTUANTE (.buy-float)
   Só abaixo de 1024px, que é onde o summary deixa de ser sticky e o botão
   real sai do alcance. Some quando o botão real entra em tela.
   --------------------------------------------------------------------- */
.buy-float {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-modal) - 150);   /* abaixo do modal de compra */
  padding: var(--space-3) var(--container-pad);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  /* Mesmos valores do .site-header: a 0.92 o fundo ficava opaco demais e o
     blur não tinha o que borrar. */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: var(--hairline-soft);
  transform: translateY(100%);
  /* visibility (e não só transform) tira o botão da ordem de tabulação e da
     árvore de acessibilidade enquanto a barra está escondida. O delay faz o
     visibility esperar a animação de saída terminar. */
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.buy-float.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--dur-base) var(--ease-out), visibility 0s;
}
@media (min-width: 1024px) {
  .buy-float { display: none; }
}

.buy-float__btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  background: var(--color-sun);
  color: var(--color-paper);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out);
}
/* Mesma seta do botão real (.single_add_to_cart_button::after), pra os dois
   CTAs se lerem como a mesma ação. */
.buy-float__btn::after {
  content: "→";
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.buy-float__btn:hover { background: var(--color-ink); }
.buy-float__btn:hover::after { transform: translateX(4px); }
.buy-float__btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }

/* O WhatsApp flutuante ocupa o mesmo canto — sobe pra não colidir. A altura
   real da barra vem do JS em --buy-float-h. */
@media (max-width: 1023px) {
  body.has-buy-float .whatsapp-float {
    /* --wf-bottom em vez de 16px fixo: entre 601 e 1023px a base é 24px, e
       o valor cravado deslocava o botão pra baixo nessa faixa. */
    bottom: calc(var(--wf-bottom) + var(--buy-float-h, 0px));
  }
  /* Lista completa: declarar só `bottom` aqui apagaria as transições de
     hover que a regra base define. */
  .whatsapp-float {
    transition: transform var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out),
                bottom var(--dur-base) var(--ease-out);
  }
}

/* ---------------------------------------------------------------------
   38. MODAL DE COMPRA (.veraneo-gate)
   Mesmo contrato do .search-overlay: alterna por aria-hidden.
   ATENÇÃO: aria-hidden="false" significa ABERTO.
   --------------------------------------------------------------------- */
.veraneo-gate {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.veraneo-gate[aria-hidden="false"] { pointer-events: auto; opacity: 1; }

.veraneo-gate__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  background: rgba(27, 28, 57, 0.55);
  cursor: pointer;
}

.veraneo-gate__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  padding: var(--space-8) var(--space-7) var(--space-7);
  background: var(--color-bone);
  border-radius: var(--radius-lg);
  text-align: center;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur-base) var(--ease-out);
}
.veraneo-gate[aria-hidden="false"] .veraneo-gate__panel { transform: translateY(0) scale(1); }

.veraneo-gate__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.veraneo-gate__close svg { width: 12px; height: 12px; }
.veraneo-gate__close:hover { background: var(--color-ink); color: var(--color-sand); }

/* Explícito de propósito: o `hidden` vem só da folha do browser e perde pra
   qualquer display de autor. Sem esta regra, um passo escondido poderia
   reaparecer se alguém estilizar .veraneo-gate__step no futuro. */
.veraneo-gate__step[hidden] { display: none; }

.veraneo-gate__title {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.veraneo-gate__lead {
  margin-top: var(--space-3);
  color: var(--color-gray-500);
  font-size: var(--fs-small);
  line-height: 1.6;
  text-wrap: balance;
}

.veraneo-gate__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.veraneo-gate__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-align: center;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.veraneo-gate__btn--primary { background: var(--color-sun); color: var(--color-paper); }
.veraneo-gate__btn--primary:hover { background: var(--color-ink); color: var(--color-paper); }
.veraneo-gate__btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-gray-300);
}
.veraneo-gate__btn--ghost:hover { background: var(--color-ink); color: var(--color-paper); }
.veraneo-gate__btn:focus-visible { outline: 2px solid var(--color-sun); outline-offset: 3px; }

@media (min-width: 560px) {
  .veraneo-gate__actions { flex-direction: row; justify-content: center; }
  .veraneo-gate__btn { flex: 1; }
}

/* ---------------------------------------------------------------------
   39. CALCULADORA DE FRETE (Melhor Envio)
   O markup é do plugin — só controlamos o estilo. Ele traz um visual
   genérico (#f2f2f2, raio 5px, input cinza) que destoa do resto da página.
   Tudo aqui é escopado em .single-product__summary de propósito: o
   calculator.css do plugin é enfileirado DEPOIS do nosso, então em
   especificidade igual ele venceria. O escopo resolve sem !important.
   --------------------------------------------------------------------- */
/* Deixa de ser caixa e vira seção separada por hairline — mesmo padrão do
   .veraneo-single-options logo acima (margin-top + padding-top + border-top).
   O padding-top é o respiro que faz a borda ler como separador; o resto do
   espaçamento interno saiu junto com o fundo. */
.single-product__summary .containerCalculator {
  margin: var(--space-5) 0 0;
  padding: var(--space-5) 0 0;
  background: none;
  border: 0;
  border-top: var(--hairline-soft);
  border-radius: 0;
}

.single-product__summary .containerCalculator__note {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--color-gray-500);
}

.single-product__summary .containerCalculator__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-uber);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* Campo + botão na mesma linha. O input do plugin traz width:100% com
   especificidade alta, então quem controla a largura aqui é o flex. */
.single-product__summary .containerCalculator__row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}
.single-product__summary .containerCalculator__row input[type="text"] {
  flex: 1;
  min-width: 0;
}

.single-product__summary .containerCalculator__btn {
  flex-shrink: 0;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out);
}
.single-product__summary .containerCalculator__btn:hover { background: var(--color-sun); }
.single-product__summary .containerCalculator__btn:focus-visible {
  outline: 2px solid var(--color-sun);
  outline-offset: 3px;
}

.single-product__summary .containerCalculator input[type="text"] {
  padding: 14px 20px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  font-size: var(--fs-small);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.single-product__summary .containerCalculator input[type="text"]:focus {
  outline: none;
  border-color: var(--color-ink);
}
.single-product__summary .containerCalculator input[type="text"]::placeholder {
  color: var(--color-gray-500);
}

/* --- Loading: skeleton no lugar do GIF ---
   O plugin alterna `display: flex/none` inline no #calcular-frete-loader, e
   inline vence CSS — então não mexemos no display, só no conteúdo. As barras
   vêm do JS; aqui elas viram a silhueta das linhas de resultado, pra que a
   troca loading → resultado não desloque o layout. */
.single-product__summary #calcular-frete-loader img { display: none; }

.single-product__summary .me-skeleton {
  flex: 1;
  margin-top: var(--space-4);
}
.single-product__summary .me-skeleton__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: var(--hairline-soft);
}
.single-product__summary .me-skeleton__linha:first-child { border-top: 0; }

.single-product__summary .me-skeleton span {
  position: relative;
  height: 12px;
  border-radius: var(--radius-sm);
  background: var(--color-gray-100);
  overflow: hidden;
}
.single-product__summary .me-skeleton span:first-child { flex: 0 0 45%; }
.single-product__summary .me-skeleton span:last-child  { flex: 0 0 22%; }
/* Larguras diferentes por linha: skeleton uniforme demais lê como bloco
   travado, não como conteúdo carregando. */
.single-product__summary .me-skeleton__linha:nth-child(2) span:first-child { flex-basis: 38%; }
.single-product__summary .me-skeleton__linha:nth-child(3) span:first-child { flex-basis: 42%; }

.single-product__summary .me-skeleton span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  transform: translateX(-100%);
  animation: veraneo-skeleton 1.3s var(--ease-stand) infinite;
}
@keyframes veraneo-skeleton {
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .single-product__summary .me-skeleton span::after { animation: none; }
}

/* --- Resultados ---
   O plugin deixa a estrutura de resultado no DOM mesmo sem cotação: tabela
   sem linhas e dois <small> sem texto. Todos com altura 0, mas as margens
   ainda ocupam ~29px logo abaixo do campo. As duas regras abaixo colapsam
   isso. O :empty do <small> também vale COM resultados, porque o
   .observation-shipping-free costuma vir vazio.

   A condição é "não tem <tr>" e não "tbody:empty" de propósito: o plugin
   escreve `<tbody> </tbody>`, com um espaço dentro, e :empty não casa quando
   existe qualquer nó de texto — inclusive whitespace. */
.single-product__summary .resultado-frete:not(:has(tr)) { display: none; }
.single-product__summary .resultado-frete small:empty { display: none; }

.single-product__summary .resultado-frete table {
  width: 100%;
  margin-top: var(--space-4);
  border-collapse: collapse;
}
.single-product__summary .resultado-frete thead { display: none; }

.single-product__summary .resultado-frete tr { border-top: var(--hairline-soft); }
.single-product__summary .resultado-frete tr:first-child { border-top: 0; }

/* Sem o split do JS a linha continua legível: vira só um bloco de texto
   com o mesmo espaçamento. Com o split, vira serviço | preço. */
.single-product__summary .resultado-frete td {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  font-size: var(--fs-small);
  line-height: 1.4;
}

.single-product__summary .me-frete__servico {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.single-product__summary .me-frete__servico strong {
  font-weight: 500;
  color: var(--color-ink);
}
.single-product__summary .me-frete__servico small {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray-500);
  font-variant-numeric: tabular-nums;
}
/* tabular-nums: sem isso a Museo usa algarismos proporcionais e cada preço
   fica com uma largura, fazendo o "R$" começar num ponto diferente em cada
   linha. Com largura fixa por dígito, a coluna alinha de verdade. */
.single-product__summary .me-frete__valor {
  flex-shrink: 0;
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Notas de rodapé do plugin ("Frete para …", aviso de frete grátis). */
.single-product__summary .resultado-frete small#destiny-shipping-mehor-envio,
.single-product__summary .resultado-frete small.observation-shipping-free {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--color-gray-500);
}
.single-product__summary .resultado-frete br { display: none; }

/* ---------------------------------------------------------------------
   40. BANNERS DO TOPO (home)
   Segue o vocabulário do .video-review: seta redonda clara e bullets
   pequenos com o laranja marcando o ativo.
   --------------------------------------------------------------------- */
.banners { position: relative; }
/* line-height: 0 remove o espaço fantasma que o <img> inline deixaria
   embaixo de cada slide. */
.banners .swiper-slide { line-height: 0; }
.banners__link { display: block; }
.banners img { display: block; width: 100%; height: auto; }

/* Trava a proporção de cada arte independente do que for enviado: sem isso,
   um banner fora de medida mudaria a altura do carrossel e empurraria a
   página. `cover` recorta em vez de distorcer.
   O corte em 768px é o mesmo do <source> no PHP, então CSS e HTML trocam
   de arte no mesmo ponto. */
.banners img { object-fit: cover; }

@media (max-width: 767px) {
  .banners img { aspect-ratio: 700 / 875; }    /* arte mobile, retrato */
}
@media (min-width: 768px) {
  .banners img { aspect-ratio: 1920 / 700; }   /* arte desktop */
}

.banners__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-gray-300);
  background: var(--color-paper);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
.banners__nav:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-sand);
}
.banners__nav:focus-visible { outline: 2px solid var(--color-sun); outline-offset: 3px; }
.banners__nav svg { width: 18px; height: 18px; }
.banners__nav--prev { left: var(--container-pad); }
.banners__nav--next { right: var(--container-pad); }

/* Sem loop as setas se desabilitam nas pontas; some com elas em vez de
   deixar um botão morto sobre o banner. */
.banners__nav.swiper-button-disabled { opacity: 0; pointer-events: none; }

/* Em tela estreita as setas cobririam boa parte da arte — a navegação ali
   fica por conta do arrasto e dos bullets. */
@media (max-width: 767px) {
  .banners__nav { display: none; }
}

.banners__pagination {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 8px;
}
.banners__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-paper);
  opacity: 0.55;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.banners__pagination .swiper-pagination-bullet-active {
  background: var(--color-sun);
  opacity: 1;
  transform: scale(1.3);
}