/* ==========================================================================
   Tema base — folha de estilo única do storefront.
   Organizada em camadas de ordem fixa (cascata cresce de cima pra baixo):
     1. Tokens        — custom properties em :root (a verdade dos defaults)
     2. Base          — reset e elementos crus (body, a, headings, tabela)
     3. Utilitários   — helpers genéricos reusáveis (.muted, .icon)
     4. Layout        — casca do site (container, header, nav, footer)
     5. Componentes   — um bloco por componente/página
   Customização por marketplace acontece só nos tokens (ponte em
   snippets/theme-css-vars.liquid). Estilo novo entra aqui, nunca inline.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* Casca responsiva: o setting global só muda o teto, nunca força overflow. */
  --container-width: 1200px;

  /* Tipografia */
  --font-family: system-ui, -apple-system, sans-serif;

  /* Cor — marca */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-soft: #eff6ff;

  --color-accent: #059669;
  --color-accent-soft: #ecfdf5;

  --color-on-primary: #fff;

  /* Cor — texto */
  --color-text: #1f2937;
  --color-text-strong: #111827;
  --color-text-soft: #374151;
  --color-text-muted: #6b7280;
  --color-text-faint: #9ca3af;

  /* Cor — superfícies */
  --color-bg: #fff;
  --color-bg-alt: #f3f4f6;
  --color-surface: #fff;

  /* Header e navegação — overrides independentes preservam a superfície global. */
  --menubar-bg: var(--color-surface);
  --menubar-text: var(--color-text-soft);

  /* Cor — bordas */
  --color-border: #e5e7eb;
  --color-border-input: #d1d5db;

  /* Cor — estados */
  --color-success-bg: #dcfce7;
  --color-success-text: #166534;

  --color-info-bg: #dbeafe;

  --color-warning-text: #92400e;

  --color-error: #b91c1c;
  --color-error-bg: #fee2e2;
  --color-error-surface: #fef2f2;
  --color-error-border: #fecaca;

  /* Cor — efeitos (overlay de modal, anel de foco) */
  --color-overlay: rgba(17, 24, 39, 0.45);
  --color-focus-ring: rgba(37, 99, 235, 0.35);

  /* Raio */
  --radius-sm: 4px;
  --radius-control: 6px;
  --radius-surface: 8px;
  --radius-overlay: 14px;
  --radius: var(--radius-control);
  --radius-lg: var(--radius-surface);
  --radius-xl: var(--radius-overlay);
  --radius-pill: 999px;

  /* Sombra */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 6px 20px rgba(17, 24, 39, 0.1);
  --shadow-lg: 0 -12px 32px rgba(17, 24, 39, 0.18);

  /* Proporção da imagem de produto (card e imagem principal da PDP) */
  --product-image-ratio: 1 / 1;

  /* Ritmo compartilhado das seções montáveis. */
  --section-space: 1.5rem;
  --section-title-align: left;
  --section-title-size: 1.35rem;

  /* Controles — uma altura e um ritmo para campos, botões e grupos mistos. */
  --control-height: 2.75rem;
  --control-padding-x: 0.8rem;
}

/* ── Cabeçalho reutilizável de seções ─────────────────────────────────── */
.section-heading { margin: 0 0 clamp(1rem, 2vw, 1.75rem); }
.section-heading--center { text-align: center; }
.section-heading--right { text-align: right; }
.section-heading__eyebrow {
	margin: 0 0 .45rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.section-heading__title { margin: 0; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.12; }
.section-heading__subtitle { max-width: 60ch; margin: .45rem 0 0; color: var(--color-text-muted); }
.section-heading--center .section-heading__subtitle { margin-inline: auto; }
.section-heading--right .section-heading__subtitle { margin-left: auto; }

/* ── Lista editorial de cards ─────────────────────────────────────────── */
.image-card-list { padding-block: var(--section-space, clamp(2.5rem, 6vw, 5rem)); }
.image-card-list[data-container="full"] {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-inline: max(1rem, calc((100vw - var(--container-width)) / 2 + 1rem));
}
.image-card-list__items {
	display: grid;
	grid-template-columns: repeat(var(--image-card-cols), minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}
.image-card-list--carousel .image-card-list__items { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.image-card-list--carousel .image-card-list__items::-webkit-scrollbar { display: none; }
.image-card-list--carousel .image-card { flex: 0 0 calc((100% - 2rem) / var(--image-card-cols)); scroll-snap-align: start; }
.image-card { min-width: 0; }
.image-card-list--surface .image-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); }
.image-card-list--surface .image-card__body { padding: 1rem; }
.image-card__media { overflow: hidden; background: var(--color-surface-muted); }
.image-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.image-card:hover .image-card__media img { transform: scale(1.025); }
.image-card-list--ratio-portrait .image-card__media { aspect-ratio: 4 / 5; }
.image-card-list--ratio-square .image-card__media { aspect-ratio: 1; }
.image-card-list--ratio-landscape .image-card__media { aspect-ratio: 4 / 3; }
.image-card-list--ratio-natural .image-card__media img { height: auto; }
.image-card__body h3 { margin: .85rem 0 .15rem; font-size: 1.15rem; }
.image-card__body p { margin: 0; color: var(--color-text-muted); }
.image-card__action { display: inline-flex; margin-top: .85rem; text-decoration: none; }
.image-card__action--outline { padding: .55rem 1rem; border: 1px solid currentColor; border-radius: var(--radius-control); }
.image-card__action--primary { padding: .6rem 1rem; border-radius: var(--radius-control); color: var(--color-on-primary); background: var(--color-primary); }
.image-card-list--overlay .image-card { position: relative; overflow: hidden; }
.image-card-list--overlay .image-card__body { position: absolute; inset: auto 0 0; padding: 1.25rem; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / .78)); }
.image-card-list--overlay .image-card__body p { color: rgb(255 255 255 / .78); }

/* ── História da marca ────────────────────────────────────────────────── */
.brand-story { padding-block: var(--section-space, clamp(3rem, 7vw, 6rem)); }
.brand-story__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.brand-story__metric { padding: .25rem clamp(.75rem, 2vw, 2rem); border-right: 1px solid var(--color-border); }
.brand-story__metric:first-child { padding-left: 0; }
.brand-story__metric:last-child { border-right: 0; }
.brand-story__metric strong { display: block; font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1; }
.brand-story__metric span { display: block; margin-top: .45rem; color: var(--color-text-muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.brand-story__main { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.brand-story--image-right .brand-story__visual { order: 2; }
.brand-story__visual { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.brand-story__brand { width: clamp(54px, 8vw, 105px); height: 100%; object-fit: contain; }
.brand-story__image { width: 100%; height: 100%; max-height: 430px; object-fit: cover; }
.brand-story__content .btn { margin-top: 1.25rem; }

/* ── Faixa manual de logos ────────────────────────────────────────────── */
.logo-list { padding-block: clamp(1.5rem, 4vw, 3rem); }
.logo-list__items {
	display: grid;
	grid-template-columns: repeat(var(--logo-cols, 6), minmax(0, 1fr));
	gap: 1rem;
	align-items: stretch;
}
.logo-list--carousel .logo-list__items {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-inline: contain;
}
.logo-list--carousel .logo-list__items::-webkit-scrollbar { display: none; }
.logo-list--carousel .logo-list__item {
	flex: 0 0 calc((100% - (var(--logo-cols, 6) - 1) * 1rem) / var(--logo-cols, 6));
	scroll-snap-align: start;
}
.logo-list__item {
	display: flex;
	min-width: 0;
	min-height: 5rem;
	align-items: center;
	justify-content: center;
	padding: .75rem;
	color: var(--color-text-strong);
	text-align: center;
	text-decoration: none;
}
.logo-list__item img { width: 100%; max-width: 9rem; height: 3.5rem; object-fit: contain; }
.logo-list__item strong { font-size: clamp(1rem, 2.2vw, 1.8rem); letter-spacing: -.04em; }
.logo-list--monochrome .logo-list__item img { filter: grayscale(1) contrast(1.35); }

@media (max-width: 900px) {
	.image-card-list__items { grid-template-columns: repeat(var(--image-card-cols-tablet), minmax(0, 1fr)); }
	.image-card-list--carousel .image-card { flex-basis: calc((100% - 1rem) / var(--image-card-cols-tablet)); }
	.brand-story__main { grid-template-columns: 1fr; }
	.brand-story--image-right .brand-story__visual { order: initial; }
	.logo-list__items { grid-template-columns: repeat(var(--logo-cols-tablet, 4), minmax(0, 1fr)); }
	.logo-list--carousel .logo-list__item { flex-basis: calc((100% - (var(--logo-cols-tablet, 4) - 1) * 1rem) / var(--logo-cols-tablet, 4)); }
}
@media (max-width: 639px) {
	.image-card-list__items { grid-template-columns: repeat(var(--image-card-cols-mobile), minmax(0, 1fr)); }
	.image-card-list--grid .image-card-list__items { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.image-card-list--grid .image-card { flex: 0 0 calc(100% / var(--image-card-cols-mobile)); scroll-snap-align: start; }
	.image-card-list--carousel .image-card { flex-basis: calc(100% / var(--image-card-cols-mobile)); }
	.brand-story__metrics { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 0; }
	.brand-story__metric:nth-child(2n) { border-right: 0; }
	.brand-story__visual { grid-template-columns: 56px minmax(0, 1fr); }
	.logo-list__items { gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.logo-list--carousel .logo-list__item { flex-basis: calc((100% - (var(--logo-cols-mobile, 3.2) - 1) * .75rem) / var(--logo-cols-mobile, 3.2)); }
}

/* ==========================================================================
   2. Base — reset e elementos crus
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* clip (não hidden): corta o vazamento do peek dos carrosséis sem criar
   scroll container — position:sticky do header continua funcionando. */
html {
  overflow-x: clip;
  overflow-y: scroll;
}
body {
  font-family: var(--font-family);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: clip;
}
button,
input,
select,
textarea {
  font: inherit;
}
a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
h1 {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}
h2 {
  font-size: 1.35rem;
  margin: 1.5rem 0 0.5rem;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
th {
  background: var(--color-bg-alt);
  font-weight: 600;
}

/* ==========================================================================
   3. Utilitários — helpers genéricos
   ========================================================================== */
.muted {
  color: var(--color-text-muted);
}

/* Ícone do sprite (snippet `icon`): herda a cor via currentColor, alinha ao texto. */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon--mask {
  background: currentColor;
  -webkit-mask: var(--theme-icon-url) center / contain no-repeat;
  mask: var(--theme-icon-url) center / contain no-repeat;
}

/* Esconde elementos Alpine até o init (evita flash de drawer/dropdown abertos). */
[x-cloak] {
  display: none !important;
}

/* Controles canônicos do tema. `.auth-*` permanece como alias para temas e
   instalações antigas, mas código novo usa `.form-*` + `.btn`. */
.form-field,
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.form-field > span,
.auth-field > span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-soft);
}
.form-control,
.form-field
  :is(
    input:not([type="checkbox"], [type="radio"], [type="hidden"]),
    select,
    textarea
  ),
.auth-field
  :is(
    input:not([type="checkbox"], [type="radio"], [type="hidden"]),
    select,
    textarea
  ) {
  width: 100%;
  min-height: var(--control-height);
  padding: 0.55rem var(--control-padding-x);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
textarea.form-control,
.form-field textarea,
.auth-field textarea {
  min-height: 6rem;
  resize: vertical;
}
.form-control::placeholder,
.form-field :is(input, textarea)::placeholder,
.auth-field :is(input, textarea)::placeholder {
  color: var(--color-text-faint);
}
.form-control:focus,
.form-field
  :is(
    input:not([type="checkbox"], [type="radio"], [type="hidden"]),
    select,
    textarea
  ):focus,
.auth-field
  :is(
    input:not([type="checkbox"], [type="radio"], [type="hidden"]),
    select,
    textarea
  ):focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.form-control:disabled,
.form-field
  :is(
    input:not([type="checkbox"], [type="radio"], [type="hidden"]),
    select,
    textarea
  ):disabled,
.auth-field
  :is(
    input:not([type="checkbox"], [type="radio"], [type="hidden"]),
    select,
    textarea
  ):disabled {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.form-group {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
.form-group .form-control {
  flex: 1;
  min-width: 0;
}

.btn,
.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--control-height);
  padding: 0.55rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s,
    opacity 0.12s;
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn:hover,
.auth-submit:hover {
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
  text-decoration: none;
}
.btn--secondary {
  background: var(--color-text-strong);
  color: var(--color-surface);
}
.btn--secondary:hover {
  background: var(--color-text-soft);
}
.btn--ghost,
.btn--outline,
.auth-submit--ghost {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-border-input);
}
.btn--ghost:hover,
.btn--outline:hover,
.auth-submit--ghost:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}
.btn--danger {
  background: var(--color-surface);
  color: var(--color-error);
  border-color: var(--color-error-border);
}
.btn--danger:hover {
  background: var(--color-error-surface);
  color: var(--color-error);
  border-color: var(--color-error);
}
.btn--sm {
  min-height: 2.25rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.875rem;
}
.btn--lg {
  min-height: 3rem;
  padding: 0.75rem 1.3rem;
  font-size: 1.05rem;
}
.btn--block {
  width: 100%;
}
.btn:disabled,
.auth-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Stepper declarativo: o HTML só marca `data-sf-quantity`; o engine liga os
   botões e mantém min/max. O campo continua digitável e funciona sem JS. */
.quantity-control {
  display: inline-grid;
  grid-template-columns: var(--control-height) minmax(3.25rem, 4.25rem) var(
      --control-height
    );
  align-items: stretch;
}
.quantity-control__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-input);
  background: var(--color-bg-alt);
  color: var(--color-text-strong);
  cursor: pointer;
}
.quantity-control__button:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}
.quantity-control__button:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.quantity-control__button:hover:not(:disabled) {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.quantity-control__button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.quantity-control__button:disabled {
  color: var(--color-text-faint);
  cursor: not-allowed;
}
.quantity-control__input {
  min-width: 0;
  border-radius: 0;
  border-inline: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}
.quantity-control__input::-webkit-inner-spin-button,
.quantity-control__input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

/* ==========================================================================
   4. Layout — casca do site
   ========================================================================== */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1rem;
}

/* ── Header componível — mobile-first: base = ≤900px, desktop em @media 901px+ ──
   Anti-overflow: todo filho flexível leva min-width: 0 e nada usa nowrap sem
   ellipsis — a casca nunca pode ultrapassar a viewport (P0 do QA da onda 1). */
.site-topbar:empty {
  display: none;
}
.utility-bar {
  position: relative;
  z-index: 110;
  min-width: 0;
  overflow: visible;
  background: var(--utility-bar-bg, var(--color-surface));
  color: var(--utility-bar-text, var(--color-text-soft));
  font-size: 0.78rem;
}
.utility-bar--bordered {
  border-bottom: 1px solid var(--color-border);
}
.utility-bar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: var(--utility-bar-height, 36px);
  max-width: var(--container-width);
  margin: 0 auto;
  padding-inline: var(--utility-bar-padding-x, 16px);
}
.utility-bar--full .utility-bar__inner {
  max-width: none;
}
.utility-bar__item {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.3rem;
  color: inherit;
  white-space: nowrap;
}
.utility-bar__item:hover {
  text-decoration: none;
}
.utility-bar__item--left {
  grid-column: 1;
  justify-self: start;
}
.utility-bar__item--center {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
}
.utility-bar__item--right {
  grid-column: 2;
  justify-self: end;
}
.utility-bar__item--highlight {
  padding-inline: 1rem;
  background: var(--utility-item-bg, var(--color-text-strong));
  color: var(--utility-item-text, #fff);
  font-weight: 700;
}
.utility-bar__item--highlight.utility-bar__item--left {
  box-shadow: -50vw 0 0 var(--utility-item-bg, var(--color-text-strong));
}
.utility-bar__item--highlight.utility-bar__item--right {
  box-shadow: 50vw 0 0 var(--utility-item-bg, var(--color-text-strong));
}
.utility-bar .header__location,
.utility-bar .header__location-trigger {
  min-width: 0;
}
.utility-bar .header__location-trigger {
  gap: 0.3rem;
  padding: 0;
  color: inherit;
  font: inherit;
}
.utility-bar .header__location-trigger:hover {
  background: transparent;
}
.utility-bar .header__location-label {
  display: none;
}
.utility-bar .header__location-text,
.utility-bar .header__location-value {
  display: inline;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}
.utility-bar .header__location-value-short {
  display: none;
}
.utility-bar .header__location-panel {
  color: var(--color-text);
  font-size: 1rem;
}
.utility-bar__item--mobile-hidden {
  display: none;
}
.site-header {
  position: relative;
  z-index: 100;
  margin-bottom: var(--site-header-bottom-spacing, 1.5rem);
}
.site-header--sticky {
  position: sticky;
  top: 0;
}
.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.header-main {
  min-width: 0;
  background: var(--header-main-bg, var(--color-surface));
  color: var(--header-main-text, var(--color-text));
}
.header-main--bordered {
  border-bottom: 1px solid var(--color-border);
}
.header-main__inner {
  position: relative;
  max-width: var(--container-width);
  margin: 0 auto;
  min-height: 0;
  padding: 0.55rem var(--header-main-padding-x, 0.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.header-main--full .header-main__inner {
  max-width: none;
}
.header-main__item {
  min-width: 0;
  display: flex;
  align-items: center;
  order: var(--header-mobile-order, 50);
}
.header-main__item--mobile-hidden {
  display: none;
}
.header-main__item--search {
  flex: 1 0 100%;
  width: 100%;
}
.header-main__item--logo {
  flex: 1 1 0;
  justify-content: center;
}
.header-main__item--spacer-small {
  width: 0.5rem;
}
.header-main__item--spacer-medium {
  width: 1rem;
}
.header-main__item--spacer-large {
  width: 2rem;
}
.header-main__item--spacer-grow {
  flex: 1 1 auto;
}
.header-main__divider {
  display: block;
  width: 1px;
  height: var(--header-divider-height, 28px);
  background: var(--header-divider-color, var(--color-border));
}
.header-main__nav-link {
  color: var(--header-main-text, var(--color-text));
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.header-main__nav-link:hover {
  color: var(--color-primary);
  text-decoration: none;
}
.header-main__nav-link--primary {
  color: var(--color-primary);
}

.header__burger {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--header-main-text, var(--color-text));
  cursor: pointer;
}
.header__burger:hover {
  background: var(--color-bg-alt);
}

.header__logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--header-main-text, var(--color-text));
}
.header__logo:hover {
  text-decoration: none;
}
.header__logo-img {
  width: min(var(--header-logo-mobile-width, 120px), 42vw);
  max-width: var(--header-logo-mobile-width, 120px);
  max-height: 56px;
  object-fit: contain;
}
.header__logo-text {
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30vw;
}
.header__action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem;
  border-radius: var(--radius);
  color: var(--header-main-text, var(--color-text));
  font-weight: 600;
}
.header__action:hover {
  background: var(--color-bg-alt);
  text-decoration: none;
}
.header__action-icon {
  position: relative;
  display: inline-flex;
}
.header__action-label {
  display: none;
  font-size: 0.9rem;
}
.header__action--icon-only .header__action-label,
.header__account--icon-only .header__action-label {
  display: none !important;
}
.header__action-label--stacked {
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.header__action-hint {
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.78;
}

/* Badge de qty do carrinho — nasce vazio/oculto (H4 popula via evento + endpoint leve). */
.header__badge {
  position: absolute;
  top: -0.35rem;
  right: -0.5rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}
.header__badge:empty {
  display: none;
}

/* Busca — form compartilhado (snippets/header-search); inline = desktop, bar = mobile.
   O popover é progressivo: sem JS, o GET /busca continua funcionando normalmente. */
.header-search {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}
.header-search__input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-input);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: 1rem;
  background: var(--color-surface);
}
.header-search__input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.header-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.85rem;
  border: 1px solid var(--color-border-input);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
  cursor: pointer;
}
.header-search__submit:hover {
  color: var(--color-primary);
}
.header-search--outline_leading {
  align-items: center;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: transparent;
}
.header-search--outline_leading .header-search__input {
  order: 2;
  border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: transparent;
}
.header-search--outline_leading .header-search__submit {
  order: 1;
  align-self: stretch;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: transparent;
  color: var(--header-main-text, var(--color-text));
}
.header-search--outline_leading:focus-within {
  border-color: var(--color-primary);
  outline: 1px solid var(--color-primary);
}
@media (max-width: 900px) {
  .header-search--mobile-leading {
    align-items: center;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius);
    background: transparent;
  }
  .header-search--mobile-leading .header-search__input {
    order: 2;
    border: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: transparent;
  }
  .header-search--mobile-leading .header-search__submit {
    order: 1;
    align-self: stretch;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    background: transparent;
    color: var(--header-main-text, var(--color-text));
  }
  .header-search--mobile-leading:focus-within {
    border-color: var(--color-primary);
    outline: 1px solid var(--color-primary);
  }
}
.header-search__popover {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 140;
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}
.header-search__section {
  padding: 0.75rem;
}
.header-search__section + .header-search__section {
  border-top: 1px solid var(--color-border);
}
.header-search__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
  color: var(--color-text-strong);
  font-size: 0.82rem;
}
.header-search__text-button {
  padding: 0.2rem;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  cursor: pointer;
}
.header-search__text-button:hover {
  text-decoration: underline;
}
.header-search__product-list {
  display: grid;
}
.header-search__product {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.55rem;
  border-radius: var(--radius);
  color: var(--color-text);
}
.header-search__product:hover,
.header-search__product[aria-selected="true"] {
  background: var(--color-bg-alt);
  text-decoration: none;
}
.header-search__product-image {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  object-fit: cover;
}
.header-search__product-info {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}
.header-search__product-name {
  overflow: hidden;
  color: var(--color-text-strong);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-search__product-meta {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-search__prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.12rem;
  font-size: 0.82rem;
}
.header-search__prices del {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.header-search__prices strong {
  color: var(--color-primary-dark);
}
.header-search__seller-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.header-search__seller {
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-soft);
  font-size: 0.82rem;
}
.header-search__seller:hover,
.header-search__seller[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  text-decoration: none;
}
.header-search__all {
  position: sticky;
  bottom: 0;
  display: block;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
}
.header-search__all:hover,
.header-search__all[aria-selected="true"] {
  background: var(--color-primary-soft);
  text-decoration: none;
}
.header-search__recent-list {
  list-style: none;
}
.header-search__recent-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--radius);
}
.header-search__recent-row:has(
  .header-search__recent-link[aria-selected="true"]
) {
  background: var(--color-bg-alt);
}
.header-search__recent-link {
  flex: 1;
  min-width: 0;
  padding: 0.5rem;
  overflow: hidden;
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-search__recent-link:hover {
  text-decoration: none;
}
.header-search__recent-remove {
  padding: 0.35rem 0.5rem;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
}
.header-search__recent-remove:hover {
  color: var(--color-error);
}
.header-search__loading,
.header-search__empty {
  padding: 1.15rem;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  text-align: center;
}
/* Dropdown de conta — só desktop (mobile: tap navega direto). */
.header__account {
  position: relative;
  display: inline-flex;
}
.header__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 130;
  min-width: 13rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.header__dropdown-greeting {
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.25rem;
}
.header__dropdown-link {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.header__dropdown-link:hover {
  background: var(--color-bg-alt);
  text-decoration: none;
}
.header__dropdown-cta {
  display: block;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.25rem;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  text-align: center;
  font-weight: 600;
}
.header__dropdown-cta:hover {
  background: var(--color-primary-dark);
  text-decoration: none;
}
.header__dropdown-logout {
  display: block;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-top: 1px solid var(--color-border);
  margin-top: 0.25rem;
  background: none;
  color: var(--color-error);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.header__dropdown-logout:hover {
  background: var(--color-error-surface);
}
@media (max-width: 900px) {
  .header__dropdown {
    display: none !important;
  }
}

/* Drawer esquerdo de navegação (mobile) — miolo = drill-down de departamentos (H2). */
.header__overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--color-overlay);
}
.header__drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 120;
  width: min(20rem, 85vw);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.header__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  flex: none;
}
.header__drawer-title {
  font-weight: 700;
  color: var(--color-text-strong);
}
.header__drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-strong);
  cursor: pointer;
}
.header__drawer-close:hover {
  background: var(--color-bg-alt);
}
.drawer-nav {
  padding: 0 1rem 1.5rem;
}
.drawer-nav__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 1.25rem 0 0.35rem;
}
.drawer-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawer-nav__link {
  display: block;
  padding: 0.55rem 0.25rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-bg-alt);
}
.drawer-nav__link:hover {
  color: var(--color-primary);
  text-decoration: none;
}
.drawer-nav__link--all {
  font-weight: 600;
  color: var(--color-primary);
}
/* Linha que desce um nível: mesmo peso do link, chevron à direita. */
.drawer-nav__drill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--color-bg-alt);
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.drawer-nav__drill:hover {
  color: var(--color-primary);
}
.drawer-nav__drill .icon {
  flex: none;
  color: var(--color-text-muted);
}

