/* ==========================================================================
   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;
  /* Respiro lateral da página: a distância entre o conteúdo e a borda da casca.
     É um valor só, e toda barra que centraliza o próprio miolo lê daqui —
     literal repetido em uma delas sai do lugar na primeira mudança. */
  --sf-page-gutter: 1rem;
  /* Distância entre a borda do conteúdo centralizado e a borda da TELA. Em tela
     larga sobra metade do que excede o teto do conteúdo, mais o respiro; em tela
     estreita não sobra nada além do respiro. Quem sangra para fora do conteúdo
     mede por aqui, em vez de adivinhar quanto falta até a borda. */
  --sf-screen-inset: max(
    var(--sf-page-gutter),
    calc((100vw - var(--container-width)) / 2 + var(--sf-page-gutter))
  );

  /* Tipografia */
  --font-family: system-ui, -apple-system, sans-serif;
  --type-body-size: 1rem;
  --type-body-line-height: 1.5;
  --type-body-weight: 400;
  --type-h1-size: 2rem;
  --type-h1-weight: 700;
  /* Todo título de seção é um `<h2>`: este par governa o cabeçalho das seções
     montáveis e qualquer outro h2 do tema. Não crie um token paralelo de
     "título de seção" — dois donos para o mesmo elemento sempre divergem. */
  --type-h2-size: 1.35rem;
  --type-h2-weight: 700;
  --type-h3-size: 1.125rem;
  --type-h3-weight: 600;
  --type-section-subtitle-size: 1rem;
  --type-section-subtitle-weight: 400;
  /* Par compartilhado por todo título. Altura da linha por nível e do subtítulo
     são slots de override sem default: preenchidos, vencem este par. */
  --type-heading-line-height: 1.2;
  --type-heading-letter-spacing: 0;
  --type-eyebrow-size: 0.72rem;
  --type-eyebrow-line-height: 1.2;
  --type-eyebrow-weight: 700;
  --type-eyebrow-letter-spacing: 0.12em;
  /* Papéis de texto que não são título de seção. Antes cada um deles era um
     literal repetido regra a regra, então a configuração global não alcançava
     nenhum e funções iguais divergiam em peso, tamanho e cor sem motivo.
     Rótulo nomeia um controle ou entrada de menu; auxiliar é o apoio curto ao
     lado do conteúdo; título de item é o título curto dentro de um cartão. A
     cor sai dos neutros configuráveis — papel não repete cor. */
  --type-label-size: 0.85rem;
  --type-label-weight: 600;
  --type-label-line-height: 1.3;
  --type-label-letter-spacing: 0;
  --type-label-transform: none;
  --type-meta-size: 0.85rem;
  --type-meta-weight: 400;
  --type-meta-line-height: 1.4;
  --type-item-title-size: 0.95rem;
  --type-item-title-weight: 600;
  --type-item-title-line-height: 1.3;

  /* 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 — ação secundária.
     A segunda cor de ação da marca: o botão que age sem ser o principal
     (enviar da newsletter, ação do card na variante secundária). O default
     herda o neutro escuro do texto, que é o que a variante sempre foi — marca
     que não declara uma segunda cor de ação continua com o botão neutro. O
     hover derivado sai da ponte, junto com a cor escolhida. */
  --color-action-secondary: var(--color-text-strong);
  --color-action-secondary-hover: var(--color-text-soft);

  /* 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;

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

  /* Cor — estados.
     Os quatro papéis (sucesso, erro, aviso, informação) têm a MESMA escala de
     cinco degraus, para que o marketplace escolha uma cor por papel e não
     quatro: a principal é o traço forte (ícone, ênfase); `surface` e `bg` são
     fundos, o primeiro mais lavado que o segundo; `border` é a linha que fecha
     o aviso; `text` é o texto legível sobre esses fundos.
     Os defaults são afinados à mão — nenhuma mistura linear reproduz a escala
     inteira a partir da cor principal sem lavar os fundos e desviar o tom dos
     textos. Quando o marketplace troca a cor principal, a escala inteira sai
     derivada dela em snippets/theme-css-vars.liquid; escolher exatamente o
     default equivale a pedir a escala derivada, não esta. */
  --color-success: #16a34a;
  --color-success-surface: #f0fdf4;
  --color-success-bg: #dcfce7;
  --color-success-border: #bbf7d0;
  --color-success-text: #166534;

  /* O vermelho de erro já é escuro o bastante para ser lido sobre os próprios
     fundos: principal e texto coincidem por default. */
  --color-error: #b91c1c;
  --color-error-surface: #fef2f2;
  --color-error-bg: #fee2e2;
  --color-error-border: #fecaca;
  --color-error-text: #b91c1c;

  --color-warning: #d97706;
  --color-warning-surface: #fffbeb;
  --color-warning-bg: #fef3c7;
  --color-warning-border: #fde68a;
  --color-warning-text: #92400e;

  --color-info: #2563eb;
  --color-info-surface: #eff6ff;
  --color-info-bg: #dbeafe;
  --color-info-border: #bfdbfe;
  --color-info-text: #1e40af;

  /* 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);

  /* A PDP e cada card têm proporções independentes. O card escreve a sua no
     próprio artigo porque uma vitrine pode sobrescrever o padrão da loja. */
  --product-page-image-ratio: 1 / 1;

  /* Revelação da ação do card. `lift-space` é o quanto a ação viaja; `lift-zoom`
     é o crescimento do card em destaque, em porcentagem. O valor é adimensional
     porque o crescimento é `scale`: em pixel o mesmo número daria efeitos
     diferentes conforme a largura do card, que muda com a quantidade de colunas.
     O default aqui e o `default` do setting no schema são o mesmo número. */
  --product-card-lift-space: 2.85rem;
  --product-card-lift-zoom: 106;

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

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

  /* ── Hover ──────────────────────────────────────────────────────────────
     Não existe hover genérico: nenhum elemento ganha estado ao passar o mouse
     só por ser link ou por ser botão. Existem DOIS padrões declarados, e o
     componente escolhe entre três posturas — herdar, sobrescrever ou recusar:

       herda      — a regra `:hover` dele consome os tokens do padrão;
       sobrescreve— redeclara o token na própria raiz e segue consumindo;
       recusa     — não escreve regra `:hover` nenhuma (banner, logo, card).

     `link`  — muda a cor do texto. Sem sublinhado: é o que a maioria dos
               links do tema já fazia, e o sublinhado sobrava só onde ninguém
               lembrou de cancelar.
     `botão` — escurece o preenchimento e mantém o texto legível sobre ele.

     Especificidade é contrato. A Aparência escreve em `[data-sf-style]:hover` e
     `[data-theme-part]:hover`, ambos (0,2,0), e vem depois desta folha — ela
     precisa vencer. Regra de hover do tema fica em (0,2,0) ou abaixo; `:where()`
     zera o que passar disso.

     Todo estado de hover mora dentro de `@media (hover: hover) and
     (pointer: fine)`, a mesma régua que a Aparência aplica: no toque o `:hover`
     gruda depois do tap e o item fica aceso até o próximo toque em outro lugar.
     Regra que só DESLIGA um efeito é a exceção — ela precisa valer em toda
     entrada, senão o efeito volta justamente onde deveria estar desligado. */
  --hover-link-color: var(--color-primary);
  --hover-link-decoration: none;
  --hover-button-background: var(--color-primary-dark);
  --hover-button-color: var(--color-on-primary);

  /* ── Escala de camadas ──────────────────────────────────────────────────
     Quem escreve `z-index` precisa saber contra quem está competindo, e um
     número solto na regra não diz isso. A escala é a resposta: cada faixa tem
     nome, e peça nova escolhe o nome, não o número.

       0–99      conteúdo da página (cartão em destaque, seta de carrossel,
                 dropdown da menubar). Nunca alcança a casca.
       100–149   casca: as barras fixadas ao rolar e as superfícies que elas
                 abrem — backdrop, drawer, bottom sheet, dropdown, sugestões.
       150–299   diálogo de página (cupom, frete, hotspot do banner).
       300+      visualização de imagem em tela cheia.

     Superfície da casca precisa vencer AS DUAS barras, e as duas criam
     contexto de empilhamento próprio quando fixadas — número maior dentro de
     uma delas não atravessa a outra. Por isso o drawer do menu é teleportado
     para o <body> (`x-teleport` em `snippets/header-drawer.liquid`): a camada
     abaixo só vale quando ela é comparada na raiz do documento. */
  --layer-shell-bar: 100;
  /* A barra utilitária fixada passa por cima do cabeçalho que rola para fora —
     é o único par da casca em que a de cima vence a de baixo. */
  --layer-shell-topbar: 105;
  --layer-shell-backdrop: 110;
  --layer-shell-panel: 120;
  --layer-shell-menu: 130;
  --layer-shell-popover: 140;
  --layer-dialog: 180;
  --layer-dialog-wide: 220;
  --layer-fullscreen: 2000;
}

/* ── Papéis de texto reutilizáveis ────────────────────────────────────────
   Um papel por função, consumido por quem exerce aquela função em qualquer
   página. Quem precisa do papel usa a classe; declarar o literal de novo é o
   que fazia a configuração global parar na porta do componente.
   `<strong>` não entra aqui: negrito de marcação é ênfase dentro de uma frase,
   não fonte de peso de um rótulo — usar a tag como estilo é o que ignorava o
   peso configurado. ── */
.type-label {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: var(--type-label-transform);
  color: var(--type-label-color, var(--color-text-soft));
}
.type-meta {
  font-size: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  line-height: var(--type-meta-line-height);
  color: var(--type-meta-color, var(--color-text-muted));
}
.type-item-title {
  font-size: var(--type-item-title-size);
  font-weight: var(--type-item-title-weight);
  line-height: var(--type-item-title-line-height);
  color: inherit;
}

/* ── 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: var(--type-eyebrow-size);
	font-weight: var(--type-eyebrow-weight);
	letter-spacing: var(--type-eyebrow-letter-spacing);
	line-height: var(--type-eyebrow-line-height);
	text-transform: uppercase;
}
/* Só a margem é do cabeçalho: tamanho, peso, entrelinha e alinhamento vêm do
   elemento `h2`, e o alinhamento do modificador do cabeçalho é herdado. Voltar a
   declarar `text-align` aqui faz `.section-heading--center` centralizar tudo
   menos o título. */
.section-heading__title { margin: 0; }
.section-heading__subtitle { max-width: 60ch; margin: .45rem 0 0; color: var(--color-text-muted); font-size: var(--type-section-subtitle-size); font-weight: var(--type-section-subtitle-weight); line-height: var(--type-section-subtitle-line-height, var(--type-heading-line-height)); letter-spacing: var(--type-section-subtitle-letter-spacing, var(--type-heading-letter-spacing)); }
.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: 0; }
.image-card-list__items {
	display: grid;
	grid-template-columns: repeat(var(--image-card-grid-cols, 3), minmax(0, 1fr));
	gap: var(--image-card-gap, clamp(1rem, 2vw, 1.5rem));
}
/* Em carrossel esta lista não existe: quem monta a faixa é o snippet `carousel`,
   e o cartão vai dentro de um `<li class="carousel__slide">` — largura e encaixe
   de rolagem são do slide, não do cartão. Por isso aqui só mora o modo GRADE. */
.image-card { min-width: 0; }
:where(.image-card-list--card) .image-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-surface); background: var(--color-surface); }
:where(.image-card-list--card) .image-card__body { padding: 1rem; }
.image-card__media { overflow: hidden; background: var(--color-bg-alt); }
:where(.image-card__media) img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
@media (hover: hover) and (pointer: fine) {
  :where(.image-card:hover .image-card__media) img {
   transform: scale(1.025); 
  }
}
:where(.image-card-list--ratio-portrait) .image-card__media { aspect-ratio: 4 / 5; }
:where(.image-card-list--ratio-square) .image-card__media { aspect-ratio: 1; }
:where(.image-card-list--ratio-landscape) .image-card__media { aspect-ratio: 4 / 3; }

/* Card deitado: a imagem vira uma coluna estreita de largura fixa e o texto
   ocupa o resto. A proporção configurada continua valendo dentro dessa coluna,
   então trocar a orientação não deforma a foto. */
:where(.image-card-list--card-horizontal) .image-card {
  display: grid;
  grid-template-columns: var(--image-card-media-width, 6.5rem) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}
:where(.image-card-list--card-horizontal) .image-card__media {
  border-radius: var(--radius-control);
}
:where(.image-card-list--card-horizontal) .image-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
:where(.image-card-list--card.image-card-list--card-horizontal) .image-card {
  padding: 0.6rem;
}
:where(.image-card-list--card.image-card-list--card-horizontal) .image-card__body {
  padding: 0;
}

/* Marca do site principal no cabeçalho — o botão redondo de sair da área. */
.header__site-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--header-site-mark-size, 40px);
  height: var(--header-site-mark-size, 40px);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-strong);
  text-decoration: none;
  transition: border-color 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .header__site-mark:hover { border-color: var(--color-primary); }
}
.header__site-mark-img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}
.hero__eyebrow {
  margin: 0 0 0.35rem;
  color: var(--type-label-color, var(--color-text-soft));
}

.header__site-mark-text {
  font-weight: 700;
  line-height: 1;
}
:where(.image-card-list--ratio-natural .image-card__media) img { height: auto; }
/* Sem tamanho próprio: o título do card usa o token de h3 do tema, senão duas
   instâncias do mesmo componente rendem papéis tipográficos diferentes.
   Título e subtítulo carregam parte própria, então o contexto entra em
   `:where()`: o padrão do componente não pode contar especificidade em cima
   do valor escolhido no painel. */
:where(.image-card__body) h3 { margin: .85rem 0 .15rem; }
/* O apagamento do subtítulo mora na cor, não em `opacity`: transparência do
   elemento inteiro se multiplicaria por qualquer cor configurada na parte
   `card-subtitle` e nenhum valor escolhido pintaria cheio. */
:where(.image-card__body) p { margin: 0; color: color-mix(in srgb, currentColor 66%, transparent); }
.image-card__action { display: inline-flex; align-items: center; gap: .4rem; 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); }
/* A cor branca mora no card, não no corpo: só assim o texto herda o que o
   painel configurar na parte `card` — declaração direta no corpo bloquearia. */
:where(.image-card-list--overlay) .image-card { position: relative; overflow: hidden; color: #fff; }
:where(.image-card-list--overlay) .image-card__body { position: absolute; inset: auto 0 0; padding: 1.25rem; background: linear-gradient(transparent, rgb(0 0 0 / .78)); }
:where(.image-card-list--overlay .image-card__body) p { color: color-mix(in srgb, currentColor 78%, transparent); }

/* ── História da marca ────────────────────────────────────────────────── */
.brand-story { padding-block: 0; }
.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; }
:where(.brand-story__content) .btn { margin-top: 1.25rem; }

/* ── Faixa manual de logos ────────────────────────────────────────────── */
.logo-list { padding-block: clamp(1.5rem, 4vw, 3rem); }
/* Só a grade mora aqui: o modo carrossel é o snippet compartilhado. */
.logo-list__items {
	display: grid;
	grid-template-columns: repeat(var(--logo-grid-cols, 6), minmax(0, 1fr));
	gap: 1rem;
	align-items: stretch;
}
.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;
}
:where(.logo-list__item) img { width: 100%; max-width: 9rem; height: 3.5rem; object-fit: contain; filter: var(--logo-image-filter, none); }
.logo-list__item strong { font-size: clamp(1rem, 2.2vw, 1.8rem); letter-spacing: -.04em; }
:where(.logo-list--monochrome) { --logo-image-filter: grayscale(1) contrast(1.35); }

@media (max-width: 1023px) {
	.image-card-list__items { grid-template-columns: repeat(var(--image-card-grid-cols-tablet, 2), minmax(0, 1fr)); }
	.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-grid-cols-tablet, 4), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.image-card-list__items { grid-template-columns: repeat(var(--image-card-grid-cols-mobile, 1), minmax(0, 1fr)); }
	:where(.image-card-list--grid) .image-card-list__scroller { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	:where(.image-card-list--grid) .image-card-list__items { display: flex; }
	:where(.image-card-list--grid) .image-card { flex: 0 0 calc((100% - var(--image-card-gaps-mobile, 0) * var(--image-card-gap, clamp(1rem, 2vw, 1.5rem))) / var(--image-card-cols-mobile)); scroll-snap-align: start; }
	/* No modo grade não há snippet de faixa: quem rola é o invólucro da lista.
	   Ele existe para separar as mãos — o furo escreve margem negativa, e a
	   lista é a superfície que a Aparência edita. Tema e painel escrevendo
	   margem no MESMO elemento, o painel vence e o furo some. */
	.image-card-list__scroller[data-bleed-end~="mobile"] { margin-inline-end: calc(-1 * var(--sf-bleed-end, 0px)); }
	.image-card-list__scroller[data-bleed-start~="mobile"] { margin-inline-start: calc(-1 * var(--sf-bleed-start, 0px)); }
	.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)); }
}

/* ==========================================================================
   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;
}
/* A casca ocupa no mínimo a altura da tela e o rodapé fica no fim dela mesmo em
   página curta. Só o miolo cresce (`flex-grow` em `#sf-main`); topbar, header e
   rodapé mantêm a altura natural do próprio conteúdo — página curta e longa
   terminam com o mesmo rodapé. `dvh` acompanha a barra de endereço do celular;
   `vh` é o fallback de quem não entende a unidade. */
body {
  font-family: var(--font-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-body-weight);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
/* `width: 100%` é obrigatório: o miolo é `.container`, que centraliza com
   `margin: 0 auto`, e margem automática no eixo transversal cancela o
   esticamento do item flex — sem isto o conteúdo encolheria para o tamanho do
   texto. A largura máxima do container continua mandando. */
#sf-main {
  flex: 1 0 auto;
  width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
}
a {
  color: var(--color-primary);
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
h1 {
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-line-height, var(--type-heading-line-height));
  letter-spacing: var(--type-heading-letter-spacing);
  margin-bottom: 0.75rem;
}
h2 {
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line-height, var(--type-heading-line-height));
  letter-spacing: var(--type-heading-letter-spacing);
  margin: 1.5rem 0 0.5rem;
}
h3 {
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-line-height, var(--type-heading-line-height));
  letter-spacing: var(--type-heading-letter-spacing);
}
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 snippet `icon`: herda a cor via currentColor, alinha ao texto. */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
/* `--icon-size` não é token de tema: é o canal privado entre o snippet `icon` e
   as duas regras abaixo. Registrar com `inherits: false` fecha esse canal no
   elemento que consome — declaração em ancestral (CSS personalizado do lojista,
   Aparência, componente futuro que reuse o nome) deixa de atravessar e
   redimensionar em silêncio todo ícone sem dimensão própria abaixo dela. A
   sintaxe universal sem `initial-value` deixa o valor inicial inválido de
   propósito: é o que faz `var(--icon-size, 1em)` cair no piso. `<length>` não
   serviria, porque `1em` depende do tamanho da fonte e não é aceito como valor
   inicial de propriedade registrada. Quem passa número continua mandando: o
   snippet declara no próprio elemento, onde herança nenhuma está em jogo. */
@property --icon-size {
  syntax: "*";
  inherits: false;
}
/* Coleção em diretório: o desenho é a máscara e o tamanho vem da custom
   property que o snippet emite. A dimensão fica aqui, e não em estilo em linha,
   para qualquer regra de componente (0-1-1) poder vencer — é como a Aparência
   da parte alcança o desenho, não só a caixa em volta dele. O piso de 1em não é
   cosmético: `<span>` sem dimensão colapsa para 0×0 e some sem erro nenhum. */
.icon--mask {
  width: var(--icon-size, 1em);
  height: var(--icon-size, 1em);
  background: currentColor;
  -webkit-mask: var(--theme-icon-url) center / contain no-repeat;
  mask: var(--theme-icon-url) center / contain no-repeat;
}
/* Coleção em webfont: o desenho é um glifo, então quem dimensiona é o corpo da
   fonte. Mesma regra de precedência da máscara. */
.icon--font {
  font-size: var(--icon-size, 1em);
}

/* 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;
}
/* Estado de erro do campo. Quem marca `data-sf-invalid` é o validador do
   `storefront.js`; o desenho fica aqui. A cor sozinha não comunica nada: quem
   carrega a informação é a mensagem em texto abaixo do campo (`.field-error`,
   presa ao controle por `aria-describedby`), e o anel de 2px engrossa a borda
   para quem não distingue matiz. */
.form-field[data-sf-invalid]
  :is(
    input:not([type="checkbox"], [type="radio"], [type="hidden"]),
    select,
    textarea
  ),
.auth-field[data-sf-invalid]
  :is(
    input:not([type="checkbox"], [type="radio"], [type="hidden"]),
    select,
    textarea
  ) {
  border-color: var(--color-error);
  box-shadow: 0 0 0 2px var(--color-error-border);
}
.form-field[data-sf-invalid]
  :is(
    input:not([type="checkbox"], [type="radio"], [type="hidden"]),
    select,
    textarea
  ):focus,
.auth-field[data-sf-invalid]
  :is(
    input:not([type="checkbox"], [type="radio"], [type="hidden"]),
    select,
    textarea
  ):focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-error-border);
}
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  color: var(--color-error);
  font-size: 0.85rem;
  line-height: 1.35;
  font-weight: 600;
}
.field-error svg {
  flex: none;
  margin-top: 0.1rem;
}

.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);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  .auth-submit:hover {
    background: var(--hover-button-background);
    color: var(--hover-button-color);
  }
}
.btn--secondary {
  background: var(--color-action-secondary);
  color: var(--color-surface);
}
@media (hover: hover) and (pointer: fine) {
  .btn--secondary:hover {
    background: var(--color-action-secondary-hover);
  }
}
.btn--ghost,
.btn--outline,
.auth-submit--ghost {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-border-input);
}
@media (hover: hover) and (pointer: fine) {
  .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);
}
@media (hover: hover) and (pointer: fine) {
  .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;
}
/* Ícone que acompanha o rótulo de uma ação, par de marcação do fragmento de
   settings `action-icon`. Sem cor escolhida ele acompanha o texto do botão, de
   modo que a variante e a Aparência da ação valem para os dois sem uma segunda
   declaração de cor. O glifo mede 1em: configurar a tipografia da ação
   redimensiona rótulo e ícone juntos, e o alinhamento continua sendo do botão,
   que já é uma caixa flex com espaçamento próprio. Um tamanho escolhido entra
   como corpo de fonte desta caixa, e não como largura do desenho: os três tipos
   de coleção (sprite, máscara e webfont) medem 1em, então um valor só governa
   os três. */
.action-icon {
  display: inline-flex;
  flex: none;
  color: var(--action-icon-color, inherit);
  font-size: var(--action-icon-size, inherit);
}
.action-icon > .icon {
  width: 1em;
  height: 1em;
}
/* Rótulo de ação é texto que a loja escreve, com tipografia que a loja
   configura: ele pode ficar maior que a peça que o abriga. A guarda vale para
   todo botão do tema — a caixa não passa do container, encolhe quando é item de
   flex ou grade, e uma sequência sem espaço quebra em vez de escapar por cima do
   vizinho. `min-height` continua de pé, então a área clicável nunca encolhe: o
   botão cresce em altura, e nunca some. */
.btn,
.auth-submit,
.hero__cta,
.curated-kit__cta,
.image-card__action,
.benefit-card--action,
.utility-bar__item {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Onde a quebra é esperada, ela é distribuída: duas linhas parelhas em vez de
   uma cheia e uma com a última palavra sozinha. */
.product-card__action,
.image-card__action,
.benefit-card--action {
  text-wrap: balance;
}

/* 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;
}
/* Os dois botões do stepper são botões do tema, não um par avulso: quem manda
   na cor é o mesmo trio de tokens dos `.btn--*`, exposto aqui em custom
   properties para a variante (e a Aparência) trocarem o trio inteiro de uma vez
   sem que nenhuma regra volte a escrever um literal. */
.quantity-control__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--quantity-button-border, var(--color-border-input));
  background: var(--quantity-button-bg, var(--color-bg-alt));
  color: var(--quantity-button-color, var(--color-text-strong));
  cursor: pointer;
}
/* Variantes: o mesmo vocabulário dos botões do tema — "Contorno" espelha
   `.btn--ghost`, "Principal" espelha `.btn--primary`, "Sem contorno" tira a
   moldura e mantém só a área clicável. */
.quantity-control--outline {
  --quantity-button-bg: var(--color-surface);
  --quantity-button-color: var(--color-primary);
  --quantity-button-border: var(--color-border-input);
  --quantity-button-hover-bg: var(--color-primary-soft);
  --quantity-button-hover-color: var(--color-primary-dark);
  --quantity-button-hover-border: var(--color-primary);
}
.quantity-control--primary {
  --quantity-button-bg: var(--color-primary);
  --quantity-button-color: var(--color-on-primary);
  --quantity-button-border: var(--color-primary);
  --quantity-button-hover-bg: var(--color-primary-dark);
  --quantity-button-hover-color: var(--color-on-primary);
  --quantity-button-hover-border: var(--color-primary-dark);
}
.quantity-control--plain {
  --quantity-button-bg: transparent;
  --quantity-button-color: var(--color-text-strong);
  --quantity-button-border: transparent;
  --quantity-button-hover-bg: var(--color-bg-alt);
  --quantity-button-hover-color: var(--color-text-strong);
  --quantity-button-hover-border: transparent;
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .quantity-control__button:hover:where(:not(:disabled)) {
    border-color: var(--quantity-button-hover-border, var(--color-primary));
    background: var(--quantity-button-hover-bg, var(--color-primary-soft));
    color: var(--quantity-button-hover-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 var(--sf-page-gutter);
}

/* ── Header componível — mobile-first: base = ≤1023px, desktop em @media 1024px+ ──
   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;
}

/* ── Seção superior fixada ao rolar ────────────────────────────────────────
   `position: sticky` só se move dentro da caixa do pai, e o pai da casca é uma
   `<div>` da altura dela — fixar a casca direto não sairia do lugar. Por isso
   quem se move é sempre um invólucro com altura sobrando.

   `.site-shell` normalmente não existe para o layout (`display: contents`): a
   barra superior e o cabeçalho continuam sendo filhos diretos do corpo, e o
   cabeçalho fixado se move contra a página inteira, como sempre fez.

   As três combinações:

     só o cabeçalho fixado — invólucro transparente, nada muda;
     só a seção fixada     — a seção se move contra a página e o cabeçalho rola
                             para fora por baixo dela;
     as duas fixadas       — o invólucro vira a caixa que se move, e as duas
                             param juntas no topo, na ordem em que estão.

   Fixar a seção abre um contexto de empilhamento (é o que `sticky` faz), então
   a folha de CEP que a barra utilitária hospeda passa a parar abaixo do
   cabeçalho. É a troca de fixar: as duas barras seguem acesas sobre o
   escurecimento. */
.site-shell {
  display: contents;
}
/* A casca da Seção superior quase não desenha: fundo, altura e recuo saem da
   Aparência dela. A marca `--sticky` é lida daqui de fora, pelo invólucro. */
.site-topbar-shell {
  min-width: 0;
}
.site-topbar:has(> .site-topbar-shell--sticky) {
  position: sticky;
  top: 0;
  z-index: var(--layer-shell-topbar);
}
.site-shell:has(> .site-topbar > .site-topbar-shell--sticky):has(> .site-header--sticky) {
  display: block;
  position: sticky;
  top: 0;
  z-index: var(--layer-shell-topbar);
}
/* Dentro do invólucro que já se move, cada barra volta a ser peça parada: duas
   caixas móveis encaixadas fariam a de dentro perseguir a de fora. */
.site-shell:has(> .site-topbar > .site-topbar-shell--sticky):has(> .site-header--sticky)
  > .site-topbar,
.site-shell:has(> .site-topbar > .site-topbar-shell--sticky):has(> .site-header--sticky)
  > .site-header--sticky {
  position: static;
}
/* Altura mínima é da barra e mora na raiz, onde o painel escreve `min-height`;
   o miolo apenas herda o piso pra centralizar dentro dele. Largura do conteúdo
   e recuo lateral são da parte `content`, que é esse miolo. */
/* Sem `z-index`: a barra não abre contexto de empilhamento próprio, e por isso
   o backdrop e a folha de CEP que ela hospeda são comparados na raiz do
   documento, acima do cabeçalho. `position: relative` fica porque o destaque
   lateral do item se estende a partir dela. */
.utility-bar {
  position: relative;
  min-width: 0;
  min-height: 2.25rem;
  overflow: visible;
  background: var(--color-surface);
  color: var(--color-text-soft);
  border-block-end-width: 1px;
  border-block-end-style: solid;
  border-block-end-color: var(--color-border);
  font-size: 0.78rem;
}
.utility-bar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: inherit;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--sf-page-gutter);
}
.utility-bar__item {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.3rem;
  color: inherit;
  white-space: nowrap;
}
/* Aqui o rótulo é recado ou atalho numa faixa fina de altura própria, e não a
   ação principal da página: a faixa não engorda por causa de um texto: o que não
   couber vira reticências. O ícone fica fora do recorte — ele é o que resta
   quando o espaço aperta, e por isso o alvo é o texto pelo nome, e não "todo
   span menos o ícone": negação que cita a classe do ícone alcança a caixa que a
   Aparência configura. */
.utility-bar__item > .utility-bar__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .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;
}
:where(.utility-bar) .header__location-value-short {
  display: none;
}
:where(.utility-bar) .header__location-panel {
  color: var(--color-text);
  font-size: 1rem;
}
.site-header {
  position: relative;
  z-index: var(--layer-shell-bar);
  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(--color-surface);
  color: var(--color-text);
  border-block-end-width: 1px;
  border-block-end-style: solid;
  border-block-end-color: var(--color-border);
}
/* Mesma divisão da barra utilitária: altura mínima na raiz (o miolo herda o
   piso), largura e recuo do conteúdo na parte `content`. */
.header-main__inner {
  position: relative;
  max-width: var(--container-width);
  margin-inline: auto;
  min-height: inherit;
  padding: 0.55rem var(--sf-page-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.header-main__item {
  min-width: 0;
  display: flex;
  align-items: center;
  order: var(--header-mobile-order, 50);
}
/* Visibilidade dos itens do cabeçalho: um campo por faixa de tela, e cada faixa
   escrita numa condição que não alcança as outras. As três classes escrevem a
   MESMA propriedade (`display`), então convivência por especificidade seria
   disputa — quem ganhasse ganharia em toda largura. Faixas exclusivas tiram a
   disputa do caminho: em qualquer largura, exatamente uma regra pode falar, e
   nenhuma precisa devolver o item ao fluxo depois. */
@media (max-width: 767px) {
  .utility-bar__item--mobile-hidden,
  .header-main__item--mobile-hidden {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .utility-bar__item--tablet-hidden,
  .header-main__item--tablet-hidden {
    display: none;
  }
}
@media (min-width: 1024px) {
  .utility-bar__item--desktop-hidden,
  .header-main__item--desktop-hidden {
    display: none;
  }
}
.header-main__item--search {
  flex: 1 0 100%;
  width: 100%;
}
/* Abaixo de 1024px a caixa do logo cresce e sobra espaço dos dois lados; o
   alinhamento decide se ele fica no meio dessa sobra ou encostado no bloco
   anterior, em geral o botão do menu. No desktop a caixa não cresce e a regra
   de ≥1024px assume. */
.header-main__item--logo {
  flex: 1 1 0;
  justify-content: var(--header-logo-justify, 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: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .header-main__nav-link:hover {
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
.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: inherit;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .header__burger:hover {
    background: var(--color-bg-alt);
  }
}

.header__logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: inherit;
}
.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: inherit;
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .header__action:hover {
    background: var(--color-bg-alt);
  }
}
/* A caixa do ícone é a parte `icon` da Aparência: quem dá fundo, forma e
   preenchimento a ela desenha o círculo. Por isso ela centra o desenho — com
   largura e altura definidas, o glifo fica no meio em vez de encostar no canto. */
.header__action-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--header-icon-color, currentColor);
}
.utility-bar__icon,
.header-search__submit {
  color: var(--header-icon-color, currentColor);
}
/* O desenho mede 1em, então quem decide o tamanho é o corpo da fonte da caixa
   — um valor só governa sprite, máscara e webfont, que medem 1em cada um. */
.utility-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--utility-icon-size, 14px);
}
.header__location-trigger--trailing .header__action-icon {
  order: 3;
}
/* A barra pode ter qualquer fundo, então o rótulo herda a cor da barra em vez
   do neutro de rótulo — o papel continua sendo o mesmo, só a cor é do lugar. */
.header__action-label {
  display: none;
  --type-label-color: currentColor;
}
:where(.header__action--icon-only) .header__action-label,
:where(.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:where(:empty) {
  display: none;
}

/* Busca — form compartilhado (snippets/header-search); inline = desktop, bar = mobile.
   O popover é progressivo: sem JS, o GET /busca continua funcionando normalmente.

   A moldura é UMA caixa: borda, raio e fundo pertencem ao formulário, e campo e
   lupa nascem sem borda. Antes a moldura era duas peças coladas — o campo com o
   canto direito reto e a lupa com o esquerdo — e a emenda entre elas lia como
   uma segunda borda, além de abrir um vão quando a Aparência dá forma própria à
   caixa do ícone.

   Todo modificador de estilo entra em `:where()`. A lupa é a parte `icon` da
   Aparência, e o painel emite `[data-theme-part="icon"]` por último: variante
   com peso próprio venceria fundo, forma e preenchimento escolhidos lá. Com peso
   zero, a variante continua vencendo o padrão por vir depois no arquivo, e perde
   do painel. */
.header-search {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.header-search:focus-within {
  border-color: var(--color-primary);
  outline: 1px solid var(--color-primary);
}
.header-search__input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: inherit;
  font-size: 1rem;
  background: transparent;
  color: inherit;
}
.header-search__input:focus {
  outline: none;
}
.header-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 0 0.85rem;
  border: 0;
  background: transparent;
  color: var(--color-text-soft);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .header-search__submit:hover {
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}

/* Transparente e o legado `outline_leading`: mesma moldura, sem preenchimento.
   O lado da lupa é escolha separada e não pertence mais ao estilo. */
:where(.header-search--transparent) .header-search__submit,
:where(.header-search--outline_leading) .header-search__submit {
  color: var(--header-icon-color, inherit);
}
:where(.header-search--transparent),
:where(.header-search--outline_leading) {
  background: transparent;
}

/* Estilo Com botão: a lupa vira ação sólida dentro da moldura. A cor do ícone
   continua vencendo quando configurada — o botão colorido não pode calar o
   campo vizinho. */
:where(.header-search--button) .header-search__submit {
  padding: 0 1.1rem;
  background: var(--header-search-button-color, var(--color-primary));
  color: var(--header-icon-color, var(--color-on-primary));
}
@media (hover: hover) and (pointer: fine) {
  :where(.header-search--button) .header-search__submit:hover {
    color: var(--header-icon-color, var(--color-on-primary));
    filter: brightness(0.93);
  }
}

/* Cor do texto de exemplo. Sem configuração vale o cinza de apoio do tema: um
   placeholder com a cor do texto real leria como valor preenchido. */
:where(.header-search__input)::placeholder {
  color: var(--header-search-placeholder-color, var(--color-text-muted));
  opacity: 1;
}

/* Lado da lupa. Vale em qualquer largura porque é o que dá sentido a "igual ao
   desktop" no celular; quem pede um lado diferente lá tem as regras de
   `--mobile-leading`/`--mobile-trailing` logo abaixo, que vencem por ordem.

   O lado decide ordem e de que lado a lupa acompanha o canto da moldura. Ele
   NÃO decide estilo: escolher a lupa à esquerda no celular não pode trocar o
   estilo escolhido — era o que fazia o "Com botão" virar transparente lá. */
:where(.header-search--icon-leading) .header-search__input {
  order: 2;
}
:where(.header-search--icon-leading) .header-search__submit {
  order: 1;
  border-radius: var(--radius) 0 0 var(--radius);
}
:where(.header-search--icon-trailing) .header-search__input {
  order: 1;
}
:where(.header-search--icon-trailing) .header-search__submit {
  order: 2;
  border-radius: 0 var(--radius) var(--radius) 0;
}
@media (max-width: 1023px) {
  :where(.header-search--mobile-leading) .header-search__input {
    order: 2;
  }
  :where(.header-search--mobile-leading) .header-search__submit {
    order: 1;
    border-radius: var(--radius) 0 0 var(--radius);
  }
  :where(.header-search--mobile-trailing) .header-search__input {
    order: 1;
  }
  :where(.header-search--mobile-trailing) .header-search__submit {
    order: 2;
    border-radius: 0 var(--radius) var(--radius) 0;
  }
}
/* A cor configurada pertence ao desenho. Aplicá-la no filho impede que estilo,
   hover ou troca responsiva de posição no botão apaguem a escolha; sem valor,
   o ícone continua herdando o fallback visual do próprio botão. */
.header-search__submit > .icon {
  color: var(--header-icon-color, inherit);
}
.header-search__popover {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: var(--layer-shell-popover);
  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;
}
@media (hover: hover) and (pointer: fine) {
  .header-search__text-button:hover {
    --hover-link-decoration: underline;
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
.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);
}
@media (hover: hover) and (pointer: fine) {
  .header-search__product:hover {
    background: var(--color-bg-alt);
  }
}
.header-search__product[aria-selected="true"] {
  background: var(--color-bg-alt);
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .header-search__seller:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
  }
}
.header-search__seller[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .header-search__all:hover {
    background: var(--color-primary-soft);
  }
}
.header-search__all[aria-selected="true"] {
  background: var(--color-primary-soft);
}
.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-remove {
  padding: 0.35rem 0.5rem;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .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;
}
/* O menu é superfície que flutua sobre a página, e por isso lê
   `--radius-overlay`. Com `--radius` ele seguia a forma de CONTROLE: quem
   escolhia botão redondo nas configurações do tema via o menu inteiro arredondar
   junto. Botão, campo e item de menu continuam no token de controle. */