/* Drill-down: painéis empilhados que deslizam horizontalmente. Todos vivem no
   DOM (server-side); o Alpine só troca `data-state`. `.header__drawer` tem
   overflow hidden — só o painel current aparece; os demais ficam inertes fora.
   `visibility: hidden` nos não-current tira o painel do hit-testing (um painel
   off-screen à direita não pode interceptar clique do painel visível); volta a
   visible só no current. O delay na transição de visibility deixa o slide-out
   terminar antes de sumir. O foco do painel usa `preventScroll` (header.liquid):
   sem isso o browser rola o container overflow pra revelar o alvo e desalinha a
   pilha (o conteúdo transformado à direita entra no scroll overflow do Chrome). */
.drawer-dd {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.drawer-dd__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--color-surface);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 0.25s ease,
    visibility 0s linear 0.25s;
}
.drawer-dd__panel[data-state="current"] {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.25s ease;
}
.drawer-dd__panel[data-state="behind"] {
  transform: translateX(-100%);
}
.drawer-dd__panel:focus {
  outline: none;
}
.drawer-dd__panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  flex: none;
}
.drawer-dd__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-strong);
  cursor: pointer;
}
.drawer-dd__back:hover {
  background: var(--color-bg-alt);
}
.drawer-dd__panel-title {
  font-weight: 700;
  color: var(--color-text-strong);
}
@media (prefers-reduced-motion: reduce) {
  .drawer-dd__panel {
    transition: none;
  }
}

/* Cluster à direita do bar (seletor de CEP + ações da conta/carrinho) — 1 item da grade. */
/* Seletor de CEP (H3, snippets/header-location) — bottom-sheet mobile, dropdown desktop.
   Mobile: gatilho icon-only (texto oculto, como os demais rótulos de ação). */
.header__location {
  position: relative;
  display: inline-flex;
}
.header__location-trigger {
  align-items: center;
  gap: 0.4rem;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.header__location-text {
  display: none;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.header__location-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--header-main-text, var(--color-text));
  opacity: 0.72;
}
.header__location-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--header-main-text, var(--color-text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}
/* Slot compacto do CEP no mobile (o bloco rótulo+valor fica oculto ≤900px). Só o
   CEP, curto e com ellipsis pra nunca empurrar a grade do header. Some no desktop. */
.header__location-value-short {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--header-main-text, var(--color-text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9ch;
}
.header__location-value-short:empty {
  display: none;
}
.header__location--icon-only .header__location-text,
.header__location--icon-only .header__location-value-short {
  display: none !important;
}
.header__location-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--color-overlay);
}
.header__location-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  padding: 1rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-md);
}
.header__location-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
.header__location-title {
  font-weight: 700;
  color: var(--color-text-strong);
}
.header__location-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-strong);
  cursor: pointer;
}
.header__location-close:hover {
  background: var(--color-bg-alt);
}
.header__location-help {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.header__location-field {
  display: flex;
  gap: 0.4rem;
}
.header__location-input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--color-surface);
}
.header__location-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.header__location-search {
  padding: 0 0.9rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  cursor: pointer;
}
.header__location-search:hover {
  background: var(--color-primary-dark);
}
.header__location-search:disabled {
  opacity: 0.6;
  cursor: default;
}
.header__location-error {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--color-error);
}
.header__location-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
}
.header__location-found {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-strong);
}
.header__location-cta {
  padding: 0.5rem 0.9rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.header__location-cta:hover {
  background: var(--color-primary-dark);
}
.header__location-correios {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--color-primary);
}

/* Header — desktop (≥901px). A ordem do documento é a composição visual; não
   existem presets fechados por marketplace. */
@media (min-width: 901px) {
  .utility-bar__inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .utility-bar__item--center {
    grid-column: 2;
    grid-row: 1;
  }
  .utility-bar__item--right {
    grid-column: 3;
  }
  .utility-bar__item--mobile-hidden {
    display: inline-flex;
  }
  .utility-bar__item--desktop-hidden {
    display: none;
  }
  .utility-bar .header__location-panel {
    right: auto;
    left: 0;
  }
  .header-main__inner {
    min-height: var(--header-main-height, 72px);
    padding: 0 var(--header-main-padding-x, 16px);
    flex-wrap: nowrap;
    gap: var(--header-main-gap, 16px);
  }
  .header-main__item {
    order: 0;
  }
  .header-main__item--mobile-hidden {
    display: flex;
  }
  .header-main__item--desktop-hidden {
    display: none;
  }
  .header-main__item--logo {
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  .header-main__item--search {
    width: auto;
  }
  .header-main__item--search-compact {
    flex: 0 1 16rem;
  }
  .header-main__item--search-medium {
    flex: 0 1 24rem;
  }
  .header-main__item--search-custom {
    flex: 0 1 var(--header-search-custom-width, 15rem);
  }
  .header-main__item--search-fill {
    flex: 1 1 24rem;
  }
  .header-main__item--logo-centered {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
  }
  .header-main__item--spacer-small {
    flex: 0 0 0.5rem;
  }
  .header-main__item--spacer-medium {
    flex: 0 0 1rem;
  }
  .header-main__item--spacer-large {
    flex: 0 0 2rem;
  }
  .header-main__item--spacer-grow {
    flex: 1 1 auto;
  }
  .header__logo {
    justify-content: flex-start;
  }
  .header__logo-img {
    width: var(--header-logo-width, 160px);
    max-width: var(--header-logo-width, 160px);
    max-height: calc(var(--header-main-height, 72px) - 16px);
  }
  .header__logo-text {
    max-width: 18rem;
  }
  .header__action {
    padding: 0.45rem 0.6rem;
  }
  .header__action-label {
    display: inline;
  }
  .header__action-label--stacked {
    display: flex;
  }
  /* Drawer segue disponível no desktop — o gatilho é o botão Departamentos da
     menubar (sf:open-departments); só o hambúrguer some. */
  .header__drawer {
    width: 360px;
  }
  /* CEP: texto visível e painel vira dropdown ancorado (sem overlay/sheet). */
  .header__location-text {
    display: flex;
  }
  .header__location-value-short {
    display: none;
  }
  .header__location-overlay {
    display: none !important;
  }
  .header__location-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    left: auto;
    bottom: auto;
    width: 20rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }
}

/* Menubar (seção `menubar`, grupo de layout `header`) — barra de navegação
   composta por blocks. Mobile-first: base = oculta (a navegação ≤900px vive no
   drawer do header); desktop (901px+) = barra horizontal. */
.menubar {
  position: relative;
  display: none;
  background: var(--menubar-bg);
  color: var(--menubar-text);
}
.menubar--bordered {
  border-bottom-width: var(--menubar-border-bottom-width, 1px);
  border-bottom-style: var(--menubar-border-bottom-style, solid);
  border-bottom-color: var(--menubar-border-bottom-color, var(--color-border));
}
.menubar--border-top {
  border-top-width: var(--menubar-border-top-width, 1px);
  border-top-style: var(--menubar-border-top-style, solid);
  border-top-color: var(--menubar-border-top-color, var(--color-border));
}
/* Ao abrir o mega menu, seu node precisa superar o stacking context do header;
   assim o overlay fixed também escurece logo, busca e ações do topo. */
.site-header [data-node-id]:has(.menubar__departments[aria-expanded="true"]) {
  position: relative;
  z-index: 110;
}
.menubar__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--menubar-gap, 4px);
  overflow-x: auto;
  scrollbar-width: thin;
}
.menubar--full .menubar__inner {
  max-width: none;
}
.menubar--align-left .menubar__inner {
  justify-content: flex-start;
}
.menubar--align-center .menubar__inner {
  justify-content: center;
}
.menubar__inner:has(.menubar__dropdown-toggle[aria-expanded="true"]),
.menubar__inner:has(.menubar__departments[aria-expanded="true"]) {
  overflow-x: visible;
}
.menubar__group {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  flex-shrink: 0;
}
.menubar__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  color: var(--menubar-text);
  white-space: nowrap;
  border-radius: var(--radius);
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.menubar__item:hover {
  background: var(--color-bg-alt);
  color: var(--color-text-strong);
  text-decoration: none;
}
.menubar__link-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}
.menubar__link--two-lines .menubar__line1 {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
.menubar__dropdown {
  position: relative;
  display: flex;
}
.menubar__dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 12rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.menubar__dropdown-link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  white-space: nowrap;
}
.menubar__dropdown-link:hover {
  background: var(--color-bg-alt);
  text-decoration: none;
}
.menubar__highlight {
  background: var(--color-primary);
  color: var(--color-on-primary);
  margin: 0.35rem 0;
  padding: 0.35rem 1rem;
  align-self: center;
}
.menubar__highlight:hover {
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
}
.menubar__departments-shell {
  display: flex;
}
/* Mega menu desktop: o conteúdo é configurável, mas a casca neutra, o foco e
   os limites de altura pertencem ao System para todo tema herdar o comportamento. */
.mega-menu__overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  border: 0;
  background: var(--color-overlay);
  cursor: default;
}
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 910;
  width: 100%;
  transform: translateX(-50%) scale(1);
  transform-origin: top center;
  border: 1px solid var(--color-border);
  border-top: 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.mega-menu-enter {
  transition:
    opacity 180ms ease-out,
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mega-menu-enter-start {
  opacity: 0;
  transform: translateX(-50%) scale(0.9);
}
.mega-menu-enter-end {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.mega-menu-leave {
  transition:
    opacity 120ms ease-in,
    transform 120ms ease-in;
}
.mega-menu-leave-start {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.mega-menu-leave-end {
  opacity: 0;
  transform: translateX(-50%) scale(0.96);
}
.mega-menu--width-full {
  width: 100%;
}
.mega-menu--width-wide {
  width: min(90vw, var(--container-width));
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.mega-menu--width-compact {
  width: min(80vw, 1000px);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.mega-menu--compact {
  max-height: 25rem;
}
.mega-menu--comfortable {
  max-height: 36rem;
}
.mega-menu--tall {
  max-height: min(75vh, 48rem);
}
.mega-menu__inner {
  max-width: var(--container-width);
  max-height: inherit;
  margin: 0 auto;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mega-menu__categories-head,
.mega-menu__sellers-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.mega-menu__categories-head h2,
.mega-menu__sellers-head h2 {
  margin: 0;
  font-size: 1rem;
}
.mega-menu__categories-head a,
.mega-menu__sellers-head a {
  flex: none;
  font-size: 0.82rem;
  font-weight: 600;
}
.mega-menu__categories {
  display: grid;
  gap: 1.25rem 2rem;
  padding-top: 0.8rem;
}
.mega-menu__categories--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mega-menu__categories--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mega-menu__categories--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mega-menu__category {
  min-width: 0;
}
.mega-menu__category-title {
  display: inline-block;
  margin-bottom: 0.3rem;
  color: var(--color-text-strong);
  font-size: 0.92rem;
  font-weight: 700;
}
.mega-menu__category-links {
  display: grid;
  gap: 0.15rem;
  list-style: none;
}
.mega-menu__category-links a {
  display: block;
  padding: 0.15rem 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mega-menu__category-links a:hover {
  color: var(--color-primary);
}
.mega-menu__sellers {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
}
.mega-menu__seller-list {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.7rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.mega-menu__seller-list::-webkit-scrollbar {
  display: none;
}
.mega-menu__seller {
  flex: 0 0 5.5rem;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  min-width: 0;
  color: var(--color-text-soft);
  scroll-snap-align: start;
  text-align: center;
}
.mega-menu__seller:hover {
  color: var(--color-primary);
  text-decoration: none;
}
.mega-menu__seller-logo {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-weight: 700;
}
.mega-menu__seller-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mega-menu__seller-name {
  width: 100%;
  overflow: hidden;
  font-size: 0.75rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mega-menu__custom {
  min-height: 8rem;
}
@media (min-width: 901px) {
  .menubar {
    display: block;
  }
  .header-search__popover {
    right: auto;
    left: 50%;
    width: min(44rem, calc(100vw - 2rem));
    max-height: none;
    overflow-y: visible;
    transform: translateX(-50%);
  }
  .header-search__all {
    position: static;
  }
  .header-search__product-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.15rem 0.35rem;
  }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 1.5rem 0;
  margin-top: 2rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  background: var(--color-surface);
}

/* ==========================================================================
   5. Componentes
   ========================================================================== */

/* ── Grade e card de produto ── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 1rem 0;
}
.product-card {
  display: flex;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.product-card--raised {
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.product-card--flat {
  border-color: transparent;
  background: transparent;
}
.product-card--hover-subtle:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.product-card__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 0.75rem;
  color: inherit;
}
.product-card__link:hover {
  text-decoration: none;
}
.product-card__media {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) * 0.75);
}
.product-card__image {
  flex: none;
  width: 100%;
  aspect-ratio: var(--product-image-ratio);
  object-fit: cover;
}
.product-card--image-contain .product-card__media {
  background: var(--color-bg-alt);
}
.product-card--image-contain .product-card__image {
  object-fit: contain;
}
.product-card--hover-image_zoom .product-card__image {
  transition: transform 0.25s ease;
}
.product-card--hover-image_zoom:hover .product-card__image {
  transform: scale(1.035);
}
.product-card__image-placeholder {
  width: 100%;
  aspect-ratio: var(--product-image-ratio);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
  font-size: 0.875rem;
}
.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.product-card__title {
  display: -webkit-box;
  min-height: calc(var(--product-title-lines, 2) * 1.35em);
  margin: 0.25rem 0;
  overflow: hidden;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--product-title-lines, 2);
}
.product-card--title-1 {
  --product-title-lines: 1;
}
.product-card--title-2 {
  --product-title-lines: 2;
}
.product-card--title-3 {
  --product-title-lines: 3;
}
.product-card__commercial {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}
.product-card__vendor,
.product-card__seller {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-card__vendor {
  margin: 0.35rem 0 0;
}
.product-card__price {
  display: flex;
  align-items: flex-end;
  min-height: 3.25rem;
}
.product-card__price .price {
  display: flex;
  min-height: 3.25rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.product-card__price .price--compare {
  margin-right: 0;
}
.product-card__installments {
  display: -webkit-box;
  min-height: 2.5em;
  margin: 0.2rem 0 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.product-card__seller {
  min-height: 1.2em;
  margin: 0.25rem 0 0;
}
.product-card__unavailable {
  min-height: 1.2em;
  margin: 0.2rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}
.product-card--presentation-editorial .product-card__title {
  font-size: 1rem;
  font-weight: 400;
}
.product-card--presentation-editorial .product-card__commercial {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-border);
}
.product-card--presentation-editorial .product-card__price,
.product-card--presentation-editorial .product-card__price .price {
  min-height: 0;
}
.product-card--presentation-editorial .price--current {
  color: var(--color-text);
}
.product-card__action {
  width: 100%;
  margin-top: 0.65rem;
  text-align: center;
}
.product-card--action-at-before_price .product-card__action {
  margin: 0 0 0.65rem;
}
@media (hover: hover) {
  .product-card--action-hover .product-card__action {
    display: none;
  }
  .product-card--action-hover:hover .product-card__action,
  .product-card--action-hover:focus-within .product-card__action {
    display: inline-flex;
  }
}
/* Revelação elevada: a ação e o conteúdo comercial se movem apenas na camada
   de pintura. O tamanho de layout do card permanece o mesmo, enquanto a
   superfície visual cresce para cima/baixo e ganha profundidade. */
@media (hover: hover) and (pointer: fine) {
  .product-card--action-hover.product-card--action-reveal-lift {
    --product-card-lift-space: 2.85rem;
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: visible;
  }
  .product-card--action-hover.product-card--action-reveal-lift .product-card__link {
    position: relative;
    z-index: 0;
    border-radius: inherit;
  }
  .product-card--action-hover.product-card--action-reveal-lift .product-card__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid transparent;
    border-radius: inherit;
    background: var(--color-surface);
    box-shadow: none;
    opacity: 0;
    transition:
      inset 0.18s ease,
      opacity 0.18s ease,
      box-shadow 0.18s ease;
  }
  .product-card--border.product-card--action-reveal-lift .product-card__link::before {
    border-color: var(--color-border);
  }
  .product-card--action-hover.product-card--action-reveal-lift .product-card__body,
  .product-card--action-hover.product-card--action-reveal-lift .product-card__commercial {
    position: relative;
  }
  .product-card--action-hover.product-card--action-reveal-lift .product-card__commercial {
    transition: transform 0.18s ease;
  }
  .product-card--action-hover.product-card--action-reveal-lift .product-card__action {
    position: absolute;
    z-index: 2;
    right: 0;
    left: 0;
    display: inline-flex;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.14s ease,
      transform 0.18s ease;
  }
  .product-card--action-at-before_price.product-card--action-reveal-lift .product-card__action {
    top: 0;
    transform: translateY(calc(-1 * var(--product-card-lift-space)));
  }
  .product-card--action-at-after_content.product-card--action-reveal-lift .product-card__action {
    top: calc(100% + 0.65rem);
    transform: translateY(-0.25rem);
  }
  .product-card--action-at-before_price.product-card--action-reveal-lift:hover .product-card__commercial,
  .product-card--action-at-before_price.product-card--action-reveal-lift:focus-within .product-card__commercial {
    transform: translateY(var(--product-card-lift-space));
  }
  .product-card--action-hover.product-card--action-reveal-lift:hover,
  .product-card--action-hover.product-card--action-reveal-lift:focus-within {
    z-index: 20;
    border-color: transparent;
    transform: translateY(-0.25rem);
  }
  .product-card--action-hover.product-card--action-reveal-lift:hover .product-card__link::before,
  .product-card--action-hover.product-card--action-reveal-lift:focus-within .product-card__link::before {
    inset: -0.4rem -0.4rem calc(-1 * var(--product-card-lift-space) - 0.4rem);
    opacity: 1;
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.2);
  }
  .product-card--action-at-before_price.product-card--action-reveal-lift:hover .product-card__action,
  .product-card--action-at-before_price.product-card--action-reveal-lift:focus-within .product-card__action {
    opacity: 1;
    transform: translateY(calc(-1 * var(--product-card-lift-space)));
  }
  .product-card--action-at-after_content.product-card--action-reveal-lift:hover .product-card__action,
  .product-card--action-at-after_content.product-card--action-reveal-lift:focus-within .product-card__action {
    opacity: 1;
    transform: translateY(0);
  }

  /* O viewport horizontal normalmente recorta no eixo vertical. O padding cria
     o espaço de pintura da elevação e a margem negativa o retira do fluxo, sem
     aumentar a altura ocupada pela seção nem provocar layout shift. */
  .showcase__content:has(.carousel .product-card--action-reveal-lift) .carousel__viewport {
    padding-block: 0.65rem calc(var(--product-card-lift-space, 2.85rem) + 0.65rem);
    margin-block: -0.65rem calc(-1 * var(--product-card-lift-space, 2.85rem) - 0.65rem);
  }
  .showcase__content:has(.product-card--action-reveal-lift:hover),
  .showcase__content:has(.product-card--action-reveal-lift:focus-within) {
    position: relative;
    z-index: 10;
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-card--action-reveal-lift,
  .product-card--action-reveal-lift .product-card__link::before,
  .product-card--action-reveal-lift .product-card__commercial,
  .product-card--action-reveal-lift .product-card__action {
    transition: none !important;
  }
}
.product-card--unavailable {
  opacity: 0.6;
}
.product-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.product-card__badges--below {
  margin-top: 0.5rem;
}
.product-card__badges--content {
  margin-top: 0.45rem;
}
.product-card__badges--image-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  flex-direction: column;
  gap: 0.2rem;
}
.product-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: fit-content;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-text-strong);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
}
.product-badge--pill {
  border-radius: var(--radius-pill);
}
.product-badge--square {
  border-radius: 0;
}
.product-badge--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.product-badge--accent {
  background: var(--color-accent);
  color: #fff;
}
.product-badge--success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.product-badge--warning {
  background: #fef3c7;
  color: var(--color-warning-text);
}
.product-badge--danger {
  background: var(--color-error-bg);
  color: var(--color-error);
}
.product-badge--neutral {
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
}
.product-badge--text {
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.product-badge--bar {
  width: 100%;
  justify-content: center;
  border-radius: 0;
  text-align: center;
}
.product-card__media > .product-badge {
  position: absolute;
  z-index: 1;
  max-width: calc(100% - 1rem);
}
.product-badge--image_top_left {
  top: 0.5rem;
  left: 0.5rem;
}
.product-badge--image_top_right {
  top: 0.5rem;
  right: 0.5rem;
}
.product-badge--ribbon_left,
.product-badge--ribbon_right {
  top: 0.8rem;
  min-width: 7rem;
  justify-content: center;
  border-radius: 0;
}
.product-badge--ribbon_left {
  left: -2.25rem;
  transform: rotate(-45deg);
}
.product-badge--ribbon_right {
  right: -2.25rem;
  transform: rotate(45deg);
}
.product-badge--ribbon.product-badge--image_top_left {
  top: 0.8rem;
  left: -2.25rem;
  min-width: 7rem;
  justify-content: center;
  border-radius: 0;
  transform: rotate(-45deg);
}
.product-badge--ribbon.product-badge--image_top_right {
  top: 0.8rem;
  right: -2.25rem;
  min-width: 7rem;
  justify-content: center;
  border-radius: 0;
  transform: rotate(45deg);
}
.product-card__media
  > .product-badge:nth-of-type(2).product-badge--image_top_left,
.product-card__media
  > .product-badge:nth-of-type(2).product-badge--image_top_right {
  top: 2.25rem;
}
.product-card__media
  > .product-badge:nth-of-type(3).product-badge--image_top_left,
.product-card__media
  > .product-badge:nth-of-type(3).product-badge--image_top_right {
  top: 4rem;
}

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card__image {
    transition: none !important;
  }
  .product-card:hover {
    transform: none;
  }
}

/* ── Vitrine de produtos v2 (`product-showcase`) ──
   Grid: colunas decimais desktop/mobile via custom props `--sf-cols`/`--sf-cols-mobile`
   (setadas inline na seção). Mobile-first: base usa `--sf-cols-mobile`, ≥901px troca
   pra `--sf-cols`. O modo carrossel usa o snippet base `carousel` (CSS `.carousel*`). */
.showcase {
  --sf-gap: 1.5rem;
  margin: 2rem 0;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: var(--sf-bg, transparent);
}
.showcase--gap-none { --sf-gap: 0; }
.showcase--gap-sm { --sf-gap: 0.5rem; }
.showcase--gap-md { --sf-gap: 1rem; }
.showcase--gap-lg { --sf-gap: 1.5rem; }
.showcase--card-padding-none .product-card__link { padding: 0; }
.showcase--card-padding-compact .product-card__link { padding: 0.4rem; }
.showcase--card-padding-normal .product-card__link { padding: 0.75rem; }
.showcase__title {
  margin: 0 0 1rem;
}
.showcase__heading--inline-action {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.showcase__heading-copy {
  min-width: 0;
}
.showcase__heading--inline-action .showcase__title {
  margin-bottom: 0;
}
.showcase--title-center .showcase__title {
  text-align: center;
}
.showcase--title-right .showcase__title {
  text-align: right;
}
.showcase__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}
.showcase__tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.9rem;
  margin-bottom: -1px;
  cursor: pointer;
  font: inherit;
  color: var(--color-text-muted);
}
.showcase__tab.is-active {
  color: var(--sf-accent, var(--color-accent));
  border-bottom-color: var(--sf-accent, var(--color-accent));
  font-weight: 600;
}
.showcase__list-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}
.showcase__list-head--bottom {
  justify-content: center;
  margin: 1.25rem 0 0;
}
.showcase__view-all {
  color: var(--sf-accent, var(--color-accent));
  font-size: 0.9rem;
  font-weight: 600;
}
.showcase__view-all--button {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.4rem;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.showcase__view-all--button:hover {
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
  text-decoration: none;
}
.showcase__view-all--outline {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}
.showcase__view-all--outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}
.showcase__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-gap);
  margin: 0.5rem 0;
}
.showcase__grid > .product-card {
  flex: 0 0
    calc(
      (100% - (var(--sf-cols-mobile, 2.2) - 1) * var(--sf-gap)) /
        var(--sf-cols-mobile, 2.2)
    );
}
.showcase--no-brand .product-card__vendor {
  display: none;
}
.showcase__empty {
  padding: 1rem 0;
}
@media (min-width: 900px) {
  .showcase__grid > .product-card {
    flex-basis: calc(
      (100% - (var(--sf-cols, 4) - 1) * var(--sf-gap)) / var(--sf-cols, 4)
    );
  }
}
@media (min-width: 640px) and (max-width: 899px) {
  .showcase__grid > .product-card {
    flex-basis: calc(
      (100% - (var(--sf-cols-tablet, 3.2) - 1) * var(--sf-gap)) /
        var(--sf-cols-tablet, 3.2)
    );
  }
}

/* ── Preço ── */
.price--current {
  color: var(--color-accent);
}
.price--compare {
  color: var(--color-text-faint);
  font-size: 0.85em;
  margin-right: 0.4rem;
}
.price--unavailable {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ── Listas de departamentos e marcas ── */
.department-list {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.brand-list {
  list-style: none;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.brand-list-section {
  margin: 1.5rem 0;
}
.brand-list-section--chips .brand-list li {
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

/* ── Vitrine de lojas ── */
.seller-showcase {
  margin: 1.5rem 0;
}
.seller-showcase__title {
  margin: 0 0 0.75rem;
}
.seller-showcase__grid {
  --seller-gap: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.seller-showcase__slide {
  min-width: 0;
}
.seller-showcase__grid .seller-showcase__slide {
  flex: 0 0
    calc(
      (100% - (var(--seller-cols, 6) - 1) * var(--seller-gap)) /
        var(--seller-cols, 6)
    );
}
.seller-showcase__card {
  display: flex;
  min-height: 7.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.8rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: center;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}
.seller-showcase--outlined .seller-showcase__card {
  border: 1px solid var(--color-border);
}
.seller-showcase__card:hover {
  border-color: color-mix(
    in srgb,
    var(--color-primary) 40%,
    var(--color-border)
  );
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transform: translateY(-1px);
}
.seller-showcase__logo {
  display: flex;
  width: 100%;
  height: 3.25rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-primary);
  font-size: 1.5rem;
  font-weight: 700;
}
.seller-showcase__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.seller-showcase__name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
}

@media (max-width: 899px) {
  .seller-showcase__grid {
    --seller-cols: var(--seller-cols-tablet, 4);
  }
}

@media (max-width: 639px) {
  .seller-showcase__grid {
    --seller-cols: var(--seller-cols-mobile, 2);
  }
}

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  margin-bottom: 1.25rem;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}
.breadcrumb a {
  color: var(--color-text-muted);
}
.breadcrumb a:hover {
  color: var(--color-primary);
}
.breadcrumb__separator {
  display: inline-flex;
  color: var(--color-text-faint);
}
.breadcrumb [aria-current="page"] {
  color: var(--color-text-soft);
}

/* ── Busca / listagem / facetas (reativas — onda 3) ── */
.search-summary {
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}
.search-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.search-main {
  flex: 1;
  min-width: 0;
}
.search-main > .product-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}
@media (max-width: 639px) {
  .search-main > .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

/* Toolbar: sort à direita; botão "Filtrar" só no mobile (empurra o sort). */
.listing-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.facets-toggle {
  display: none;
  margin-right: auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-strong);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.facets-toggle:hover {
  border-color: var(--color-primary);
}
.search-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.search-sort__select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.search-sort__select:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Facetas — coluna fixa no desktop. */
.search-facets {
  flex: 0 0 220px;
  font-size: 0.875rem;
}
.facets-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-strong);
  margin: 1.25rem 0 0.5rem;
}
.facets-title:first-of-type {
  margin-top: 0;
}