.header__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--layer-shell-menu);
  min-width: 13rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.header__dropdown-greeting {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.25rem;
}
/* Item de menu: mesma função da entrada da barra lateral da conta, mesmo papel.
   O peso vem do papel de rótulo; a cor é a do texto sobre a superfície do menu,
   que já é neutro configurável. */
.header__dropdown-link {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
  letter-spacing: var(--type-label-letter-spacing);
  color: var(--color-text);
}
@media (hover: hover) and (pointer: fine) {
  .header__dropdown-link:hover {
    background: var(--color-bg-alt);
  }
}
/* Variante com ícone: o item vira linha para ícone e rótulo dividirem a mesma
   base. Sem a classe o item continua exatamente como era. */
.header__dropdown-link--with-icon {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.header__dropdown-link--with-icon .icon {
  color: var(--color-text-faint);
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .header__dropdown-cta:hover {
    background: var(--hover-button-background);
  }
}
.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);
}
@media (hover: hover) and (pointer: fine) {
  .header__dropdown-logout:hover {
    background: var(--color-error-surface);
  }
}
@media (max-width: 1023px) {
  .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: var(--layer-shell-backdrop);
  background: var(--color-overlay);
}
.header__drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--layer-shell-panel);
  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;
}
@media (hover: hover) and (pointer: fine) {
  .header__drawer-close:hover {
    background: var(--color-bg-alt);
  }
}
.drawer-nav {
  padding: 0 1rem 1.5rem;
}
.drawer-nav__title {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
  text-transform: var(--type-label-transform);
  letter-spacing: var(--type-label-letter-spacing);
  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);
}
@media (hover: hover) and (pointer: fine) {
  .drawer-nav__link:hover {
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .drawer-nav__drill:hover {
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .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: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  line-height: var(--type-meta-line-height);
  color: inherit;
  opacity: 0.72;
}
.header__location-value {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}
/* Slot compacto do CEP no mobile (o bloco rótulo+valor fica oculto ≤1023px). 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: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9ch;
}
.header__location-value-short:where(:empty) {
  display: none;
}
:where(.header__location--icon-only) .header__location-text,
:where(.header__location--icon-only) .header__location-value-short {
  display: none !important;
}
.header__location-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--layer-shell-backdrop);
  background: var(--color-overlay);
}
.header__location-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--layer-shell-panel);
  padding: 1rem;
  background: var(--color-surface);
  border-radius: var(--radius-overlay) var(--radius-overlay) 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;
}
@media (hover: hover) and (pointer: fine) {
  .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;
}
@media (hover: hover) and (pointer: fine) {
  .header__location-search:hover {
    background: var(--hover-button-background);
  }
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .header__location-cta:hover {
    background: var(--hover-button-background);
  }
}
.header__location-correios {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--color-primary);
}

/* Header — desktop (≥1024px). A ordem do documento é a composição visual; não
   existem presets fechados por marketplace. */
@media (min-width: 1024px) {
  .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;
  }
  :where(.utility-bar) .header__location-panel {
    right: auto;
    left: 0;
  }
  .header-main {
    min-height: 4.5rem;
  }
  .header-main__inner {
    padding: 0 var(--sf-page-gutter);
    flex-wrap: nowrap;
    gap: var(--header-main-gap, 16px);
  }
  .header-main__item {
    order: 0;
  }
  .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;
  }
  /* O teto do logo é fixo e não acompanha a altura da barra: a altura vem da
     Aparência, escrita direto em `min-height`, e o CSS do tema não a lê. */
  .header__logo-img {
    width: var(--header-logo-width, 160px);
    max-width: var(--header-logo-width, 160px);
  }
  .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-overlay);
  }
}

/* Menubar (seção `menubar`, grupo de layout `header`) — barra de navegação
   composta por blocks. Mobile-first: base = oculta (a navegação ≤1023px vive no
   drawer do header); desktop (1024px+) = barra horizontal. */
/* Superfície, cor e separador saem em 0-1-0 e nas MESMAS longhands lógicas que
   o painel escreve: a Aparência é emitida depois e substitui cada uma delas,
   inclusive zerando a largura pra apagar a linha. */
.menubar {
  position: relative;
  display: none;
  background: var(--color-surface);
  color: var(--color-text-soft);
  border-block-end-width: 1px;
  border-block-end-style: solid;
  border-block-end-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. */
:where(.site-header) [data-node-id]:where(:has(.menubar__departments[aria-expanded="true"])) {
  position: relative;
  z-index: var(--layer-shell-backdrop);
}
/* Largura e recuo do miolo são da parte `content`; a distribuição segue no
   setting `alignment`, cuja variante entra em `:where()` pra ser ponto de
   partida e não autoridade sobre a caixa. */
.menubar__inner {
  min-height: inherit;
  max-width: var(--container-width);
  margin-inline: auto;
  padding: 0 var(--sf-page-gutter);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--menubar-gap, 4px);
  overflow-x: auto;
  scrollbar-width: thin;
}
:where(.menubar--align-left) .menubar__inner {
  justify-content: flex-start;
}
:where(.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: inherit;
  white-space: nowrap;
  border-radius: var(--radius);
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .menubar__item:hover {
    background: var(--color-bg-alt);
    color: var(--color-text-strong);
  }
}
/* Ícone e rótulo têm caixa própria porque são áreas da Aparência: sem elemento
   com dimensão, fundo e forma configurados no ícone não têm onde pousar. */
.menubar__item-icon {
  display: inline-flex;
  align-items: center;
}
.menubar__link-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}
/* A variante de duas linhas apenas rebaixa a primeira linha; embrulhada em
   `:where()` ela continua vencendo o padrão acima e perde do painel, que pinta
   a área `label` depois. */
:where(.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-overlay);
  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;
}
@media (hover: hover) and (pointer: fine) {
  .menubar__dropdown-link:hover {
    background: var(--color-bg-alt);
  }
}
.menubar__highlight {
  background: var(--color-primary);
  color: var(--color-on-primary);
  margin: 0.35rem 0;
  padding: 0.35rem 1rem;
  align-self: center;
}
@media (hover: hover) and (pointer: fine) {
  .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: var(--layer-shell-backdrop);
  border: 0;
  background: var(--color-overlay);
  cursor: default;
}
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: var(--layer-shell-panel);
  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;
}
/* Subcategoria é entrada do menu (parte `menu-item`) tanto quanto o título da
   coluna: a lista entra em `:where()` para o padrão sair em 0-0-1 e ceder ao
   painel, que pinta as duas com a mesma regra. */
:where(.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;
}
@media (hover: hover) and (pointer: fine) {
  :where(.mega-menu__category-links) a:hover {
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .mega-menu__seller:hover {
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
.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: 1024px) {
  .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
   ========================================================================== */

/* ── Preço ──
   Vem ANTES do card de propósito. As regras do preço dentro do card têm a mesma
   especificidade destas (uma classe), então quem vem depois vence: com o preço
   embaixo, `.price--current` apagava a cor configurada em "Textos do card" e o
   tamanho do preço anterior. A ordem aqui é o que faz o campo pintar. */
.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;
}

/* ── 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%;
  padding: 0.75rem;
  border: 1px solid var(--card-border-preset, var(--color-border));
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card-background-preset, var(--color-surface));
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
/* Presets escrevem custom property, nunca a propriedade final: o valor
   configurado (global ou Aparência) vence o preset, e o preset vence o token. */
.product-card--raised {
  --card-border-preset: transparent;
  box-shadow: var(--shadow-md);
}
.product-card--flat {
  --card-border-preset: transparent;
  --card-background-preset: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .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;
  color: inherit;
}
.product-card__media-link {
  display: block;
  color: inherit;
}
.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-card-image-ratio, 1 / 1);
  object-fit: cover;
}
:where(.product-card--image-contain) .product-card__media {
  background: var(--color-bg-alt);
}
:where(.product-card--image-contain) .product-card__image {
  object-fit: contain;
}
:where(.product-card--hover-image_zoom) .product-card__image {
  transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .product-card--hover-image_zoom:hover .product-card__image {
    transform: scale(1.035);
  }
}
.product-card__image-placeholder {
  width: 100%;
  aspect-ratio: var(--product-card-image-ratio, 1 / 1);
  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;
}
/* O título recorta o número escolhido de linhas sem reservar linhas vazias. A
   altura comum nasce do maior card da linha/faixa, não de uma caixa fixa em
   cada campo. */
.product-card__title {
  display: -webkit-box;
  margin: 0.25rem 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: inherit;
  font-size: var(--card-title-size-preset, 0.95rem);
  font-weight: var(--card-title-weight-preset, 600);
  line-height: 1.35;
  letter-spacing: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--product-title-lines, 2);
}
.product-card__title a {
  color: inherit;
}
.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: 1;
  flex-direction: column;
  margin-top: 0.65rem;
}
.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;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.product-card__price {
  display: flex;
  align-items: flex-end;
}
:where(.product-card__price) .price {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
:where(.product-card__price) .price--compare {
  margin-right: 0;
  color: var(--color-text-faint);
  font-size: 0.85em;
}
:where(.product-card__price) .price--current {
  color: var(--card-price-color-preset, var(--color-accent));
  font-size: 1rem;
}
.product-card__installments {
  display: -webkit-box;
  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 {
  margin: 0.25rem 0 0;
}
.product-card__unavailable {
  margin: 0.2rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}
.product-card--presentation-editorial {
  --card-title-size-preset: 1rem;
  --card-title-weight-preset: 400;
  --card-price-color-preset: var(--color-text);
}
:where(.product-card--presentation-editorial) .product-card__commercial {
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-border);
}
/* A variante escolhida em "Estilo da ação" só define o PADRÃO da cor; sem os
   fallbacks a var vazia invalidava a declaração e o botão perdia a variante. */
.product-card__action.btn--primary {
  --card-action-bg-preset: var(--color-primary);
  --card-action-fg-preset: var(--color-on-primary);
}
.product-card__action.btn--secondary {
  --card-action-bg-preset: var(--color-action-secondary);
  --card-action-fg-preset: var(--color-surface);
}
.product-card__action.btn--outline,
.product-card__action.btn--ghost {
  --card-action-bg-preset: var(--color-surface);
  --card-action-fg-preset: var(--color-primary);
}
.product-card__action {
  width: 100%;
  margin-top: 0.65rem;
  text-align: center;
  background: var(--card-action-bg-preset);
  color: var(--card-action-fg-preset);
  font-size: inherit;
}
@media (hover: hover) and (pointer: fine) {
  .product-card__action:hover {
    background: var(--card-action-bg-preset);
    color: var(--card-action-fg-preset);
  }
}
.product-card__body form {
  width: 100%;
}
/* Visibilidade da ação: um campo por faixa de tela, e cada faixa escrita numa
   condição que não alcança as outras. Os três campos escrevem a MESMA
   propriedade (`display`), então convivência por especificidade seria disputa —
   quem ganhasse ganharia em toda largura. Faixas exclusivas tiram a disputa do
   caminho: em qualquer largura, exatamente uma regra pode falar. */
@media (max-width: 767px) {
  .product-card--action-mobile-hidden .product-card__action {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-card--action-tablet-hidden .product-card__action {
    display: none;
  }
}
@media (min-width: 1024px) {
  .product-card--action-desktop-hidden .product-card__action {
    display: none;
  }
}
:where(.product-card--action-at-before_price) .product-card__action {
  margin: 0 0 0.65rem;
}
/* "Ao passar o mouse" é opção só do campo de desktop, e por isso a condição
   carrega a faixa dele junto do ponteiro: sem a largura, esconder no repouso
   valeria também em celular e tablet com mouse — o que apaga o campo daquela
   faixa. Sem mouse a revelação não tem gatilho, então a ação fica visível: é a
   degradação que o campo anuncia. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .product-card--action-desktop-hover .product-card__action {
    display: none;
  }
  .product-card--action-desktop-hover:hover .product-card__action,
  .product-card--action-desktop-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, e o card inteiro cresce por `scale` — transformação não participa
   do layout, então a caixa do card continua a mesma para o fluxo e nenhum
   vizinho se desloca. O crescimento nasce do centro, para avançar igual nos
   quatro lados, inclusive nas pontas da faixa.
   A faixa é a mesma da revelação no desktop: o efeito existe para acompanhar o
   hover, e abaixo de 1024px o card cresceria e flutuaria sem nada que o
   dispare. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .product-card--action-desktop-hover.product-card--action-reveal-lift {
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: visible;
    /* `scale` é propriedade independente de propósito: `transform` já pertence
       ao hover do card e à Aparência da parte `card`, e as duas precisam
       compor em vez de uma apagar a outra. O fallback é `none`, não `1`: um
       `scale: 1` criaria contexto de empilhamento e bloco contêiner em TODO
       card, o tempo inteiro, para nada. */
    scale: var(--lift-scale, none);
    transform-origin: center;
    transition:
      box-shadow 0.18s ease,
      transform 0.18s ease,
      scale 0.18s ease;
  }
  .product-card--action-desktop-hover.product-card--action-reveal-lift .product-card__link {
    position: relative;
    z-index: 0;
    border-radius: inherit;
  }
  /* Rabo de superfície. Ao revelar, o bloco comercial desce e a ação passa a
     ocupar o lugar dele: os dois saem da caixa do card, que não pode crescer em
     fluxo sem empurrar a grade inteira. Esta camada estende a superfície e a
     sombra por baixo do que saiu, para o card continuar sendo uma peça só.
     Cor fixa da superfície porque o estilo "plano" tem fundo transparente, e
     conteúdo solto sobre o fundo da página não seria legível. A espessura e a
     cor da borda saem das MESMAS variáveis do card: em destaque esta camada é
     a única a contornar a silhueta, e traço próprio faria a borda configurada
     desaparecer justo quando o card ganha evidência. A mesma cadeia de
     alternativas do card serve aos três estilos sem condição: "elevado" e
     "plano" declaram o preset transparente, então sem cor configurada esta
     camada continua invisível, e com cor configurada ela acompanha. */
  .product-card--action-desktop-hover.product-card--action-reveal-lift .product-card__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Decorativa: não pode interceptar o clique da seta ao lado. */
    pointer-events: none;
    /* A cadeia começa pelo espelho que a Aparência escreve na área `card`:
       ali a cor sai como propriedade final, que nenhuma outra regra consegue
       ler, e sem o espelho a borda escolhida no painel sumiria justo no
       destaque. Depois vem o preset do estilo. */
    border: var(--sf-card-border-width, 1px)
      solid
      var(--sf-card-border-color, var(--card-border-preset, var(--color-border)));
    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--action-desktop-hover.product-card--action-reveal-lift .product-card__body,
  .product-card--action-desktop-hover.product-card--action-reveal-lift .product-card__commercial {
    position: relative;
  }
  .product-card--action-desktop-hover.product-card--action-reveal-lift .product-card__commercial {
    transition: transform 0.18s ease;
  }
  .product-card--action-desktop-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));
  }
  /* Estado de destaque. Fora de um container que rola, o hover basta; dentro
     dele, quem liga é a classe que o JS acrescenta depois de medir o card e
     tirá-lo do recorte — ver a neutralização logo abaixo.
     A borda do card apaga porque quem contorna a silhueta em destaque é a
     camada de superfície: ela acompanha o que desce, e a borda do card pararia
     na altura do corpo, cortando a silhueta ao meio. As duas caixas coincidem,
     então mantê-las juntas desenharia dois traços colados. */
  .product-card--action-desktop-hover.product-card--action-reveal-lift:hover,
  .product-card--action-desktop-hover.product-card--action-reveal-lift:focus-within,
  .product-card--action-desktop-hover.product-card--action-reveal-lift.is-lifted {
    --lift-scale: calc(var(--product-card-lift-zoom, 106) / 100);
    z-index: 20;
    border-color: transparent;
  }
  /* A sombra vive na camada de superfície, não no card: ela precisa contornar
     a silhueta inteira — card mais o que desceu — em vez de cortar no meio. */
  .product-card--action-desktop-hover.product-card--action-reveal-lift:hover .product-card__link::before,
  .product-card--action-desktop-hover.product-card--action-reveal-lift:focus-within .product-card__link::before,
  .product-card--action-desktop-hover.product-card--action-reveal-lift.is-lifted .product-card__link::before {
    /* O respiro extra é o que sobra abaixo da última linha do bloco comercial:
       sem ele a superfície termina rente ao texto e o corte fica visível. */
    inset: 0 0 calc(-1 * var(--product-card-lift-space) - 0.4rem);
    opacity: 1;
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.2);
  }
  /* Dentro do recorte, sem o estado elevado, o card degrada para "expandir
     normalmente" — o efeito que cabe na faixa. Não basta desligar o zoom:
     qualquer deslocamento também é recortado. Em posição absoluta a ação cai
     abaixo da caixa do card e o hover revelaria um botão invisível e
     inclicável; a descida do bloco comercial levaria o preço para fora; e o
     rabo de superfície terminaria cortado rente. Devolvida ao fluxo, a ação
     cresce o card e a faixa cresce junto, que é o que a rolagem vertical
     recortada permite. `:not()` mantém a degradação fora do caminho do estado
     elevado, que não depende de ordem de declaração. */
  .carousel__viewport .product-card--action-reveal-lift:hover:not(.is-lifted),
  .carousel__viewport .product-card--action-reveal-lift:focus-within:not(.is-lifted) {
    --lift-scale: none;
  }
  .carousel__viewport .product-card--action-reveal-lift:hover:not(.is-lifted) .product-card__action,
  .carousel__viewport
    .product-card--action-reveal-lift:focus-within:not(.is-lifted)
    .product-card__action {
    position: static;
    /* O mesmo respiro que a ação em fluxo tem fora do efeito elevado: a regra
       da elevação zera a margem porque lá ela não ocupa espaço. */
    margin: 0.65rem 0 0;
    transform: none;
  }
  .carousel__viewport
    .product-card--action-at-before_price.product-card--action-reveal-lift:hover:not(.is-lifted)
    .product-card__action,
  .carousel__viewport
    .product-card--action-at-before_price.product-card--action-reveal-lift:focus-within:not(.is-lifted)
    .product-card__action {
    margin: 0 0 0.65rem;
  }
  .carousel__viewport
    .product-card--action-reveal-lift:hover:not(.is-lifted)
    .product-card__commercial,
  .carousel__viewport
    .product-card--action-reveal-lift:focus-within:not(.is-lifted)
    .product-card__commercial {
    transform: none;
  }
  .carousel__viewport
    .product-card--action-reveal-lift:hover:not(.is-lifted)
    .product-card__link::before,
  .carousel__viewport
    .product-card--action-reveal-lift:focus-within:not(.is-lifted)
    .product-card__link::before {
    inset: 0;
  }
  /* Card elevado: sai do fluxo com o `.carousel` como ponto de referência — um
     ancestral ACIMA da caixa que rola, que por isso não o recorta em nenhum dos
     quatro lados. Fora do fluxo ele perderia a largura do slide e o `height:
     100%`, então os quatro valores são fixados na medida que ele tinha em
     fluxo: a troca de posição não move um pixel, só o zoom transiciona. */
  .product-card--action-desktop-hover.product-card--action-reveal-lift.is-lifted {
    position: absolute;
    top: var(--lift-y);
    left: var(--lift-x);
    width: var(--lift-w);
    height: var(--lift-h);
  }
  .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;
    /* A ação nasce sem receber ponteiro para não interceptar o clique enquanto
       está invisível; revelada, ela precisa voltar a ser clicável. */
    pointer-events: auto;
    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;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* O card em destaque sobe para z-index 20, mas dentro do contexto de
     empilhamento do carrossel (ou abaixo da seção seguinte, que vem depois no
     documento). É a lista que precisa subir junto para o card ficar na frente
     de tudo ao redor. Dentro da faixa que rola o destaque vem da classe, então
     ela também precisa disparar o salto do container. */
  .carousel:has(.product-card--action-reveal-lift:hover),
  .carousel:has(.product-card--action-reveal-lift:focus-within),
  .carousel:has(.product-card--action-reveal-lift.is-lifted),
  .showcase__content:has(.product-card--action-reveal-lift:hover),
  .showcase__content:has(.product-card--action-reveal-lift:focus-within),
  .showcase__content:has(.product-card--action-reveal-lift.is-lifted),
  .product-grid:has(.product-card--action-reveal-lift:hover),
  .product-grid:has(.product-card--action-reveal-lift:focus-within),
  .curated-kit__products:has(.product-card--action-reveal-lift:hover),
  .curated-kit__products: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: var(--badge-padding, 0.2rem 0.45rem);
  border-width: var(--badge-border-width, 0);
  border-style: var(--badge-border-style, solid);
  border-color: var(--badge-border-color, transparent);
  border-radius: var(--badge-border-radius, var(--radius-sm));
  background: var(--badge-background, var(--badge-tone-background, var(--color-bg-alt)));
  color: var(--badge-color, var(--badge-tone-color, var(--color-text-strong)));
  box-shadow: var(--badge-box-shadow, none);
  font-size: var(--badge-font-size, 0.68rem);
  font-weight: var(--badge-font-weight, 700);
  letter-spacing: var(--badge-letter-spacing, normal);
  text-transform: var(--badge-text-transform, none);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-badge--pill {
  --badge-border-radius: var(--radius-pill);
}
.product-badge--square {
  --badge-border-radius: 0;
}
.product-badge--primary {
  --badge-tone-background: var(--color-primary);
  --badge-tone-color: var(--color-on-primary);
}
.product-badge--accent {
  --badge-tone-background: var(--color-accent);
  --badge-tone-color: var(--color-on-primary);
}
.product-badge--success {
  --badge-tone-background: var(--color-success-bg);
  --badge-tone-color: var(--color-success-text);
}
.product-badge--warning {
  --badge-tone-background: var(--color-warning-bg);
  --badge-tone-color: var(--color-warning-text);
}
.product-badge--danger {
  --badge-tone-background: var(--color-error-bg);
  --badge-tone-color: var(--color-error-text);
}
.product-badge--neutral {
  --badge-tone-background: var(--color-bg-alt);
  --badge-tone-color: var(--color-text-soft);
}
.product-badge--text:not(.product-badge--custom) {
  --badge-padding: 0;
  --badge-border-radius: 0;
  --badge-background: transparent;
}
.product-badge--bar {
  width: 100%;
  justify-content: center;
  --badge-border-radius: 0;
  text-align: center;
}
.product-badge__visual {
  display: inline-flex;
  width: var(--badge-visual-size, 1em);
  height: var(--badge-visual-size, 1em);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--badge-icon-color, currentColor);
}
/* O desenho preenche a caixa do elemento visual, e a caixa é o tamanho
   configurado no selo. `> .icon` alcança tanto o `<svg>` do sprite quanto o
   `<span>` da máscara: sem ele o tamanho configurado só valeria na biblioteca
   que renderiza SVG, e a mesma configuração daria resultados diferentes. */