/* Chrome do drawer mobile (cabeçalho + overlay) — oculto no desktop. */
.facets-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.facets-head__title {
  font-weight: 700;
  color: var(--color-text-strong);
}
.facets-head__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-strong);
  cursor: pointer;
}
.facets-head__close:hover {
  background: var(--color-bg-alt);
}
.facets-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--color-overlay);
}

/* Listas de facetas (departamentos em árvore + marcas). */
.facet-tree,
.facet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.facet-children {
  list-style: none;
  margin: 0;
  padding-left: 1.1rem;
}
.facet-node {
  margin: 0.1rem 0;
}
.facet-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
  cursor: pointer;
  color: var(--color-text);
}
.facet-check:hover {
  color: var(--color-primary);
}
.facet-check__box {
  flex: none;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.facet-check__label {
  min-width: 0;
}
.facet-check__count {
  flex: none;
}
/* Filho coberto por um pai marcado: some do estado ativo, aparece esmaecido. */
.facet-check--covered {
  color: var(--color-text-muted);
  cursor: default;
}
.facet-check--covered .facet-check__box {
  cursor: default;
}

.search-price-range {
  margin-top: 0.25rem;
}
.price-filter {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.price-filter label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
}
.price-filter input {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 0.875rem;
}
.price-filter input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.facets-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.facets-apply {
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.facets-apply:hover {
  background: var(--color-primary-dark);
}
.facets-clear {
  align-self: flex-start;
}
/* Desktop com JS: as facetas aplicam no change (reativo), então o botão some. */
@media (min-width: 641px) {
  .listing-form[data-js] .facets-apply {
    display: none;
  }
}
.search-empty {
  padding: 2.5rem 0;
  text-align: center;
  color: var(--color-text-muted);
}
.pagination {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
}
/* alpine-ajax marca aria-busy="true" no alvo durante o fetch; feedback de carregamento sem reload. */
#listing-results {
  transition: opacity 0.15s ease;
}
#listing-results[aria-busy="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Página não encontrada ── */
.not-found {
  text-align: center;
  padding: 4rem 1rem;
}
.not-found .btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* ── Composição estrutural: box recursivo ── */
[data-box-flow] {
  min-width: 0;
  gap: var(--box-gap, 1rem);
}
[data-box-flow][data-display="block"] {
  display: block;
}
[data-box-flow][data-display="flex"] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
[data-box-flow][data-display="grid"] {
  display: grid;
  grid-template-columns: var(--box-columns, repeat(2, minmax(0, 1fr)));
}
[data-box-flow][data-direction="row"] {
  flex-direction: row;
}
[data-box-flow][data-direction="column"] {
  flex-direction: column;
}
[data-box-flow][data-wrap="true"] {
  flex-wrap: wrap;
}
[data-box-flow][data-align="start"] {
  align-items: flex-start;
}
[data-box-flow][data-align="center"] {
  align-items: center;
}
[data-box-flow][data-align="end"] {
  align-items: flex-end;
}
[data-box-flow][data-align="stretch"] {
  align-items: stretch;
}
[data-box-flow][data-justify="start"] {
  justify-content: flex-start;
}
[data-box-flow][data-justify="center"] {
  justify-content: center;
}
[data-box-flow][data-justify="end"] {
  justify-content: flex-end;
}
[data-box-flow][data-justify="space-between"] {
  justify-content: space-between;
}
[data-box-flow][data-justify="space-around"] {
  justify-content: space-around;
}
[data-box-flow][data-justify="space-evenly"] {
  justify-content: space-evenly;
}

/* ── PDP — detalhe do produto ── */
.product-detail > [data-node-id] {
  min-width: 0;
}
.product-detail__media,
.product-detail__info,
.product-detail__below {
  min-width: 0;
}
.product-detail__info > [data-node-id] + [data-node-id] {
  margin-top: 1rem;
}
.product-detail__below {
  margin-top: 2rem;
}
.product-detail__below > [data-node-id] + [data-node-id] {
  margin-top: 2rem;
}
.product-detail__main-image {
  width: 100%;
  aspect-ratio: var(--product-image-ratio);
  object-fit: contain;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.product-gallery__opener {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.product-gallery__opener--main {
  line-height: 0;
}
.product-gallery__opener--grid {
  line-height: 0;
}
.product-gallery--fit-cover .product-detail__main-image,
.product-gallery--fit-cover .product-detail__grid-image {
  object-fit: cover;
}
.product-gallery--fit-contain .product-detail__grid-image {
  object-fit: contain;
  background: var(--color-surface);
}
.product-gallery__placeholder {
  height: 300px;
}
.product-detail__thumbnails {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.product-detail__thumb {
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}
.product-detail__thumb img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}
.product-detail__thumb--active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-soft);
}
.product-gallery--thumbs-left .product-detail__gallery {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
}
.product-gallery--thumbs-left .product-gallery__opener--main {
  grid-column: 2;
  grid-row: 1;
}
.product-gallery--thumbs-left .product-detail__main-image {
  grid-column: 2;
  grid-row: 1;
}
.product-gallery--thumbs-left .product-detail__thumbnails {
  grid-column: 1;
  grid-row: 1;
  flex-direction: column;
  margin-top: 0;
  flex-wrap: nowrap;
  max-height: 36rem;
  overflow-y: auto;
}
/* Galeria em grade (gallery_layout: grid) — todas as imagens; mobile-first 1 coluna, 2 a partir de 641px. */
.product-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.product-detail__grid-image {
  width: 100%;
  aspect-ratio: var(--product-image-ratio);
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
@media (min-width: 641px) {
  .product-detail__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.product-lightbox[hidden] {
  display: none;
}
.product-lightbox__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgb(0 0 0 / 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: zoom-out;
}
.product-lightbox__surface {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  width: min(96vw, 96rem);
  height: min(94dvh, 64rem);
  color: #fff;
}
.product-lightbox__figure {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
}
.product-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
}
.product-lightbox__close,
.product-lightbox__pager-button {
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.28);
  background: rgb(0 0 0 / 0.35);
  color: #fff;
  cursor: pointer;
  transition: background 120ms ease;
}
.product-lightbox__close:hover,
.product-lightbox__pager-button:hover {
  background: rgb(0 0 0 / 0.62);
}
.product-lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  font-size: 2rem;
  line-height: 1;
}
.product-lightbox__footer {
  min-width: 0;
  padding-top: 0.75rem;
  text-align: center;
}
.product-lightbox__pager {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.65rem;
  padding: 0.3rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-pill);
  background: rgb(0 0 0 / 0.68);
  box-shadow: var(--shadow-md);
}
.product-lightbox__pager-button {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  font-size: 1.5rem;
  line-height: 1;
}
.product-lightbox__counter {
  min-width: 3.5rem;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.product-lightbox__thumbnails {
  display: flex;
  justify-content: safe center;
  gap: 0.45rem;
  max-width: 100%;
  overflow-x: auto;
  padding: 0.15rem;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.product-lightbox__thumbnails::-webkit-scrollbar {
  display: none;
}
.product-lightbox__thumbnail {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.12);
  opacity: 0.62;
  cursor: pointer;
  scroll-snap-align: center;
}
.product-lightbox__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-lightbox__thumbnail--active {
  border-color: #fff;
  opacity: 1;
}
body.product-lightbox-open {
  overflow: hidden;
}
@media (max-width: 640px) {
  .product-lightbox {
    padding: 0.65rem;
  }
  .product-lightbox__surface {
    width: 100%;
    height: calc(100dvh - 1.3rem);
  }
  .product-lightbox__close {
    top: 0.65rem;
    right: 0.65rem;
  }
  .product-lightbox__thumbnail {
    width: 3rem;
    height: 3rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega-menu-enter,
  .mega-menu-leave {
    transition-duration: 1ms;
  }
}
.product-detail__description {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.product-detail__description img {
  max-width: 100%;
  height: auto;
}
.product-heading h1 {
  margin-bottom: 0.4rem;
}
.product-seller {
  margin: 0.4rem 0;
}
.product-detail__vendor {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  color: var(--color-text);
}
.product-detail__vendor:hover {
  text-decoration: none;
}
.product-detail__vendor strong {
  color: var(--color-text-strong);
}
.product-detail__vendor--subtle,
.product-detail__vendor--boxed {
  display: flex;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-lg);
}
.product-detail__vendor--subtle {
  background: var(--color-bg-alt);
}
.product-detail__vendor--boxed {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.product-detail__vendor:is(a):hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.product-detail__price {
  font-size: 1.25rem;
  margin: 0.5rem 0;
}
.selected-variation {
  margin-top: 1rem;
}
.product-purchase {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.product-purchase__quantity {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.product-purchase__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-soft);
}
.product-purchase__submit {
  flex: 1;
}
.product-purchase__feedback {
  min-height: 1.25rem;
  margin-top: 0.5rem;
  color: var(--color-success-text);
}
.product-shipping {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.product-shipping h2 {
  margin-top: 0;
}
.shipping-form {
  max-width: 25rem;
}
.shipping-options {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.75rem;
  list-style: none;
}
.shipping-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.shipping-option__icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.product-shipping--no-icons .shipping-option {
  grid-template-columns: minmax(0, 1fr);
}
.product-shipping--no-icons .shipping-option__icon {
  display: none;
}
.shipping-option__body {
  min-width: 0;
}
.shipping-option__deadline {
  display: block;
  color: var(--color-text-strong);
  font-size: 0.9rem;
}
.shipping-option__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.1rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.shipping-option__price {
  color: var(--color-text-strong);
  font-weight: 700;
}
.shipping-option__pickups {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-border);
}
.shipping-option__pickup {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.shipping-option__pickup-address {
  min-width: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.shipping-option__map {
  flex: none;
  font-size: 0.8rem;
  font-weight: 700;
}
.shipping-help {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: 0.8rem;
}
.product-shipping--compact .shipping-option {
  padding: 0.55rem 0.65rem;
}
.shipping-error {
  margin-top: 0.5rem;
  color: var(--color-error);
}
@media (max-width: 480px) {
  .product-purchase {
    align-items: stretch;
    flex-direction: column;
  }
  .product-purchase__submit {
    width: 100%;
  }
  .quantity-control {
    width: 100%;
    grid-template-columns: var(--control-height) 1fr var(--control-height);
  }
}
@media (max-width: 1023px) {
  [data-box-flow][data-display="grid"] {
    grid-template-columns: var(--box-columns-tablet, var(--box-columns));
  }
  [data-box-flow][data-tablet-direction="row"] {
    flex-direction: row;
  }
  [data-box-flow][data-tablet-direction="column"] {
    flex-direction: column;
  }
}
@media (max-width: 800px) {
  .product-gallery--thumbs-left .product-detail__gallery {
    display: block;
  }
  .product-gallery--thumbs-left .product-detail__thumbnails {
    flex-direction: row;
    margin-top: 0.75rem;
    overflow-x: auto;
  }
}
@media (max-width: 767px) {
  [data-box-flow][data-display="grid"] {
    grid-template-columns: var(
      --box-columns-mobile,
      var(--box-columns-tablet, var(--box-columns))
    );
  }
  [data-box-flow][data-mobile-direction="row"] {
    flex-direction: row;
  }
  [data-box-flow][data-mobile-direction="column"] {
    flex-direction: column;
  }
}
.chip {
  display: inline-flex;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
  margin: 0.1rem;
}
.display-variation {
  background: var(--color-primary-soft);
}

/* PDP — seletor de variação por características (P-01) */
.variation-groups {
  margin: 1rem 0;
}
.variation-group {
  margin-bottom: 0.85rem;
}
.variation-group__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-soft);
  margin-bottom: 0.35rem;
}
.variation-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.variation-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
}
a.variation-option:hover {
  border-color: var(--color-primary);
  text-decoration: none;
}
.variation-option--active {
  border: 2px solid var(--color-primary);
  color: var(--color-text-strong);
  font-weight: 600;
}
/* Sem estoque no cross-filter: tracejada e apagada, mas sempre clicável (paridade legado). */
.variation-option--no-stock {
  border-style: dashed;
  color: var(--color-text-muted);
}
.variation-swatch {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* PDP — pseudo-variações por atributos extras (P-09) */
.similar-facets {
  margin: 1rem 0;
}
.similar-facet {
  margin-bottom: 0.85rem;
}
.similar-facet__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-soft);
  margin-bottom: 0.35rem;
}
.similar-facet__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.similar-facet__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
}
a.similar-facet__option:hover {
  border-color: var(--color-primary);
  text-decoration: none;
}
.similar-facet__option--image {
  width: 3.75rem;
  height: 3.75rem;
  padding: 0.2rem;
  overflow: hidden;
}
.similar-facet__image {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius) * 0.75);
  object-fit: cover;
}
.similar-facet__option--image-fallback {
  width: auto;
  min-width: 3.75rem;
  overflow: visible;
}
.similar-facet__fallback {
  padding: 0 0.35rem;
  overflow-wrap: anywhere;
  text-align: center;
}

/* PDP — outras lojas (P-08) */
.other-offers {
  margin: 1.5rem 0;
}
.other-offers__details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.other-offers__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem;
  color: var(--color-text-strong);
  cursor: pointer;
}
.other-offers__summary-title {
  font-weight: 700;
}
.other-offers__summary-price {
  color: var(--color-text-soft);
  font-size: 0.85rem;
  text-align: right;
}
.other-offers--compact .other-offers__list {
  margin: 0;
  padding: 0.75rem;
  border-top: 1px solid var(--color-border);
}
.other-offers__list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.other-offers__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: inherit;
}
.other-offers__link:hover {
  border-color: var(--color-primary);
  text-decoration: none;
}
.other-offers__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.other-offers__logo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  color: var(--color-text-faint);
  font-weight: 600;
}
.other-offers__seller {
  flex: 1;
  font-weight: 600;
  color: var(--color-text-strong);
}

/* PDP — parcelas por bandeira (P-29): <details> nativo por bandeira */
.product-installments {
  margin: 1rem 0;
}
.product-installments__flag {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin: 0.4rem 0;
  padding: 0.4rem 0.75rem;
}
.product-installments__flag summary {
  cursor: pointer;
  font-weight: 600;
}
.product-installments__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0.5rem 0;
}
.product-installments__table th {
  text-align: left;
  color: var(--color-text-faint);
  font-weight: 500;
  padding: 0.2rem 0.4rem;
}
.product-installments__table td {
  padding: 0.2rem 0.4rem;
  border-top: 1px solid var(--color-border);
}

/* PDP — ficha técnica (P-23) */
.product-specs {
  margin: 1.5rem 0;
}
.product-specs__group {
  margin-top: 1rem;
}
.product-specs__group > summary,
.product-specs__group > h3 {
  font-weight: 650;
  color: var(--color-text-strong);
}
.product-specs__list {
  margin: 0.5rem 0 0;
  border-top: 1px solid var(--color-border);
}
.product-specs__row {
  display: grid;
  grid-template-columns: minmax(9rem, 40%) minmax(0, 1fr);
}
.product-specs__row:nth-child(odd) {
  background: var(--color-bg-alt);
}
.product-specs__row dt,
.product-specs__row dd {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--color-border);
}
.product-specs__row dt {
  font-weight: 600;
  color: var(--color-text-strong);
}
.product-specs--grid .product-specs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  border: 0;
}
.product-specs--grid .product-specs__row {
  display: block;
  padding: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.product-specs--grid .product-specs__row dt,
.product-specs--grid .product-specs__row dd {
  padding: 0;
  border: 0;
}

/* PDP — vídeo do produto (P-23) */
.product-video {
  margin-top: 1rem;
}
.product-video__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}

/* PDP — compartilhar + fale com a loja (P-23) */
.product-support {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
  flex-wrap: wrap;
}
.product-support__share {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 0.9rem;
  cursor: pointer;
}
.product-support__share:hover {
  border-color: var(--color-primary);
}
.product-support__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.product-support__whatsapp:hover {
  border-color: var(--color-primary);
  text-decoration: none;
}

.product-extra-offer {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.product-extra-offer--highlight {
  padding: 0.85rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
}
.product-extra-offer--subtle {
  padding: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}
.product-extra-offer--inline {
  padding: 0.5rem 0;
}
.product-extra-offer__body {
  flex: 1;
  min-width: 0;
}
.product-extra-offer__title {
  display: block;
  color: var(--color-text-strong);
}
.product-extra-offer__price {
  margin: 0.2rem 0;
}
.product-extra-offer__icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}
.product-extra-offer__icon svg {
  width: 100%;
  height: 100%;
}
.product-extra-offer__status {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  font-size: 0.75rem;
  font-weight: 700;
}
.product-extra-offer__hint {
  display: block;
  margin-top: 0.3rem;
  color: var(--color-text-muted);
}