.product-badge__visual > .icon,
.product-badge__visual > svg,
.product-badge__visual > img,
.product-badge__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-card__media > .product-badge {
  position: absolute;
  z-index: 1;
  max-width: calc(100% - 1rem);
}
.product-badge--image_top_left {
  top: calc(0.5rem + var(--badge-index, 0) * 1.75rem);
  left: 0.5rem;
}
.product-badge--image_top_right {
  top: calc(0.5rem + var(--badge-index, 0) * 1.75rem);
  right: 0.5rem;
}
.product-badge--image_bottom_left {
  bottom: calc(0.5rem + var(--badge-bottom-offset, 0rem) + var(--badge-index, 0) * 1.75rem);
  left: 0.5rem;
}
.product-badge--image_bottom_right {
  right: 0.5rem;
  bottom: calc(0.5rem + var(--badge-bottom-offset, 0rem) + var(--badge-index, 0) * 1.75rem);
}
.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);
}
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card__image {
    transition: none !important;
  }
  .product-card:hover {
    transform: none;
  }
}

/* ── Vitrine de produtos v2 (`product-showcase`) ── */
.showcase {
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: var(--sf-bg, transparent);
}
.showcase__title {
  margin: 0 0 1rem;
}
/* O lado escolhido para o link decide a composição do cabeçalho, e cada valor
   faz algo visível: à direita ele vai para a ponta oposta ao título, à esquerda
   encosta nele, e centralizado desce para a própria linha — ali "mesma linha"
   não é composição possível, e empilhar é a leitura honesta do pedido. */
.showcase__heading--inline-action {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.showcase__heading--action-left {
  justify-content: flex-start;
}
.showcase__heading--action-center {
  flex-direction: column;
  align-items: center;
}
.showcase__heading-copy {
  min-width: 0;
}
:where(.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;
  color: var(--color-accent);
}
.showcase__tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.9rem;
  margin-bottom: -1px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  opacity: 0.68;
}
.showcase__tab.is-active {
  color: inherit;
  border-bottom-color: currentColor;
  font-weight: 600;
  opacity: 1;
}
/* Acima ou abaixo é a margem; o lado é o modificador. Separados assim, valor
   novo de posição não pede regra nova. */
.showcase__list-head {
  display: flex;
  margin-bottom: 0.5rem;
}
.showcase__list-head--bottom {
  margin: 1.25rem 0 0;
}
.showcase__list-head--left {
  justify-content: flex-start;
}
.showcase__list-head--center {
  justify-content: center;
}
.showcase__list-head--right {
  justify-content: flex-end;
}
.showcase__view-all {
  color: 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);
}
@media (hover: hover) and (pointer: fine) {
  .showcase__view-all--button:hover {
    background: var(--hover-button-background);
    color: var(--hover-button-color);
  }
}
.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);
}
@media (hover: hover) and (pointer: fine) {
  .showcase__view-all--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}
.showcase__empty {
  padding: 1rem 0;
}

/* ── 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 {
}
.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 {
}
.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;
}
:where(.seller-showcase--outline) .seller-showcase__card {
  border: 1px solid var(--color-border);
}
@media (hover: hover) and (pointer: fine) {
  .seller-showcase__card:hover {
    border-color: color-mix(
      in srgb,
      var(--color-primary) 40%,
      var(--color-border)
    );
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
  }
}
.seller-showcase__logo {
  display: flex;
  width: 100%;
  height: var(--seller-logo-size, 3.25rem);
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-primary);
  font-size: 1.5rem;
  font-weight: 700;
}
/* Círculo e quadrado precisam de lados iguais, então a moldura larga a largura
   do cartão e passa a medir o mesmo dos dois lados. O desenho cheio de `cover`
   entra junto: numa moldura fechada, `contain` deixaria faixa vazia. */
:where(.seller-showcase--logo-square, .seller-showcase--logo-circle)
  .seller-showcase__logo {
  width: var(--seller-logo-size, 3.25rem);
}
:where(.seller-showcase--logo-circle) .seller-showcase__logo {
  border-radius: 50%;
}
/* Lado a lado, o cartão vira linha e encosta o conteúdo no começo dela. O
   alinhamento do texto fica de fora: ele é campo da raiz na Aparência, e
   decidi-lo aqui faria o campo aceitar valor sem efeito. */
:where(.seller-showcase--layout-row) .seller-showcase__card {
  flex-direction: row;
  justify-content: flex-start;
}
:where(.seller-showcase--layout-row) .seller-showcase__logo {
  width: var(--seller-logo-size, 3.25rem);
}
:where(.seller-showcase--layout-row) .seller-showcase__name {
  min-width: 0;
}
.seller-showcase__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Numa moldura fechada o desenho preenche: `contain` deixaria faixa vazia
   dentro do círculo. Precisa vir depois da regra acima, que mede o mesmo. */
:where(.seller-showcase--logo-square, .seller-showcase--logo-circle)
  .seller-showcase__logo
  img {
  object-fit: cover;
}
.seller-showcase__name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
}

@media (max-width: 1023px) {
  .seller-showcase__grid {
    --seller-cols: var(--seller-cols-tablet, 4);
  }
  .seller-showcase__logo {
    height: var(--seller-logo-size-tablet, var(--seller-logo-size, 3.25rem));
  }
  :where(
    .seller-showcase--logo-square,
    .seller-showcase--logo-circle,
    .seller-showcase--layout-row
  )
    .seller-showcase__logo {
    width: var(--seller-logo-size-tablet, var(--seller-logo-size, 3.25rem));
  }
}

@media (max-width: 767px) {
  .seller-showcase__grid {
    --seller-cols: var(--seller-cols-mobile, 2);
  }
  .seller-showcase__logo {
    height: var(--seller-logo-size-mobile, var(--seller-logo-size, 3.25rem));
  }
  :where(
    .seller-showcase--logo-square,
    .seller-showcase--logo-circle,
    .seller-showcase--layout-row
  )
    .seller-showcase__logo {
    width: var(--seller-logo-size-mobile, var(--seller-logo-size, 3.25rem));
  }
}

/* Texto que existe só para quem ouve a página: sai do fluxo sem sair da árvore
   de acessibilidade. `display: none` calaria o leitor de tela junto. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Breadcrumb ──
   Um par de medidas para a trilha inteira, em qualquer página: o espaço interno
   é o que separa os degraus, o externo é o que separa a trilha do conteúdo. Nada
   de recuo horizontal próprio — a trilha nasce na mesma margem do grid, então
   alinha com o título abaixo dela e acompanha a largura do conteúdo do tema. */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  padding-block: 0.25rem;
  padding-inline: 0;
  margin-block: 0 1.25rem;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}
.breadcrumb a {
  color: var(--color-text-muted);
}
@media (hover: hover) and (pointer: fine) {
  .breadcrumb a:hover {
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
.breadcrumb__separator {
  display: inline-flex;
  color: var(--color-text-faint);
}
.breadcrumb [aria-current="page"] {
  color: var(--color-text-soft);
}
@media (max-width: 767px) {
  /* O breakpoint só encolhe o ritmo: a trilha continua quebrando linha, porque
     cortar o degrau atual esconderia justamente onde o visitante está. */
  .breadcrumb {
    gap: 0.3rem 0.5rem;
    margin-bottom: 0.85rem;
    font-size: 0.78rem;
  }
}

/* ── 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;
}
:where(.search-main) > .product-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}
@media (max-width: 767px) {
  :where(.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;
}
@media (hover: hover) and (pointer: fine) {
  .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;
}
/* O ritmo entre grupos passou a ser do grupo, não do título: dentro do grupo o
   rótulo encosta na busca e na lista; entre grupos o espaço é sempre o mesmo. */
.facet-group {
  margin-top: 1.25rem;
}
.facet-group .facets-title {
  margin-top: 0;
}
.facets-head + .facet-group,
.facets-head + .facets-title {
  margin-top: 0;
}
.facet-group__search {
  margin-bottom: 0.5rem;
}
.facet-group__search-input {
  width: 100%;
  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.85rem;
}
.facet-group__search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.facet-group__empty {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
}
.facet-group__more {
  margin-top: 0.35rem;
  padding: 0.2rem 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .facet-group__more:hover {
    --hover-link-decoration: underline;
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
.facet-group__more:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* 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;
}
@media (hover: hover) and (pointer: fine) {
  .facets-head__close:hover {
    background: var(--color-bg-alt);
  }
}
.facets-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--layer-shell-backdrop);
  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);
}
@media (hover: hover) and (pointer: fine) {
  .facet-check:hover {
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .facets-apply:hover {
    background: var(--hover-button-background);
  }
}
.facets-clear {
  align-self: flex-start;
}
/* Desktop com JS: as facetas aplicam no change (reativo), então o botão some. */
@media (min-width: 768px) {
  .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;
}

/* ── Lojas ──
   As duas páginas usam os mesmos primitives das vitrines e listagens. O CSS
   daqui decide apenas composição; identidade visual vem dos tokens globais e
   a Aparência pode sobrescrever cada parte sem competir com literais. */
.sellers-page,
.seller-page {
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.sellers-header,
.sellers-featured-section {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
:where(.sellers-header) h1,
.sellers-featured-title {
  margin-bottom: 0;
}
.sellers-featured {
  margin-top: 1rem;
}
.sellers-departments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.sellers-department {
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
:where(.sellers-department) h2 {
  margin-bottom: 0.75rem;
}
.sellers-department-list {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(.sellers-department-list) a {
  display: block;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius);
  color: var(--color-text-soft);
}
@media (hover: hover) and (pointer: fine) {
  :where(.sellers-department-list) a:hover {
    background: var(--color-bg-alt);
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
:where(.sellers-department-list) a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.sellers-empty {
  grid-column: 1 / -1;
  padding-block: 2rem;
  text-align: center;
}

.seller-header {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.seller-banner {
  aspect-ratio: 4 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}
:where(.seller-banner) picture,
:where(.seller-banner) img {
  width: 100%;
  height: 100%;
}
:where(.seller-banner) img {
  object-fit: cover;
}
.seller-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.seller-thumb {
  width: 5rem;
  height: 5rem;
  flex: none;
  object-fit: contain;
  padding: 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
:where(.seller-identity) h1 {
  margin-bottom: 0.25rem;
}
.seller-contact {
  margin-top: 0.35rem;
}
.seller-contact a {
  color: inherit;
}
.seller-about,
.seller-policy {
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}
.seller-about summary,
.seller-policy summary {
  cursor: pointer;
}
.seller-about[open] summary,
.seller-policy[open] summary {
  margin-bottom: 0.75rem;
}
.seller-description,
:where(.seller-policy) > div {
  color: var(--color-text-soft);
}
.seller-search {
  display: flex;
  max-width: 40rem;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0;
}
.seller-search .form-control {
  min-width: 0;
  flex: 1;
}
.seller-departments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.seller-departments :is(a, .dept-active) {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-soft);
}
.seller-departments .dept-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
@media (hover: hover) and (pointer: fine) {
  .seller-departments a:hover {
    border-color: var(--color-primary);
    color: var(--hover-link-color);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .sellers-departments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .sellers-departments {
    grid-template-columns: minmax(0, 1fr);
  }
  .seller-banner {
    aspect-ratio: 16 / 7;
  }
  .seller-identity,
  .seller-search {
    align-items: stretch;
    flex-direction: column;
  }
  .seller-thumb {
    width: 4.5rem;
    height: 4.5rem;
  }
  .seller-search .btn {
    width: 100%;
  }
}
/* 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;
}

/* ── Primitivos de composição ──
   O setting "Encaixe" escolhe o ponto de partida por custom property; a
   propriedade final mora aqui pra que a Aparência (que declara a capability
   `media` neste componente) consiga sobrescrever. ── */
.primitive-image {
  width: var(--primitive-image-width, 100%);
  height: var(--primitive-image-height, 100%);
  object-fit: var(--primitive-image-fit, cover);
}

/* ── PDP — detalhe do produto ── */
:where(.product-detail) > [data-node-id] {
  min-width: 0;
}
.product-detail__media,
.product-detail__info,
.product-detail__below {
  min-width: 0;
}
.product-detail__below {
  margin-top: 2rem;
}
.product-detail__main-image {
  width: 100%;
  aspect-ratio: var(--product-page-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-page-image-ratio);
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .product-detail__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--layer-fullscreen);
  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;
}
@media (hover: hover) and (pointer: fine) {
  .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: 767px) {
  .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;
}
:where(.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-strong);
}
.product-detail__vendor strong {
  color: inherit;
}
.product-detail__vendor span {
  opacity: 0.72;
}
.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);
}
@media (hover: hover) and (pointer: fine) {
  .product-detail__vendor:where(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;
}
/* "Quantidade", "Cores", "Tamanho" e "Calcular frete" nomeiam controles da
   mesma coluna: um papel só, `type-label`, que a classe já traz. Aqui fica só
   o que é do lugar. */
/* Elemento de bloco como o título do cálculo de frete, que exerce o mesmo
   papel na mesma coluna. A margem própria do parágrafo é zerada porque o espaço
   entre rótulo e controle é do container. */
.product-purchase__label {
  display: block;
  margin: 0;
}
.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__title {
  margin: 0 0 0.35rem;
}
.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;
}
/* O prazo é o título do resultado e o resumo é o apoio dele: os mesmos dois
   papéis do cartão de benefício. O elemento continua sendo `strong` por ênfase
   de leitura, mas o peso passa a ser o configurado, não o do navegador. */
.shipping-option__deadline {
  display: block;
  color: var(--color-text-strong);
  font-size: var(--type-item-title-size);
  font-weight: var(--type-item-title-weight);
  line-height: var(--type-item-title-line-height);
}
.shipping-option__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.1rem;
  color: var(--color-text-muted);
  font-size: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  line-height: var(--type-meta-line-height);
}
.shipping-option__price {
  color: var(--color-text-strong);
  font-weight: var(--type-item-title-weight);
}
.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;
}
/* "Compacto" tira a moldura do cartão e põe prazo e preço na mesma linha; antes
   ele só apertava o preenchimento, o que ninguém enxergava — a escolha existia
   no painel e não chegava à tela. "Cards" segue sendo a regra base acima. */
.product-shipping--compact .shipping-options {
  gap: 0;
}
.product-shipping--compact .shipping-option {
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: none;
  gap: 0.5rem;
  align-items: center;
}
.product-shipping--compact .shipping-option:last-child {
  border-bottom: 0;
}
.product-shipping--compact .shipping-option__icon {
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  color: var(--color-text-muted);
}
.product-shipping--compact .shipping-option__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}
.product-shipping--compact .shipping-option__summary {
  margin-top: 0;
}
.product-shipping--compact .shipping-option__pickups {
  flex-basis: 100%;
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}
.shipping-error {
  margin-top: 0.5rem;
  color: var(--color-error);
}
@media (max-width: 767px) {
  .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: 1023px) {
  .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 {
  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;
}
@media (hover: hover) and (pointer: fine) {
  :where(a).variation-option:hover {
    border-color: var(--color-primary);
  }
}
.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-option--alternative {
  position: relative;
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border-input));
  background: color-mix(in srgb, var(--color-primary-soft) 45%, var(--color-surface));
}
.variation-option__alternative-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}
.variation-option__alternative-mark::before {
  content: "↗";
}
.variation-group__hint {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.35rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.variation-group__hint-mark {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-primary);
}
.variation-adjustment-notice {
  margin: 0.5rem 0 0;
  padding: 0.65rem 0.75rem;
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-text-strong);
  font-size: 0.82rem;
}
.variation-adjustment-notice[hidden] {
  display: none;
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  :where(a).similar-facet__option:hover {
    border-color: var(--color-primary);
  }
}
.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__list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Variante do resumo expansível: `:where()` para o recuo da parte `list` seguir
   editável. Precisa vir depois da regra base, que agora tem a mesma força. */
:where(.other-offers--compact) .other-offers__list {
  margin: 0;
  padding: 0.75rem;
  border-top: 1px solid var(--color-border);
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .other-offers__link:hover {
    border-color: var(--color-primary);
  }
}
.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);
}
/* Zebra em `:where()`: `:nth-child` valeria 0-2-0 e o fundo escolhido na parte
   `row` pintaria só metade das linhas. */
:where(.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;
}
/* O cartão de cada linha é ponto de partida da variante: em `:where()` o fundo,
   a borda e o recuo escolhidos na parte `row` continuam vencendo. */
:where(.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);
}
:where(.product-specs--grid) .product-specs__row dt,
:where(.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;
}
@media (hover: hover) and (pointer: fine) {
  .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;
}
@media (hover: hover) and (pointer: fine) {
  .product-support__whatsapp:hover {
    border-color: var(--color-primary);
  }
}

.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). */
:where(.product-related) > h2 {
  margin-bottom: 0.75rem;
}
.product-related__slide {
  display: flex;
  padding-block: 0.15rem;
}
.product-related__slide .product-card {
  width: 100%;
}
:where(.product-related) .carousel__arrow {
  top: calc(50% + 0.2rem);
}
:where(.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: 1023px) {
  :where(.product-related--grid) .product-related__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-specs--grid .product-specs__list {
    grid-template-columns: 1fr;
  }
}

/* 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);
}
:where(.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;
}
@media (hover: hover) and (pointer: fine) {
  .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;
}

/* ── Personalização de compra ───────────────────────────────────────────────
   Dois lados do mesmo dado: `item-metadata*` é o editor (página do produto e
   "alterar" do carrinho); `item-metadata-display*` é a leitura (carrinho,
   drawer e pedido da conta). */
.item-metadata {
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
}
.item-metadata--inline {
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-bg-alt);
}
.item-metadata__legend,
.item-metadata__dialog-title {
  margin: 0 0 0.2rem;
  padding: 0 0.25rem;
  color: var(--color-text-strong);
  font-size: 0.85rem;
  font-weight: 600;
}
.item-metadata__fields {
  display: grid;
  gap: 0.7rem;
}
.form-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.form-field--inline > span {
  font-weight: 500;
}
.item-metadata__help {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.item-metadata__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-bg-alt);
  font-size: 0.85rem;
}
.item-metadata__change {
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-primary);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.item-metadata__dialog {
  width: min(30rem, calc(100vw - 2rem));
  padding: 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  color: var(--color-text);
}
.item-metadata__dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}
.item-metadata__confirm {
  margin-top: 1rem;
  width: 100%;
}
.item-metadata-display {
  margin-top: 0.5rem;
}
.item-metadata-display__list {
  display: grid;
  gap: 0.2rem;
  margin: 0;
}
.item-metadata-display__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.75rem;
}
.item-metadata-display__row dt {
  color: var(--color-text-muted);
}
.item-metadata-display__row dt::after {
  content: ":";
}
.item-metadata-display__row dd {
  margin: 0;
  color: var(--color-text-strong);
  overflow-wrap: anywhere;
}
/* Chave órfã: o campo foi apagado depois da compra e o rótulo é a própria
   chave. Fica visível, mas sem competir com o que ainda é declarado. */
.item-metadata-display__row--orphan dd {
  color: var(--color-text-soft);
}
.item-metadata-display__edit {
  margin-top: 0.45rem;
}
.item-metadata-display__edit > summary {
  color: var(--color-primary);
  font-size: 0.75rem;
  cursor: pointer;
}
.item-metadata-display__edit form {
  display: grid;
  gap: 0.6rem;
  margin: 0.5rem 0 0;
}
.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: var(--layer-dialog);
  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;
}
/* ── Autenticação (entrar / cadastro / recuperação) ── */
/* O respiro vertical é o mesmo da família Conta (`.account-shell`): quem entra
   pelo cartão e quem entra pela conta vê a mesma distância do cabeçalho e do
   rodapé. */
.auth-page {
  max-width: 28rem;
  margin: 2rem auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  font-family: var(--font-family);
}
/* O cartão é um bloco dentro da página, não a página inteira: o título dele
   segue a escala global de título de bloco (`type_h2_*`), como qualquer outro
   cartão do tema. A tag continua `h1` porque a hierarquia do documento é essa. */
.auth-page h1 {
  margin-bottom: 1rem;
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line-height, var(--type-heading-line-height));
  color: var(--color-text-strong);
}
/* Texto corrido do cartão: escala e cor do corpo global, sem redução própria. */
.auth-text {
  margin-bottom: 1rem;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  color: var(--color-text-soft);
}
.auth-text strong {
  color: var(--color-text-strong);
}
.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;
}
/* Duas colunas (quadrinho + texto) em vez de uma linha flex: a mensagem de erro
   nasce na segunda coluna, embaixo do texto, sem empurrar o rótulo para outra
   linha. */
.auth-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.3rem 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}
.auth-check input {
  margin-top: 0.2rem;
}
/* Aceite obrigatório reprovado: além da mensagem, o próprio quadrinho ganha
   contorno — a caixa de seleção não tem borda própria para tingir. */
.auth-check .field-error {
  grid-column: 2;
}
.auth-check[data-sf-invalid] input[type="checkbox"] {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}
.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: var(--color-warning-surface);
  border: 1px solid var(--color-warning-border);
  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;
}
/* Mesma área de toque do grupo `.auth-links`: link solto de cartão não pode ser
   mais difícil de acertar do que link agrupado. */
.auth-alt a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.35rem;
}
/* Texto de apoio acima do formulário do cartão (ex.: recuperação de senha). */
.auth-hint {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--color-text-soft);
}
/* Grupo de saídas alternativas do cartão (entrar por código, criar conta,
   esqueci a senha). Uma coluna centralizada, ordem preservada, e cada linha com
   altura de alvo de toque — no celular a diferença entre acertar e errar o link
   é essa. A separação do formulário é a linha do topo, não um vão maior. */
.auth-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
  text-align: center;
}
.auth-links__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
}
.auth-links__item--sentence {
  color: var(--color-text-soft);
}
.auth-links__item a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.35rem;
}
/* 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: var(--color-success-surface);
  border: 1px solid var(--color-success-border);
  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;
}
/* Mesmo respiro vertical do cartão de autenticação (`.auth-page`): a família
   Conta inteira começa e termina à mesma distância, em página curta e longa. */
.account-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: start;
  padding-block: 2rem;
}
.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;
}
/* Entrada de menu da conta: a mesma função do item do menu suspenso do header,
   logo o mesmo papel. Estado ativo é cor e fundo, não um segundo peso. */
.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-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
  letter-spacing: var(--type-label-letter-spacing);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .account-nav__item:hover {
    background: var(--color-bg-alt);
  }
}
.account-nav__item--active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.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: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
  letter-spacing: var(--type-label-letter-spacing);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .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;
}
@media (hover: hover) and (pointer: fine) {
  .account-card:hover {
    border-color: var(--color-primary);
    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-text);
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .order-actions__button:hover {
    background: var(--hover-button-background);
  }
}

/* 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;
}
@media (hover: hover) and (pointer: fine) {
  .address-action:hover {
    background: var(--color-bg-alt);
  }
}
.address-action--danger {
  color: var(--color-error);
  border-color: var(--color-error-border);
}
@media (hover: hover) and (pointer: fine) {
  .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-text);
}
.voucher-badge--pending {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

/* ── Créditos ── */
/*
  Saldo do comprador na conta dele: é destaque de valor, não aviso do sistema —
  por isso a caixa inteira fica na família da marca. Misturar marca no fundo com
  informação na borda entrega laranja com contorno azul em quem tem marca quente.
*/
.credit-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.credit-balance__label {
  color: var(--color-primary-dark);
  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) ── */
/* Teto de largura é do `.container` da página; o `--checkout-max` que estava
   aqui nunca chegou ao `:root`, então a declaração já caía fora. */
/* O respiro do topo é o mesmo da lateral: a casca (`.container`) só afasta o
   conteúdo das bordas horizontais, e sem isto o título encosta no cabeçalho.
   Aqui o de baixo não entra: no celular a barra do total já reserva a folga do
   fim (ver o bloco de ≤1023px), e somar as duas abriria um vão morto. */
.co-shell {
  margin: 0 auto;
  padding-top: var(--sf-page-gutter);
}
.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-back {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 0.9rem;
}
.co-back a {
  color: var(--color-text-muted);
}
.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 {
  /* Avançar de etapa rola a etapa nova para o alto; o desconto do cabeçalho
     fixo é o que impede a barra de cobrir o título dela. */
  scroll-margin-top: calc(var(--header-sticky-offset, 0px) + 0.75rem);
  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;
}
/* A marca da etapa é um círculo: largura e altura iguais, decididas aqui. A
   regra citava um `--step-badge-size` que nunca chegou ao `:root`, e `var()`
   sem valor derruba a declaração inteira — sobravam a largura do dígito e a
   altura da linha, ou seja, uma pílula em pé. */
.step__badge {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  line-height: 1;
  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;
}
@media (hover: hover) and (pointer: fine) {
  .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;
}
/* Escolher o endereço resolve a etapa, então o cartão inteiro é o controle e o
   círculo do rádio vira ruído — quem está escolhido se lê pela borda e pelo
   fundo (`.addr:has(input:checked)`). O input segue no DOM, focável pelo
   teclado: é ele que carrega o valor enviado. */
.addr--pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.addr--pick:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .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;
}
@media (hover: hover) and (pointer: fine) {
  .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;
}

/* ── Avanço de etapa ─────────────────────────────────────────────────────
   Escolher endereço, frete ou forma de pagamento envia o formulário sozinho e
   troca este bloco por um fragmento novo. Entre o clique e a troca há um ida e
   volta ao servidor — medido em ~190ms na máquina de desenvolvimento, com um
   vendedor e sem rede no meio; no celular do comprador, com frete calculado em
   provedor externo, é mais. Sem sinal nenhum a tela fica parada e a pessoa
   clica de novo.

   São três sinais, do mais barato ao mais visível, e nenhum deles apaga a
   página: escurecer meia tela de checkout assusta mais do que informa.

   1. o bloco inteiro para de aceitar clique enquanto responde;
   2. as opções NÃO escolhidas da etapa recuam, e a escolhida fica firme — a
      resposta aparece onde o dedo tocou;
   3. um fio de 2px no alto do formulário, e só depois de 200ms: em rede boa a
      troca termina antes disso e o fio nunca chega a piscar. */
#checkout[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}
.addr,
.ship-opt,
.pay-tab {
  transition: opacity 0.18s ease;
}
[data-sf-advancing] .addr:not(:has(input:checked)),
[data-sf-advancing] .ship-opt:not(:has(input:checked)),
[data-sf-advancing] .pay-tab:not(:has(input:checked)) {
  opacity: 0.5;
}
[data-sf-advancing-slow] {
  position: relative;
}
[data-sf-advancing-slow]::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background-image: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  background-repeat: no-repeat;
  background-size: 45% 100%;
  animation: co-advancing 1.1s ease-in-out infinite;
}
@keyframes co-advancing {
  from {
    background-position: -50% 0;
  }
  to {
    background-position: 150% 0;
  }
}
/* Sem movimento o fio ainda precisa dizer "responde em instantes": fica inteiro
   e apagado, em vez de sumir. */
@media (prefers-reduced-motion: reduce) {
  [data-sf-advancing-slow]::after {
    background-image: none;
    background-color: var(--color-primary);
    opacity: 0.35;
    animation: none;
  }
}

/* Barra sticky mobile + bottom-sheet (só ≤1023px) */
.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: 1023px) {
  .co-grid {
    grid-template-columns: 1fr;
  }
  .summary {
    display: none;
  }
  .mobar {
    display: block;
  }
  /* A barra do total é fixa e fica POR CIMA do fim da página: sem esta folga a
     última etapa termina embaixo dela e não há rolagem que a revele. */
  .co-shell {
    padding-bottom: calc(9rem + env(safe-area-inset-bottom));
  }
  /* Cada forma de pagamento numa linha: lado a lado, "Cartão de crédito" não
     cabe na largura de um celular e quebra dentro do próprio botão. */
  .pay-tabs {
    grid-template-columns: 1fr;
  }
}

/* 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 da compra

   A tela muda de forma conforme o estado do pagamento, e o CSS acompanha em
   três peças independentes: a faixa de estado (`.confirm-status`, uma linha,
   colorida pelo papel), a grade de duas colunas (`.confirm-grid`, ação à
   esquerda e resumo grudado à direita) e o rodapé (`.confirm-foot`, onde ficam
   as observações e a referência).

   No celular tudo vira uma coluna com a ação primeiro, e os respiros encolhem:
   nesta tela o comprador está com o código na mão e a distância entre a borda
   da tela e o código é espaço que ele rola sem ler.
   ========================================================================== */

/* O respiro do topo é o mesmo da lateral: a casca (`.container`) só afasta o
   conteúdo das bordas horizontais, e sem isto o primeiro painel encosta no
   cabeçalho. Vale para o rodapé pelo mesmo motivo. */
.checkout-confirmation {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: var(--sf-page-gutter);
  --confirm-bar-height: calc(var(--control-height) + 1.4rem + 1px);
}
.checkout-confirmation__empty {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}
/* Barra de ação do rodapé. No celular ela sai do fluxo e fica na base da tela,
   com o conteúdo passando por baixo — a sombra para cima é o sinal de que ainda
   há página a rolar. A altura reservada abaixo do conteúdo sai dos MESMOS
   tokens que desenham a barra, senão as duas medidas divergem no primeiro
   ajuste e o último bloco acaba escondido atrás dela.

   `fixed`, e não `sticky`: a barra é o último elemento da página, e um elemento
   grudado ao fim do próprio contêiner não tem contra o que grudar. A camada
   fica na faixa de conteúdo (abaixo de 100) de propósito — as barras da casca
   passam por cima dela quando as duas se encontram. */
.checkout-confirmation__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0;
}
@media (max-width: 59.99rem) {
  .checkout-confirmation {
    padding-bottom: calc(
      var(--confirm-bar-height) + var(--sf-page-gutter) + env(safe-area-inset-bottom)
    );
  }
  .checkout-confirmation__actions {
    position: fixed;
    z-index: 90;
    right: 0;
    bottom: 0;
    left: 0;
    flex-wrap: nowrap;
    padding: 0.7rem var(--sf-page-gutter) calc(0.7rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }
  .checkout-confirmation__actions .auth-submit {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
  }
}

/* ── Faixa de estado ─────────────────────────────────────────────────────
   Carrega a mensagem e mais nada: explicação vive no painel, tranquilização
   vive nas observações do rodapé. Alinhamento central porque o título é sempre
   de uma linha só — com `flex-start` o ícone descolava do texto. */
.confirm-status {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-surface);
  border: 1px solid var(--confirm-status-border);
  background: var(--confirm-status-bg);
}
.confirm-status--pending {
  --confirm-status-bg: var(--color-warning-surface);
  --confirm-status-border: var(--color-warning-border);
  --confirm-status-mark: var(--color-warning);
}
.confirm-status--paid {
  --confirm-status-bg: var(--color-success-surface);
  --confirm-status-border: var(--color-success-border);
  --confirm-status-mark: var(--color-success);
}
.confirm-status--failed {
  --confirm-status-bg: var(--color-error-surface);
  --confirm-status-border: var(--color-error-border);
  --confirm-status-mark: var(--color-error);
}
.confirm-status--wait {
  --confirm-status-bg: var(--color-info-surface);
  --confirm-status-border: var(--color-info-border);
  --confirm-status-mark: var(--color-info);
}
.confirm-status__mark {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--confirm-status-mark);
  color: var(--color-on-primary);
  display: grid;
  place-items: center;
}
.confirm-status__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
  text-wrap: balance;
}