/* PDP — relacionados reutilizam o carrossel canônico (setas, snap, touch e barra oculta). */
.product-related {
  margin: 2rem 0 0;
}
.product-related > h2 {
  margin-bottom: 0.75rem;
}
.product-related__slide {
  display: flex;
  padding-block: 0.15rem;
}
.product-related__slide .product-card {
  width: 100%;
}
.product-related .carousel__arrow {
  top: calc(50% + 0.2rem);
}
.product-related--grid .product-related__track {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  overflow: visible;
}
@media (max-width: 800px) {
  .product-related--grid .product-related__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-specs--grid .product-specs__list {
    grid-template-columns: 1fr;
  }
  .product-related .carousel__arrow {
    display: none;
  }
}

/* PDP — FAQ do marketplace (P-23): <details> nativo */
.product-faq {
  margin: 2.5rem auto 0;
  max-width: 48rem;
}
.product-faq__title {
  text-align: center;
  margin-bottom: 1rem;
}
.product-faq__item {
  border-bottom: 1px solid var(--color-border);
}
.product-faq__item:first-of-type {
  border-top: 1px solid var(--color-border);
}
.product-faq__question {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 0.2rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-strong);
}
.product-faq__icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.product-faq__icon svg {
  width: 100%;
  height: 100%;
}
.product-faq__answer {
  padding: 0 0.2rem 0.9rem;
  color: var(--color-text);
}
.product-faq__answer a {
  text-decoration: underline;
}

/* ── Carrinho: primitives compartilhados entre página e drawer ── */
.cart-page {
  width: 100%;
}
.cart-page__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.cart-page__head h1 {
  margin: 0;
}
.cart-page__head span {
  color: var(--color-text-soft);
  font-size: 0.875rem;
}
.cart-layout--page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
  align-items: start;
  gap: 1.5rem;
}
.cart-layout__stores {
  min-width: 0;
}
.cart-store {
  overflow: hidden;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.cart-store__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.cart-store__head h2 {
  margin: 0.1rem 0 0;
  font-size: 1rem;
}
.cart-store__eyebrow {
  display: block;
  color: var(--color-text-soft);
  font-size: 0.72rem;
  line-height: 1.2;
}
.cart-store__count {
  flex: none;
  color: var(--color-text-soft);
  font-size: 0.78rem;
}
.cart-store__items {
  padding-inline: 1rem;
}
.cart-line {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}
.cart-line:last-child {
  border-bottom: 0;
}
.cart-line--unavailable {
  opacity: 0.62;
}
.cart-line__media {
  display: block;
  align-self: start;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}
.cart-line__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cart-line__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-bg-alt), var(--color-border));
}
.cart-line__content {
  min-width: 0;
}
.cart-line__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.cart-line__name {
  min-width: 0;
  color: var(--color-text-strong);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.3;
}
.cart-line__heading form {
  flex: none;
  margin: 0;
}
.cart-line__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-error-surface);
  color: var(--color-error);
  cursor: pointer;
}
.cart-line__remove:hover {
  background: var(--color-error);
  color: #fff;
}
.cart-line__variations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.cart-variation {
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
  font-size: 0.7rem;
}
.cart-line__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.65rem;
}
.cart-line__bottom form {
  margin: 0;
}
.cart-line__bottom .quantity-control {
  width: auto;
  height: 1.9rem;
  overflow: hidden;
  grid-template-columns: 1.85rem 2.4rem 1.85rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
}
.cart-line__bottom .quantity-control__button {
  width: auto;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  line-height: 1;
}
.cart-line__bottom .quantity-control__button svg {
  display: block;
}
.cart-line__bottom .quantity-control__input {
  width: auto;
  height: 100%;
  min-height: 0;
  padding: 0 0.1rem;
  border: 0;
  border-inline: 1px solid var(--color-border-input);
  line-height: 1.75rem;
}
.cart-line__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.cart-line__price s {
  color: var(--color-text-muted);
  font-size: 0.68rem;
}
.cart-line__price strong {
  color: var(--color-text-strong);
  font-size: 0.92rem;
}
.cart-line__warning {
  margin: 0.45rem 0 0;
  color: var(--color-error);
  font-size: 0.75rem;
}
.cart-store__discounts {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0.65rem 1rem;
  list-style: none;
  border-top: 1px dashed var(--color-border);
  background: var(--color-bg-alt);
}
.cart-store__discounts li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-text-soft);
  font-size: 0.78rem;
}
.cart-store__discounts li span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.cart-store__discounts strong {
  color: var(--color-success-text);
}
.cart-store__shipping {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-alt) 55%, var(--color-surface));
}
.cart-store__shipping-icon {
  display: inline-flex;
  color: var(--color-primary);
}
.cart-store__shipping-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  font-size: 0.77rem;
}
.cart-store__shipping-copy span {
  overflow: hidden;
  color: var(--color-text-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-store__shipping-change {
  border: 0;
  background: none;
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: 650;
  cursor: pointer;
}
.cart-store__subtotal {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
}
.cart-store__subtotal span {
  color: var(--color-text-soft);
}
.cart-layout--page .cart-layout__summary {
  position: sticky;
  top: calc(var(--header-sticky-offset, 0px) + 1rem);
}
.cart-summary-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.cart-summary-card__shipping {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.cart-summary-card__shipping-toggle {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0;
  border: 0;
  background: none;
  color: var(--color-text-strong);
  text-align: left;
  cursor: pointer;
}
.cart-summary-card__shipping-icon {
  display: inline-flex;
  color: var(--color-primary);
}
.cart-summary-card__shipping-label {
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-summary-card__shipping-chevron {
  display: inline-flex;
  color: var(--color-text-soft);
  transition: transform 140ms ease;
}
.cart-summary-card__shipping-chevron--open {
  transform: rotate(180deg);
}
.cart-summary-card__shipping-value {
  min-width: 3.5rem;
  color: var(--color-text-strong);
  font-size: 0.78rem;
  font-weight: 650;
  text-align: right;
}
.cart-summary-card__shipping-expand {
  padding-top: 0.55rem;
}
.cart-summary-card__shipping form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  margin: 0;
}
.cart-summary-card__shipping .form-control,
.cart-summary-card__shipping .btn {
  height: 2.25rem;
}
.cart-summary-card__coupon {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.cart-summary-card__coupon-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 0;
  background: none;
  color: var(--color-primary);
  cursor: pointer;
}
.cart-summary-card__coupon-trigger span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 650;
}
.cart-summary-card__coupon-trigger span:last-child {
  font-size: 0.72rem;
}
.cart-coupon-applied {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: 650;
}
.cart-summary-card__coupon form {
  margin-left: auto;
}
.cart-summary-card__coupon form button {
  display: inline-flex;
  padding: 0.3rem;
  border: 0;
  background: none;
  color: var(--color-text-soft);
  cursor: pointer;
}
.cart-totals {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0.9rem 1rem;
}
.cart-totals div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
}
.cart-totals dt {
  color: var(--color-text-soft);
}
.cart-totals dd {
  margin: 0;
  color: var(--color-text-strong);
  font-weight: 600;
}
.cart-totals__discount dd {
  color: var(--color-success-text);
}
.cart-totals__discount-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.cart-totals__discount-chevron {
  display: inline-flex;
  transition: transform 140ms ease;
}
.cart-totals__discount-chevron--open {
  transform: rotate(180deg);
}
.cart-totals .cart-totals__breakdown {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.28rem 0.75rem;
  padding: 0.1rem 0 0.15rem 0.75rem;
  border-left: 2px solid var(--color-border);
  font-size: 0.72rem;
}
.cart-totals__breakdown dt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-totals__breakdown dd {
  color: var(--color-success-text);
  font-weight: 550;
}
.cart-totals .cart-totals__grand {
  align-items: baseline;
  margin-top: 0.2rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-border);
  font-size: 1rem;
}
.cart-totals__grand dd {
  font-size: 1.2rem;
}
.cart-summary-card__checkout {
  display: flex;
  margin: 0 1rem;
}
.cart-summary-card__full {
  display: block;
  padding: 0.7rem 1rem 0.9rem;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 600;
}
.cart-empty {
  display: flex;
  max-width: 30rem;
  margin: 3rem auto;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.cart-empty > span {
  display: inline-flex;
  padding: 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
}
.cart-empty h2 {
  margin: 0.8rem 0 0.2rem;
}
.cart-empty p {
  margin-bottom: 1rem;
}

/* Modais de cupom e frete. */
.cart-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.cart-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: color-mix(in srgb, #000 52%, transparent);
  backdrop-filter: blur(3px);
  cursor: default;
}
.cart-modal__dialog {
  position: relative;
  width: min(28rem, 100%);
  max-height: min(80vh, 40rem);
  overflow-y: auto;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.cart-modal__head {
  display: flex;
  position: sticky;
  z-index: 1;
  top: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.cart-modal__head h3 {
  margin: 0;
  font-size: 1rem;
}
.cart-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-text-strong);
  cursor: pointer;
}
.cart-shipping-options,
.cart-coupon-list {
  display: grid;
  gap: 0.55rem;
  padding: 1rem;
}
.cart-shipping-options form,
.cart-coupon-list form {
  margin: 0;
}
.cart-shipping-option {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-strong);
  text-align: left;
  cursor: pointer;
}
.cart-shipping-option--selected {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}
.cart-shipping-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cart-shipping-option span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.cart-shipping-option span:last-child {
  align-items: flex-end;
  text-align: right;
}
.cart-shipping-option small {
  color: var(--color-text-soft);
  font-size: 0.7rem;
  font-weight: 400;
}
.cart-coupon-ticket {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 2.8rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-strong);
  text-align: left;
  cursor: pointer;
}
.cart-coupon-ticket__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0.7rem 0.8rem;
  border: 1px dashed var(--color-primary);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}
.cart-coupon-ticket__body small {
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-coupon-ticket__stub {
  position: relative;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--color-primary);
}
.cart-coupon-ticket__stub::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  width: 0.9rem;
  height: 1.3rem;
  border-radius: 1rem 0 0 1rem;
  background: var(--color-surface);
  transform: translateY(-50%);
}
.cart-coupon-ticket:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
.cart-coupon-ticket--selected .cart-coupon-ticket__body {
  background: color-mix(
    in srgb,
    var(--color-primary) 14%,
    var(--color-surface)
  );
}
.cart-coupon-manual {
  display: block;
  padding: 0 1rem 0.4rem;
  color: var(--color-text-soft);
  font-size: 0.75rem;
}
.cart-coupon-manual__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  padding: 0 1rem 1rem;
}
.tag {
  display: inline-flex;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.6rem;
  font-size: 0.75rem;
}
.seller-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 36rem;
  margin: 1rem 0;
}
.seller-search .form-control {
  flex: 1;
  min-width: 0;
}

/* ── Autenticação (entrar / cadastro / recuperação) ── */
.auth-page {
  max-width: 28rem;
  margin: 1rem auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.auth-page h1 {
  margin-bottom: 1rem;
}
.auth-page form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.auth-row {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.auth-row .auth-field {
  flex: 1 1 10rem;
}
.auth-field small.muted {
  font-size: 0.8rem;
}
.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}
.auth-check input {
  margin-top: 0.2rem;
}
.auth-error {
  background: var(--color-error-surface);
  border: 1px solid var(--color-error-border);
  color: var(--color-error);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.auth-notice {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: var(--color-warning-text);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}
.auth-alt {
  margin-top: 1rem;
  font-size: 0.9rem;
  text-align: center;
}
/* Recuperação de senha (P-02): texto de apoio acima do form e link "esqueci" dentro dele. */
.auth-hint {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--color-text-soft);
}
.auth-forgot {
  font-size: 0.9rem;
  text-align: right;
}
/* Auth sem senha (P-15) — pilha de CTAs em âncora (Gmail/Outlook, "Ir agora"); reusa .auth-submit */
.auth-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0;
}
.auth-actions .auth-submit {
  display: block;
  text-align: center;
  text-decoration: none;
}
/* Criar loja (P-16) — dica de preview do subdomínio abaixo do campo; reusa .auth-page/.auth-field. */
.create-store-subdomain-hint {
  margin-top: 0.15rem;
}
.create-store-subdomain-hint span {
  font-weight: 600;
  color: var(--color-text-soft);
}
/* Sucesso (usado na edição de conta W4b, leads e newsletter) */
.auth-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: var(--color-success-text);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* ── Conta (W4) ── */
.account-page form {
  display: block;
  margin-top: 1rem;
}
.account-soon {
  margin-top: 1.25rem;
  font-size: 0.85rem;
}
.account-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: start;
}
.account-content {
  min-width: 0;
}
.account-back {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.account-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 3rem 1rem;
  color: var(--color-text-muted);
}
.account-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-text-faint);
  margin-bottom: 0.5rem;
}
.account-empty__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-strong);
}
.account-empty__text {
  max-width: 24rem;
}
.account-empty__cta {
  margin-top: 0.85rem;
  text-decoration: none;
}

.account-nav {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.5rem;
}
.account-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.account-nav__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  color: var(--color-text-soft);
  font-weight: 500;
  white-space: nowrap;
}
.account-nav__item:hover {
  background: var(--color-bg-alt);
  text-decoration: none;
}
.account-nav__item--active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}
.account-nav__item .icon {
  color: var(--color-text-faint);
}
.account-nav__item--active .icon {
  color: var(--color-primary);
}
.account-nav__logout-item {
  margin-top: 0.35rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.35rem;
}
.account-nav__logout {
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--color-error);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}
.account-nav__logout:hover {
  background: var(--color-error-surface);
}

.account-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.account-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  background: var(--color-surface);
  color: inherit;
}
.account-card:hover {
  border-color: var(--color-primary);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.account-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  margin-bottom: 0.35rem;
}
.account-card__title {
  font-weight: 600;
  color: var(--color-text-strong);
}
.account-card__desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.account-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.account-panel h2 {
  margin-top: 0;
}
.account-panel__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.account-panel__title .icon {
  color: var(--color-text-muted);
}
.account-panel-link {
  margin-top: 0.5rem;
}
.account-panel-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.account-back a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.account-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0;
}
.account-fields dt {
  font-weight: 600;
  color: var(--color-text-soft);
}
.account-fields dd {
  margin: 0;
}

/* Conta — edição (W4b) */
.account-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.account-actions .auth-submit {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.account-empty__cta.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.account-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 34rem;
}

/* ── Pedidos — lista ── */
.order-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.order-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  background: var(--color-surface);
}
.order-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.order-card__id {
  font-weight: 600;
}
.order-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.85rem;
  margin: 0.5rem 0;
}
.order-card__thumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.order-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.order-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--color-text-faint);
  text-align: center;
  background: var(--color-bg-alt);
}
.order-card__more {
  font-size: 0.85rem;
}
.order-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}
.order-card__total {
  font-size: 1.1rem;
}
.order-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 600;
}
.order-card__link .icon {
  color: currentColor;
}

.order-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.order-badge--done {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.order-badge--cancelled {
  background: var(--color-error-bg);
  color: var(--color-error);
}
.order-badge--processing {
  background: var(--color-info-bg);
  color: var(--color-primary-dark);
}

/* Pedido — detalhe */
.order-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.order-detail__head h1 {
  margin-bottom: 0.25rem;
}
.order-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.order-timeline__item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-bg-alt);
}
.order-timeline__item:last-child {
  border-bottom: none;
}
.order-address {
  line-height: 1.5;
}
.order-pickup-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.order-shipping-method {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.order-tracking {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}
.order-items {
  width: 100%;
}
.order-items td {
  vertical-align: middle;
  border-bottom: 1px solid var(--color-bg-alt);
}
.order-items__thumb {
  width: 56px;
}
.order-items__thumb img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.order-items__name {
  display: block;
  font-weight: 500;
}
.order-items__variation {
  display: block;
  font-size: 0.8rem;
}
.order-items__qty {
  white-space: nowrap;
  color: var(--color-text-muted);
}
.order-items__price {
  text-align: right;
  white-space: nowrap;
}
.order-discounts {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}
.order-discounts li {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0;
}
.order-discounts__value {
  color: var(--color-accent);
}
.order-shipping-cost {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0;
  margin-top: 0.75rem;
  font-size: 0.9rem;
}
.order-shipping-cost__value--free {
  color: var(--color-accent);
}
.order-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  font-size: 1.15rem;
}
.order-payment__method {
  font-weight: 500;
}
.order-payment__qr {
  width: 160px;
  height: 160px;
  margin: 0.5rem 0;
}
.order-payment__code {
  display: block;
  word-break: break-all;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 0.5rem 0.6rem;
  font-size: 0.8rem;
  margin: 0.25rem 0 0.5rem;
}

/* Pedido — detalhe: ações (P-11); avisos do carrinho reusam .auth-notice/.auth-error */
.order-actions {
  margin: 0 0 1rem;
}
.order-actions__button {
  padding: 0.6rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  cursor: pointer;
}
.order-actions__button:hover {
  background: var(--color-primary-dark);
}

/* Pedido — detalhe: pedidos irmãos da mesma compra (P-24); alerta reusa .auth-notice */
.related-orders {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}
.related-orders__item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-border);
}
.related-orders__item:last-child {
  border-bottom: none;
}
.related-orders__total {
  margin-left: auto;
  font-weight: 600;
  color: var(--color-text-strong);
}