/* ── Grade ─────────────────────────────────────────────────────────────── */
.confirm-grid {
  display: grid;
  gap: 0.75rem;
  align-items: start;
}
.confirm-main,
.confirm-side {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.confirm-main .checkout-panel,
.confirm-side .checkout-panel {
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.confirm-main .checkout-panel h2,
.confirm-side .checkout-panel h2 {
  margin: 0;
  font-size: 1.05rem;
}
.confirm-main .checkout-panel p,
.confirm-side .checkout-panel p {
  margin: 0;
}
.confirm-panel__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Painel que carrega a ação da tela. A borda na cor da marca é o único destaque
   — sombra em cima de sombra achataria a diferença entre ele e o resumo. */
.confirm-pay--hero,
.payment-retry--hero {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.payment-retry--hero {
  border-color: var(--color-error-border);
}

/* ── Cabeçalho do método: nome à esquerda, valor à direita ─────────────── */
.confirm-method {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.75rem;
}
.confirm-method__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-strong);
}
.confirm-method__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
}

/* ── Instrução de pagamento ────────────────────────────────────────────── */
.confirm-pay__body {
  display: grid;
  gap: 0.85rem;
}
.confirm-pay__fields {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}
.confirm-pay__qr,
.confirm-pay__placeholder {
  width: 11.25rem;
  height: 11.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  padding: 0.5rem;
  background: var(--color-surface);
  margin-inline: auto;
  display: block;
}
.confirm-pay__placeholder {
  display: grid;
  place-items: center;
  background: var(--color-bg-alt);
}
.confirm-spinner {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-pill);
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation: confirm-spin 0.9s linear infinite;
}
@keyframes confirm-spin {
  to {
    rotate: 360deg;
  }
}
.confirm-pay__pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  justify-content: center;
}

.confirm-deadline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-warning-surface);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
  font-size: 0.85rem;
  font-weight: 600;
}
.confirm-deadline b {
  font-variant-numeric: tabular-nums;
}

.confirm-live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.confirm-live__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  animation: confirm-pulse 1.8s ease-in-out infinite;
}
@keyframes confirm-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

/* ── Campo para copiar ───────────────────────────────────────────────────
   O botão fica ABAIXO do código no celular: lado a lado, os dois disputam uma
   largura onde nenhum cabe, e o código sobra tão curto que não dá para conferir
   nada nele. */
.confirm-copy {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.confirm-copy__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-soft);
}
.confirm-copy__box {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.confirm-copy__value {
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-control);
  background: var(--color-bg-alt);
  padding: 0.6rem 0.7rem;
  font-size: 0.78rem;
  color: var(--color-text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.confirm-copy__value--wrap {
  white-space: normal;
  word-break: break-all;
  line-height: 1.4;
}
.confirm-copy__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* ── Como pagar ────────────────────────────────────────────────────────── */
.confirm-how {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.confirm-how__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  counter-reset: confirm-step;
}
.confirm-how__steps li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--color-text-soft);
}
.confirm-how__steps li::before {
  counter-increment: confirm-step;
  content: counter(confirm-step);
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: 0.72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.confirm-how__steps--plain li::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  background: var(--color-text-faint);
  margin-top: 0.5rem;
}

/* ── Saída discreta para trocar a forma de pagamento ────────────────────
   Existe em todo estado pendente porque destrava quem não consegue pagar do
   jeito escolhido, e fica FECHADA porque oferecer a troca antes da pessoa
   tentar pagar é convidá-la a abandonar o código que já está pronto. */
.confirm-alt {
  border-top: 1px solid var(--color-border);
  padding-top: 0.85rem;
}
.confirm-alt > summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.confirm-alt > summary::-webkit-details-marker {
  display: none;
}
.confirm-alt > summary::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: -45deg;
  transition: rotate 0.15s;
}
.confirm-alt[open] > summary::before {
  rotate: 45deg;
}
.confirm-alt__body {
  padding-top: 0.5rem;
}

/* ── Andamento do pedido ───────────────────────────────────────────────── */
.confirm-track {
  list-style: none;
  padding: 0;
  margin: 0;
}
.confirm-track__step {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.15rem 0.7rem;
  padding-bottom: 1rem;
  position: relative;
}
.confirm-track__step:last-child {
  padding-bottom: 0;
}
.confirm-track__step::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border-input);
  background: var(--color-surface);
  justify-self: center;
  align-self: start;
  margin-top: 0.2rem;
  z-index: 1;
}
.confirm-track__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(0.75rem - 1px);
  top: 1.1rem;
  bottom: 0;
  width: 2px;
  background: var(--color-border-input);
}
.confirm-track__step--done::before {
  background: var(--color-success);
  border-color: var(--color-success);
}
.confirm-track__step--now::before {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}
.confirm-track__name {
  grid-column: 2;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-strong);
}
.confirm-track__step:not(.confirm-track__step--done):not(.confirm-track__step--now) .confirm-track__name {
  color: var(--color-text-muted);
  font-weight: 400;
}
.confirm-track__when {
  grid-column: 2;
  font-size: 0.8rem;
}

/* ── Resumo dos pedidos ────────────────────────────────────────────────── */
.confirm-order {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.confirm-order + .confirm-order {
  border-top: 1px solid var(--color-border);
  padding-top: 0.85rem;
}
.confirm-order__head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.confirm-order__id {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-strong);
}
.confirm-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid;
}
.confirm-badge--pending {
  background: var(--color-warning-surface);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}
.confirm-badge--paid {
  background: var(--color-success-surface);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}
.confirm-badge--failed {
  background: var(--color-error-surface);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
}
.confirm-badge--wait {
  background: var(--color-info-surface);
  border-color: var(--color-info-border);
  color: var(--color-info-text);
}

.confirm-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.confirm-item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
}
.confirm-item__thumb {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  display: grid;
  place-items: center;
  color: var(--color-text-faint);
  overflow: hidden;
}
.confirm-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.confirm-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.confirm-item__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-strong);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.confirm-item__variation {
  font-size: 0.78rem;
}
.confirm-item__qty {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.confirm-ship {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-control);
  background: var(--color-bg-alt);
  font-size: 0.8rem;
  color: var(--color-text-soft);
  line-height: 1.45;
}
.confirm-ship .icon {
  flex: none;
  margin-top: 0.15rem;
  color: var(--color-text-muted);
}
.confirm-ship b {
  color: var(--color-text-strong);
}

.confirm-order__total,
.confirm-grand__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-variant-numeric: tabular-nums;
}
.confirm-order__total {
  border-top: 1px solid var(--color-border);
  padding-top: 0.55rem;
  font-weight: 700;
  color: var(--color-text-strong);
}
.confirm-grand__row strong {
  font-size: 1.05rem;
}

/* ── Rodapé: observações, referência e ações ───────────────────────────── */
.confirm-foot {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.confirm-notes {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.confirm-notes__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-soft);
}
.confirm-notes__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  counter-reset: confirm-note;
}
.confirm-notes__list li {
  display: flex;
  gap: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.confirm-notes__list li::before {
  counter-increment: confirm-note;
  content: counter(confirm-note) ".";
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}
.confirm-foot__row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.confirm-ref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-surface);
  border: 1px dashed var(--color-border-input);
  font-size: 0.72rem;
  color: var(--color-text-faint);
  word-break: break-all;
}
.confirm-ref__copy {
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--color-border-input);
  background: var(--color-surface);
  color: var(--color-text-strong);
  border-radius: var(--radius-control);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
}

@media (min-width: 60rem) {
  .checkout-confirmation {
    gap: 1rem;
  }
  .confirm-status {
    padding: 1.25rem 1.4rem;
    gap: 0.9rem;
  }
  .confirm-status__mark {
    width: 2.25rem;
    height: 2.25rem;
  }
  .confirm-status__title {
    font-size: 1.7rem;
  }
  .confirm-grid {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 1rem;
  }
  .confirm-side {
    position: sticky;
    top: 1rem;
  }
  .confirm-main .checkout-panel,
  .confirm-side .checkout-panel {
    padding: 1.4rem;
    gap: 1rem;
  }
  .confirm-main,
  .confirm-side,
  .confirm-foot {
    gap: 1rem;
  }
  .confirm-pay__body {
    grid-template-columns: 11.25rem minmax(0, 1fr);
    align-items: start;
    gap: 1.1rem;
  }
  .confirm-copy__box {
    flex-direction: row;
    align-items: stretch;
    gap: 0.5rem;
  }
  .confirm-copy__value {
    flex: 1;
  }
  .confirm-pay__pdf {
    width: auto;
  }
  .confirm-notes {
    padding: 1rem 1.15rem;
  }
  .confirm-foot__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
  }
  .confirm-ref {
    flex: 1;
  }
}

/* ── 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;
  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--reading-narrow .hero__content {
  max-width: 28rem;
}
.hero--reading-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;
}
@media (hover: hover) and (pointer: fine) {
  .hero__cta:hover {
    background: var(--hover-button-background);
  }
}

.category-grid {
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .category-card:hover {
    border-color: var(--color-primary);
  }
}
.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 {
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .collection-card:hover {
    border-color: var(--color-primary);
  }
}
.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 {
}
.image-mosaic__grid {
  display: grid;
  gap: 1rem;
}
:where(.image-mosaic--gap-none) .image-mosaic__grid {
  gap: 0;
}
:where(.image-mosaic--gap-small) .image-mosaic__grid {
  gap: 0.5rem;
}
:where(.image-mosaic--gap-medium) .image-mosaic__grid {
  gap: 1rem;
}
:where(.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;
}
@media (hover: hover) and (pointer: fine) {
  .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--title-overlay-none .mosaic-tile__title {
  background: transparent;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.image-mosaic--title-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;
}
.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-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  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;
}
@media (hover: hover) and (pointer: fine) {
  .curated-kit__cta:hover {
    background: var(--hover-button-background);
  }
}
.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 {
}
.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;
}
:where(.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;
}
@media (hover: hover) and (pointer: fine) {
  .product-hotspots__marker:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--color-primary);
    color: var(--color-on-primary);
  }
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .product-hotspots__product:hover {
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
  }
}
.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: var(--layer-dialog-wide);
  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: 768px) {
  .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;
  }
  :where(.product-hotspots__picture) img {
    aspect-ratio: auto;
  }
  .product-hotspots__products {
    flex: 1;
    align-content: stretch;
  }
}

@media (max-width: 767px) {
  .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;
}
.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;
}
:where(.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);
}
@media (hover: hover) and (pointer: fine) {
  .about-info__cta--primary:hover {
    background: var(--hover-button-background);
  }
}
.about-info__cta--outline {
  background: transparent;
  color: var(--color-primary);
}
@media (hover: hover) and (pointer: fine) {
  .about-info__cta--outline:hover {
    background: var(--color-primary-soft);
  }
}

/* Faixa de ícones — lista horizontal scrollável de atalhos */
.icon-strip {
}
.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;
}
@media (hover: hover) and (pointer: fine) {
  .icon-strip__item:hover {
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
.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--crop-circle .icon-strip__avatar {
  border-radius: 50%;
}
.icon-strip--crop-none .icon-strip__avatar {
  border-radius: var(--radius-lg);
}
/* O lado do atalho é medida configurável por faixa, não três classes fixas. A
   variável vem do Liquid da seção; o fallback repete o default do schema para
   quem renderiza a peça fora dela. */
.icon-strip__avatar {
  width: var(--icon-strip-avatar, 100px);
  height: var(--icon-strip-avatar, 100px);
}
@media (max-width: 1023px) {
  .icon-strip__avatar {
    width: var(--icon-strip-avatar-tablet, var(--icon-strip-avatar, 100px));
    height: var(--icon-strip-avatar-tablet, var(--icon-strip-avatar, 100px));
  }
}
@media (max-width: 767px) {
  .icon-strip__avatar {
    width: var(--icon-strip-avatar-mobile, var(--icon-strip-avatar, 100px));
    height: var(--icon-strip-avatar-mobile, var(--icon-strip-avatar, 100px));
  }
}

@media (min-width: 768px) {
  /* 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: 768px) and (max-width: 1023px) {
  .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: 1024px) {
  .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 (768–1023px)
   usa `--carousel-cols-tablet` e desktop (1024px+) 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;
  /* Lado do alvo de toque da seta. É token porque três regras dependem dele: o
     próprio botão, a distância entre as duas setas no cabeçalho e quanto a seta
     pode avançar para fora da faixa sem sair da área visível. */
  --carousel-arrow-size: 2.75rem;
}
.carousel[data-gap="none"] {
  --carousel-gap: 0px;
}
.carousel[data-gap="small"] {
  --carousel-gap: 0.5rem;
}
.carousel[data-gap="medium"] {
  --carousel-gap: 1rem;
}
.carousel[data-gap="large"] {
  --carousel-gap: 1.5rem;
}
.carousel__viewport {
  /* Contexto de empilhamento próprio: sem ele, o card em hover (z-index 20)
     e as setas (z-index 2) ficam na mesma pilha e o card cobre a seta. */
  isolation: isolate;
  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 vãos que APARECEM (ceil(N)-1, calculado no
   snippet) do 100% da viewport. Com coluna decimal, ceil(N)-1 != N-1. */
.carousel__slide {
  flex: 0 0
    calc(
      (
          100% - var(--carousel-gaps-mobile, calc(var(--carousel-cols-mobile, 1) - 1)) *
            var(--carousel-gap, 1rem)
        ) /
        var(--carousel-cols-mobile, 1)
    );
  min-width: 0;
  scroll-snap-align: start;
}
:where(.carousel__slide:has(> .product-card)) {
  display: flex;
}
:where(.carousel__slide) > .product-card {
  width: 100%;
}
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--carousel-arrow-size, 2.75rem);
  height: var(--carousel-arrow-size, 2.75rem);
  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;
}
/* O glifo é uma proporção do botão, não um número no ponto de chamada: assim
   redimensionar a parte `arrow` na Aparência move o desenho junto com o alvo de
   toque. 55% da caixa entrega o glifo de 24px no botão padrão de 2,75rem.

   A cor sai de custom property com `inherit` no fallback: sem escolha explícita
   o desenho continua acompanhando a cor do texto do botão — que é o que a
   Aparência da parte `arrow` escreve —, e a escolha, quando existe, vale só
   sobre o glifo, sem levar junto a borda nem o fundo. */
.carousel__arrow > .icon {
  width: var(--carousel-arrow-icon-size, 55%);
  height: var(--carousel-arrow-icon-size, 55%);
  color: var(--carousel-arrow-icon-color, inherit);
}
@media (hover: hover) and (pointer: fine) {
  .carousel__arrow:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}
/* Sem para onde ir, o botão diz isso: `disabled` de verdade (o teclado pula, o
   leitor de tela anuncia) e aparência recuada. A regra vem depois do `:hover`
   para o estado desligado não acender ao passar o mouse. */
.carousel__arrow:disabled,
.carousel__arrow:disabled:hover {
  opacity: 0.4;
  border-color: var(--color-border);
  color: var(--color-text-strong);
  cursor: default;
}
.carousel__arrow--prev {
  left: 0.25rem;
}
.carousel__arrow--next {
  right: 0.25rem;
}
/* Posição da seta em relação ao conteúdo. `inside` é o padrão e não precisa de
   regra: é o recuo declarado acima. O seletor de contexto vai em `:where()` para
   a regra não passar de 0-1-0 e continuar cedendo para a Aparência da parte.

   `edge` e `outside` pedem que o botão SAIA da faixa, e o quanto ele pode sair
   depende de quanto há de tela do lado de fora — que nem sempre é o pedido. O
   avanço vira então `min(folga, pedido)`: com folga sobrando o botão fica onde
   a posição escolhida manda; sem folga ele encosta POR DENTRO da ponta, inteiro
   e clicável. A folga chega em `--sf-room-start`/`--sf-room-end`, medidas pelo
   `storefront.js`.

   Sem medida a folga vale ZERO, e o botão nasce encostado por dentro: a medida
   só AFROUXA o teto, nunca cria o vazamento. Um teto generoso por omissão
   entregaria a seta meia — ou inteira — fora da área visível em toda página sem
   script, e uma piscada de um quadro em toda página com script.

   O pedido soma `--carousel-bleed-*`: onde a faixa fura o corredor da página, a
   ponta que a seta guarda é a da faixa furada, não a do bloco. */
:where(.carousel[data-arrow-position="edge"]) .carousel__arrow--prev {
  left: calc(
    -1 *
      min(
        var(--sf-room-start, 0px),
        var(--carousel-bleed-start, 0px) + var(--carousel-arrow-size) / 2
      )
  );
}
:where(.carousel[data-arrow-position="edge"]) .carousel__arrow--next {
  right: calc(
    -1 *
      min(
        var(--sf-room-end, 0px),
        var(--carousel-bleed-end, 0px) + var(--carousel-arrow-size) / 2
      )
  );
}
:where(.carousel[data-arrow-position="outside"]) .carousel__arrow--prev {
  left: calc(
    -1 *
      min(
        var(--sf-room-start, 0px),
        var(--carousel-bleed-start, 0px) + var(--carousel-arrow-size) + 0.5rem
      )
  );
}
:where(.carousel[data-arrow-position="outside"]) .carousel__arrow--next {
  right: calc(
    -1 *
      min(
        var(--sf-room-end, 0px),
        var(--carousel-bleed-end, 0px) + var(--carousel-arrow-size) + 0.5rem
      )
  );
}
/* No cabeçalho: as duas lado a lado, acima da faixa e no extremo oposto ao
   título. A seta alcança a linha do cabeçalho porque é mais alta que o vão que a
   separa do conteúdo. */
:where(.carousel[data-arrow-position="header"]) .carousel__arrow {
  top: auto;
  bottom: calc(100% + 0.75rem);
  transform: none;
}
:where(.carousel[data-arrow-position="header"]) .carousel__arrow--prev {
  left: auto;
  right: calc(var(--carousel-arrow-size) + 0.75rem);
}
:where(.carousel[data-arrow-position="header"]) .carousel__arrow--next {
  right: 0;
}
/* O cabeçalho cede a faixa da direita: título, link e setas dividem a linha sem
   se sobrepor, e o que falta de largura quebra o título em vez de encobri-lo. A
   faixa comporta as duas setas mais o vão entre elas. */
:where(:has(.carousel[data-arrow-position="header"]))
  > :where([data-theme-part="heading"], [data-theme-part="title"]) {
  padding-inline-end: 6.5rem;
}
/* Sem cabeçalho acima, a faixa é do próprio carrossel — senão a seta subiria
   para cima da seção anterior. */
.carousel[data-arrow-position="header"] {
  margin-block-start: 3.5rem;
}
:where(:has(> [data-theme-part="heading"]), :has(> [data-theme-part="title"]))
  .carousel[data-arrow-position="header"] {
  margin-block-start: 0;
}
/* Exibição por dispositivo, nas fronteiras do tema. Some por `visibility`, e não
   por `display`, porque a rolagem continua: esconder a seta nunca tira o gesto. */
@media (max-width: 767px) {
  :where(.carousel:not([data-arrows~="mobile"])) .carousel__arrow {
    visibility: hidden;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :where(.carousel:not([data-arrows~="tablet"])) .carousel__arrow {
    visibility: hidden;
  }
}
@media (min-width: 1024px) {
  :where(.carousel:not([data-arrows~="desktop"])) .carousel__arrow {
    visibility: hidden;
  }
}
/* "Ao passar o mouse" só existe onde há mouse. Em toque não há estado de
   passagem, e a seta que dependesse dele nunca apareceria. */
@media (hover: hover) and (pointer: fine) {
  :where(.carousel[data-arrow-reveal="hover"]) .carousel__arrow {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
  }
  :where(.carousel[data-arrow-reveal="hover"]:hover) .carousel__arrow,
  :where(.carousel[data-arrow-reveal="hover"]) .carousel__arrow:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
}
.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;
}
/* Exibição por dispositivo, nas mesmas fronteiras das setas. Aqui some por
   `display`, e não por `visibility`: o indicador abaixo do conteúdo reserva
   altura, e esconder sem devolver esse espaço deixaria uma faixa vazia no
   dispositivo em que o lojista desligou. */
@media (max-width: 767px) {
  :where(.carousel:not([data-dots~="mobile"])) .carousel__dots {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :where(.carousel:not([data-dots~="tablet"])) .carousel__dots {
    display: none;
  }
}
@media (min-width: 1024px) {
  :where(.carousel:not([data-dots~="desktop"])) .carousel__dots {
    display: none;
  }
}
.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;
  }
}

/* ── A faixa fura o contido ──────────────────────────────────────────────────
   Numa lista que rola de lado, o pedaço do item cortado na ponta é o sinal de
   que há mais para o lado. Contida no corredor lateral da página, esse corte cai
   longe da borda e o sinal se perde — daí a faixa poder FURAR esse corredor e ir
   até a borda da tela, por lado e por dispositivo (`data-bleed-start` /
   `data-bleed-end`, listas de tokens).

   Furar é ESTADO, não movimento: o lado furado simplesmente não tem margem. Uma
   margem negativa na caixa que rola já é o mecanismo inteiro — o primeiro item
   nasce colado na borda e o último termina colado, sem espaçador nas pontas e
   sem parada especial na rolagem.

   Quanto vale o furo em cada lado chega em `--sf-bleed-start` e `--sf-bleed-end`,
   escritos pelo `storefront.js`: a distância até a borda da tela depende do recuo
   da seção, que é campo do painel e muda a qualquer momento, e a lista só fura
   quando transborda — sem conteúdo adiante não há o que sinalizar. Ausentes, o
   furo é zero e a faixa fica onde sempre esteve.

   `--carousel-bleed-*` leva o mesmo valor para a seta: onde a faixa fura, a ponta
   que ela guarda é a da faixa furada, não a do bloco. */
@media (max-width: 767px) {
  :where(.carousel[data-bleed-end~="mobile"]) .carousel__viewport {
    margin-inline-end: calc(-1 * var(--sf-bleed-end, 0px));
  }
  :where(.carousel[data-bleed-start~="mobile"]) .carousel__viewport {
    margin-inline-start: calc(-1 * var(--sf-bleed-start, 0px));
  }
  .carousel[data-bleed-end~="mobile"] {
    --carousel-bleed-end: var(--sf-bleed-end, 0px);
  }
  .carousel[data-bleed-start~="mobile"] {
    --carousel-bleed-start: var(--sf-bleed-start, 0px);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :where(.carousel[data-bleed-end~="tablet"]) .carousel__viewport {
    margin-inline-end: calc(-1 * var(--sf-bleed-end, 0px));
  }
  :where(.carousel[data-bleed-start~="tablet"]) .carousel__viewport {
    margin-inline-start: calc(-1 * var(--sf-bleed-start, 0px));
  }
  .carousel[data-bleed-end~="tablet"] {
    --carousel-bleed-end: var(--sf-bleed-end, 0px);
  }
  .carousel[data-bleed-start~="tablet"] {
    --carousel-bleed-start: var(--sf-bleed-start, 0px);
  }
}
@media (min-width: 1024px) {
  :where(.carousel[data-bleed-end~="desktop"]) .carousel__viewport {
    margin-inline-end: calc(-1 * var(--sf-bleed-end, 0px));
  }
  :where(.carousel[data-bleed-start~="desktop"]) .carousel__viewport {
    margin-inline-start: calc(-1 * var(--sf-bleed-start, 0px));
  }
  .carousel[data-bleed-end~="desktop"] {
    --carousel-bleed-end: var(--sf-bleed-end, 0px);
  }
  .carousel[data-bleed-start~="desktop"] {
    --carousel-bleed-start: var(--sf-bleed-start, 0px);
  }
}

/* Barra de avisos — full-bleed por natureza, mas conteúdo centralizado.
   O espaço vertical é do ritmo da página, como em qualquer seção. Só o primeiro
   node encosta no cabeçalho, e recua exatamente o que o cabeçalho reservou — daí
   ler o mesmo token em vez de repetir o número. O recuo é uma propriedade só, e
   sai inteiro quando o painel escreve a margem. */
.announcement-bar {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  padding: 0.5rem var(--sf-screen-inset);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
.announcement-bar:where(#sf-main > :first-child) {
  margin-block-start: calc(-1 * var(--site-header-bottom-spacing, 1.5rem));
}
.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;
}
/* O link do aviso tem Aparência própria (parte `link`): herdar a cor da barra é
   o padrão, e a barra sai de `:where()` para o painel poder trocá-la. */
:where(.announcement-bar) a {
  color: inherit;
}
.announcement-bar__slide {
  align-content: center;
  min-height: 1.5rem;
}
/* A seta do aviso é menor e sem contorno: o glifo ocupa quase toda a caixa
   (86% de 1,75rem ≈ 24px), senão a proporção padrão o encolheria junto. */
:where(.announcement-bar) .carousel__arrow {
  width: 1.75rem;
  height: 1.75rem;
  --carousel-arrow-icon-size: 86%;
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

/* Benefícios — conteúdo operacional curto, rolável no mobile. */
:where(.benefits-bar) > h2 {
  margin-block: 0 0.75rem;
}
.benefits-bar__slide {
  display: flex;
}
.benefit-card {
  display: flex;
  width: 100%;
  min-height: 5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--benefit-card-border-preset, var(--color-border));
  border-radius: var(--radius-lg);
  background: var(--benefit-card-background-preset, var(--color-surface));
  color: inherit;
}
:where(.benefits-bar--plain) .benefit-card {
  --benefit-card-border-preset: transparent;
  --benefit-card-background-preset: transparent;
}
.benefit-card--action,
:where(.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;
}
@media (hover: hover) and (pointer: fine) {
  .benefit-card:hover {
    border-color: var(--color-primary);
  }
}
/* O realce de hover é do cartão com superfície: a variante limpa não ganha
   moldura só porque a borda dela deixou de vencer por especificidade. */
@media (hover: hover) and (pointer: fine) {
  :where(.benefits-bar--plain) .benefit-card:hover {
    border-color: transparent;
  }
}
@media (hover: hover) and (pointer: fine) {
  :where(.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);
  }
}
/* Caixa e desenho do ícone saem daqui, em custom property: redimensionar a
   parte `icon` na Aparência move a caixa, e o desenho acompanha na proporção.
   Número no ponto de chamada travaria o desenho em qualquer caixa.
   A cor escolhida no bloco vale em qualquer estilo de ícone — sem ela, o
   simples acompanha o primário do tema e o círculo usa a cor de contraste. */
.benefit-card__icon {
  display: inline-flex;
  width: var(--benefit-icon-box, 1.625rem);
  height: var(--benefit-icon-box, 1.625rem);
  flex: none;
  align-items: center;
  justify-content: center;
  order: var(--benefit-icon-order, 0);
  color: var(--benefit-icon-color, var(--color-primary));
}
.benefit-card__icon > .icon {
  width: var(--benefit-icon-scale, 100%);
  height: var(--benefit-icon-scale, 100%);
}
/* No cartão de ação o ícone é parte do rótulo: menor que o do benefício, e sem
   cor escolhida acompanha o texto do destaque, não o primário do tema. A ordem
   vem do próprio item — a posição do ícone ali é decisão do bloco, não da faixa
   inteira. */
:where(.benefit-card--action) .benefit-card__icon {
  --benefit-icon-box: 1.125rem;
  --benefit-icon-order: 0;
  color: var(--benefit-action-icon-color, inherit);
}
/* Ordem do ícone é preset do componente: custom property, nunca propriedade final,
   para a Aparência da parte `icon` continuar podendo vencer. */
:where(.benefits-bar--icon-trailing) .benefit-card {
  --benefit-icon-order: 2;
}
/* Círculo colorido: a caixa é o círculo, e o desenho é uma fração dela. O
   número que a pessoa escolhe vale sempre para a PEÇA que ocupa espaço na
   página — o círculo quando ele existe, o desenho quando não existe. A fração
   é percentual, e não um segundo número em pixels, para a proporção sobreviver
   a qualquer tamanho de círculo.

   O cartão de ação fica de fora: ali o ícone é parte do rótulo, não um selo, e
   um círculo colorido dentro de um bloco já colorido não teria o que destacar.
   A exclusão vai dentro de `:where()` para o seletor não passar de 0-1-0 — a
   Aparência da parte `icon` precisa continuar vencendo esta regra. */
:where(.benefits-bar--icons-circle) :where(.benefit-card:not(.benefit-card--action)) .benefit-card__icon {
  --benefit-icon-box: 2.5rem;
  --benefit-icon-scale: var(--benefit-icon-fill, 65%);
  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;
  order: 1;
  line-height: 1.3;
}
/* Tudo aqui pertence aos ajustes rotulados "no celular" no painel — posição do
   ícone e lista vertical. A fronteira é 767px, a mesma que o tema usa para
   celular em qualquer outro lugar: acima dela existe um controle próprio de
   tablet, e um preset de celular que alcançasse o tablet tornaria esse controle
   decorativo. */
@media (max-width: 767px) {
  /* O celular só decide ordem quando escolhe uma; `same` não emite classe e
     herda o preset de desktop. */
  :where(.benefits-bar--mobile-icon-leading) .benefit-card {
    --benefit-icon-order: 0;
  }
  :where(.benefits-bar--mobile-icon-trailing) .benefit-card {
    --benefit-icon-order: 2;
  }
  :where(.benefits-bar--icon-above) .benefit-card {
    min-height: 7rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 0.25rem;
    text-align: center;
  }
  .benefits-bar--icon-above .benefit-card__content {
    align-items: center;
    line-height: 1.2;
  }
  /* Ícone acima aperta a coluna: os dois papéis encolhem juntos, cada um em
     cima do próprio tamanho configurado, para o ajuste do celular não virar um
     terceiro dono do peso e do tamanho. A variante fica em `:where()` porque
     título e descrição são partes configuráveis: contando especificidade, o
     preset venceria o valor escolhido no painel. */
  :where(.benefits-bar--icon-above) .benefit-card__title {
    font-size: calc(var(--type-item-title-size) * 0.86);
  }
  :where(.benefits-bar--icon-above) .benefit-card__text {
    font-size: calc(var(--type-meta-size) * 0.88);
  }
}
.benefit-card__text {
  margin-top: 0.2rem;
}
@media (max-width: 767px) {
  .benefits-bar__slide--mobile-hidden {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .benefits-bar__slide--tablet-hidden {
    display: none;
  }
}
@media (min-width: 1024px) {
  .benefits-bar__slide--desktop-hidden {
    display: none;
  }
}

/* FAQ — details nativo preserva acessibilidade e degradação sem JS. */
.faq {
}
.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);
}
/* O cabeçalho é o `<summary>` cru, e a Aparência o configura pela parte
   `question`. O contêiner sai de `:where()` para o seletor ficar em 0-0-1: o
   padrão do tema continua vindo antes no arquivo, e o painel vence no empate. */
:where(.faq__item) summary {
  padding: 0.8rem 1rem;
  cursor: pointer;
  font-weight: 600;
}
:where(.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: 1024px) {
  :where(.faq--cols-2) .faq__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ── Banners (component `banners`) — seção genérica sobre o carrossel base.
   Sangrar até a borda é decisão da Aparência (Largura do conteúdo / do fundo);
   aqui ficam só formato e escala semântica. Proporção (`--rect`/`--square`) e
   recorte (`--crop-circle`, p/ logos/categorias) são eixos separados. ── */
:where(.banners[data-bg="surface"]) {
  background: var(--color-surface);
}
:where(.banners[data-bg="muted"]) {
  background: var(--color-bg-alt);
}
:where(.banners[data-bg="primary_soft"]) {
  background: var(--color-primary-soft);
}
:where(.banners[data-pad="none"]) {
  padding-top: 0;
  padding-bottom: 0;
}
:where(.banners[data-pad="small"]) {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
:where(.banners[data-pad="medium"]) {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
:where(.banners[data-pad="large"]) {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
/* O teto acompanha o container mesmo quando a seção sangra pela Aparência: com
   a seção contida a largura já é menor que o teto e as margens automáticas são
   zero, então a regra só age quando há o que conter. */
.banners__title {
  max-width: var(--container-width);
  margin: 0 auto 0.75rem;
}
.banners__link {
  display: block;
  color: inherit;
}
.banners__media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}
:where(.banners__media) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
:where(.banners__slide[data-fit="contain"] .banners__media) img {
  object-fit: contain;
}
:where(.banners__slide[data-fit="width"] .banners__media) img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
:where(.banners__slide[data-fit="height"] .banners__media) img {
  width: auto;
  height: 100%;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
}
:where(.banners__slide[data-fit="natural"] .banners__media) img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-inline: auto;
  object-fit: contain;
}
:where(.banners--rect) .banners__media {
  aspect-ratio: 16 / 6;
}
:where(.banners--square) .banners__media {
  aspect-ratio: 1 / 1;
}
:where(.banners--crop-circle) .banners__media {
  border-radius: var(--radius-pill);
}
/* Encaixe que faz a altura vir da imagem precisa que a caixa solte a proporção
   do formato: com `aspect-ratio` valendo, a caixa continua alta, a imagem cabe
   inteira dentro dela e sobra faixa vazia embaixo — o formato ganharia do
   encaixe justamente quando o operador pediu o contrário. "Ajustar à altura" e
   "Mostrar inteira" continuam com a proporção, porque nos dois a caixa é a
   referência de altura. A liberação é por breakpoint porque o encaixe do
   celular é escolha independente do desktop. */
@media (min-width: 768px) {
  :where(.banners__slide[data-fit="natural"]) .banners__media,
  :where(.banners__slide[data-fit="width"]) .banners__media {
    aspect-ratio: auto;
  }
}
/* A legenda herda a cor da seção: valor explícito aqui bloquearia a cor que o
   painel escreve na raiz. Só o modo sobre a imagem força branco, porque o
   degradê é escuro; quem precisa de outra cor sobrescreve na parte `label`.
   As variantes entram em `:where()` — são ponto de partida, não autoridade. */
.banners__label {
  display: block;
  color: inherit;
}
:where(.banners--text-below) .banners__label {
  margin-top: 0.5rem;
  text-align: center;
  font-weight: 600;
}
.banners--text-over .banners__slide .banners__link {
  position: relative;
}
:where(.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);
}
:where(.banners--crop-circle.banners--text-below) .banners__label {
  font-weight: 500;
  font-size: 0.9rem;
}
@media (max-width: 767px) {
  :where(.banners__slide[data-mobile-fit="cover"] .banners__media) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  :where(.banners__slide[data-mobile-fit="contain"] .banners__media) img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  :where(.banners__slide[data-mobile-fit="width"] .banners__media) img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }
  :where(.banners__slide[data-mobile-fit="height"] .banners__media) img {
    width: auto;
    height: 100%;
    max-width: 100%;
    margin-inline: auto;
    object-fit: contain;
  }
  :where(.banners__slide[data-mobile-fit="natural"] .banners__media) img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin-inline: auto;
    object-fit: contain;
  }
  :where(.banners--mobile-auto) .banners__media {
    aspect-ratio: auto;
  }
  :where(.banners--mobile-auto .banners__media) img {
    height: auto;
    object-fit: contain;
  }
  :where(.banners--mobile-portrait) .banners__media {
    aspect-ratio: 4 / 5;
  }
  :where(.banners--mobile-landscape) .banners__media {
    aspect-ratio: 16 / 9;
  }
  :where(.banners--mobile-square) .banners__media {
    aspect-ratio: 1 / 1;
  }
  /* Vem depois das proporções de celular de propósito: pedir altura vinda da
     imagem é mais específico do que escolher um formato de caixa, e o formato
     valendo devolveria a faixa vazia que o encaixe existe para eliminar. */
  :where(.banners__slide[data-mobile-fit="natural"]) .banners__media,
  :where(.banners__slide[data-mobile-fit="width"]) .banners__media {
    aspect-ratio: auto;
  }
}

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

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