/* Pedido — solicitação de troca/devolução (account-order-return-page); campos/botões reusam .auth-field/.auth-submit/.auth-error/.auth-notice */
.return-type {
  margin: 1.25rem 0;
}
.return-type__opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  margin: 0.25rem 0;
  cursor: pointer;
}
.return-items {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.return-items__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem;
  margin-bottom: 0.75rem;
}
.return-items__item--blocked {
  opacity: 0.6;
}
.return-items__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.return-items__select input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
  margin-top: 0.15rem;
}
.return-items__thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.return-items__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.return-items__name {
  font-weight: 500;
}
.return-items__variation {
  font-size: 0.8rem;
}
.return-items__price {
  font-size: 0.85rem;
}
.return-items__blocked {
  font-size: 0.8rem;
  color: var(--color-warning-text);
}
.return-items__fields {
  display: grid;
  grid-template-columns: minmax(6rem, 8rem) minmax(10rem, 1fr) minmax(
      10rem,
      1fr
    );
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-left: 1.75rem;
}
.return-form__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
}
.return-form__actions .auth-submit {
  text-decoration: none;
}

/* ── Endereços ── */
.address-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.address-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  background: var(--color-surface);
}
.address-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.address-card__title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}
.address-card__title .icon {
  color: var(--color-text-muted);
}
.address-card__body {
  line-height: 1.5;
  font-size: 0.9rem;
}
.address-tag--main {
  background: var(--color-info-bg);
  color: var(--color-primary-dark);
  font-weight: 600;
}
.address-card__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.75rem;
}
.address-card__actions form {
  display: inline;
}
.address-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.address-action:hover {
  background: var(--color-bg-alt);
  text-decoration: none;
}
.address-action--danger {
  color: var(--color-error);
  border-color: var(--color-error-border);
}
.address-action--danger:hover {
  background: var(--color-error-surface);
}

/* ── Vouchers ── */
.voucher-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.voucher-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  background: var(--color-surface);
}
.voucher-card__product {
  margin: 0.5rem 0 0.25rem;
  font-size: 1rem;
}
.voucher-card__key {
  font-size: 0.85rem;
  margin-top: 0.5rem;
}
.voucher-badge {
  display: inline-flex;
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
}
.voucher-badge--available {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.voucher-badge--used {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}
.voucher-badge--expired {
  background: var(--color-error-bg);
  color: var(--color-error);
}
.voucher-badge--pending {
  background: #fef3c7;
  color: var(--color-warning-text);
}

/* ── Créditos ── */
.credit-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-primary-soft);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.credit-balance__label {
  color: #1e40af;
  font-weight: 500;
}
.credit-balance__value {
  font-size: 1.5rem;
  color: var(--color-primary-dark);
}
.credit-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.credit-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  background: var(--color-surface);
}
.credit-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.credit-card__value {
  font-size: 1.15rem;
  font-weight: 600;
}
.credit-card__meta {
  font-size: 0.85rem;
  margin: 0.35rem 0;
}
.credit-badge {
  display: inline-flex;
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
}
.credit-badge--active {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.credit-badge--used {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}
.credit-badge--expired {
  background: var(--color-error-bg);
  color: var(--color-error);
}
.credit-transactions {
  list-style: none;
  padding: 0.5rem 0 0;
  margin: 0.5rem 0 0;
  border-top: 1px solid var(--color-bg-alt);
  font-size: 0.85rem;
}
.credit-transaction {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0;
}
.credit-transaction__at {
  flex: 1;
}
.credit-transaction__amount {
  font-weight: 600;
  white-space: nowrap;
}

/* ── Checkout de etapas resolvíveis (fase 5) — página única (mock aprovado) ── */
.co-shell {
  max-width: var(--checkout-max);
  margin: 0 auto;
}
.co-title {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
  margin-bottom: 0.25rem;
}
.co-subtitle {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}
.co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1.75rem;
  align-items: start;
}
.co-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* Etapa (accordion) */
.step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.step--active {
  border-color: color-mix(
    in srgb,
    var(--color-primary) 45%,
    var(--color-border)
  );
  box-shadow: var(--shadow-sm);
}
.step--locked {
  opacity: 0.72;
}
.step__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 1rem 1.15rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.step--locked .step__head,
.step__head:disabled {
  cursor: not-allowed;
}
.step--active .step__head {
  cursor: default;
}
.step__badge {
  flex-shrink: 0;
  width: var(--step-badge-size);
  height: var(--step-badge-size);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  transition:
    background 0.15s,
    color 0.15s;
}
.step__badge .icon {
  display: block;
}
.step--active .step__badge {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.step--done .step__badge {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.step__heading {
  flex: 1;
  min-width: 0;
}
.step__label {
  display: block;
  font-weight: 700;
  color: var(--color-text-strong);
  font-size: 1.02rem;
}
.step--locked .step__label {
  color: var(--color-text-muted);
}
.step__summary {
  display: block;
  font-size: 0.86rem;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.step__edit {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}
.step__lock {
  flex-shrink: 0;
  color: var(--color-text-faint);
  display: inline-flex;
}
.step__body {
  padding: 0 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
/* Sem JS: só a etapa ativa mostra o corpo (com JS o x-show assume). */
.step:not(.step--active) .step__body {
  display: none;
}
.step__cta {
  margin-top: 0.35rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.step__cta-hint {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* Identificação (resumo compacto) */
.ident {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}
.ident__name {
  font-weight: 600;
  color: var(--color-text-strong);
}

/* Endereço: mini-lista */
.addr-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.addr {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.addr:hover {
  border-color: var(--color-primary);
}
.addr:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.addr input {
  margin-top: 0.2rem;
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.addr__body {
  font-size: 0.9rem;
  line-height: 1.5;
  min-width: 0;
}
.addr__nick {
  font-weight: 700;
  color: var(--color-text-strong);
}
.addr__lines {
  color: var(--color-text-soft);
}

/* Entrega: grupos por seller */
.ship-seller {
  margin-bottom: 1.1rem;
}
.ship-seller:last-child {
  margin-bottom: 0;
}
.ship-seller__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 0.55rem;
}
.ship-seller__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}
.ship-opts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ship-opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.ship-opt:hover {
  border-color: var(--color-primary);
}
.ship-opt:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.ship-opt--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ship-opt input {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.ship-opt__info {
  flex: 1;
  min-width: 0;
}
.ship-opt__name {
  display: block;
  font-weight: 600;
  color: var(--color-text-strong);
  font-size: 0.92rem;
}
.ship-opt__eta {
  display: block;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.ship-opt__price {
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-text-strong);
}
.ship-opt__price--free {
  color: var(--color-accent);
}

/* Pagamento: abas (radios estilizados) */
.pay-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: 0.5rem;
}
.pay-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.8rem 0.5rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-text-soft);
  transition:
    border-color 0.12s,
    background 0.12s,
    color 0.12s;
}
.pay-tab:hover {
  border-color: var(--color-primary);
}
.pay-tab:has(input:checked),
.pay-tab--active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.pay-tab input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pay-note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: var(--color-accent-soft);
  color: var(--color-success-text);
  border-radius: var(--radius-lg);
  padding: 0.75rem 0.9rem;
  font-size: 0.88rem;
  line-height: 1.45;
}

/* Revisão */
.review-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
}
.review-block__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.review-block__label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.review-block__value {
  font-size: 0.9rem;
  color: var(--color-text-strong);
  margin-top: 0.2rem;
}
.review-block__edit {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.review-pay-title {
  margin: 0.4rem 0 0;
  font-size: 1rem;
}

/* Coluna resumo (desktop sticky) */
.summary {
  position: sticky;
  top: 1rem;
}
.summary__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.summary__head {
  padding: 1rem 1.15rem 0.5rem;
}
.summary__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-strong);
}
.summary__body {
  padding: 0 1.15rem;
}
.sum-seller {
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border);
}
.sum-seller:first-child {
  border-top: none;
}
.sum-seller__name {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.sum-item {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.3rem 0;
}
.sum-item--unavailable {
  opacity: 0.5;
}
.sum-item__thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  flex-shrink: 0;
  object-fit: cover;
}
.sum-item__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
}
.sum-item__info {
  flex: 1;
  min-width: 0;
}
.sum-item__name {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sum-item__qty {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.sum-item__price {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.sum-coupon {
  border-top: 1px solid var(--color-border);
  padding: 0.9rem 0;
}
.sum-coupon__row {
  display: flex;
  gap: 0.5rem;
}
.sum-coupon__row input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
}
.sum-coupon__apply {
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
}
.sum-coupon__applied {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--color-success-text);
  font-weight: 600;
  margin-top: 0.5rem;
}
.sum-coupon__remove {
  background: none;
  border: none;
  color: var(--color-error);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.sum-totals {
  border-top: 1px solid var(--color-border);
  padding: 0.9rem 0 1.1rem;
  margin: 0;
}
.sum-line {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0;
  font-size: 0.9rem;
}
.sum-line dt {
  color: var(--color-text-soft);
}
.sum-line dd {
  color: var(--color-text-strong);
  font-weight: 500;
  margin: 0;
}
.sum-line--discount dd {
  color: var(--color-accent);
  font-weight: 700;
}
.sum-grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 0.7rem;
  margin-top: 0.4rem;
  border-top: 1px solid var(--color-border);
}
.sum-grand dt {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-strong);
}
.sum-grand dd {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-text-strong);
  letter-spacing: -0.02em;
  margin: 0;
}
.summary__trust {
  padding: 0.8rem 1.15rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Barra sticky mobile + bottom-sheet (só ≤900px) */
.mobar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
}
.mobar__coupon {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 0.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
}
.mobar__coupon-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.mobar__row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.mobar__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  text-align: left;
}
.mobar__total-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.mobar__total {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-text-strong);
  letter-spacing: -0.02em;
}
.mobar__chevron {
  transition: transform 0.2s;
  color: var(--color-text-muted);
  display: inline-flex;
}
.mobar.is-open .mobar__chevron {
  transform: rotate(180deg);
}
.mobar__cta {
  margin-left: auto;
}
.sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 39;
  background: var(--color-overlay);
}
.sheet-backdrop.is-open {
  display: block;
}
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 40;
  bottom: 0;
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  max-height: 75vh;
  overflow-y: auto;
  padding: 0.5rem 1rem calc(6rem + env(safe-area-inset-bottom));
}
.sheet__grip {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border-input);
  margin: 0.5rem auto 0.75rem;
}
.sheet__close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.25rem;
}

@media (max-width: 900px) {
  .co-grid {
    grid-template-columns: 1fr;
  }
  .summary {
    display: none;
  }
  .mobar {
    display: block;
  }
}

/* Checkout — pontos de retirada na loja (P-13); lista irmã do label do método pickup */
.checkout-pickup-points {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.checkout-pickup-point {
  border-top: 1px solid var(--color-bg-alt);
  padding-top: 0.4rem;
}
.checkout-pickup-point:first-child {
  border-top: none;
  padding-top: 0;
}
.checkout-pickup-point__label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
}
.checkout-pickup-point__body {
  display: block;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-text-soft);
}
.checkout-pickup-point__body strong {
  color: var(--color-text);
}

.checkout-newaddr {
  margin-top: 0.5rem;
  border-top: 1px solid var(--color-bg-alt);
  padding-top: 0.5rem;
}
.checkout-newaddr summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
  padding: 0.25rem 0;
}
.checkout-newaddr form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0.75rem;
}

/* Painel/opções reusados pelo snippet payment-retry (confirmação + detalhe do
   pedido) e cupom da página de carrinho — não fazem parte da página única, mas
   compartilham a linguagem de painel/opção do tema. */
.checkout-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.checkout-panel h2 {
  margin-top: 0;
}
.checkout-panel form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0.75rem;
}
.checkout-panel select {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.checkout-options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.checkout-option {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.75rem;
}
.checkout-option__label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
}
.checkout-option__body {
  font-size: 0.9rem;
  line-height: 1.45;
  flex: 1;
}
.checkout-coupon {
  display: flex;
  gap: 0.5rem;
}
.checkout-coupon input {
  flex: 1;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
}
.checkout-coupon__remove {
  align-self: flex-start;
  margin-top: 0.5rem;
  background: none;
  border: none;
  color: var(--color-error);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
}

/* Checkout — cartões salvos: reuso na finalização (radio por cartão + CVV) */
.saved-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.saved-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.75rem;
}
.saved-card__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}
.saved-card__body {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.saved-card__digits {
  letter-spacing: 0.05em;
}
.saved-card__exp {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.checkout-link {
  display: inline-block;
  margin-top: 0.75rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}

/* Checkout — créditos de troca (P-03): box do toggle no passo de pagamento */
.checkout-credits {
  border-color: var(--color-accent);
}
.checkout-credits--on {
  background: var(--color-bg-alt);
}
.checkout-credits__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.checkout-credits__header h2 {
  margin: 0;
}
.checkout-credits__balance {
  font-weight: 600;
  color: var(--color-text-soft);
  white-space: nowrap;
}
.checkout-credits__switch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}
.checkout-credits__switch input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.checkout-credits__applied {
  margin-left: auto;
  font-weight: 600;
  color: var(--color-success-text);
  white-space: nowrap;
}
.checkout-credits__alert {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  line-height: 1.4;
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
}
.checkout-credits__alert--success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

/* Checkout — confirmação (W5b) */
.checkout-confirmation {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 720px;
}
.checkout-confirmation__head h1 {
  margin-bottom: 0.25rem;
}
.checkout-confirmation__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.checkout-confirmation__empty {
  text-align: center;
}

/* ── PDP — lead de produto sob consulta (P-12); campos/botão/avisos reusam .auth-field/.auth-submit/.auth-error/.auth-success ── */
.product-lead {
  max-width: 28rem;
  margin: 1.5rem 0;
}
.product-lead__intro {
  margin-bottom: 1rem;
}
.product-lead form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.product-lead .auth-field textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
}
.product-lead .auth-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* ── Home modular (P-32) ── */
.hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--color-bg-alt);
  min-height: 18rem;
  display: flex;
  align-items: center;
}
.hero--height-compact {
  min-height: 12rem;
}
.hero--height-tall {
  min-height: 26rem;
}
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__content {
  position: relative;
  z-index: 1;
  padding: 2rem;
  max-width: 36rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius);
  margin: 1rem;
}
.hero--content-narrow .hero__content {
  max-width: 28rem;
}
.hero--content-wide .hero__content {
  max-width: 48rem;
}
.hero--align-center {
  justify-content: center;
  text-align: center;
}
.hero--align-right {
  justify-content: flex-end;
  text-align: right;
}
.hero--overlay-none .hero__content {
  background: transparent;
}
.hero--overlay-dark .hero__content {
  background: rgba(17, 24, 39, 0.82);
  color: #fff;
}
.hero--overlay-dark .hero__subtitle {
  color: rgba(255, 255, 255, 0.82);
}
.hero__title {
  margin-bottom: 0.5rem;
}
.hero__subtitle {
  color: var(--color-text-soft);
  margin-bottom: 1rem;
}
.hero__cta {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
}
.hero__cta:hover {
  background: var(--color-primary-dark);
  text-decoration: none;
}

.category-grid {
  margin: 1.5rem 0;
}
.category-grid__grid {
  display: grid;
  grid-template-columns: repeat(var(--category-cols-mobile, 2), minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}
.category-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: inherit;
}
.category-card:hover {
  border-color: var(--color-primary);
  text-decoration: none;
}
.category-card__name {
  font-weight: 600;
  color: var(--color-text-strong);
}
.category-card__count {
  font-size: 0.85rem;
}
.category-card small {
  color: var(--color-text-muted);
  font-size: 0.72rem;
}
.category-grid--pill .category-card {
  align-items: center;
  border-radius: var(--radius-pill);
  text-align: center;
}
.category-grid--text .category-card {
  border-color: transparent;
  background: transparent;
}

.collection-list {
  margin: 1.5rem 0;
}
.collection-list__grid {
  display: grid;
  grid-template-columns: repeat(
    var(--collection-cols-mobile, 2),
    minmax(0, 1fr)
  );
  gap: 1.25rem;
  margin-top: 0.75rem;
}
.collection-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  color: inherit;
}
.collection-card:hover {
  border-color: var(--color-primary);
  text-decoration: none;
}
.collection-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.collection-list--ratio-square .collection-card__image {
  aspect-ratio: 1 / 1;
}
.collection-list--ratio-portrait .collection-card__image {
  aspect-ratio: 4 / 5;
}
.collection-list--overlay .collection-card {
  position: relative;
}
.collection-list--overlay .collection-card__name {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.5rem 0.75rem 0.75rem;
  color: #fff;
  background: linear-gradient(transparent, rgba(17, 24, 39, 0.78));
}
.collection-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
  font-size: 0.85rem;
  background: var(--color-bg-alt);
}
.collection-card__name {
  padding: 0 0.75rem 0.75rem;
  font-weight: 600;
  color: var(--color-text-strong);
}

/* ── Seções do trio + faixa de ícones (S3). Mobile-first: base = celular,
   `min-width` sobe pro desktop. Valores dinâmicos por instância (cor de fundo,
   cor de título) entram como CSS var inline consumida aqui. ── */

/* Mosaico de imagens — grade de tiles com título sobreposto (SSR) */
.image-mosaic {
  margin: 1.5rem 0;
}
.image-mosaic__grid {
  display: grid;
  gap: 1rem;
}
.image-mosaic--gap-none .image-mosaic__grid {
  gap: 0;
}
.image-mosaic--gap-small .image-mosaic__grid {
  gap: 0.5rem;
}
.image-mosaic--gap-medium .image-mosaic__grid {
  gap: 1rem;
}
.image-mosaic--gap-large .image-mosaic__grid {
  gap: 1.5rem;
}
.image-mosaic--mobile-grid .image-mosaic__grid {
  grid-template-columns: 1fr 1fr;
}
.image-mosaic--mobile-column .image-mosaic__grid {
  grid-template-columns: 1fr;
}
.mosaic-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}
.image-mosaic--aspect-square .mosaic-tile {
  aspect-ratio: 1 / 1;
}
.image-mosaic--aspect-landscape .mosaic-tile {
  aspect-ratio: 4 / 3;
}
.image-mosaic--aspect-portrait .mosaic-tile {
  aspect-ratio: 3 / 4;
}
.mosaic-tile__link {
  display: block;
  width: 100%;
  height: 100%;
}
.mosaic-tile__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-mosaic--hover-zoom .mosaic-tile__image {
  transition: transform 0.25s ease;
}
.image-mosaic--hover-zoom .mosaic-tile:hover .mosaic-tile__image {
  transform: scale(1.035);
}
.image-mosaic--corners-square .mosaic-tile {
  border-radius: 0;
}
.mosaic-tile__title {
  position: absolute;
  z-index: 1;
  max-width: 80%;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius);
  background: rgba(17, 24, 39, 0.5);
  color: var(--mosaic-tile-text, #fff);
  font-weight: 700;
  line-height: 1.2;
}
.image-mosaic--overlay-none .mosaic-tile__title {
  background: transparent;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.image-mosaic--overlay-strong .mosaic-tile__title {
  background: rgba(17, 24, 39, 0.78);
}
.mosaic-tile__title--small {
  font-size: 0.85rem;
}
.mosaic-tile__title--medium {
  font-size: 1.1rem;
}
.mosaic-tile__title--large {
  font-size: 1.5rem;
}
.mosaic-tile__title--top_left {
  top: 0.75rem;
  left: 0.75rem;
}
.mosaic-tile__title--top_right {
  top: 0.75rem;
  right: 0.75rem;
}
.mosaic-tile__title--bottom_left {
  bottom: 0.75rem;
  left: 0.75rem;
}
.mosaic-tile__title--bottom_right {
  bottom: 0.75rem;
  right: 0.75rem;
}
.mosaic-tile__title--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Curadoria — banner lateral + vitrine de produtos fixa */
.curated-kit {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.curated-kit__banner {
  flex-shrink: 0;
}
.curated-kit__image {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
}
.curated-kit__body {
  flex: 1;
  min-width: 0;
}
.curated-kit__title {
  margin-top: 0;
}
.curated-kit__cta {
  display: inline-block;
  margin: 0.25rem 0 0.75rem;
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
}
.curated-kit__cta:hover {
  background: var(--color-primary-dark);
  text-decoration: none;
}
.curated-kit__products {
  grid-template-columns: repeat(var(--curated-product-cols, 2), minmax(0, 1fr));
  margin: 0;
}

/* Produtos na imagem — hotspots sobre a arte + lista lateral e quick view. */
.product-hotspots {
  margin: 2.5rem 0;
}
.product-hotspots__layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.product-hotspots__media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.product-hotspots__picture {
  display: block;
}
.product-hotspots__picture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.product-hotspots__markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.product-hotspots__marker {
  position: absolute;
  z-index: 2;
  top: var(--hotspot-y);
  left: var(--hotspot-x);
  display: grid;
  width: 2rem;
  height: 2rem;
  padding: 0;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--color-text) 18%, transparent);
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 600;
  pointer-events: auto;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}
.product-hotspots__marker::after {
  content: "";
  position: absolute;
  inset: -0.4rem;
  border: 1px solid color-mix(in srgb, var(--color-surface) 70%, transparent);
  border-radius: inherit;
}
.product-hotspots__marker:hover,
.product-hotspots__marker:focus-visible,
.product-hotspots__marker.is-active {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.product-hotspots__panel {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.product-hotspots__title {
  margin: 0;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--color-border);
  font-size: clamp(1.5rem, 2vw, 2.25rem);
  font-weight: 600;
}
.product-hotspots__products {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr;
}
.product-hotspots__product {
  display: grid;
  min-width: 0;
  grid-template-columns: 2rem 4.75rem minmax(0, 1fr) 2.25rem;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease;
}
.product-hotspots__product:hover,
.product-hotspots__product:focus-visible,
.product-hotspots__product.is-active {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.product-hotspots__number {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.product-hotspots__thumb {
  width: 4.75rem;
  height: 4.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  object-fit: contain;
}
.product-hotspots__product-copy {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
}
.product-hotspots__product-copy strong {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-hotspots__product-price .price {
  align-items: baseline;
  gap: 0.35rem;
}
.product-hotspots__product-price .price--current {
  color: var(--color-text);
}
.product-hotspots__open {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
}
.product-hotspots__modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow-y: auto;
  background: var(--color-overlay);
  backdrop-filter: blur(5px);
}
.product-hotspots__dialog {
  position: relative;
  display: grid;
  width: min(58rem, 100%);
  max-height: calc(100vh - 2rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  overflow: auto;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.product-hotspots__close {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  color: var(--color-text);
  cursor: pointer;
}
.product-hotspots__gallery {
  min-width: 0;
  padding: 1rem;
  background: var(--color-bg-alt);
}
.product-hotspots__gallery-stage {
  display: grid;
  min-height: min(62vh, 34rem);
  place-items: center;
}
.product-hotspots__gallery-stage img {
  width: 100%;
  height: min(62vh, 34rem);
  object-fit: contain;
}
.product-hotspots__gallery-nav {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.7rem;
  margin: 0.75rem auto 0;
  padding: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-text-strong);
  color: var(--color-surface);
  font-size: 0.75rem;
}
.product-hotspots__gallery-nav button {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-surface) 30%, transparent);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.product-hotspots__details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2rem 2rem;
}
.product-hotspots__details h3 {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
}
.product-hotspots__reference,
.product-hotspots__seller {
  margin: 0.2rem 0;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}
.product-hotspots__price {
  margin: 1.1rem 0;
  font-size: 1.15rem;
}
.product-hotspots__price .price--current {
  color: var(--color-text);
}
.product-hotspots__purchase-row {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
}
.product-hotspots__purchase-row .quantity-control {
  --control-height: 2.75rem;
  grid-template-columns: 2.75rem minmax(2.75rem, 3.5rem) 2.75rem;
}
.product-hotspots__purchase-row .btn {
  flex: 1;
}
.product-hotspots__details-link {
  width: fit-content;
  margin-top: 0.75rem;
  color: var(--color-text-soft);
  font-size: 0.82rem;
  text-decoration: underline;
}

@media (min-width: 641px) {
  .product-hotspots__layout {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(2rem, 4vw, 4.5rem);
  }
  .product-hotspots__media {
    flex: 0 0 var(--product-hotspots-image-width, 50%);
  }
  .product-hotspots--image-right .product-hotspots__media {
    order: 2;
  }
  .product-hotspots__picture img {
    aspect-ratio: auto;
  }
  .product-hotspots__products {
    flex: 1;
    align-content: stretch;
  }
}

@media (max-width: 640px) {
  .product-hotspots {
    margin: 2rem 0;
  }
  .product-hotspots__layout {
    gap: 1rem;
  }
  .product-hotspots__title {
    padding-bottom: 0.75rem;
    font-size: 1.5rem;
  }
  .product-hotspots__product {
    grid-template-columns: 1.75rem 4rem minmax(0, 1fr) 2rem;
    gap: 0.6rem;
    padding: 0.75rem 0;
  }
  .product-hotspots__thumb {
    width: 4rem;
    height: 4rem;
  }
  .product-hotspots__product-copy strong {
    white-space: normal;
  }
  .product-hotspots__marker {
    width: 1.8rem;
    height: 1.8rem;
  }
  .product-hotspots__dialog {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 1rem);
  }
  .product-hotspots__gallery {
    padding: 0.75rem;
  }
  .product-hotspots__gallery-stage {
    min-height: 46vh;
  }
  .product-hotspots__gallery-stage img {
    height: 46vh;
  }
  .product-hotspots__details {
    padding: 1.25rem;
  }
  .product-hotspots__purchase-row {
    flex-direction: column;
  }
}

/* Bloco institucional — texto + CTAs + imagem lateral, bg configurável */
.about-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.about-info--has-bg {
  background: var(--about-info-bg);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
}
.about-info__body {
  flex: 1;
  min-width: 0;
}
.about-info__title {
  margin-top: 0;
}
.about-info__text {
  color: var(--color-text-soft);
}
.about-info__media {
  flex: 0 0 auto;
}
.about-info__image {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
}
.about-info__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.about-info--align-center .about-info__body {
  text-align: center;
}
.about-info--align-center .about-info__ctas {
  justify-content: center;
}
.about-info__cta {
  display: inline-block;
  padding: 0.55rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  border: 1px solid var(--color-primary);
}
.about-info__cta--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.about-info__cta--primary:hover {
  background: var(--color-primary-dark);
  text-decoration: none;
}
.about-info__cta--outline {
  background: transparent;
  color: var(--color-primary);
}
.about-info__cta--outline:hover {
  background: var(--color-primary-soft);
  text-decoration: none;
}

/* Faixa de ícones — lista horizontal scrollável de atalhos */
.icon-strip {
  margin: 1.5rem 0;
}
.icon-strip__title {
  margin: 0 0 0.75rem;
}
.icon-strip .carousel__viewport {
  padding: 0.25rem 0.15rem 0.75rem;
}
.icon-strip__slide {
  display: flex;
  justify-content: center;
}
.icon-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  color: var(--color-text-soft);
  text-align: center;
}
.icon-strip__item:hover {
  text-decoration: none;
  color: var(--color-primary);
}
.icon-strip__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}
.icon-strip__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.icon-strip__label {
  width: 100%;
  padding: 0 0.15rem;
  font-size: 0.8rem;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.icon-strip--circle .icon-strip__avatar {
  border-radius: 50%;
}
.icon-strip--square .icon-strip__avatar {
  border-radius: var(--radius-lg);
}
.icon-strip--small .icon-strip__avatar {
  width: 3rem;
  height: 3rem;
}
.icon-strip--medium .icon-strip__avatar {
  width: 4rem;
  height: 4rem;
}
.icon-strip--large .icon-strip__avatar {
  width: 5.5rem;
  height: 5.5rem;
}

@media (min-width: 641px) {
  /* Desktop: mosaico sempre 2 colunas (2×2), curadoria e institucional em linha. */
  .image-mosaic__grid {
    grid-template-columns: 1fr 1fr;
  }
  .curated-kit {
    flex-direction: row;
    align-items: flex-start;
  }
  .curated-kit__banner {
    flex: 0 0 var(--curated-banner-width, 34%);
  }
  .curated-kit--banner-right .curated-kit__banner {
    order: 2;
  }
  .about-info {
    flex-direction: row;
    align-items: center;
  }
  .about-info__media {
    flex: 0 0 var(--about-info-image-width, 40%);
  }
  .about-info--image-left .about-info__media {
    order: -1;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .category-grid__grid {
    grid-template-columns: repeat(
      var(--category-cols-tablet, 3),
      minmax(0, 1fr)
    );
  }
  .collection-list__grid {
    grid-template-columns: repeat(
      var(--collection-cols-tablet, 3),
      minmax(0, 1fr)
    );
  }
}
@media (min-width: 900px) {
  .category-grid__grid {
    grid-template-columns: repeat(
      var(--category-cols-desktop, 5),
      minmax(0, 1fr)
    );
  }
  .collection-list__grid {
    grid-template-columns: repeat(
      var(--collection-cols-desktop, 4),
      minmax(0, 1fr)
    );
  }
}

/* ── Carrossel base (snippet `carousel`) — reutilizável (banners S1, vitrine S2, trio S3).
   T8: colunas DECIMAIS via scroll-snap nativo + `flex-basis: calc(100% / N)` com N
   fracionário. Mobile-first: base usa `--carousel-cols-mobile`, tablet (640–899px)
   usa `--carousel-cols-tablet` e desktop (900px+) usa `--carousel-cols`.
   `--carousel-gap` (data-gap) desconta o vão do cálculo pra o
   peek (3.5) bater. Setas/dots/autoplay são só do Alpine (`sfCarousel`); sem JS a faixa
   segue rolável. Contrato de markup no cabeçalho de `snippets/carousel.liquid`. ── */
.carousel {
  position: relative;
}
.carousel[data-gap="none"] {
  --carousel-gap: 0px;
}
.carousel[data-gap="sm"] {
  --carousel-gap: 0.5rem;
}
.carousel[data-gap="md"] {
  --carousel-gap: 1rem;
}
.carousel[data-gap="lg"] {
  --carousel-gap: 1.5rem;
}
.carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel__viewport::-webkit-scrollbar {
  display: none;
}
.carousel__track {
  display: flex;
  gap: var(--carousel-gap, 1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* N colunas visíveis: descontar os (N-1) vãos entre elas do 100% da viewport. */
.carousel__slide {
  flex: 0 0
    calc(
      (
          100% - (var(--carousel-cols-mobile, 1) - 1) *
            var(--carousel-gap, 1rem)
        ) /
        var(--carousel-cols-mobile, 1)
    );
  min-width: 0;
  scroll-snap-align: start;
}
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-strong);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.carousel__arrow:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.carousel__arrow--prev {
  left: 0.25rem;
}
.carousel__arrow--next {
  right: 0.25rem;
}
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.carousel--dots-inside .carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.6rem;
  margin-top: 0;
}
.carousel__dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-border-input);
  cursor: pointer;
  transition:
    background 0.15s,
    width 0.15s;
}
.carousel__dot.is-active {
  background: var(--color-primary);
  width: 1.2rem;
}

@media (prefers-reduced-motion: reduce) {
  .carousel__viewport {
    scroll-behavior: auto;
  }
  .carousel__dot {
    transition: none;
  }
}