/* O mesmo markup alterna entre faixa rolável, grade e lista por dispositivo.
   O marcador vem dos settings responsivos; o servidor nunca escolhe viewport. */
@media (max-width: 767px) {
  :where(.carousel[data-grid~="mobile"]) {
    --carousel-is-grid: 1;
  }
  :where(.carousel[data-grid~="mobile"]) .carousel__viewport {
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
  }
  :where(.carousel[data-grid~="mobile"]) .carousel__track {
    flex-wrap: wrap;
  }
  :where(.carousel[data-grid~="mobile"]) .carousel__slide {
    scroll-snap-align: none;
  }
  :where(.carousel[data-grid~="mobile"]) .carousel__arrow,
  :where(.carousel[data-grid~="mobile"]) .carousel__dots {
    display: none;
  }
  :where(.benefits-bar[data-stack~="mobile"]) .carousel__viewport {
    overflow: visible;
    margin-inline: 0;
  }
  :where(.benefits-bar[data-stack~="mobile"]) .carousel__track {
    flex-direction: column;
    transform: none !important;
  }
  :where(.benefits-bar[data-stack~="mobile"]) .carousel__slide {
    width: 100%;
    flex-basis: auto;
  }
  :where(.benefits-bar[data-stack~="mobile"]) .carousel__arrow,
  :where(.benefits-bar[data-stack~="mobile"]) .carousel__dots {
    display: none;
  }
  .carousel[data-responsive-dots]:not([data-dots-inside~="mobile"]) .carousel__dots {
    position: static;
    margin-top: 0.75rem;
  }
  .carousel[data-dots-inside~="mobile"] .carousel__dots {
    position: absolute;
    inset: auto 0 0.6rem;
    margin-top: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :where(.carousel[data-grid~="tablet"]) {
    --carousel-is-grid: 1;
  }
  :where(.carousel[data-grid~="tablet"]) .carousel__viewport {
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
  }
  :where(.carousel[data-grid~="tablet"]) .carousel__track {
    flex-wrap: wrap;
  }
  :where(.carousel[data-grid~="tablet"]) .carousel__slide {
    scroll-snap-align: none;
  }
  :where(.carousel[data-grid~="tablet"]) .carousel__arrow,
  :where(.carousel[data-grid~="tablet"]) .carousel__dots {
    display: none;
  }
  :where(.benefits-bar[data-stack~="tablet"]) .carousel__viewport {
    overflow: visible;
    margin-inline: 0;
  }
  :where(.benefits-bar[data-stack~="tablet"]) .carousel__track {
    flex-direction: column;
    transform: none !important;
  }
  :where(.benefits-bar[data-stack~="tablet"]) .carousel__slide {
    width: 100%;
    flex-basis: auto;
  }
  :where(.benefits-bar[data-stack~="tablet"]) .carousel__arrow,
  :where(.benefits-bar[data-stack~="tablet"]) .carousel__dots {
    display: none;
  }
  .carousel[data-responsive-dots]:not([data-dots-inside~="tablet"]) .carousel__dots {
    position: static;
    margin-top: 0.75rem;
  }
  .carousel[data-dots-inside~="tablet"] .carousel__dots {
    position: absolute;
    inset: auto 0 0.6rem;
    margin-top: 0;
  }
}
@media (min-width: 1024px) {
  :where(.carousel[data-grid~="desktop"]) {
    --carousel-is-grid: 1;
  }
  :where(.carousel[data-grid~="desktop"]) .carousel__viewport {
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
  }
  :where(.carousel[data-grid~="desktop"]) .carousel__track {
    flex-wrap: wrap;
  }
  :where(.carousel[data-grid~="desktop"]) .carousel__slide {
    scroll-snap-align: none;
  }
  :where(.carousel[data-grid~="desktop"]) .carousel__arrow,
  :where(.carousel[data-grid~="desktop"]) .carousel__dots {
    display: none;
  }
  :where(.benefits-bar[data-stack~="desktop"]) .carousel__viewport {
    overflow: visible;
    margin-inline: 0;
  }
  :where(.benefits-bar[data-stack~="desktop"]) .carousel__track {
    flex-direction: column;
    transform: none !important;
  }
  :where(.benefits-bar[data-stack~="desktop"]) .carousel__slide {
    width: 100%;
    flex-basis: auto;
  }
  :where(.benefits-bar[data-stack~="desktop"]) .carousel__arrow,
  :where(.benefits-bar[data-stack~="desktop"]) .carousel__dots {
    display: none;
  }
  .carousel[data-responsive-dots]:not([data-dots-inside~="desktop"]) .carousel__dots {
    position: static;
    margin-top: 0.75rem;
  }
  .carousel[data-dots-inside~="desktop"] .carousel__dots {
    position: absolute;
    inset: auto 0 0.6rem;
    margin-top: 0;
  }
}

/* ── 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-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.payment-retry__card > summary::-webkit-details-marker {
  display: none;
}
.payment-retry__card > summary::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: -45deg;
  transition: rotate 0.15s;
}
.payment-retry__card[open] > summary::before {
  rotate: 45deg;
}
/* Motivo devolvido pelo gateway. Recusa não é erro do comprador, então o aviso
   informa sem acusar — mesma cor de erro do tema, sem exclamação no texto. */
.payment-retry__reason {
  display: flex;
  gap: 0.55rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-control);
  background: var(--color-error-surface);
  border: 1px solid var(--color-error-border);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-error-text);
}
.payment-retry__reason .icon {
  flex: none;
  margin-top: 0.15rem;
}
/* Dentro da saída recolhida da confirmação a seção já está num painel — o
   painel de dentro perde casca para não desenhar caixa sobre caixa. */
.payment-retry--bare {
  border: 0;
  padding: 0;
  background: none;
  margin: 0;
}
.payment-retry--bare > h2 {
  font-size: 0.95rem;
}
.confirm-main .payment-retry {
  margin: 0;
}
.confirm-main .checkout-panel form {
  margin-top: 0;
}
/* Duas opções lado a lado quando a largura permite: empilhadas, o par ocupa
   uma tela inteira do celular antes do botão que confirma a escolha. */
.checkout-options--inline {
  display: grid;
  gap: 0.5rem;
}
.checkout-option__hint {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
@media (min-width: 30rem) {
  .checkout-options--inline {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Footer — newsletter (P-21); botão/avisos reusam .auth-submit/.auth-error/.auth-success ── */
.footer-newsletter {
  max-width: 28rem;
  margin-bottom: 1.25rem;
  color: var(--color-text);
  font-size: 1rem;
}
.footer-newsletter__text {
  margin: -.25rem 0 .65rem;
  color: inherit;
  font-size: .82em;
  opacity: .72;
}
.footer-newsletter__title {
  font-size: inherit;
  font-weight: 600;
  color: inherit;
  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;
}

/* ── Footer — composição das peças (filhos do rodapé: Newsletter, Marca,
   Lista de itens, Assinatura). A faixa centraliza o conjunto e estica as
   peças à mesma altura, que é o que faz Newsletter e Marca lerem como uma
   composição só em vez de duas caixas soltas. ── */
.site-footer__composition {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: 1.5rem;
  text-align: center;
}
.site-footer__composition > * {
  min-width: 0;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-width: 0;
  max-width: 20rem;
}
/* A marca ocupa a altura que a composição der: o que sobra da caixa é da
   imagem, que se encaixa dentro sem distorcer em vez de ficar presa a uma
   altura fixa. Uma classe por elemento — combinador aqui passaria de 0-1-0 e
   venceria a Aparência da própria parte. */
.footer-brand__link {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
}
.footer-brand__image {
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}
.footer-brand__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .82rem;
}

.footer-newsletter--piece {
  max-width: 32rem;
  margin: 0;
  align-self: center;
}
.footer-newsletter--piece .footer-newsletter__row {
  justify-content: center;
}
/* Cor do botão e cor do texto pintam quando configuradas; sem elas vale o
   estilo escolhido (Primário ou Secundário) com os tokens do tema. */
.footer-newsletter__button.btn--primary {
  background: var(--footer-newsletter-button-bg, var(--color-primary));
  color: var(--footer-newsletter-button-text, var(--color-on-primary));
}
@media (hover: hover) and (pointer: fine) {
  .footer-newsletter__button.btn--primary:hover {
    background: var(--footer-newsletter-button-bg, var(--color-primary-dark));
    color: var(--footer-newsletter-button-text, var(--color-on-primary));
  }
}
.footer-newsletter__button.btn--secondary {
  background: var(--footer-newsletter-button-bg, var(--color-action-secondary));
  color: var(--footer-newsletter-button-text, var(--color-surface));
}
@media (hover: hover) and (pointer: fine) {
  .footer-newsletter__button.btn--secondary:hover {
    background: var(--footer-newsletter-button-bg, var(--color-action-secondary-hover));
    color: var(--footer-newsletter-button-text, var(--color-surface));
  }
}

/* ── Lista de itens (`item-list` + `list-item`): a coluna de links e a faixa de
   logos são a mesma peça, com orientações diferentes.

   O alinhamento é UMA escolha e cai no eixo que sobra em cada orientação: na
   vertical o transversal (`align-items`), na horizontal o principal
   (`justify-content`). Fosse sempre o transversal, a faixa horizontal não
   mudaria de lugar nenhum — itens da mesma altura já preenchem a linha. ── */
.item-list {
  --item-list-align: start;
  min-width: 0;
}
.item-list--align-center {
  --item-list-align: center;
}
.item-list--align-end {
  --item-list-align: end;
}
.item-list__title {
  margin: 0 0 .5rem;
  color: inherit;
  font-size: .9rem;
  font-weight: 600;
  text-align: var(--item-list-align);
}
.item-list__list {
  list-style: none;
  display: flex;
  gap: .5rem;
}
:where(.item-list--vertical) .item-list__list {
  flex-direction: column;
  align-items: var(--item-list-align);
}
:where(.item-list--horizontal) .item-list__list {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--item-list-align);
  gap: .75rem;
}
.item-list__item {
  min-width: 0;
}
.list-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  color: inherit;
  overflow-wrap: anywhere;
}
.list-item--link {
  opacity: .82;
  transition: opacity .12s;
}
@media (hover: hover) and (pointer: fine) {
  .list-item--link:hover {
    opacity: 1;
  }
}
.list-item__image {
  max-height: 2.5rem;
  width: auto;
}

/* Acordeão: o título vira o cabeçalho que abre e fecha. Presente no HTML em
   qualquer largura, e desmontado no desktop pelo CSS — assim ligar o acordeão
   não muda nada acima do celular. O indicador é desenhado (duas barras que
   viram `+` ou `−` conforme `[open]`) porque o traço precisa da mesma espessura
   em qualquer família de fonte do tema. */
.item-list__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 .5rem;
  cursor: pointer;
  list-style: none;
  color: inherit;
  font-size: .9rem;
  font-weight: 600;
}
:where(.item-list__summary)::-webkit-details-marker {
  display: none;
}
/* O indicador tem Aparência própria (parte `indicator`), então o cabeçalho sai
   de `:where()` nas regras que miram nele: cadeia de duas classes ficaria acima
   do seletor que o painel emite e o campo salvaria sem pintar. */
.item-list__indicator {
  position: relative;
  flex: none;
  width: .75rem;
  height: .75rem;
}
.item-list__indicator::before,
.item-list__indicator::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  margin-top: -.75px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .18s ease, opacity .18s ease;
}
.item-list__indicator::after {
  transform: rotate(90deg);
}
:where(.item-list--accordion[open]) > :where(.item-list__summary) .item-list__indicator::after {
  transform: rotate(0deg);
  opacity: 0;
}
/* A lista é alcançada por descendência, e não como filha direta: quando a
   peça declara papel de navegação, um `<nav>` entra entre o `<details>` e
   o `<ul>` para o leitor de tela ter um ponto de salto. A peça não aninha
   listas, então descendência aqui não tem outro alvo. */
@media (min-width: 768px) {
  :where(.item-list--accordion) > .item-list__summary {
    pointer-events: none;
    justify-content: var(--item-list-align);
  }
  :where(.item-list--accordion) > :where(.item-list__summary) .item-list__indicator {
    display: none;
  }
  :where(.item-list--accordion:not([open])) .item-list__list {
    display: flex;
  }
  /* `display` no filho não basta: navegador atual esconde o miolo do
     `<details>` fechado pelo próprio `::details-content`. Navegador que não
     conhece a pseudo ignora e continua valendo a regra de cima. */
  .item-list--accordion::details-content {
    content-visibility: visible;
    block-size: auto;
  }
}
@media (max-width: 767px) {
  .item-list--accordion {
    border-bottom: 1px solid var(--color-border);
  }
  :where(.item-list--accordion) > .item-list__summary {
    margin-bottom: 0;
    padding: .8rem 0;
  }
  :where(.item-list--accordion[open]) .item-list__list {
    padding: 0 0 .8rem;
  }
}

/* Assinatura sem linha divisória embutida: a separação é a borda da Aparência,
   senão desligar o controle deixaria a linha na tela do mesmo jeito. */
.footer-signature {
  min-width: 0;
}
.footer-signature p {
  margin: 0;
}
/* Abaixo de 1024px — celular E tablet — o rodapé vira uma coluna só, que é o
   pedido da designer para as duas larguras. */
@media (max-width: 1023px) {
  /* Assinatura e galerias centralizadas nas duas larguras estreitas. As peças
     não trazem alinhamento próprio: quem quiser outro põe pela Aparência, que
     vence este padrão. */
  .footer-signature { text-align: center; }
  /* Cada peça vira uma linha só, ocupando a largura: lado a lado numa tela
     estreita a assinatura e a galeria disputariam a mesma faixa. */
  .site-footer__composition {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }
  /* Em linha própria a marca não precisa da largura que a divide do vizinho —
     mantê-la travada em 20rem encostaria a marca na borda esquerda. Em
     compensação a altura deixa de vir do vizinho e passa a ser a da imagem, que
     sem teto ocuparia a largura inteira da tela. */
  .footer-brand { max-width: 100%; }
  .footer-brand__image { height: auto; max-height: 7rem; }
}

/* ── Botão flutuante do WhatsApp (settings globais `whatsapp_*`) — fixo no canto
   inferior direito. Fica na faixa de conteúdo, acima do dropdown da menubar
   (20) e abaixo de toda a casca — 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);
}
@media (hover: hover) and (pointer: fine) {
  .whatsapp-float:hover {
    background: #1faa53;
  }
}
@media (max-width: 767px) {
  .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: var(--layer-shell-backdrop);
  background: var(--color-overlay);
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--layer-shell-panel);
  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;
}
@media (hover: hover) and (pointer: fine) {
  .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: 767px) {
  .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;
  }
  /* No celular "Filtrar" e "Ordenar" são a MESMA decisão em duas metades: mesma
     altura de toque, mesma tipografia, mesma largura. Antes uma era botão com
     recuo próprio e a outra um rótulo colado num select menor — encostavam na
     direita com alturas diferentes. */
  /* Duas colunas de `minmax(0, 1fr)` em vez de dois itens flex: com flex, o
     tamanho intrínseco do <select> (a maior opção da lista) mandava na divisão
     e as metades saíam desiguais. O grid impõe a metade exata. */
  .listing-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: stretch;
  }
  .facets-toggle {
    display: inline-flex;
    min-width: 0;
    margin-right: 0;
    justify-content: center;
  }
  .search-sort {
    min-width: 0;
  }
  /* O rótulo continua nomeando o controle para leitor de tela; na tela ele
     cede o lugar ao próprio valor escolhido, que já diz a ordenação. */
  .search-sort__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* `min-width: 0` é o que torna as duas metades iguais: sem ele o tamanho
     mínimo automático do <select> é a maior opção da lista ("Ordem alfabética
     (A-Z)"), e essa largura sobrava para o botão de filtros. */
  .search-sort__select {
    width: 100%;
    min-width: 0;
  }
  .facets-toggle,
  .search-sort__select {
    min-height: 2.75rem;
    padding-block: 0;
    padding-inline: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    text-align-last: center;
  }

  /* 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). */
  :where(.listing-form[data-js]) .search-facets {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--layer-shell-panel);
    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;
  }
  :where(.listing-form[data-js]) .search-facets--open {
    transform: translateY(0);
  }
  .listing-form[data-js] .facets-head {
    display: flex;
  }
  @media (prefers-reduced-motion: reduce) {
    :where(.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);
}
@media (hover: hover) and (pointer: fine) {
  .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);
}
/* Link dentro de texto corrido segue o padrão de link, mas sobrescreve a
   decoração: já nasce pintado na cor de link, então mudar a cor não diria nada.
   O sublinhado é o único canal que sobra — e é o afordamento que o leitor
   espera de um link no meio de uma frase. */
.rich-text a,
.product-detail__description a {
  color: var(--color-primary);
  --hover-link-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  .rich-text a:hover,
  .product-detail__description a:hover {
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}

.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: 768px) and (max-width: 1023px) {
  .latest-articles__grid {
    grid-template-columns: repeat(
      var(--article-cols-tablet, 2),
      minmax(0, 1fr)
    );
  }
}
@media (min-width: 1024px) {
  .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: 768px) and (max-width: 1023px) {
  .testimonials__grid {
    grid-template-columns: repeat(
      var(--testimonial-cols-tablet, 2),
      minmax(0, 1fr)
    );
  }
}
@media (min-width: 1024px) {
  .testimonials__grid {
    grid-template-columns: repeat(
      var(--testimonial-cols-desktop, 3),
      minmax(0, 1fr)
    );
  }
}

/* Ritmo das regiões da PDP. Mora aqui, junto do ritmo da página, porque precisa
   vir depois dos defaults de margem que cada componente declara — em 0-1-0 quem
   decide o empate é a ordem, e o espaçamento entre blocos é decisão da região,
   não de cada bloco. A Aparência entra no fim do <head> e vence os dois. */
:where(.product-detail__info > [data-node-id]) + [data-node-id] {
  margin-top: 1rem;
}
:where(.product-detail__below > [data-node-id]) + [data-node-id] {
  margin-top: 2rem;
}

/* Ritmo genérico entre as raízes da página. `:where()` mantém especificidade
   zero: marginBlockStart/End do uso vence o fallback global, inclusive com 0. */
:where(#sf-main > [data-node-id]) {
  margin-block: 0;
}
:where(#sf-main > [data-node-id] + [data-node-id]) {
  margin-block-start: var(--section-space);
}