/* Barra de avisos — full-bleed por natureza, mas conteúdo centralizado. */
.announcement-bar {
  width: 100vw;
  margin: -1.5rem calc(50% - 50vw) 1.5rem;
  padding: 0.5rem max(1rem, calc((100vw - var(--container-width)) / 2 + 1rem));
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
.site-topbar .announcement-bar {
  margin: 0;
}
.announcement-bar--compact {
  padding-block: 0.12rem;
  font-size: 0.78rem;
}
.announcement-bar--align-left {
  text-align: left;
}
.announcement-bar--align-right {
  text-align: right;
}
.announcement-bar--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.announcement-bar--accent {
  background: var(--color-accent);
  color: #fff;
}
.announcement-bar--neutral {
  background: var(--color-text-strong);
  color: #fff;
}
.announcement-bar--custom {
  background: var(--announcement-bg, var(--color-primary));
  color: var(--announcement-text, var(--color-on-primary));
}
.announcement-bar a {
  color: inherit;
}
.announcement-bar__slide {
  align-content: center;
  min-height: 1.5rem;
}
.announcement-bar .carousel__arrow {
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

/* Benefícios — conteúdo operacional curto, rolável no mobile. */
.benefits-bar {
  margin: 1.5rem 0;
}
.benefits-bar > h2 {
  margin: 0 0 0.75rem;
}
.benefits-bar__slide {
  display: flex;
}
.benefits-bar__slide--mobile-hidden {
  display: none;
}
.benefit-card {
  display: flex;
  width: 100%;
  min-height: 5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: inherit;
}
.benefits-bar--plain .benefit-card {
  border-color: transparent;
  background: transparent;
}
.benefit-card--action,
.benefits-bar--plain .benefit-card--action {
  justify-content: center;
  border-color: var(--benefit-action-bg, var(--color-primary));
  background: var(--benefit-action-bg, var(--color-primary));
  color: var(--benefit-action-color, var(--color-on-primary));
  text-align: center;
}
.benefit-card:hover {
  text-decoration: none;
  border-color: var(--color-primary);
}
.benefits-bar .benefit-card--action:hover {
	border-color: var(--benefit-action-bg, var(--color-primary));
	background: var(--benefit-action-bg, var(--color-primary));
	color: var(--benefit-action-color, var(--color-on-primary));
	filter: brightness(0.96);
}
.benefit-card__icon {
  display: inline-flex;
  flex: none;
  color: var(--color-primary);
}
.benefits-bar--icons-circle .benefit-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--benefit-icon-bg, var(--color-primary));
  color: var(--benefit-icon-color, var(--color-on-primary));
}
.benefit-card__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.3;
}
@media (max-width: 900px) {
  .benefits-bar--mobile-stacked .benefit-card {
    min-height: 7rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 0.25rem;
    text-align: center;
  }
  .benefits-bar--mobile-stacked .benefit-card__content {
    align-items: center;
    line-height: 1.2;
  }
  .benefits-bar--mobile-stacked .benefit-card__content strong {
    font-size: 0.82rem;
  }
  .benefits-bar--mobile-stacked .benefit-card__content small {
    font-size: 0.75rem;
  }
  .benefits-bar--mobile-list .carousel__track {
    display: flex;
    flex-direction: column;
    transform: none !important;
  }
  .benefits-bar--mobile-list .carousel__slide {
    width: 100% !important;
    flex-basis: auto !important;
  }
  .benefits-bar--mobile-list .carousel__arrow,
  .benefits-bar--mobile-list .carousel__dots {
    display: none;
  }
}
.benefit-card__content small {
  margin-top: 0.2rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
@media (min-width: 901px) {
  .benefits-bar__slide--mobile-hidden {
    display: flex;
  }
  .benefits-bar__slide--desktop-hidden {
    display: none;
  }
}

/* FAQ — details nativo preserva acessibilidade e degradação sem JS. */
.faq {
  margin: 1.5rem 0;
}
.faq__title {
  margin: 0 0 0.75rem;
}
.faq__grid {
  display: grid;
  gap: 0.65rem;
}
.faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.faq__item summary {
  padding: 0.8rem 1rem;
  cursor: pointer;
  font-weight: 600;
}
.faq__item[open] summary {
  border-bottom: 1px solid var(--color-border);
}
.faq__answer {
  padding: 0.9rem 1rem;
  color: var(--color-text-soft);
}
@media (min-width: 900px) {
  .faq--two .faq__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ── Banners (component `banners`) — seção genérica sobre o carrossel base.
   Container full sangra até a borda da viewport (truque margin/calc a partir do
   `.container` centralizado). Formato circle p/ logos/categorias. ── */
.banners {
  margin: 1.5rem 0;
}
.banners[data-container="full"] {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.banners[data-bg="surface"] {
  background: var(--color-surface);
}
.banners[data-bg="muted"] {
  background: var(--color-bg-alt);
}
.banners[data-bg="primary_soft"] {
  background: var(--color-primary-soft);
}
.banners[data-pad="none"] {
  padding-top: 0;
  padding-bottom: 0;
}
.banners[data-pad="sm"] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.banners[data-pad="md"] {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.banners[data-pad="lg"] {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
/* Container full com fundo/padding precisa de respiro lateral pra imagem não colar na borda. */
.banners[data-container="full"][data-bg]:not([data-bg="none"]) {
  padding-left: 1rem;
  padding-right: 1rem;
}
.banners__title {
  margin: 0 0 0.75rem;
}
.banners[data-container="full"] > .banners__title {
  max-width: var(--container-width);
  margin-right: auto;
  margin-left: auto;
  padding: 0 1rem;
}
.banners__link {
  display: block;
  color: inherit;
}
.banners__link:hover {
  text-decoration: none;
}
.banners__media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}
.banners__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.banners--fit-contain .banners__media img {
  object-fit: contain;
}
.banners--rect .banners__media {
  aspect-ratio: 16 / 6;
}
.banners--square .banners__media {
  aspect-ratio: 1 / 1;
}
.banners--circle .banners__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-pill);
}
.banners__label {
  display: block;
}
.banners--text-below .banners__label {
  margin-top: 0.5rem;
  text-align: center;
  font-weight: 600;
  color: var(--color-text-strong);
}
.banners--text-over .banners__slide .banners__link {
  position: relative;
}
.banners--text-over .banners__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.banners--circle.banners--text-below .banners__label {
  font-weight: 500;
  font-size: 0.9rem;
}
@media (max-width: 639px) {
  .banners--mobile-auto .banners__media {
    aspect-ratio: auto;
  }
  .banners--mobile-auto .banners__media img {
    height: auto;
    object-fit: contain;
  }
  .banners--mobile-portrait .banners__media {
    aspect-ratio: 4 / 5;
  }
  .banners--mobile-landscape .banners__media {
    aspect-ratio: 16 / 9;
  }
  .banners--mobile-square .banners__media {
    aspect-ratio: 1 / 1;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .carousel__slide {
    flex-basis: calc(
      (
          100% - (var(--carousel-cols-tablet, 1) - 1) *
            var(--carousel-gap, 1rem)
        ) /
        var(--carousel-cols-tablet, 1)
    );
  }
}

@media (min-width: 900px) {
  .carousel__slide {
    flex-basis: calc(
      (100% - (var(--carousel-cols, 1) - 1) * var(--carousel-gap, 1rem)) /
        var(--carousel-cols, 1)
    );
  }
  .icon-strip .carousel__arrow {
    display: inline-flex;
  }
}

@media (max-width: 899px) {
  .icon-strip .carousel__arrow {
    display: none;
  }
}

/* ── Retry de pagamento pós-compra (P-05) — snippet payment-retry, embutido na confirmação e no detalhe do pedido; painel/radios/campos reusam .checkout-panel/.checkout-options/.auth-field/.auth-submit ── */
.payment-retry {
  margin: 1rem 0;
}
.payment-retry__card {
  margin-top: 1rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
}
.payment-retry__card summary {
  cursor: pointer;
  font-weight: 600;
}

/* ── Footer — newsletter (P-21); botão/avisos reusam .auth-submit/.auth-error/.auth-success ── */
.footer-newsletter {
  max-width: 28rem;
  margin-bottom: 1.25rem;
}
.footer-newsletter--navigation { margin: 0; align-self: start; }
.footer-newsletter__text { margin: -.25rem 0 .65rem; color: var(--color-text-muted); font-size: .82rem; }
.footer-newsletter__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.6rem;
}
.footer-newsletter__row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.footer-newsletter__row .form-control {
  flex: 1 1 12rem;
}
.footer-newsletter .cf-turnstile {
  margin-top: 0.6rem;
}
.site-footer__copy {
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}
.site-footer__copy p {
  margin: 0;
}

/* ── Footer — navs e galerias de logos (seção `footer` por blocks). Mobile-first:
   as colunas de links empilham/colapsam via grid auto-fit (sem media query e sem
   overflow — a trilha mínima é fixa e o texto quebra com overflow-wrap). ── */
.site-footer__navs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto minmax(16rem, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-bottom: 1.5rem;
}
.site-footer__main > .site-footer__navs { margin-bottom: 0; }
.site-footer__brand { max-width: 12rem; text-align: center; }
.site-footer__brand img { width: auto; max-width: 100%; max-height: 7rem; }
.site-footer__brand p { margin: .75rem 0 0; color: var(--color-text-muted); font-size: .82rem; }
.site-footer__nav {
  min-width: 0;
}
.site-footer__nav-details { min-width: 0; }
.site-footer__nav-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  cursor: pointer;
  list-style: none;
  color: var(--color-text);
  font-size: .9rem;
  font-weight: 600;
}
.site-footer__nav-summary::-webkit-details-marker { display: none; }
.site-footer__nav-details[open] > .site-footer__nav-summary .icon { transform: rotate(180deg); }
.site-footer__nav-summary .icon { transition: transform .18s ease; }
.site-footer__heading {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}
.site-footer__links {
  list-style: none;
}
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0;
  color: var(--color-text-soft);
  overflow-wrap: anywhere;
}
.site-footer__logos {
  margin-bottom: 1.25rem;
}
.site-footer__logo-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.site-footer__logo-list img {
  max-height: 2.5rem;
  width: auto;
}
.site-footer__logo-list span {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  padding: .25rem .5rem;
  border-radius: .25rem;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: .7rem;
  font-weight: 700;
}
@media (min-width: 640px) {
  .site-footer__nav-details > .site-footer__nav-summary { pointer-events: none; margin-bottom: .5rem; }
  .site-footer__nav-details > .site-footer__nav-summary .icon { display: none; }
  .site-footer__nav-details:not([open]) > .site-footer__nav { display: block; }
}
@media (max-width: 900px) {
  .site-footer__main { grid-template-columns: 1fr 1fr; }
  .site-footer__main > .site-footer__navs { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .site-footer__main { grid-template-columns: 1fr; }
  .site-footer__brand { text-align: left; }
  .site-footer__navs:has(.site-footer__nav-details) { display: block; border-top: 1px solid var(--color-border); }
  .site-footer__nav-details { border-bottom: 1px solid var(--color-border); }
  .site-footer__nav-summary { padding: .8rem 0; }
  .site-footer__nav-details > .site-footer__nav { padding: 0 0 .8rem; }
}

/* ── Botão flutuante do WhatsApp (settings globais `whatsapp_*`) — fixo no canto
   inferior direito. z-index acima do dropdown da menubar (20) e abaixo do header
   e seus overlay/drawer/dropdown (100–130) — drawer aberto cobre o botão. ── */
.whatsapp-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-pill);
  background: #25d366;
  color: #fff;
  box-shadow: var(--shadow-md);
}
.whatsapp-float:hover {
  background: #1faa53;
  text-decoration: none;
}
@media (max-width: 639px) {
  .whatsapp-float {
    width: 2.75rem;
    height: 2.75rem;
  }
  body:has(.whatsapp-float) .product-heading h1 {
    padding-right: 3.25rem;
  }
}

/* ── Carrinho em drawer (snippets/cart-drawer) — painel lateral direito ── */
.cart-drawer__overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--color-overlay);
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  width: min(30rem, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.cart-drawer--enter {
  animation: cart-drawer-slide 0.2s ease-out;
}
@keyframes cart-drawer-slide {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.cart-drawer__title {
  font-weight: 700;
  color: var(--color-text-strong);
}
.cart-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-strong);
  cursor: pointer;
}
.cart-drawer__close:hover {
  background: var(--color-bg-alt);
}
.cart-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.cart-drawer__body[aria-busy="true"] {
  opacity: 0.6;
}
.cart-drawer__loading {
  padding: 1rem 0;
}
.cart-body--drawer,
.cart-layout--drawer {
  height: 100%;
  min-height: 0;
}
.cart-layout--drawer {
  display: flex;
  flex-direction: column;
}
.cart-layout--drawer .cart-layout__stores {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.8rem;
}
.cart-layout--drawer .cart-store {
  margin-bottom: 0.75rem;
}
.cart-layout--drawer .cart-layout__summary {
  position: relative;
  z-index: 2;
  flex: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 -0.5rem 1rem color-mix(in srgb, #000 8%, transparent);
}
.cart-layout--drawer .cart-summary-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.cart-layout--drawer .cart-summary-card__shipping {
  padding-block: 0.45rem;
}
.cart-layout--drawer .cart-summary-card__coupon {
  min-height: 2.6rem;
  padding-block: 0.45rem;
}
.cart-layout--drawer .cart-totals {
  gap: 0.3rem;
  padding-block: 0.5rem;
}
.cart-layout--drawer .cart-totals .cart-totals__grand {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.cart-layout--drawer .cart-summary-card__full {
  padding-block: 0.55rem 0.65rem;
}
.cart-page--drawer,
.cart-page--drawer .cart-body {
  height: 100%;
}

/* ── Responsivo (mobile) ── */
@media (max-width: 640px) {
  .cart-layout--page {
    grid-template-columns: 1fr;
  }
  .cart-layout--page .cart-layout__summary {
    position: static;
  }
  .cart-line {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }
  .cart-store__items {
    padding-inline: 0.75rem;
  }
  .cart-drawer {
    width: 100vw;
  }
  .cart-modal {
    align-items: end;
    padding: 0;
  }
  .cart-modal__dialog {
    width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  /* Busca/listagem: facetas empilham acima dos resultados — a coluna fixa de
     220px + card mínimo de 220px não cabem lado a lado e estouravam a viewport.
     Sem JS ficam inline (empilhadas); com JS viram bottom-sheet aberto pelo
     botão "Filtrar" (mesma linguagem dos drawers da onda 2). */
  .search-layout {
    flex-direction: column;
    gap: 1rem;
  }
  .search-facets {
    flex: none;
  }
  .facets-toggle {
    display: inline-flex;
  }

  /* Com JS: bottom-sheet off-canvas. `data-js` só existe após o Alpine iniciar,
     então sem JS este bloco não se aplica (facetas seguem inline). */
  .listing-form[data-js] .search-facets {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-md);
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  .listing-form[data-js] .search-facets--open {
    transform: translateY(0);
  }
  .listing-form[data-js] .facets-head {
    display: flex;
  }
  @media (prefers-reduced-motion: reduce) {
    .listing-form[data-js] .search-facets {
      transition: none;
    }
  }
  .account-shell {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  /* Nav vira barra de abas horizontal rolável (mesmo princípio anti-overflow do
     cart-drawer: o strip rola sozinho, a página nunca estoura). */
  .account-nav {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .account-nav__list {
    flex-direction: row;
    gap: 0.15rem;
  }
  .account-nav__item {
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 0.8rem;
  }
  .account-nav__item--active {
    background: none;
    border-bottom-color: var(--color-primary);
  }
  .account-nav__logout-item {
    margin-top: 0;
    padding-top: 0;
    padding-left: 0.4rem;
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }
  .account-nav__logout {
    white-space: nowrap;
  }
  .checkout-layout {
    grid-template-columns: 1fr;
  }
  .checkout-aside {
    position: static;
  }
  .hero {
    min-height: 14rem;
  }
  .hero__content {
    padding: 1.25rem;
  }
  .hero__title {
    font-size: 1.5rem;
  }
  .return-items__fields {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  /* Resumo do pedido: a tabela vira linhas empilhadas (mesma técnica do
     cart-drawer) — thumb + descrição fluem, qtd/preço quebram sem estourar. */
  .order-items tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.6rem;
    padding: 0.6rem 0;
  }
  .order-items td {
    display: block;
    border: 0;
    padding: 0;
    min-width: 0;
  }
  .order-items__thumb {
    width: 48px;
  }
  .order-items__desc {
    flex: 1 1 8rem;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .order-items__qty {
    order: 3;
  }
  .order-items__price {
    order: 4;
    margin-left: auto;
    text-align: right;
    font-weight: 600;
  }
}

/* ── Blog (CMS): listagem, artigo e vitrine ─────────────────────────────── */
.container--narrow {
  max-width: 760px;
}

.chip--active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border-input);
}
.btn--outline:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 1.25rem 0;
}
.article-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}
.article-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-alt);
}
.article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-card__media-empty {
  display: block;
  width: 100%;
  height: 100%;
}
.article-card__body {
  padding: 0.9rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.article-card__sections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.article-card__title {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0;
}
.article-card__title a {
  color: inherit;
}
.article-card__excerpt {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
  overflow-wrap: anywhere;
}
.article-card__date {
  color: var(--color-text-faint);
  font-size: 0.8rem;
}

.blog-listing {
  padding: 1.5rem 0 2.5rem;
}
.blog-listing__title {
  margin: 0 0 1rem;
}
.blog-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.blog-sections .chip {
  font-size: 0.85rem;
  padding: 0.25rem 0.75rem;
}
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.blog-pagination__current {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.blog-empty {
  padding: 2rem 0;
  text-align: center;
}

.article-page {
  padding: 1.5rem 0 3rem;
}
.article-page__header {
  margin-bottom: 1.25rem;
}
.article-page__sections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}
.article-page__title {
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.article-page__date {
  font-size: 0.9rem;
}
.article-page__cover {
  margin: 0 0 1.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.article-page__cover img {
  width: 100%;
  height: auto;
  display: block;
}
.article-page__content {
  line-height: 1.65;
}
.article-page__back {
  margin-top: 2rem;
}

.rich-text > :first-child {
  margin-top: 0;
}
.rich-text p {
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
}
.rich-text h2,
.rich-text h3 {
  margin: 1.5rem 0 0.6rem;
}
.rich-text ul,
.rich-text ol {
  margin: 0 0 1rem 1.4rem;
}
.rich-text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.rich-text a {
  color: var(--color-primary);
}

.latest-articles {
  padding: 1.5rem 0;
}
.latest-articles__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.latest-articles__title {
  margin: 0;
}
.latest-articles__more {
  font-size: 0.9rem;
  white-space: nowrap;
}
.latest-articles__grid {
  grid-template-columns: repeat(var(--article-cols-mobile, 1), minmax(0, 1fr));
}
@media (min-width: 640px) and (max-width: 899px) {
  .latest-articles__grid {
    grid-template-columns: repeat(
      var(--article-cols-tablet, 2),
      minmax(0, 1fr)
    );
  }
}
@media (min-width: 900px) {
  .latest-articles__grid {
    grid-template-columns: repeat(
      var(--article-cols-desktop, 3),
      minmax(0, 1fr)
    );
  }
}

/* ── Depoimentos (CMS content_entries + image) — seção testimonials ────────── */
.testimonials {
  padding: 1.5rem 0;
}
.testimonials__cover {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  object-fit: cover;
}
.testimonials__title {
  margin: 0 0 1rem;
}
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(
    var(--testimonial-cols-mobile, 1),
    minmax(0, 1fr)
  );
  gap: 1rem;
}
.testimonial-card {
  margin: 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.testimonial-card--raised {
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.testimonial-card--quote {
  border-color: transparent;
  border-left: 3px solid var(--color-primary);
  border-radius: 0;
  background: transparent;
}
.testimonial-card__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.testimonial-card__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.testimonial-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.testimonial-card__name {
  font-weight: 600;
}
.testimonial-card__rating {
  color: var(--color-accent);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
@media (min-width: 640px) and (max-width: 899px) {
  .testimonials__grid {
    grid-template-columns: repeat(
      var(--testimonial-cols-tablet, 2),
      minmax(0, 1fr)
    );
  }
}
@media (min-width: 900px) {
  .testimonials__grid {
    grid-template-columns: repeat(
      var(--testimonial-cols-desktop, 3),
      minmax(0, 1fr)
    );
  }
}

/* Vocabulário visual compartilhado pelas seções montáveis. Fica depois dos
   estilos específicos para os tokens globais realmente governarem o ritmo. */
.banners,
.showcase,
.hero,
.icon-strip,
.seller-showcase,
.benefits-bar,
.category-grid,
.collection-list,
.image-mosaic,
.curated-kit,
.brand-list-section,
.latest-articles,
.testimonials,
.about-info,
.faq {
  margin-top: var(--section-space);
  margin-bottom: var(--section-space);
}
.banners h2,
.showcase h2,
.icon-strip h2,
.seller-showcase h2,
.benefits-bar h2,
.category-grid h2,
.collection-list h2,
.curated-kit h2,
.brand-list-section h2,
.latest-articles h2,
.testimonials h2,
.about-info h2,
.faq h2 {
  font-size: var(--section-title-size);
  text-align: var(--section-title-align);
}