/* ==========================================================================
   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.
   ========================================================================== */

/* ==========================================================================
   Cascata: TUDO desta folha vive na cascade layer `sf-base`.
   A Aparência gerada pelo editor (`packages/theme-kit/src/appearance-css.ts`,
   injetada em `<style data-sf-node-styles>`), o CSS do tema do marketplace
   (`assets/theme.css`) e o `custom_css` do lojista ficam FORA de layer — e
   declaração fora de layer vence qualquer layer, independente de
   especificidade. É o que garante que um `.a .b` estrutural daqui nunca
   passe por cima de um valor escolhido no painel. `!important` desta folha
   continua vencendo tudo (dentro de layer ele fica ainda mais forte), por isso
   só existe em declaração de desligar (`display`, `transition` ou `animation`
   com `none`), e cada uma está listada, com o motivo, no teste
   `system-css-structure.test.ts`.

   O que fica fora da layer, antes dela: `@property` (registro de propriedade
   é global, não participa da cascata de layers). O conteúdo NÃO é reindentado
   de propósito — o bloco abre aqui e fecha na última linha do arquivo.
   `apps/storefront/src/rendering/system-css-structure.test.ts` cobra que a
   folha inteira está dentro da layer.
   ========================================================================== */
/* `--icon-size` não é token de tema: é o canal privado entre o snippet `icon` e
   as regras de `.icon`/`.icon--mask` (seção 3). 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;
}
/* Esmaecimento das bordas de um painel que rola (ver `.mega-menu__inner`). A
   animação ligada à rolagem só interpola comprimento registrado; `inherits:
   false` mantém o valor no painel que rola, sem descer para os filhos. */
@property --sf-scroll-fade-top {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --sf-scroll-fade-bottom {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@layer sf-base {

/* ==========================================================================
   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;
  --sf-page-block: 2rem;
  /* 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;

  /* Coração de Favoritos cheio. O vazio usa a cor do texto. */
  --color-favorite: #e11d48;

  /* 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, o aviso de consentimento
                 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;
  /* Aviso da casca (banner de consentimento de cookies): fica por cima das
     barras e por baixo de tudo que a pessoa abre — backdrop, folha, gaveta,
     menu e diálogo. Ao fechar a superfície, o aviso volta a aparecer. */
  --layer-shell-notice: 108;
  --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;

  /* Fluxos de sistema (carrinho lateral, checkout): cada variável nasce
     apontando pro token global, e a ponte (`snippets/theme-css-vars`) só a
     redeclara quando o marketplace escolheu um valor no grupo Carrinho ou
     Checkout. Setting vazio = o visual de sempre. A cor de texto do painel
     tem dois degraus (corpo e forte) porque um setting só cobre os dois. */
  --cart-drawer-bg: var(--color-surface);
  --cart-drawer-text-color: var(--color-text);
  --cart-drawer-text-color-strong: var(--color-text-strong);
  --cart-drawer-divider-color: var(--color-border);
  --cart-drawer-width: 30rem;
  --cart-fixed-shipping-notice-font-size: 0.875rem;
  --cart-fixed-shipping-notice-margin: 0.5rem;
  --checkout-bg: var(--color-bg);
  --checkout-surface: var(--color-surface);
  --checkout-accent: var(--color-primary);
  --checkout-accent-dark: var(--color-primary-dark);
  --checkout-on-accent: var(--color-on-primary);
  --checkout-back-color: var(--color-text-muted);
  --checkout-back-weight: 600;
  --checkout-secure-color: var(--color-text-muted);
  --checkout-secure-weight: 400;
  --checkout-summary-bg: var(--checkout-surface);
  --checkout-field-border: var(--color-border-input);
  --checkout-field-focus: var(--checkout-accent);
  --checkout-field-focus-ring: var(--color-focus-ring);
}

/* ── 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)); }
:where(.section-heading--center) .section-heading__subtitle { margin-inline: auto; }
:where(.section-heading--right) .section-heading__subtitle { margin-left: auto; }

/* ── Lista editorial de cards ─────────────────────────────────────────── */
.image-card-list { padding-block: 0; }
.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; }
:where(.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) {
	.brand-story__main { grid-template-columns: 1fr; }
	:where(.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) {
	.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;
}
/* Scrollbar fina e na paleta do tema (decisão do redesenho do checkout,
   aplicada ao tema inteiro — a barra padrão destoava da loja). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-input) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: var(--color-border-input);
  border-radius: var(--radius-pill);
}
@media (hover: hover) and (pointer: fine) {
  *::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
  }
}
*::-webkit-scrollbar-track {
  background: transparent;
}
/* Componente sem nada para mostrar: a Aparência do node não pode reabrir a caixa. */
[data-node-id][hidden] {
  display: none !important;
}
/* 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%;
  /* Recalcula aqui porque a largura das páginas internas redefine
     `--container-width` só no miolo; o valor herdado do :root seria o da casca. */
  --sf-screen-inset: max(
    var(--sf-page-gutter),
    calc((100vw - var(--container-width)) / 2 + var(--sf-page-gutter))
  );
}
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);
}

/* Área de toque. Em tela de toque, controle pequeno ganha uma camada invisível
   centrada que chega a 44px nos dois eixos, sem mudar o desenho: o ícone de
   24px do cabeçalho continua com 24px, só o dedo passa a acertar. Controle que
   já passa de 44px não muda (a camada nunca encolhe abaixo da caixa). A lista é
   de controles cujo desenho não deve crescer; onde a fileira é colada demais
   para a camada caber (pontos do carrossel, linhas de filtro), quem cresce é o
   espaçamento, na regra do próprio componente. */
@media (pointer: coarse) {
  :where(
      .header__action,
      .header__drawer-close,
      .facets-head__close,
      .variation-option,
      .product-support__share,
      .carousel__dot
    ) {
    position: relative;
  }
  :where(
      .header__action,
      .header__drawer-close,
      .facets-head__close,
      .variation-option,
      .product-support__share,
      .carousel__dot
    )::after {
    content: "";
    position: absolute;
    inset: min(0px, (100% - 2.75rem) / 2);
  }
}

/* Ícone do snippet `icon`: herda a cor via currentColor, alinha ao texto. */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
/* 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 diretório colorida: o arquivo é desenhado como imagem, com as
   cores dele, no mesmo tamanho da máscara. Não acompanha a cor do texto. */
.icon--image {
  width: var(--icon-size, 1em);
  height: var(--icon-size, 1em);
  object-fit: contain;
}
/* 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;
}
/* O rótulo do campo é área exposta na Aparência (parte `label` do formulário
   de contato): a regra fica em (0,0,1) pra nunca vencer o painel. */
:where(.form-field, .auth-field) > :is(span, label) {
  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;
}
/* Mesmo motivo: o textarea é a parte `field` — abaixo da Aparência, e ainda
   acima do `textarea { font: inherit }` global por ordem no arquivo. */
:where(textarea.form-control),
:where(.form-field, .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);
}
:where(.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;
  /* `--btn-height` é a "Altura personalizada" do Botão (primitive-button). */
  min-height: var(--btn-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%;
}
/* "Toda a largura" do Botão por dispositivo, em faixas que não se sobrepõem. */
@media (min-width: 1024px) {
  :where(.primitive-button--full-desktop) {
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :where(.primitive-button--full-tablet) {
    width: 100%;
  }
}
@media (max-width: 767px) {
  :where(.primitive-button--full-mobile) {
    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);
}
:where(.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;
}
/* Aviso do clamp no máximo — o engine cria o elemento quando o valor pedido
   estoura o estoque (`setQuantityHint`); mesma linguagem do `.field-error`. */
.quantity-control__hint {
  flex-basis: 100%;
  width: 100%;
  margin-top: 0.35rem;
  color: var(--color-error);
  font-size: 0.85rem;
  line-height: 1.35;
  font-weight: 600;
}

/* ==========================================================================
   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;
}
/* A barra utilitária hospeda superfícies (a folha/dropdown de CEP) que
   precisam vencer o cabeçalho, e a Aparência pode abrir contexto de
   empilhamento dentro dela a qualquer momento — fundo ponta a ponta emite
   `isolation: isolate`, e opacidade ou transform fariam o mesmo. Contexto
   aberto no meio prende o z-index da superfície lá dentro. Por isso a Seção
   superior INTEIRA já vive na camada dela (acima do cabeçalho, que nunca a
   sobrepõe no fluxo): o que quer que se abra ali dentro fica por cima. */
.site-topbar {
  position: relative;
  z-index: var(--layer-shell-topbar);
}
.site-topbar:has(> .site-topbar-shell--sticky) {
  position: sticky;
  top: 0;
}
/* O modo que se esconde continua sendo uma barra sticky independente. O Alpine
   local mede a altura para o cabeçalho sticky ocupar o topo quando esta barra
   sai; o transform não muda o fluxo e, portanto, não realimenta o scroll. */
.site-topbar:where(:has(> .site-topbar-shell--hide-on-scroll)) {
  position: sticky;
  top: 0;
}
.site-topbar:where(:has(> .site-topbar-shell--hide-on-scroll[data-scroll-hidden='true'])) {
  transform: translateY(-100%);
}
.site-shell:has(> .site-topbar > .site-topbar-shell--sticky):has(> .site-header--sticky) {
  display: block;
  position: sticky;
  top: 0;
  z-index: var(--site-shell-layer, var(--layer-shell-topbar));
}
/* Com a folha de CEP aberta numa das barras, o invólucro (contexto único das
   duas fixadas juntas) sobe para a camada de painel — ver `.site-header` com
   o CEP aberto. */
.site-shell:where(:has(.header__location-trigger[aria-expanded='true'])) {
  --site-shell-layer: var(--layer-shell-panel);
}
/* 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):not(:has(> .site-header--hide-on-scroll))
  > .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` na barra: quem garante que o backdrop e a folha de CEP vencem
   o cabeçalho é a camada da Seção superior (`.site-topbar`, acima). `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: flex;
  flex-wrap: wrap;
  align-items: stretch;
  min-height: inherit;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--sf-page-gutter);
}
/* Cada zona é uma caixa com seus itens lado a lado, e as três dividem a largura.
   As laterais crescem em partes iguais para o centro cair no meio da faixa
   mesmo quando um lado tem mais texto que o outro; o centro ocupa só o que
   precisa. Zona sem item sai do fluxo, senão ela consumiria a sua parte da
   largura e empurraria as outras duas para dentro. */
.utility-bar__zone {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1rem;
}
.utility-bar__zone:empty {
  display: none;
}
.utility-bar__zone--left {
  flex: 1 1 0;
  justify-content: flex-start;
}
.utility-bar__zone--center {
  flex: 0 1 auto;
  justify-content: center;
}
.utility-bar__zone--right {
  flex: 1 1 0;
  justify-content: flex-end;
}
.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;
}
/* Abaixo de 1024px as três zonas não cabem numa linha só, então o centro desce
   para a sua e as laterais dividem a de cima. As laterais trocam a base zero
   pela largura do próprio conteúdo: com base zero as três somam menos que a
   linha, cabem juntas, e as laterais ficam sem nada para crescer — o centro
   engolia a faixa inteira. As classes de zona no item continuam existindo para o
   destaque lateral e para a Aparência; posicionar deixou de ser papel delas. */
@media (max-width: 1023px) {
  .utility-bar__zone--left,
  .utility-bar__zone--right {
    flex: 1 1 auto;
  }
  .utility-bar__zone--center {
    flex: 1 1 100%;
    order: 3;
  }
}
.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;
}
/* A cor do destaque só escapa até a borda da tela pelo item da ponta da zona.
   Solto no meio, o rastro de 50vw cobriria o vizinho ao lado. */
:where(.utility-bar__zone--left) > .utility-bar__item--highlight:first-child {
  box-shadow: -50vw 0 0 var(--utility-item-bg, var(--color-text-strong));
}
:where(.utility-bar__zone--right) > .utility-bar__item--highlight:last-child {
  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--hide-on-scroll {
  transition: transform 0.2s ease;
}
.site-header--hide-on-scroll:where([data-scroll-hidden='true']) {
  transform: translateY(-100%);
}
.site-header--hide-on-scroll:where(:focus-within, :has([aria-expanded='true'])) {
  transition: none;
}
/* Com a folha/dropdown de CEP aberta, a barra que a hospeda sobe para a camada
   de painel. Overlay e painel do CEP vivem presos no contexto da barra (100 no
   cabeçalho, 105 na Seção superior), e por isso perdiam para o que está acima
   dela na raiz: a Seção superior (105) passava por cima do escurecimento, e o
   aviso de cookies (108) cobria a folha no celular. Na camada de painel a
   superfície aberta fica por cima dos dois; fechada, a ordem normal volta (a
   Seção superior fixada cobre o cabeçalho que rola para fora). No arranjo em
   que as duas barras são fixadas juntas quem sobe é o invólucro, contexto
   único das duas (as barras ficam estáticas e ignoram z-index). */
.site-header:where(:has(.header__location-trigger[aria-expanded='true'])),
.site-topbar:where(:has(.header__location-trigger[aria-expanded='true'])) {
  z-index: var(--layer-shell-panel);
}
.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`. */
/* O espaço configurado é o que separa um bloco do vizinho AO LADO, e por isso
   entra só na coluna. Quando a barra passa de uma linha, quem separa as linhas é
   um respiro fixo: o campo fala de composição horizontal, e deixá-lo mudar a
   altura da barra no celular faria um controle mexer em duas decisões. */
.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;
  row-gap: 0.5rem;
  /* Um token por faixa, escrito pelo componente (`header-main.liquid`). Cada
     faixa cai no token geral quando o dela não foi escrito — é o que deixa um
     tema declarar só `--header-main-gap` e valer nas três larguras. */
  column-gap: var(--header-main-gap-mobile, var(--header-main-gap, 8px));
}
@media (min-width: 768px) {
  .header-main__inner {
    column-gap: var(--header-main-gap-tablet, var(--header-main-gap, 8px));
  }
}
.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 {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  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-main__nav-indicator {
  display: inline-flex;
  align-items: center;
}

.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;
}
/* `contain` reduz o desenho até caber na altura máxima, e aí ele fica menor que
   a largura escolhida. A sobra é repartida por `object-position`, e é ela que o
   alinhamento do bloco comanda — sem isso, logo quadrado ou alto fica sempre no
   meio da caixa, sem jeito de encostar num lado. */
.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;
  object-position: var(--header-logo-object, center);
}
/* Degrau do tablet: sem as variáveis -tablet (bloco sem ajuste próprio), o
   fallback cai nas do celular — o visual que sempre existiu nessa faixa. */
@media (min-width: 768px) and (max-width: 1023px) {
  .header-main__item--logo {
    justify-content: var(--header-logo-justify-tablet, var(--header-logo-justify, center));
  }
  .header__logo-img {
    width: min(var(--header-logo-tablet-width, var(--header-logo-mobile-width, 120px)), 42vw);
    max-width: var(--header-logo-tablet-width, var(--header-logo-mobile-width, 120px));
    object-position: var(--header-logo-object-tablet, var(--header-logo-object, center));
  }
}
.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.

   O desenho mede 1em, então o corpo da fonte da caixa é quem o dimensiona: um
   valor só governa sprite, máscara e webfont. O piso de 24px é o tamanho que as
   ações do cabeçalho sempre tiveram; quem manda um tamanho próprio escreve
   `--header-icon-size` na própria caixa. */
.header__action-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--header-icon-size, 24px);
  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.
   Mesmo nome de variável da caixa de ação do cabeçalho, ao lado da cor que já
   compartilha o prefixo: o item da barra desenha os dois tipos de caixa, e um
   nome por caixa faria o mesmo campo do lojista ter dois destinos. O piso muda,
   porque a barra é uma faixa de texto miúdo e o cabeçalho não. */
.utility-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--header-icon-size, 14px);
}
:where(.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 {
  --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 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
/* O texto aparece por padrão em toda largura; quem decide onde ocultar é o
   toggle por dispositivo do block, marcado pelas classes --hide-text-<d|t|m>.
   (--icon-only acima é vocabulário antigo, mantido pra CSS custom de tema.) */
@media (max-width: 767px) {
  :where(.header__action--hide-text-m, .header__account--hide-text-m) .header__action-label {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :where(.header__action--hide-text-t, .header__account--hide-text-t) .header__action-label {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  :where(.header__action--hide-text-d, .header__account--hide-text-d) .header__action-label {
    display: none !important;
  }
}
/* Ação só com ícone não tem preenchimento em volta: o ícone já é a área de
   toque (a do desktop fica junto do preenchimento de lá, mais abaixo). */
@media (max-width: 767px) {
  .header__action--hide-text-m,
  :where(.header__account--hide-text-m, .header__location--hide-text-m) .header__action {
    padding: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .header__action--hide-text-t,
  :where(.header__account--hide-text-t, .header__location--hide-text-t) .header__action {
    padding: 0;
  }
}
/* Rótulo visível em tela estreita não pode alargar a grade do header: clampa
   com reticências, como o valor do CEP já faz. */
@media (max-width: 1023px) {
  .header__action-label {
    max-width: 9rem;
  }
  .header__action-label:where(:not(.header__action-label--stacked)) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .header__action-label--stacked > :where(span) {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.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;
}
/* Aviso não visto na conta (hoje, os avisos do afiliado): um ponto no ícone da conta. */
.header__dot {
  position: absolute;
  top: -0.1rem;
  right: -0.15rem;
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

/* 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;
}
/* O campo é `type="search"` pela semântica (teclado do celular, papel do
   controle), mas o botão de limpar que o Chrome desenha sozinho encosta no
   botão da lupa e vira dois "x" na mesma moldura. Quem limpa é a lupa/ESC. */
.header-search__input::-webkit-search-cancel-button,
.header-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: 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. A escolha
   da pessoa vem da Aparência (parte `field::placeholder`), que vence este
   `:where()` de especificidade zero. */
:where(.header-search__input)::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);
  max-height: min(70dvh, 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 — abre pelo gatilho em qualquer largura (ver header-account.liquid). */
.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);
}
/* Nome da lista que corta com reticências e a contagem de produtos à direita,
   na navegação da conta. */
.account-lists__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-lists__count {
  flex: none;
  color: var(--color-text-muted);
  font-size: var(--type-meta-size);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.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);
  }
}
/* Depois da base: com a mesma especificidade, a ordem decide, e o `display:
   block` da base anulava a linha de ícone e rótulo. */
.header__dropdown-logout--with-icon {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
/* No celular o menu abre pelo mesmo botão; o limite de largura segura o painel
   dentro da tela quando o gatilho não está encostado na borda direita. */
.header__dropdown {
  max-width: calc(100vw - 2 * var(--sf-screen-inset, 1rem));
}

/* 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--anim {
  transition: transform 200ms ease-out;
}
.header__drawer--out {
  transform: translateX(-100%);
}
.header__drawer--in {
  transform: translateX(0);
}
.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 {
  --type-label-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);
  overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
  .drawer-nav__link:hover {
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
/* Ícone do link escrito no tema, na linha da gaveta; o desenho segue o texto. */
.drawer-nav__icon {
  display: inline-flex;
  margin-inline-end: 0.5rem;
  color: var(--color-text-muted);
  font-size: 1.1em;
  vertical-align: -0.15em;
}
.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) {
  .header__drawer--anim {
    transition-duration: 1ms;
  }
  .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.
   O bloco rótulo+valor aparece por padrão em toda largura; o toggle por
   dispositivo do block (--hide-text-<d|t|m>) decide onde ocultar. */
.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: flex;
  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: assume em tablet/celular SOMENTE onde o bloco
   rótulo+valor está oculto pelo toggle. Só o CEP, curto e com ellipsis pra
   nunca empurrar a grade do header. Nunca aparece no desktop. */
.header__location-value-short {
  display: none;
  font-size: 0.72rem;
  font-weight: 700;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9ch;
}
@media (max-width: 767px) {
  :where(.header__location--hide-text-m) .header__location-text {
    display: none !important;
  }
  :where(.header__location--hide-text-m)
    .header__location-value-short:where(:not(:empty)):where(:not(.header-main__inner--tight *)) {
    display: inline;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :where(.header__location--hide-text-t) .header__location-text {
    display: none !important;
  }
  :where(.header__location--hide-text-t)
    .header__location-value-short:where(:not(:empty)):where(:not(.header-main__inner--tight *)) {
    display: inline;
  }
}
@media (min-width: 1024px) {
  :where(.header__location--hide-text-d) .header__location-text {
    display: none !important;
  }
}
/* Faixa sem espaço para a logo inteira (marcada pelo componente de localização): o slot
   compacto do CEP some primeiro (as regras que o mostram acima excluem a faixa apertada
   e o slot vazio, e a regra base o esconde) e, se ainda faltar, a logo encolhe até a
   caixa dela. */
:where(.header-main__inner--tight) .header__logo,
:where(.header-main__inner--tight) .header__logo-img {
  max-width: 100%;
}
: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;
  /* Popover, e não panel: no cabeçalho ele disputa com o dropdown da conta
     (menu, 130) e com o logo/menubar posicionados; é a superfície que o
     comprador acabou de abrir, então vence as outras da mesma barra. */
  z-index: var(--layer-shell-popover);
  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:where(: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) {
  .header-main {
    min-height: 4.5rem;
  }
  .header-main__inner {
    padding: 0 var(--sf-page-gutter);
    flex-wrap: nowrap;
    column-gap: var(--header-main-gap, 16px);
  }
  .header-main__item {
    order: 0;
  }
  .header-main__item--logo {
    flex: 0 0 auto;
    justify-content: var(--header-logo-justify-desktop, 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);
    object-position: var(--header-logo-object-desktop, center);
  }
  .header__logo-text {
    max-width: 18rem;
  }
  .header__action {
    padding: 0.45rem 0.6rem;
  }
  /* Só o ícone: sem preenchimento em volta, como os temas sempre ajustavam à
     mão. Vem depois do preenchimento do desktop para empatar e vencer. */
  .header__action--hide-text-d,
  :where(.header__account--hide-text-d, .header__location--hide-text-d) .header__action {
    padding: 0;
  }
  /* 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: painel vira dropdown ancorado (sem overlay/sheet); o slot compacto
     nunca aparece no desktop. A visibilidade do bloco rótulo+valor é decidida
     pelas classes --hide-text-* junto das regras do componente. */
  .header__location-value-short {
    display: none;
  }
  .header__location-overlay {
    display: none;
  }
  .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);
  }
  /* Na Barra utilitária o painel ancora pelo lado da zona do item. O padrão do
     cabeçalho (ancorado pela direita) serve ao CEP entre as ações da ponta
     direita; num item encostado na esquerda da barra ele empurra o painel pra
     fora da tela. Estas regras vêm DEPOIS da geral de propósito: mesma
     especificidade, quem decide é a ordem. */
  :where(.utility-bar) .header__location-panel {
    right: auto;
    left: 0;
  }
  :where(.utility-bar__item--right) .header__location-panel {
    right: 0;
    left: auto;
  }
}

/* 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 o node só precisa ser âncora do painel absoluto — SEM
   z-index: um contexto próprio aqui prenderia o overlay (z negativo) dentro do
   node e o poria acima da barra do logo. Sem ele, o overlay resolve no contexto
   do `.site-header` e escurece apenas o conteúdo da página. */
:where(.site-header) [data-node-id]:where(:has(.menubar__departments[aria-expanded="true"], .nav-dropdown-shell--panel > [aria-expanded="true"])) {
  position: relative;
}
/* 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;
}
/* Qualquer gatilho de gaveta aberto libera o overflow, senão a gaveta nasce
   cortada na borda da barra. O :where() mantém a regra em (0,1,0). */
.menubar__inner:has(.menubar__dropdown-toggle[aria-expanded="true"]),
.menubar__inner:has(.menubar__departments[aria-expanded="true"]),
.menubar__inner:has(:where(.nav-dropdown-shell > [aria-expanded="true"])) {
  overflow-x: visible;
}
.menubar__group {
  display: flex;
  align-items: stretch;
  /* O setting "Espaço entre os itens" precisa agir entre VIZINHOS, e os
     vizinhos moram dentro do grupo — no miolo a variável só separa o grupo da
     esquerda do da direita, trecho que o `space-between` já governa. */
  gap: var(--menubar-gap, 4px);
  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);
}
.nav-dropdown-shell {
  position: relative;
  display: flex;
}
/* Coluna de flex, e não lista solta, porque "Espaço entre" da área Menu vira
   `gap` — em lista de blocos o gap não teria onde pegar. */
.nav-dropdown {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 100%;
  left: 0;
  z-index: var(--layer-shell-menu);
  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);
}
.nav-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) {
  .nav-dropdown__link:hover {
    background: var(--color-bg-alt);
  }
}
/* O desenho sai em 1em, então o tamanho dele é o `font-size` desta caixa — é o
   que a área "Ícone do item" configura. */
.nav-dropdown__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.menu-anim--slide {
  --menu-anim-y: -0.5rem;
}
.menu-anim-enter {
  transition:
    opacity 150ms ease-out,
    transform 150ms ease-out;
}
.menu-anim-enter-start {
  opacity: 0;
  transform: translateX(var(--menu-anim-x, 0)) translateY(var(--menu-anim-y, 0));
}
.menu-anim-enter-end {
  opacity: 1;
  transform: translateX(var(--menu-anim-x, 0)) translateY(0);
}
.menu-anim-leave {
  transition:
    opacity 120ms ease-in,
    transform 120ms ease-in;
}
.menu-anim-leave-start {
  opacity: 1;
  transform: translateX(var(--menu-anim-x, 0)) translateY(0);
}
.menu-anim-leave-end {
  opacity: 0;
  transform: translateX(var(--menu-anim-x, 0)) translateY(var(--menu-anim-y, 0));
}
.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;
  /* O overlay vive DENTRO do contexto do cabeçalho (`.site-header`, 100), então
     um z-index negativo o põe atrás de todo conteúdo das barras — logo, busca e
     menubar ficam legíveis — enquanto o contexto inteiro segue acima da página:
     o escurecimento continua cobrindo o conteúdo rolável. Na camada da casca
     ele venceria as próprias barras e escurecia o cabeçalho junto. */
  z-index: -1;
  border: 0;
  background: var(--color-overlay);
  cursor: default;
}
.mega-menu {
  --menu-anim-x: -50%;
  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);
  max-height: min(75dvh, 48rem);
}
.mega-menu__inner {
  max-width: var(--container-width);
  max-height: inherit;
  margin: 0 auto;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Painel com mais conteúdo do que a altura escolhida: a borda de baixo
   esmaece enquanto há o que rolar, e a de cima depois que a rolagem começa.
   Cortado rente, o painel parecia terminar ali. A animação acompanha a
   rolagem do próprio painel; sem rolagem não há linha do tempo e nada
   esmaece. Navegador sem suporte mostra o painel como antes. */
@supports (animation-timeline: scroll()) {
  .mega-menu__inner {
    mask-image: linear-gradient(
      to bottom,
      transparent,
      #000 var(--sf-scroll-fade-top),
      #000 calc(100% - var(--sf-scroll-fade-bottom)),
      transparent
    );
    animation: sf-scroll-fade linear both;
    animation-timeline: scroll(self);
  }
}
@keyframes sf-scroll-fade {
  0% {
    --sf-scroll-fade-top: 0px;
    --sf-scroll-fade-bottom: 3rem;
  }
  6% {
    --sf-scroll-fade-top: 2rem;
  }
  94% {
    --sf-scroll-fade-bottom: 3rem;
  }
  100% {
    --sf-scroll-fade-top: 2rem;
    --sf-scroll-fade-bottom: 0px;
  }
}
.mega-menu__groups-head,
.mega-menu__sellers-head,
.mega-menu__brands-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.mega-menu__groups-head h2,
.mega-menu__sellers-head h2,
:where(.mega-menu__brands-head) h2 {
  margin: 0;
  font-size: 1rem;
}
.mega-menu__groups-head a,
.mega-menu__sellers-head a,
:where(.mega-menu__brands-head) a {
  flex: none;
  font-size: 0.82rem;
  font-weight: 600;
}
/* Grade de grupos: o mesmo desenho no mega menu de departamentos e no painel em
   colunas do Link e do Menu suspenso. "Uma por grupo" (`auto`) cabe quantos
   grupos houver, com largura mínima para o título não quebrar letra a letra. */
.mega-menu__groups {
  display: grid;
  gap: 1.25rem 2rem;
  padding-top: 0.8rem;
}
.menubar__panel .mega-menu__groups {
  padding-top: 0;
}
/* `auto-fill` guarda as colunas vazias: com poucos grupos cada um fica na
   largura de uma coluna, sem esticar até o painel inteiro (e sem banner do
   tamanho de meio painel). */
.mega-menu__groups--auto {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.mega-menu__groups--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mega-menu__groups--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mega-menu__groups--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.link-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
/* Ícone sai pequeno, ao lado do que vem abaixo; banner ocupa a coluna. O
   enquadramento é do System, a caixa é da área "Imagem do grupo". */
.link-group__image {
  display: block;
  overflow: hidden;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}
.link-group__image img {
  display: block;
  width: 100%;
  height: 100%;
}
.link-group__image--icon {
  width: 2.75rem;
  height: 2.75rem;
}
.link-group__image--icon img {
  object-fit: contain;
}
.link-group__image--banner {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.link-group__image--banner img {
  object-fit: cover;
}
.link-group__title {
  display: inline-block;
  margin-bottom: 0.3rem;
  color: var(--color-text-strong);
  font-size: 0.92rem;
  font-weight: 700;
}
.link-group__links {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-group__link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  white-space: nowrap;
}
.link-group__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) and (pointer: fine) {
  .link-group__link:hover {
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
.link-group__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
/* Painel em colunas do Link e do Menu suspenso: a casca do mega menu, presa à
   barra e não ao item. A faixa invisível acima dele cobre o vão entre o item e o
   painel, para o mouse não sair da casca no caminho e fechar o menu. */
.nav-dropdown-shell--panel {
  position: static;
}
.menubar__panel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: 0.75rem;
}
.mega-menu__sellers,
.mega-menu__brands {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
}
.mega-menu__seller-list,
.mega-menu__brand-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,
:where(.mega-menu__brand-list)::-webkit-scrollbar {
  display: none;
}
.mega-menu__seller,
.mega-menu__brand {
  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);
  }
  :where(.mega-menu__brand):hover {
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
.mega-menu__seller-logo,
.mega-menu__brand-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,
:where(.mega-menu__brand-logo) img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mega-menu__seller-name,
.mega-menu__brand-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);
  }
}
/* Segunda imagem no hover (`image_hover_swap`). A secundária fica ABSOLUTA
   sobre a capa, no mesmo enquadramento (`object-fit` herdado da classe base,
   altura da capa via inset) e invisível; a capa continua definindo a altura,
   então nenhum salto de layout. A troca em si é o crossfade abaixo — só com
   ponteiro fino: em toque a capa fica fixa. Foco por teclado troca junto, como
   todo hover da Aparência (`appearance-css.ts`). */
.product-card__image--secondary {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .product-card--image-swap:hover .product-card__image--secondary,
  .product-card--image-swap:focus-within .product-card__image--secondary {
    opacity: 1;
  }
}
/* Com as cores no card, a foto de cada cor ocupa a capa: a segunda imagem sai
   da frente enquanto o mouse ou o foco estão nas cores, e depois que a cor
   escolhida trouxe foto própria (a segunda imagem é da cor de exibição). */
@media (hover: hover) and (pointer: fine) {
  .product-card--image-swap:has(
      [data-card-colors]:hover,
      [data-card-colors]:focus-within,
      [data-card-color][aria-pressed="true"][data-card-color-image]
    )
    .product-card__image--secondary {
    opacity: 0;
  }
}
.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;
}
/* O pé do card (preço, parcelas, loja e ação) fica no fundo, e a sobra de
   altura entra entre o título e o preço. Cards da mesma fileira têm a mesma
   altura; sem o espaçador, um título de uma linha ou um card sem marca subiria
   o preço e deixaria o vizinho desalinhado. O espaçador vem antes do bloco
   comercial e da ação pela ordem visual, sem mexer na ordem de leitura. */
.product-card__body::before {
  content: "";
  flex: 1 1 auto;
  order: 1;
}
.product-card__commercial,
:where(.product-card__body > .product-card__action) {
  order: 2;
}
.product-card__commercial {
  display: flex;
  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;
  flex-direction: column;
  align-items: flex-start;
}
: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__compare-placeholder,
.product-card__installments--placeholder,
.product-card__badges--below-placeholder,
.product-card__badges--content-placeholder {
  display: none;
}
/* A reserva nasce somente quando a mesma faixa tem a linha opcional. Assim a
   posição do preço e da ação fica comum nos dados mistos, sem abrir espaço em
   listas onde nenhum produto traz aquele conteúdo. */
:where(.product-grid, .product-related__track, .carousel__track):where(
    :has(.price--compare:not(.product-card__compare-placeholder))
  )
  .product-card__compare-placeholder {
  display: block;
  order: -1;
  visibility: hidden;
}
:where(.product-grid, .product-related__track, .carousel__track):where(
    :has(.product-card__installments:not(.product-card__installments--placeholder))
  )
  .product-card__installments--placeholder {
  display: -webkit-box;
  visibility: hidden;
}
:where(.product-grid, .product-related__track, .carousel__track):where(
    :has(.product-card__badges--below:not(.product-card__badges--below-placeholder))
  )
  .product-card__badges--below-placeholder,
:where(.product-grid, .product-related__track, .carousel__track):where(
    :has(.product-card__badges--content:not(.product-card__badges--content-placeholder))
  )
  .product-card__badges--content-placeholder {
  display: flex;
  min-height: 1.45rem;
  visibility: hidden;
}
.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:where(.btn--primary) {
  --card-action-bg-preset: var(--color-primary);
  --card-action-fg-preset: var(--color-on-primary);
}
.product-card__action:where(.btn--secondary) {
  --card-action-bg-preset: var(--color-action-secondary);
  --card-action-fg-preset: var(--color-surface);
}
.product-card__action:where(.btn--outline),
.product-card__action:where(.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);
  }
}
/* 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) {
  :where(.product-card--action-mobile-hidden) .product-card__action {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :where(.product-card--action-tablet-hidden) .product-card__action {
    display: none;
  }
}
@media (min-width: 1024px) {
  :where(.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;
}
/* Ação sobre a imagem: a moldura é a caixa de referência e a ação fica no pé da
   foto, fora do fluxo, então o card tem a mesma altura com ou sem ela. Os selos
   de baixo da imagem sobem pelo espaço da ação (`--card-action-overlay-space`),
   e o espaço volta a zero onde a ação não aparece: faixa oculta, ou desktop com
   "Ao passar o mouse" fora do hover. */
.product-card__media-frame {
  position: relative;
}
.product-card__action-overlay {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  left: 0.5rem;
  z-index: 3;
}
:where(.product-card__action-overlay) .product-card__action {
  overflow: hidden;
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Card estreito (carrossel no celular): a foto tem pouco mais de 100px de
   largura, e o botão em duas linhas cobriria metade dela. Uma linha, letra de
   rótulo e folga lateral curta; a altura mínima de toque continua a do botão. */
@media (max-width: 767px) {
  .product-card__action-overlay {
    right: 0.375rem;
    bottom: 0.375rem;
    left: 0.375rem;
  }
  :where(.product-card__action-overlay) .product-card__action {
    padding-inline: 0.5rem;
    font-size: var(--type-label-size, 0.875rem);
  }
}
:where(.product-card--action-at-over_image) {
  --card-action-overlay-space: 3.5rem;
}
@media (max-width: 767px) {
  :where(.product-card--action-mobile-hidden) {
    --card-action-overlay-space: 0rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :where(.product-card--action-tablet-hidden) {
    --card-action-overlay-space: 0rem;
  }
}
@media (min-width: 1024px) {
  :where(.product-card--action-desktop-hidden) {
    --card-action-overlay-space: 0rem;
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  :where(.product-card--action-desktop-hover) {
    --card-action-overlay-space: 0rem;
  }
  :where(.product-card--action-desktop-hover.product-card--action-at-over_image):hover,
  :where(.product-card--action-desktop-hover.product-card--action-at-over_image):focus-within {
    --card-action-overlay-space: 3.5rem;
  }
}
/* "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) {
  :where(.product-card--action-desktop-hover) .product-card__action {
    visibility: hidden;
    pointer-events: none;
  }
  :where(.product-card--action-desktop-hover):hover .product-card__action,
  :where(.product-card--action-desktop-hover):focus-within .product-card__action {
    visibility: visible;
    pointer-events: auto;
  }
}
/* 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:where(.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;
  }
  :where(.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;
  }
  :where(.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)));
  }
  :where(.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:where(.product-card--action-reveal-lift):hover,
  .product-card--action-desktop-hover:where(.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;
  }
  /* `.is-measuring` suspende a degradação: o JS mede a altura de repouso do
     card com o hover já ativo, e a ação em fluxo contaminaria a medida — é o
     min-height do slide que sai dela. */
  .carousel__viewport
    .product-card--action-reveal-lift:hover:not(.is-lifted):not(.is-measuring)
    .product-card__action,
  .carousel__viewport
    .product-card--action-reveal-lift:focus-within:not(.is-lifted):not(.is-measuring)
    .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):not(.is-measuring)
    .product-card__action,
  .carousel__viewport
    .product-card--action-at-before_price.product-card--action-reveal-lift:focus-within:not(.is-lifted):not(.is-measuring)
    .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);
  }
  :where(.product-card--action-at-before_price.product-card--action-reveal-lift):hover .product-card__action,
  :where(.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)));
  }
  :where(.product-card--action-at-after_content.product-card--action-reveal-lift):hover .product-card__action,
  :where(.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;
  }
  /* O salto precisa chegar até a RAIZ do node: fundo ponta a ponta dá ao node
     `isolation: isolate` (andaime da Aparência), que prende o z-index do card
     dentro da seção — e a seção seguinte no documento pinta por cima do que
     desceu (o botão revelado saía cortado). `:where()` mantém a regra em
     (0,1,0), dentro do teto da guarda de especificidade. */
  [data-node-id]:where(
      :has(.product-card--action-reveal-lift:hover),
      :has(.product-card--action-reveal-lift:focus-within),
      :has(.product-card--action-reveal-lift.is-lifted)
    ) {
    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,
  :where(.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;
}
/* Cores do produto (`show_color_options`). A bolinha é a cor cadastrada; o
   anel do escolhido usa a cor da superfície por dentro para separar a bolinha
   clara do fundo claro. A área de toque passa da bolinha pelo `::after`. Sem
   `overflow`: ele cortaria o anel e o foco. */
.product-card__colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  min-height: 1.75rem;
  margin-top: 0.6rem;
  padding-inline: 0.2rem;
}
.product-card__colors--placeholder {
  display: none;
}
:where(.product-grid, .product-related__track, .carousel__track):where(
    :has(.product-card__colors:not(.product-card__colors--placeholder))
  )
  .product-card__colors--placeholder {
  display: flex;
  visibility: hidden;
}
.product-card__color {
  position: relative;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  border-radius: 999px;
  background: var(--card-color, var(--color-bg-alt));
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.product-card__color::after {
  content: '';
  position: absolute;
  inset: -0.3rem;
}
/* No celular o card tem ~150 px úteis: com o espaço de computador a quinta cor
   e o +N quebravam linha. A área de toque encolhe junto para não sobrepor a da
   vizinha (18 px + 2 × 3 px). */
@media (max-width: 767px) {
  .product-card__colors {
    gap: 0.375rem;
  }
  .product-card__color::after {
    inset: -0.1875rem;
  }
}
.product-card__color--unavailable {
  background:
    linear-gradient(
      to top left,
      transparent calc(50% - 0.75px),
      color-mix(in srgb, var(--color-text) 60%, transparent) 50%,
      transparent calc(50% + 0.75px)
    ),
    var(--card-color, var(--color-bg-alt));
}
@media (hover: hover) and (pointer: fine) {
  .product-card__color:where(:hover) {
    box-shadow:
      0 0 0 2px var(--color-surface),
      0 0 0 3px color-mix(in srgb, var(--color-text) 40%, transparent);
  }
}
.product-card__color:where([aria-pressed='true']) {
  box-shadow:
    0 0 0 2px var(--color-surface),
    0 0 0 3px var(--color-text);
}
.product-card__color:where(:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}
.product-card__colors-more {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1;
}
.product-card__badges--image-bottom {
  position: absolute;
  right: 0;
  bottom: var(--card-action-overlay-space, 0rem);
  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);
  --badge-tone-text: var(--color-primary);
}
.product-badge--accent {
  --badge-tone-background: var(--color-accent);
  --badge-tone-color: var(--color-on-primary);
  --badge-tone-text: var(--color-accent);
}
.product-badge--success {
  --badge-tone-background: var(--color-success-bg);
  --badge-tone-color: var(--color-success-text);
  --badge-tone-text: var(--color-success-text);
}
.product-badge--warning {
  --badge-tone-background: var(--color-warning-bg);
  --badge-tone-color: var(--color-warning-text);
  --badge-tone-text: var(--color-warning-text);
}
.product-badge--danger {
  --badge-tone-background: var(--color-error-bg);
  --badge-tone-color: var(--color-error-text);
  --badge-tone-text: var(--color-error-text);
}
.product-badge--neutral {
  --badge-tone-background: var(--color-bg-alt);
  --badge-tone-color: var(--color-text-soft);
  --badge-tone-text: var(--color-text-soft);
}
/* Sem fundo, a cor feita para ficar sobre o fundo do tom (branco no primary) some no card.
   Vale também em "Personalizar este selo": o estilo decide o formato, e o que a pessoa
   preencheu continua vencendo porque sai inline no próprio selo. */
.product-badge--text {
  --badge-padding: 0;
  --badge-border-radius: 0;
  --badge-background: transparent;
  --badge-color: var(--badge-tone-text, var(--color-text-strong));
}
.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 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* A imagem do selo é o próprio elemento visual (as duas classes no mesmo
   `<img>`), então a caixa dela já é o tamanho configurado. Um `width: 100%`
   aqui a faria acompanhar a largura do selo, e numa faixa que ocupa o card
   inteiro a imagem esticava até virar um bloco. */
.product-badge__image {
  display: block;
  object-fit: contain;
}
/* Selo sobre imagem: o host é quem traz `data-badge-host` (área da imagem do
   card, miniatura do kit look, galeria da PDP) e o canto vem da classe
   `product-badge--<posição>`. */
:where([data-badge-host]) > .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(--card-action-overlay-space, 0rem) + 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(--card-action-overlay-space, 0rem) + 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:where(.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:where(.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,
  .product-card__image--secondary {
    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;
}
:where(.showcase--title-center) .showcase__title {
  text-align: center;
}
:where(.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 {
}
:where(.brand-list-section--chips) :where(.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;
}
/* O markup escreve `--seller-cols*` inline, e inline vence qualquer media
   query: por isso a tela escolhe numa variável própria (`--seller-cols-now`),
   que o inline não toca. Antes o número do desktop valia em toda tela. */
.seller-showcase__grid {
  --seller-gap: 0.75rem;
  --seller-cols-now: var(--seller-cols, 6);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.seller-showcase__slide {
  min-width: 0;
}
:where(.seller-showcase__grid) .seller-showcase__slide {
  flex: 0 0
    calc(
      (100% - (var(--seller-cols-now, 6) - 1) * var(--seller-gap)) /
        var(--seller-cols-now, 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;
}
:where(.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-now: 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-now: 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);
  font-size: 0.875rem;
}
.search-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
/* No desktop a barra de controles vive dentro da coluna de resultados, então o
   título precisa do próprio respiro antes dos filtros. */
@media (min-width: 768px) {
  :where(.listing-page) > .section-heading__title { margin-block-end: clamp(1rem, 2vw, 1.75rem); }
}
/* Coluna dos resultados: a barra de controles fica acima da grade, ao lado
   dos filtros, e não por cima da página inteira. */
.search-column {
  flex: 1;
  min-width: 0;
}
.search-main {
  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: busca da loja (quando há) à esquerda, contagem e ordenação à
   direita; botão "Filtrar" só no mobile. */
.listing-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.listing-search {
  display: flex;
  min-width: 0;
  flex: 1 1 16rem;
  max-width: 28rem;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
}
:where(.listing-search) .form-control {
  min-width: 0;
  flex: 1;
}
.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;
}
:where(.facet-group) .facets-title {
  margin-top: 0;
}
:where(.facets-head) + .facet-group,
:where(.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);
  }
}
/* No toque, a linha inteira é o alvo (o rótulo envolve a caixa), com 44px de
   altura: a caixa de 16px sozinha não se acerta com o dedo. */
@media (pointer: coarse) {
  :where(.facet-check) {
    min-height: 2.75rem;
  }
  :where(.facet-group__search-input) {
    min-height: 2.75rem;
  }
}
.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 :where(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) {
  :where(.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;
}
/* A faixa de destaques é grade, não a fileira flex da vitrine: o número de
   colunas vem da página (uma por loja até o teto de cada tela, ou o que o
   admin escolheu), e um `grid-template-columns` escrito na Aparência vence
   sem precisar desfazer a largura de cada item. */
.sellers-featured {
  display: grid;
  grid-template-columns: repeat(var(--seller-cols-now, 7), minmax(0, 1fr));
  margin-top: 1rem;
}
:where(.sellers-featured) > .seller-showcase__slide {
  flex: none;
}
.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;
  margin-bottom: 1.25rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
/* Cores da marca da loja (setting "Usar as cores da loja"): só o bloco de
   identidade. As variáveis vêm da raiz da página, com o neutro de fallback; a
   classe só existe quando a loja escolheu cor. Nome em `:where` pra Aparência
   do Título continuar mandando. */
.seller-header--brand {
  border-top: 3px solid var(--seller-brand-ink);
  background: var(--seller-brand-paper);
}
:where(.seller-header--brand .seller-identity) h1 {
  color: var(--seller-brand-ink);
}
.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);
}
/* Logo completo é horizontal: a caixa quadrada do símbolo o deixaria miúdo.
   A altura fixa e a largura acompanha a proporção, até um teto. */
.seller-thumb--logo {
  align-self: flex-start;
  width: auto;
  max-width: min(14rem, 100%);
  height: 4rem;
}
:where(.seller-identity) h1 {
  margin-bottom: 0.25rem;
}
.seller-contact {
  margin-top: 0.35rem;
}
:where(.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);
}
:where(.seller-about) summary,
:where(.seller-policy) summary {
  cursor: pointer;
}
:where(.seller-about[open]) summary,
:where(.seller-policy[open]) summary {
  margin-bottom: 0.75rem;
}
.seller-description,
:where(.seller-policy) > div {
  color: var(--color-text-soft);
}
/* "Sobre a loja" sempre aberto: o título é rótulo, não gatilho, e o texto já
   ocupa o lugar dele — abrir não empurra o catálogo. */
.seller-about__title {
  margin: 0 0 0.5rem;
}
/* Ao lado da identidade (a partir de 768px): banner e política ocupam a linha
   inteira; identidade à esquerda, texto à direita, com divisória. */
@media (min-width: 768px) {
  :where(.seller-page--about-side) .seller-header {
    grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr);
    align-items: start;
  }
  :where(.seller-page--about-side .seller-header) > :not(.seller-identity, .seller-about) {
    grid-column: 1 / -1;
  }
  :where(.seller-page--about-side) .seller-about {
    padding-block: 0;
    padding-inline: 1.5rem 0;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
  }
}
.seller-departments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
:where(.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);
}
:where(.seller-departments) .dept-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
@media (hover: hover) and (pointer: fine) {
  :where(.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 {
    align-items: stretch;
    flex-direction: column;
  }
  .seller-thumb {
    width: 4.5rem;
    height: 4.5rem;
  }
  .seller-thumb--logo {
    width: auto;
    height: 3.5rem;
  }
}
/* 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 ── */
/* Espaço entre itens, alinhamento e distribuição do Box vivem na Aparência, e
   não em atributo no HTML. O painel escreve `gap`, `align-items` e
   `justify-content` num seletor `[data-sf-style]` (0-1-0) emitido depois deste
   arquivo, e empate resolve pela ordem — por isso todo seletor de caixa abaixo
   mantém o atributo dentro de `:where()`. Passar de 0-1-0 aqui faz o campo do
   painel salvar e não pintar, que foi o que aconteceu enquanto o alinhamento
   morava nos dois lugares. */
[data-box-flow] {
  min-width: 0;
  gap: 1rem;
}
[data-box-flow]:where([data-display="block"]) {
  display: block;
}
[data-box-flow]:where([data-display="flex"]) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
[data-box-flow]:where([data-display="grid"]) {
  display: grid;
  grid-template-columns: var(--box-columns, repeat(2, minmax(0, 1fr)));
}
/* Limite do "Ocupar N colunas" (`gridColumn: span N` na Aparência): cada
   filho de Box em grade recebe as colunas do PAI naquela faixa. A variável é
   gravada no filho por uma regra que olha o pai, e não herdada do Box, para um
   filho que também é grade não trocar o próprio limite pelas colunas dele. Sem
   quantidade conhecida (colunas em CSS livre) o limite volta a não existir. */
:where([data-box-flow][data-display="grid"]) > * {
  --box-cell-limit: initial;
}
:where([data-box-columns="1"]) > * {
  --box-cell-limit: 1;
}
:where([data-box-columns="2"]) > * {
  --box-cell-limit: 2;
}
:where([data-box-columns="3"]) > * {
  --box-cell-limit: 3;
}
:where([data-box-columns="4"]) > * {
  --box-cell-limit: 4;
}
:where([data-box-columns="5"]) > * {
  --box-cell-limit: 5;
}
:where([data-box-columns="6"]) > * {
  --box-cell-limit: 6;
}
[data-box-flow]:where([data-direction="row"]) {
  flex-direction: row;
}
[data-box-flow]:where([data-direction="column"]) {
  flex-direction: column;
}
[data-box-flow]:where([data-wrap="true"]) {
  flex-wrap: wrap;
}

/* ── 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);
}
/* Imagem com link: a raiz é o `<a>`, e a imagem de dentro herda dele o encaixe,
   o foco do recorte e os cantos, que a Aparência da raiz grava no link. As
   variáveis de largura e altura já chegam por herança de custom property. */
.primitive-image-link {
  display: block;
  object-fit: var(--primitive-image-fit, cover);
}
:where(.primitive-image-link) > .primitive-image {
  object-fit: inherit;
  object-position: inherit;
  border-radius: inherit;
}
/* "Preencher o Box": a imagem (ou o link) ocupa a caixa do Box em volta em
   qualquer organização dele (fluxo, linha, coluna ou grade) e herda os cantos. */
:where(.primitive-image--fill) {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  border-radius: inherit;
}

/* ── 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;
}
/* Host dos selos sobre a imagem principal (`show_badges`). No layout com
   miniaturas à esquerda ele ocupa a coluna da imagem. */
:where(.product-gallery__stage) {
  position: relative;
  min-width: 0;
}
:where(.product-gallery--thumbs-left) :where(.product-gallery__stage) {
  grid-column: 2;
  grid-row: 1;
}
/* A faixa `image_bottom` acompanha o canto arredondado da imagem; o host não
   corta com overflow para o foco do botão de ampliar continuar visível. */
:where(.product-gallery__stage > .product-card__badges--image-bottom) {
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.product-gallery__opener--grid {
  line-height: 0;
}
:where(.product-gallery--fit-cover) .product-detail__main-image,
:where(.product-gallery--fit-cover) .product-detail__grid-image {
  object-fit: cover;
}
:where(.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);
}
:where(.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;
}
:where(.product-gallery--thumbs-left) .product-detail__main-image {
  grid-column: 2;
  grid-row: 1;
}
:where(.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,
  .menu-anim-enter,
  .menu-anim-enter-start,
  .menu-anim-enter-end,
  .menu-anim-leave,
  .menu-anim-leave-start,
  .menu-anim-leave-end {
    transition-duration: 1ms;
  }
}
.product-detail__description {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.product-detail__description img {
  max-width: 100%;
  height: auto;
}
/* Descrição com prévia: o corte é só visual (clamp por linhas via CSS), o HTML
   fica íntegro — links, listas e mídia continuam no DOM. A classe é posta pelo
   `storefront.js` depois de medir o conteúdo pintado; sem JS a descrição
   inteira fica legível e o acionador nunca aparece. */
.product-detail__description-content:where(.is-collapsed) {
  display: -webkit-box;
  -webkit-line-clamp: var(--sf-preview-lines, 4);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-detail__description-content:where(.is-animating) {
  overflow: hidden;
  transition: max-height 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .product-detail__description-content:where(.is-animating) {
    transition: none;
  }
}
.product-detail__description-toggle {
  display: inline-flex;
  margin-top: 0.75rem;
  padding: 0.2rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
/* O acionador é parte de Aparência: toda regra fica em (0,1,0) via `:where()`
   e decide por ordem. As variantes botão/contorno reaproveitam o padrão das
   vitrines, e a regra de `display` delas venceria o `hidden` do atributo — por
   isso a de `[hidden]` vem depois. */
.product-detail__description-toggle:where(.showcase__view-all--button) {
  padding: 0.55rem 1.4rem;
}
.product-detail__description-toggle:where(.showcase__view-all--outline) {
  padding: 0.45rem 1.15rem;
}
.product-detail__description-toggle:where([hidden]) {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .product-detail__description-toggle:where(:not(.showcase__view-all--button, .showcase__view-all--outline)):hover {
    --hover-link-decoration: underline;
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
.product-detail__description-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}
/* Selos acima do nome (`show_badges` do título). */
:where(.product-heading) > :where(.product-badges--content) {
  margin-bottom: 0.5rem;
}
: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;
}
/* Texto do desconto (snippet `discount-detail`): sem cor própria, herda a do
   bloco onde está. A frase não quebra no meio; quando falta espaço, desce
   inteira para a linha de baixo. */
:where(.discount-detail) {
  white-space: nowrap;
}
/* Na PDP o desconto fica ao lado do preço e, sem espaço, desce para a linha de
   baixo encostado à esquerda (gap em vez de margem, que sobraria como recuo). */
:where(.product-detail__price:has(> .discount-detail)) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
}
.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;
}
/* "Quantidade e botão: lado a lado" (`quantity_layout`, por faixa de tela). A
   quantidade e o botão são filhos do mesmo formulário que o total; a grade põe
   os dois na mesma linha e o resto ocupa a largura inteira. `dense` deixa o
   botão subir para a linha da quantidade, já que o total vem entre eles. */
@media (min-width: 1024px) {
  :where([data-quantity-inline~="desktop"]) :where(.purchase-configurator form) {
    grid-template-columns: auto minmax(0, 1fr);
    grid-auto-flow: row dense;
    align-items: end;
  }
  :where([data-quantity-inline~="desktop"] .purchase-configurator form) > * { grid-column: 1 / -1; }
  :where([data-quantity-inline~="desktop"] .purchase-configurator form) > :where([data-pc-primary-quantity]) { grid-column: 1; }
  :where([data-quantity-inline~="desktop"] .purchase-configurator form) > :where(.product-purchase__submit, .product-purchase__buy) { grid-column: 2; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :where([data-quantity-inline~="tablet"]) :where(.purchase-configurator form) {
    grid-template-columns: auto minmax(0, 1fr);
    grid-auto-flow: row dense;
    align-items: end;
  }
  :where([data-quantity-inline~="tablet"] .purchase-configurator form) > * { grid-column: 1 / -1; }
  :where([data-quantity-inline~="tablet"] .purchase-configurator form) > :where([data-pc-primary-quantity]) { grid-column: 1; }
  :where([data-quantity-inline~="tablet"] .purchase-configurator form) > :where(.product-purchase__submit, .product-purchase__buy) { grid-column: 2; }
}
@media (max-width: 767px) {
  :where([data-quantity-inline~="mobile"]) :where(.purchase-configurator form) {
    grid-template-columns: auto minmax(0, 1fr);
    grid-auto-flow: row dense;
    align-items: end;
  }
  :where([data-quantity-inline~="mobile"] .purchase-configurator form) > * { grid-column: 1 / -1; }
  :where([data-quantity-inline~="mobile"] .purchase-configurator form) > :where([data-pc-primary-quantity]) { grid-column: 1; }
  :where([data-quantity-inline~="mobile"] .purchase-configurator form) > :where(.product-purchase__submit, .product-purchase__buy) { grid-column: 2; }
}
.product-purchase__feedback {
  min-height: 1.25rem;
  margin-top: 0.5rem;
  color: var(--color-success-text);
}
/* Vazio, o aviso sai do fluxo: reservado, ele abria uma faixa em branco entre o
   botão de compra e o frete. Continua na árvore de acessibilidade, então o
   leitor de tela anuncia a mensagem quando ela chega. */
:where(.product-purchase__feedback):empty {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.product-purchase__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.product-purchase__actions > :only-child {
  grid-column: 1 / -1;
}
/* Botão de compra e coração de Favoritos na mesma linha: o botão ocupa o que
   sobra, o coração tem a altura do botão. */
.product-purchase__buy {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
:where(.product-purchase__buy) > :where(.product-purchase__submit, .product-purchase__actions) {
  flex: 1;
  min-width: 0;
}

/* ── Favoritos ───────────────────────────────────────────────────────────────
   O coração (`snippets/favorite-toggle.liquid`) e o quadro que abre depois de
   salvar, montado pelo `storefront.js`. No computador o quadro abre colado no
   coração (top/left calculados no script); no celular é a folha de baixo. */
.favorite-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-strong);
  cursor: pointer;
}
.favorite-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.favorite-toggle__icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.favorite-toggle:where([aria-pressed="true"]) {
  color: var(--color-favorite);
}
:where(.favorite-toggle[aria-pressed="true"]) .favorite-toggle__icon {
  fill: currentColor;
}
.favorite-toggle--card {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 4;
  width: 2.5rem;
  height: 2.5rem;
  border-color: transparent;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  box-shadow: var(--shadow-sm);
}
/* O coração ocupa o canto de cima à direita: os selos desse canto descem. */
:where(.product-card--favorite) .product-badge--image_top_right {
  top: calc(3.25rem + var(--badge-index, 0) * 1.75rem);
}
/* Quadrado na altura do botão de compra, que é a mesma régua (`--btn-height`). */
.favorite-toggle--pdp {
  flex: none;
  width: var(--btn-height, var(--control-height));
  min-height: var(--btn-height, var(--control-height));
  border-radius: var(--radius-control);
}
.favorite-toggle--pdp .favorite-toggle__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.favorite-picker__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--layer-shell-backdrop);
  background: var(--color-overlay);
}
.favorite-picker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--layer-shell-popover);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.5rem 1rem 1.5rem;
  border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}
.favorite-picker[hidden],
.favorite-picker__backdrop[hidden],
.favorite-picker [hidden] {
  display: none;
}
.favorite-picker:focus {
  outline: none;
}
.favorite-picker__grip {
  width: 2.5rem;
  height: 0.25rem;
  margin: 0.125rem auto 0.5rem;
  border-radius: 999px;
  background: var(--color-border-input);
}
.favorite-picker__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.favorite-picker__thumb {
  flex: none;
  width: 3.25rem;
  height: 4rem;
  border-radius: var(--radius-control);
  object-fit: cover;
  background: var(--color-bg-alt);
}
.favorite-picker__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.favorite-picker__title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-text-strong);
}
.favorite-picker__check {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: var(--color-success);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.favorite-picker__detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.favorite-picker__guest {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}
.favorite-picker__guest p {
  margin: 0;
}
.favorite-picker__login {
  font-weight: 600;
}
.favorite-picker__heading {
  padding: 0.625rem 0 0.125rem;
}
.favorite-picker__list {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 3.25rem;
  cursor: pointer;
}
.favorite-picker__list input {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  accent-color: var(--color-primary);
}
.favorite-picker__list-name {
  flex: 1;
}
.favorite-picker__list-count {
  flex: none;
  font-variant-numeric: tabular-nums;
}
.favorite-picker__list-tag {
  flex: none;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}
.favorite-picker__lists {
  max-height: min(16rem, 40vh);
  overflow-y: auto;
}
.favorite-picker__named:empty {
  display: none;
}
.favorite-picker__list-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.favorite-picker__new {
  align-self: flex-start;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.favorite-picker__new-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
.favorite-picker__new-form input {
  flex: 1;
  min-width: 0;
  min-height: var(--control-height, 2.75rem);
  padding: 0 0.75rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.favorite-picker__new-guest {
  margin: 0;
}
.favorite-picker__error {
  margin: 0;
  color: var(--color-error-text);
}
.favorite-picker__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
@media (max-width: 767px) {
  :where(html.favorite-picker-open) {
    overflow: hidden;
  }
}
@media (min-width: 768px) {
  .favorite-picker__backdrop {
    background: transparent;
  }
  .favorite-picker {
    right: auto;
    bottom: auto;
    width: 22rem;
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-overlay);
  }
  .favorite-picker__grip {
    display: none;
  }
}
/* "Minha conta → Favoritos": grade de produtos salvos. No celular são duas
   colunas encostadas na borda da superfície, sem moldura própria. */
.favorites-page__head {
  margin-bottom: 1rem;
}
.favorites-page__head h1 {
  margin: 0;
}
.favorites-page__head p {
  margin: 0.25rem 0 0;
}
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.favorites-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.favorites-item__media {
  position: relative;
  aspect-ratio: var(--product-card-image-ratio, 1 / 1);
  margin-bottom: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius-surface);
  background: var(--color-bg-alt);
}
.favorites-item__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.favorites-item__media form {
  margin: 0;
}
.favorites-item--unavailable .favorites-item__media img {
  opacity: 0.5;
}
.favorites-item__flag {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: var(--type-meta-size, 0.8125rem);
  font-weight: 600;
}
.favorites-item__name {
  color: var(--color-text-strong);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.favorites-item__price {
  margin-bottom: 0.5rem;
  color: var(--color-text-strong);
  font-weight: 700;
}
.favorites-item__price s {
  margin-left: 0.25rem;
  font-weight: 400;
}
.favorites-item form {
  margin: 0;
}
/* A ação (botão em formulário, link ou etiqueta) é o último filho do cartão e
   fica empurrada pro fim dele: a grade estica os cartões da linha à mesma
   altura, então os botões alinham mesmo com nomes de tamanhos diferentes. */
.favorites-item > form,
.favorites-item > .favorites-item__action {
  margin-top: auto;
}
.favorites-item__action {
  width: 100%;
}
.favorites-page__back {
  display: inline-block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
/* Desfecho de "Pôr tudo no carrinho" em cada item: a etiqueta toma o lugar do botão. */
.favorites-item__warn {
  color: var(--color-warning-text);
  font-weight: 600;
}
.favorites-item__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border-radius: var(--radius-control);
  font-weight: 700;
  text-decoration: none;
}
.favorites-item__tag--done {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.favorites-item__tag--out {
  color: var(--color-error-text);
}
/* O resumo de "Pôr tudo no carrinho", no alto da lista. */
.list-cart-summary {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-surface);
  background: var(--color-success-surface);
  color: var(--color-success-text);
}
.list-cart-summary__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
  fill: none;
  stroke: var(--color-success);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.list-cart-summary__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}
.list-cart-summary__body p {
  margin: 0;
}
.list-cart-summary__title {
  font-size: 0.9375rem;
  font-weight: 700;
}
.list-cart-summary__out {
  color: var(--color-warning-text);
}
.list-cart-summary__go {
  padding-top: 0.125rem;
  color: inherit;
  font-weight: 700;
}
/* "Pôr tudo no carrinho": faixa própria embaixo da grade, separada dos botões
   de cada item (que são só contorno), com o resumo do que vai e o único botão
   cheio da página. No celular fica presa embaixo da tela enquanto a lista rola. */
.favorites-cart-all {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-bg-alt);
}
.favorites-cart-all__summary {
  margin: 0;
  color: var(--color-text-strong);
}
.favorites-cart-all form {
  margin: 0;
}
.favorites-cart-all__button {
  width: 100%;
  min-height: 3.25rem;
}
@media (min-width: 768px) {
  .favorites-cart-all__button {
    width: auto;
    min-width: 16rem;
  }
}
@media (max-width: 767px) {
  .favorites-cart-all {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin: 1.5rem calc(-1 * var(--sf-page-gutter)) 0;
    padding: 0.75rem var(--sf-page-gutter) calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-surface);
  }
  .favorites-cart-all__summary {
    font-size: var(--type-meta-size, 0.8125rem);
    text-align: center;
  }
}
/* "Transformar em lista", "Selecionar", "Renomear" e "Apagar lista": cada um
   abre a própria confirmação embaixo do botão (`details`), sem diálogo. */
.favorites-tools,
.favorites-manage {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
}
.favorites-tools {
  margin-bottom: 1.25rem;
}
.favorites-manage {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.favorites-confirm[open] {
  flex-basis: 100%;
}
.favorites-confirm summary {
  width: max-content;
  max-width: 100%;
  min-height: 2.75rem;
  list-style: none;
}
.favorites-confirm summary::-webkit-details-marker {
  display: none;
}
.favorites-confirm__body {
  max-width: 34rem;
  margin-top: 0.6rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.favorites-confirm__body form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.favorites-confirm__body p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
}
.favorites-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Com "Renomear" ou "Apagar lista" aberto, os dois botões somem e fica só a
   confirmação; "Cancelar" a fecha (sem JavaScript, recarrega a página). */
.favorites-manage:has(> .favorites-confirm[open]) > .favorites-confirm:not([open]),
.favorites-manage > .favorites-confirm[open] > summary {
  display: none;
}
.favorites-manage > .favorites-confirm[open] > .favorites-confirm__body {
  margin-top: 0;
}
/* A caixa de escolher só aparece com "Selecionar" aberto. */
.favorites-item__pick {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.favorites-item__pick input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--color-primary);
}
.favorites-page:has(.favorites-select[open]) .favorites-item__pick {
  display: flex;
}
.favorites-page:has(.favorites-select[open]) .favorites-item__flag {
  left: 3.5rem;
}
/* "Compartilhar por link" na lista do dono: o link, copiar e WhatsApp. */
.list-share {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.list-share h2,
.list-share p,
.list-share form {
  margin: 0;
}
.list-share__field {
  max-width: 34rem;
}
.list-share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.list-share + .favorites-manage {
  margin-top: 1.25rem;
}
/* A lista aberta pelo link compartilhado: a mesma grade, fora da conta. */
.shared-list-page {
  padding-block: var(--sf-page-block);
}

/* ── Vitrine do afiliado (`/de/<código>`, F4-6) ──
   Os três temas (`claro`, `contraste`, `suave`) são conjuntos de valores sobre a
   mesma estrutura: peso dos títulos, cores, raio e espaçamento. A fonte fica a
   da loja: o system.css está numa camada abaixo do tema do marketplace, e a
   fonte de título que ele configura venceria só em parte das lojas. A cor de
   destaque que o afiliado escolhe chega em `--vitrine-accent`, no próprio
   elemento; sem ela vale a do tema. O texto sobre o destaque é preto ou branco,
   pelo que for legível sobre a cor escolhida (cor relativa; o navegador sem
   suporte fica com o branco). O cabeçalho do afiliado (`affiliate-identity`) é
   o mesmo na lista publicada, fora da vitrine: por isso as regras dele levam o
   valor de fora como reserva. */
.affiliate-storefront {
  --vitrine-accent-default: var(--color-primary);
  --vitrine-accent-color: var(--vitrine-accent, var(--vitrine-accent-default));
  --vitrine-on-accent: #fff;
  --vitrine-heading-weight: 700;
  --vitrine-text: var(--color-text-strong);
  --vitrine-muted: var(--color-text-muted);
  --vitrine-tint: color-mix(in srgb, var(--vitrine-accent-color) 10%, var(--color-surface));
  --vitrine-radius: var(--radius-surface);
  --vitrine-gap: 2.5rem;
  --radius-lg: var(--vitrine-radius);
  padding-block: var(--sf-page-block);
  color: var(--vitrine-text);
}
/* Variável não é conferida na leitura: sem o `@supports`, o navegador que não
   conhece a cor relativa ficaria com um valor inválido, e não com o branco. */
@supports (color: lch(from red l c h)) {
  .affiliate-storefront {
    --vitrine-on-accent: lch(from var(--vitrine-accent-color) calc((l - 62) * -1000) 0 0);
  }
}
.affiliate-storefront[data-theme="contraste"] {
  --vitrine-accent-default: #111111;
  --vitrine-heading-weight: 800;
  --vitrine-text: #0b0b0b;
  --vitrine-muted: #3a3a3a;
  --vitrine-tint: color-mix(in srgb, var(--vitrine-accent-color) 16%, #ffffff);
  --vitrine-radius: 0px;
  --vitrine-gap: 2.75rem;
}
.affiliate-storefront[data-theme="suave"] {
  --vitrine-accent-default: #a26769;
  --vitrine-heading-weight: 600;
  --vitrine-muted: #6f6461;
  --vitrine-tint: color-mix(in srgb, var(--vitrine-accent-color) 12%, #fffaf6);
  --vitrine-radius: 18px;
  --vitrine-gap: 3rem;
}
.affiliate-storefront :where(h1, h2, h3) {
  font-weight: var(--vitrine-heading-weight);
}
.affiliate-storefront__page-title {
  margin: 1.5rem 0 0;
}
.affiliate-storefront__notice {
  margin: 1rem 0 0;
}
.affiliate-storefront__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--vitrine-gap);
  margin-top: var(--vitrine-gap);
}
@media (max-width: 767px) {
  .affiliate-storefront {
    --vitrine-gap: 1.75rem;
  }
}

/* Quem é o afiliado: foto, nome, frase e "Seguir". */
.affiliate-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.affiliate-identity__avatar {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border: 2px solid var(--vitrine-accent-color, var(--color-primary));
  border-radius: 50%;
  background: var(--vitrine-tint, var(--color-primary-soft));
  color: var(--vitrine-accent-color, var(--color-primary));
}
.affiliate-identity__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.affiliate-identity__initial {
  font-size: 1.75rem;
  font-weight: 700;
}
.affiliate-identity__body {
  min-width: 0;
}
.affiliate-identity__eyebrow {
  margin: 0;
}
.affiliate-identity__name {
  margin: 0;
  font-size: var(--type-h1-size);
  font-weight: var(--vitrine-heading-weight, var(--type-h1-weight));
  line-height: 1.15;
  overflow-wrap: anywhere;
}
p.affiliate-identity__name {
  font-size: var(--type-h3-size);
}
.affiliate-identity__name a {
  color: inherit;
  text-decoration: none;
}
.affiliate-identity__headline {
  margin: 0.35rem 0 0;
  color: var(--vitrine-muted, var(--color-text-muted));
}
.affiliate-identity__action form {
  margin: 0;
}
.affiliate-identity__follow {
  min-width: 6.5rem;
  min-height: 2.75rem;
}
.affiliate-identity__follow:not(.btn--outline) {
  border-color: var(--vitrine-accent-color, var(--color-primary));
  background: var(--vitrine-accent-color, var(--color-primary));
  color: var(--vitrine-on-accent, var(--color-on-primary));
}
@media (max-width: 767px) {
  .affiliate-identity {
    gap: 0.5rem 0.75rem;
  }
  .affiliate-identity__avatar {
    grid-row: 1 / span 2;
    width: 3.5rem;
    height: 3.5rem;
  }
  .affiliate-identity__name {
    font-size: 1.5rem;
  }
  p.affiliate-identity__name {
    font-size: var(--type-h3-size);
  }
  /* A frase desce pra largura inteira: ao lado da foto e do botão ela teria
     um terço da tela. */
  .affiliate-identity__headline {
    grid-column: 1 / -1;
  }
  .affiliate-identity__body {
    display: contents;
  }
  .affiliate-identity__body > :not(.affiliate-identity__headline) {
    grid-column: 2;
  }
  .affiliate-identity__eyebrow {
    align-self: end;
  }
  .affiliate-identity__action {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

/* O cupom do afiliado (D-21). */
.affiliate-coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--vitrine-accent-color);
  border-radius: var(--vitrine-radius);
  background: var(--vitrine-tint);
}
.affiliate-coupon__text {
  margin: 0;
}
.affiliate-coupon__code {
  font-weight: 800;
  letter-spacing: 0.04em;
}
.affiliate-coupon__copy {
  min-height: 2.75rem;
}

/* Os blocos (F4-5). O contorno é do construtor de página
   (`<section class="vitrine-block" data-node-id …>`). */
.vitrine-block {
  min-width: 0;
}
.vitrine-banner {
  display: block;
  overflow: hidden;
  border-radius: var(--vitrine-radius);
}
.vitrine-banner__picture,
.vitrine-banner__image {
  display: block;
  width: 100%;
  height: auto;
}
.vitrine-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.6rem 1rem;
  border-radius: var(--vitrine-radius);
  background: var(--vitrine-accent-color);
  color: var(--vitrine-on-accent);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  a.vitrine-strip:hover {
    color: var(--vitrine-on-accent);
    opacity: 0.92;
  }
}
.vitrine-products__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.vitrine-products__title {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.vitrine-products__all {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--vitrine-accent-color);
  font-weight: 700;
}
.vitrine-products__grid {
  margin: 0;
}
@media (max-width: 767px) {
  .vitrine-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}
.vitrine-cards__title {
  margin: 0 0 0.75rem;
}
.vitrine-cards {
  display: grid;
  grid-template-columns: repeat(var(--vitrine-cards, 4), minmax(0, 1fr));
  gap: 1rem;
  max-width: calc(var(--vitrine-cards, 4) * 20rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vitrine-cards[data-count="1"] { --vitrine-cards: 1; }
.vitrine-cards[data-count="2"] { --vitrine-cards: 2; }
.vitrine-cards[data-count="3"] { --vitrine-cards: 3; }
.vitrine-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}
.vitrine-card__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--vitrine-radius);
  background: var(--vitrine-tint);
}
.vitrine-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vitrine-card__title {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.vitrine-card--plain {
  justify-content: center;
  min-height: 2.75rem;
  height: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--vitrine-radius);
  background: var(--vitrine-tint);
}
@media (max-width: 767px) {
  .vitrine-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}
.vitrine-text {
  max-width: 44rem;
}
.vitrine-text__title {
  margin: 0 0 0.5rem;
}
.vitrine-text__body {
  margin: 0;
  color: var(--vitrine-muted);
  white-space: normal;
}

/* "Quem eu sigo": uma linha por afiliado, com divisor; no celular sem moldura. */
.following-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.following-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}
.following-item__link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  min-height: 2.75rem;
  color: inherit;
  text-decoration: none;
}
.following-item__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
}
.following-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.following-item__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.following-item__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.following-item form {
  flex: none;
  margin: 0;
}
.following-item__unfollow {
  min-height: 2.75rem;
}
/* "Minhas listas": um cartão por lista, com a capa de até quatro fotos. */
.buyer-lists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1.5rem 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.buyer-list-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}
.buyer-list-card__cover {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  aspect-ratio: 1 / 1;
  margin-bottom: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius-surface);
  background: var(--color-bg-alt);
}
.buyer-list-card__cover img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
/* Uma foto ocupa a capa toda; duas ou três dividem a primeira linha e a segunda. */
.buyer-list-card__cover img:only-child {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}
.buyer-list-card__cover img:first-child:nth-last-child(2),
.buyer-list-card__cover img:first-child:nth-last-child(2) + img {
  grid-row: 1 / -1;
}
.buyer-list-card__cover img:first-child:nth-last-child(3) {
  grid-row: 1 / -1;
}
.buyer-list-card__empty {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-items: center;
  justify-content: center;
  color: var(--color-text-soft);
}
.buyer-list-card__name {
  color: var(--color-text-strong);
  font-weight: 600;
  line-height: 1.3;
}
@media (hover: hover) and (pointer: fine) {
  .buyer-list-card:hover .buyer-list-card__name {
    text-decoration: underline;
  }
}
/* Favoritos vazio com produto em outra lista: as listas que têm produto, cada
   uma com até quatro fotos abertas em leque, como cartas na mão. A foto mais
   recente fica por cima, à direita. */
.favorites-elsewhere {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 1rem 0.5rem;
}
.favorites-elsewhere p {
  margin: 0;
}
.favorites-elsewhere__title {
  color: var(--color-text-strong);
  font-size: 1.05rem;
  font-weight: 600;
}
.favorites-elsewhere__lists {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1.5rem 1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.list-fan-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: inherit;
  text-decoration: none;
}
.list-fan-card__name {
  color: var(--color-text-strong);
  font-weight: 600;
  line-height: 1.3;
}
.list-fan {
  --fan-spread: 1;
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius-surface);
  background: var(--color-bg-alt);
}
.list-fan img {
  --fan-x: 0%;
  --fan-r: 0deg;
  position: absolute;
  bottom: 10%;
  left: 31%;
  width: 38%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  transform-origin: 50% 100%;
  transform: translateX(calc(var(--fan-x) * var(--fan-spread)))
    rotate(calc(var(--fan-r) * var(--fan-spread)));
  transition: transform 0.2s ease;
}
.list-fan[data-count="2"] img:nth-child(1) { --fan-x: -30%; --fan-r: -7deg; }
.list-fan[data-count="2"] img:nth-child(2) { --fan-x: 30%; --fan-r: 6deg; }
.list-fan[data-count="3"] img:nth-child(1) { --fan-x: -46%; --fan-r: -10deg; }
.list-fan[data-count="3"] img:nth-child(2) { --fan-x: 0%; --fan-r: -1deg; }
.list-fan[data-count="3"] img:nth-child(3) { --fan-x: 46%; --fan-r: 9deg; }
.list-fan[data-count="4"] img { left: 33%; width: 34%; }
.list-fan[data-count="4"] img:nth-child(1) { --fan-x: -78%; --fan-r: -14deg; }
.list-fan[data-count="4"] img:nth-child(2) { --fan-x: -26%; --fan-r: -5deg; }
.list-fan[data-count="4"] img:nth-child(3) { --fan-x: 26%; --fan-r: 4deg; }
.list-fan[data-count="4"] img:nth-child(4) { --fan-x: 78%; --fan-r: 13deg; }
.list-fan__empty {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--color-text-soft);
}
@media (hover: hover) and (pointer: fine) {
  .list-fan-card:hover .list-fan {
    --fan-spread: 1.15;
  }
  .list-fan-card:hover .list-fan-card__name {
    text-decoration: underline;
  }
}
@media (prefers-reduced-motion: reduce) {
  .list-fan img {
    transition: none;
  }
}
@media (max-width: 767px) {
  .favorites-elsewhere__lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 0.75rem;
  }
}
@media (max-width: 767px) {
  .favorites-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 0.75rem;
  }
  .buyer-lists-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 0.75rem;
  }
}
.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-options {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.75rem;
  list-style: none;
}
.shipping-split-notice {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
  color: var(--color-text-muted);
  font-size: var(--type-meta-size);
}
.shipping-split-notice strong {
  color: var(--color-text-strong);
}
.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%;
  }
  .product-purchase__actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .quantity-control {
    width: 100%;
    grid-template-columns: var(--control-height) 1fr var(--control-height);
  }
}
@media (max-width: 1023px) {
  [data-box-flow]:where([data-display="grid"]) {
    grid-template-columns: var(--box-columns-tablet, var(--box-columns));
  }
  :where([data-box-flow][data-display="grid"]) > * {
    --box-cell-limit: initial;
  }
  :where([data-box-columns-tablet="1"]) > * {
    --box-cell-limit: 1;
  }
  :where([data-box-columns-tablet="2"]) > * {
    --box-cell-limit: 2;
  }
  :where([data-box-columns-tablet="3"]) > * {
    --box-cell-limit: 3;
  }
  :where([data-box-columns-tablet="4"]) > * {
    --box-cell-limit: 4;
  }
  :where([data-box-columns-tablet="5"]) > * {
    --box-cell-limit: 5;
  }
  :where([data-box-columns-tablet="6"]) > * {
    --box-cell-limit: 6;
  }
  [data-box-flow]:where([data-tablet-direction="row"]) {
    flex-direction: row;
  }
  [data-box-flow]:where([data-tablet-direction="column"]) {
    flex-direction: column;
  }
}
@media (max-width: 1023px) {
  :where(.product-gallery--thumbs-left) .product-detail__gallery {
    display: block;
  }
  :where(.product-gallery--thumbs-left) .product-detail__thumbnails {
    flex-direction: row;
    margin-top: 0.75rem;
    overflow-x: auto;
  }
}
@media (max-width: 767px) {
  [data-box-flow]:where([data-display="grid"]) {
    grid-template-columns: var(
      --box-columns-mobile,
      var(--box-columns-tablet, var(--box-columns))
    );
  }
  :where([data-box-flow][data-display="grid"]) > * {
    --box-cell-limit: initial;
  }
  :where([data-box-columns-mobile="1"]) > * {
    --box-cell-limit: 1;
  }
  :where([data-box-columns-mobile="2"]) > * {
    --box-cell-limit: 2;
  }
  :where([data-box-columns-mobile="3"]) > * {
    --box-cell-limit: 3;
  }
  :where([data-box-columns-mobile="4"]) > * {
    --box-cell-limit: 4;
  }
  :where([data-box-columns-mobile="5"]) > * {
    --box-cell-limit: 5;
  }
  :where([data-box-columns-mobile="6"]) > * {
    --box-cell-limit: 6;
  }
  [data-box-flow]:where([data-mobile-direction="row"]) {
    flex-direction: row;
  }
  [data-box-flow]:where([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;
  /* O tracejado com a cor da borda dos campos sumia sobre o fundo claro: o
     contorno precisa de contraste de controle (3:1) para a opção ser vista. */
  border-color: color-mix(in srgb, var(--color-text-muted) 80%, var(--color-surface));
  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 — campos extras escolhidos pelo tema */
.product-extra-fields {
  margin: 1.5rem 0;
}
.product-extra-fields__items {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}
.product-extra-fields__item {
  min-width: 0;
  grid-column: span 6;
}
.product-extra-fields__item--span-full {
  grid-column: 1 / -1;
}
/* O rótulo (`h3`) é a parte `label` da Aparência: fica em (0,0,1) para o painel vencer. */
:where(.product-extra-fields__item) h3,
.product-extra-fields__value {
  margin: 0;
}
:where(.product-extra-fields__item) h3 {
  margin-bottom: 0.45rem;
  font-size: 0.9em;
  color: var(--color-text-faint);
}
:where(.product-extra-fields__value--richtext) > :last-child {
  margin-bottom: 0;
}
.product-extra-fields__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.product-extra-fields__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}
.product-extra-fields__video > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 767px) {
  .product-extra-fields__item {
    grid-column: 1 / -1;
  }
}

/* PDP — arquivos preenchidos nos campos extras */
.product-files {
  margin: 1.5rem 0;
}
.product-files__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
:where(.product-files--columns-2) .product-files__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
:where(.product-files--columns-3) .product-files__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.product-files__item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: inherit;
  text-align: center;
  text-decoration: none;
}
.product-files__icon {
  display: inline-flex;
  width: 3.5rem;
  height: 3.5rem;
  color: var(--color-primary);
}
.product-files__icon > svg {
  width: 100%;
  height: 100%;
}
.product-files__label {
  color: var(--color-text-soft);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
  :where(.product-files__item:hover) .product-files__label {
    color: var(--color-primary);
  }
}
@media (max-width: 767px) {
  .product-files__grid,
  :where(.product-files--columns-2) .product-files__grid,
  :where(.product-files--columns-3) .product-files__grid,
  :where(.product-files--columns-4) .product-files__grid {
    grid-template-columns: 1fr;
  }
}

/* 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--grid) .product-related__track {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* O track emite as três variáveis já cascateadas (base → tablet → celular)
     no style inline; aqui só se escolhe a do viewport. */
  gap: var(--related-gap, 1rem);
  overflow: visible;
}
@media (min-width: 768px) and (max-width: 1023px) {
  :where(.product-related--grid) .product-related__track {
    gap: var(--related-gap-tablet, var(--related-gap, 1rem));
  }
}
@media (max-width: 767px) {
  :where(.product-related--grid) .product-related__track {
    gap: var(--related-gap-mobile, var(--related-gap, 1rem));
  }
}
@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%;
  padding-block: var(--sf-page-block);
}
.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-shipment-groups {
  display: grid;
}
.cart-shipment + .cart-shipment {
  border-top: 0.5rem solid var(--color-bg-alt);
}
.cart-shipment__head {
  padding: 0.7rem 1rem 0;
}
.cart-shipment__head strong,
.cart-shipment__head span {
  display: block;
}
.cart-shipment__head span {
  margin-top: 0.1rem;
  color: var(--color-text-soft);
  font-size: 0.78rem;
}
.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;
}

/* ── Configurador canônico de compra ───────────────────────────────────────
   O System protege a estrutura e o navegador apenas apresenta a cotação em
   centavos devolvida pela API. Temas continuam controlando os tokens visuais. */
.purchase-configurator form,
.purchase-configurator__configuration {
  display: grid;
  gap: 0.85rem;
}
.purchase-configurator [hidden] {
  display: none;
}
.purchase-modes,
.purchase-plans,
.purchase-configurator__configuration,
.purchase-configurator__field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.purchase-configurator__configuration legend,
.purchase-configurator__field legend,
.purchase-plans legend {
  margin-bottom: 0.5rem;
  padding: 0;
  color: var(--color-text-strong);
  font-size: 0.85rem;
  font-weight: 600;
}
.purchase-plans legend {
  font-size: 0.95rem;
}
.purchase-configurator__choice,
.purchase-configurator__field--boolean > label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding-block: 0.35rem;
  cursor: pointer;
}
.purchase-configurator__choice span {
  display: grid;
  flex: 1;
}
.purchase-configurator__choice small,
.purchase-configurator__field > small,
.purchase-configurator__notice small {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.purchase-configurator__field:not(fieldset) {
  display: grid;
  gap: 0.35rem;
}
.purchase-configurator__field :is(input[type="text"], input[type="number"], textarea, select) {
  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-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.purchase-configurator__field textarea {
  min-height: 6rem;
  resize: vertical;
}
/* Campo estruturado (JSON): o preenchimento é do tema (`structured-field-input`);
   o System só dá o padrão de leitura em chave/valor (`structured-field-display`). */
.structured-field-display {
  display: inline-grid;
  gap: 0.15rem;
}
.structured-field-display__key {
  color: var(--color-text-soft);
}
/* Controle segmentado do carrinho: compra avulsa ou assinatura. */
.purchase-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--radius-control);
  background: var(--color-bg-alt);
}
.purchase-modes__option {
  position: relative;
  display: flex;
  cursor: pointer;
}
.purchase-modes__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.purchase-modes__face {
  display: grid;
  flex: 1;
  gap: 0.1rem;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--radius-control) - 2px);
  color: var(--color-text-soft);
  text-align: center;
}
.purchase-modes__option strong {
  font-size: 0.85rem;
}
.purchase-modes__option small {
  font-size: 0.75rem;
}
.purchase-modes__option input:checked + .purchase-modes__face {
  background: var(--color-surface);
  color: var(--color-text-strong);
  box-shadow: var(--shadow-sm);
}
.purchase-modes__option input:focus-visible + .purchase-modes__face {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Planos em cartões: preço por unidade, selo de recomendado e economia. */
.purchase-plans {
  display: grid;
  gap: 0.5rem;
}
.purchase-plan {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
  cursor: pointer;
}
.purchase-plan:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}
.purchase-plan input {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--color-primary);
}
.purchase-plan__body {
  display: grid;
  flex: 1;
  gap: 0.15rem;
  min-width: 0;
}
.purchase-plan__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-strong);
}
.purchase-plan__badge {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
}
.purchase-plan__price {
  color: var(--color-text-soft);
  font-size: 0.875rem;
}
.purchase-plan__body small {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.purchase-plan__savings,
.purchase-savings {
  flex: 0 0 auto;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--color-success-bg);
  color: var(--color-success-text);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Faixa da PDP acima dos botões e oferta na janela de compra avulsa. */
.purchase-offer-strip,
.purchase-offer {
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-surface));
  border-radius: var(--radius-surface);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}
.purchase-offer-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
}
.purchase-offer-strip__icon,
.purchase-offer__title .icon {
  display: flex;
  color: var(--color-primary);
}
@media (max-width: 767px) {
  .purchase-offer-strip {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .purchase-offer-strip__savings {
    grid-column: 2;
    justify-self: start;
  }
}
.purchase-offer-strip__text strong,
.purchase-offer__text strong {
  color: var(--color-text-strong);
}
.purchase-offer {
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
}
.purchase-offer__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--color-text-strong);
}
.purchase-offer__text {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  line-height: 1.5;
}
.purchase-offer__cta {
  justify-self: start;
}
/* Linha do produto no topo das janelas, com o resumo da personalização. */
.purchase-product {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.purchase-product__media {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-control);
  background: var(--color-bg-alt);
  object-fit: cover;
}
.purchase-product__media--sm {
  width: 3rem;
  height: 3rem;
}
.purchase-product__body {
  display: grid;
  flex: 1;
  gap: 0.1rem;
  min-width: 0;
  color: var(--color-text-soft);
  font-size: 0.8rem;
}
.purchase-product__body > strong {
  color: var(--color-text-strong);
  font-size: 0.95rem;
}
.purchase-product__body > .purchase-product__title {
  font-size: 1.15rem;
}
.purchase-product__config {
  overflow-wrap: anywhere;
}
.purchase-product__config:empty {
  display: none;
}
.purchase-product__price {
  color: var(--color-text-strong);
}
.purchase-quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.purchase-quantity__label {
  display: grid;
  gap: 0.1rem;
  color: var(--color-text-strong);
  font-size: 0.9rem;
  font-weight: 600;
}
.purchase-quantity__label small {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 400;
}
.purchase-quantity__control {
  width: auto;
}
/* Preço por quantidade (`snippets/quantity-tiers.liquid`): uma linha por faixa,
   a da quantidade escolhida marcada com `aria-current`. Seletores em `:where()`
   para a aparência das partes `quantity-tiers` e `quantity-tier` no editor
   ganhar sem disputa. */
:where(.quantity-tiers) {
  display: grid;
  gap: 0.4rem;
}
:where(.quantity-tiers__title) {
  margin: 0;
}
:where(.quantity-tiers__list) {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(.quantity-tiers__tier) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-text-soft);
  font-size: var(--type-meta-size);
}
:where(.quantity-tiers__tier[aria-current="true"]) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-text-strong);
}
:where(.quantity-tiers__range) {
  flex: 1 1 auto;
  min-width: 0;
}
:where(.quantity-tiers__price strong) {
  color: var(--color-text-strong);
}
:where(.quantity-tiers__savings) {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--color-success-bg);
  color: var(--color-success-text);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
/* No carrinho a lista fica abaixo do preço da linha, ocupando a largura dela. */
:where(.cart-line .quantity-tiers) {
  margin-top: 0.5rem;
}
/* Resumo do preço: hoje e, na assinatura, o valor de cada ciclo. */
.purchase-summary {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-bg-alt);
}
.purchase-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.purchase-summary__label {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  color: var(--color-text-strong);
  font-size: 0.9rem;
}
.purchase-summary__label small {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
.purchase-summary__label small:empty {
  display: none;
}
.purchase-summary__amount {
  flex: 0 0 auto;
  color: var(--color-text-strong);
  font-size: 1.5rem;
  line-height: 1.1;
  white-space: nowrap;
}
.purchase-summary__amount--recurring {
  font-size: 1.2rem;
}
.purchase-summary__recurring {
  display: grid;
  gap: 0.6rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}
.purchase-summary__next {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.8rem;
}
.purchase-summary__next strong {
  color: var(--color-text-strong);
}
@media (max-width: 767px) {
  .purchase-summary {
    padding: 0.85rem;
  }
  .purchase-summary__amount {
    font-size: 1.15rem;
  }
  .purchase-summary__amount--recurring {
    font-size: 1rem;
  }
  .purchase-product__body > .purchase-product__title {
    font-size: 1.05rem;
  }
}
.purchase-configurator__feedback,
.purchase-configurator__error {
  color: var(--color-error);
  font-size: 0.78rem;
}
.purchase-configurator__feedback:empty {
  display: none;
}
.purchase-configurator__submit {
  width: 100%;
}
/* Dentro da janela o botão de enviar fica sempre à vista; o conteúdo rola por baixo dele. A
   sombra na cor da superfície cobre o que passa atrás. */
.purchase-configurator__submit--sticky {
  position: sticky;
  bottom: 0;
  box-shadow:
    0 0 0 0.75rem var(--color-surface),
    0 1.5rem 0 0.75rem var(--color-surface);
}
.purchase-configuration-summary,
.cart-line__components {
  display: grid;
  gap: 0.25rem;
  margin: 0.45rem 0 0;
  padding: 0;
  font-size: 0.75rem;
}
.purchase-configuration-summary > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.purchase-configuration-summary dt {
  color: var(--color-text-muted);
}
.purchase-configuration-summary dt::after {
  content: ":";
}
.purchase-configuration-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.cart-line__components {
  padding-left: 1rem;
  color: var(--color-text-soft);
}
.cart-line__subscription,
.cart-line__purchase-mode {
  margin: 0.35rem 0 0;
  color: var(--color-text-soft);
  font-size: 0.75rem;
}
.cart-line__purchase-control,
[data-pc-purchase-switch-form] form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
}
.cart-line__purchase-control {
  margin-top: 0.5rem;
}
.purchase-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-strong);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.purchase-switch:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
.purchase-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 1.25rem;
  border: 1px solid var(--color-border-input);
  border-radius: 999px;
  background: var(--color-bg-alt);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.purchase-switch__thumb {
  position: absolute;
  inset: 0.16rem auto auto 0.16rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: transform 150ms ease, background-color 150ms ease;
}
.purchase-switch[aria-checked='true'] .purchase-switch__track {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.purchase-switch[aria-checked='true'] .purchase-switch__thumb {
  background: var(--color-surface);
  transform: translateX(1rem);
}
.purchase-switch:focus-visible,
.purchase-switch__change:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
.purchase-switch__label {
  font-size: 0.8rem;
  font-weight: 600;
}
.purchase-switch__change {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.purchase-switch__feedback:empty {
  display: none;
}
.purchase-switch__feedback {
  flex-basis: 100%;
  color: var(--color-error-text);
  font-size: 0.75rem;
}
.purchase-configurator-popover {
  inset: auto 0 0;
  width: min(34rem, 100%);
  max-height: min(86dvh, 48rem);
  margin: auto;
  padding: 1rem;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
  background: var(--color-surface);
  color: var(--color-text);
}
.purchase-configurator-popover:popover-open {
  display: grid;
  align-content: start;
  gap: 1.1rem;
  padding: 1.25rem 1rem 1.5rem;
}
.purchase-configurator-popover::backdrop {
  background: rgb(0 0 0 / 48%);
}
.purchase-configurator-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.purchase-configurator-popover:not(:popover-open) > .purchase-configurator-popover__header {
  margin-bottom: 1rem;
}
.purchase-configurator-popover__close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-soft);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .purchase-configurator-popover__close:hover {
    background: var(--color-bg-alt);
    color: var(--color-text-strong);
  }
}
.purchase-configurator-popover__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.purchase-configurator-popover__header > strong {
  color: var(--color-text-strong);
  font-size: 1.05rem;
}
@media (min-width: 48rem) {
  .purchase-configurator-popover:popover-open {
    padding: 1.5rem;
  }
  .purchase-configurator-popover {
    inset: 50% auto auto 50%;
    width: min(34rem, calc(100vw - 2rem));
    border-radius: var(--radius-overlay);
    transform: translate(-50%, -50%);
  }
}
/* Compra rápida (`components/quick-buy.liquid`, aberta pelo `storefront.js`).
   O `<dialog>` cobre a tela e é transparente: a caixa visível é a raiz
   `.quick-buy`, e clicar fora dela é clicar no próprio dialog (fecha). Só o
   corpo rola; o botão de adicionar fica fixo no fim dele
   (`.purchase-configurator__submit--sticky`). Seletores em `:where()` ou com
   uma classe, para a Aparência das partes ganhar sem disputa. */
.quick-buy-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--layer-dialog);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--color-text);
}
:where(.quick-buy-dialog)[open] {
  display: flex;
}
.quick-buy-dialog::backdrop {
  background: rgb(0 0 0 / 48%);
}
:where(html:has(.quick-buy-dialog[open])) {
  overflow: hidden;
}
.quick-buy-fragment {
  display: contents;
}
.quick-buy {
  display: flex;
  flex-direction: column;
  width: min(calc(100% - 2rem), 52rem);
  max-height: min(90vh, 48rem);
  max-height: min(90dvh, 48rem);
  margin: auto;
  overflow: hidden;
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}
.quick-buy__header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.quick-buy__title {
  margin: 0;
  color: var(--color-text-strong);
}
.quick-buy__title:focus {
  outline: none;
}
.quick-buy__close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-soft);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .quick-buy__close:hover {
    background: var(--color-bg-alt);
    color: var(--color-text-strong);
  }
}
.quick-buy__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.quick-buy__body {
  display: grid;
  flex: 1 1 auto;
  grid-template-areas: "summary" "purchase";
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 1rem 1.5rem;
  min-height: 0;
  padding: 1.25rem;
  overflow: auto;
  overscroll-behavior: contain;
}
:where(.quick-buy--with-media) > .quick-buy__body {
  grid-template-areas: "media summary" "media purchase";
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-rows: auto 1fr;
}
.quick-buy__media {
  display: grid;
  grid-area: media;
  align-content: start;
  gap: 0.5rem;
  min-width: 0;
}
.quick-buy__stage {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-surface);
  background: var(--color-bg-alt);
}
.quick-buy__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quick-buy__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(.quick-buy__thumbs) img {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-control);
  object-fit: cover;
}
.quick-buy__summary {
  display: grid;
  grid-area: summary;
  align-content: start;
  gap: 0.25rem;
  min-width: 0;
}
.quick-buy__seller {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.quick-buy__price {
  font-size: 1.25rem;
  font-weight: 600;
}
.quick-buy__purchase {
  display: grid;
  grid-area: purchase;
  align-content: start;
  gap: 1rem;
  min-width: 0;
}
:where(.quick-buy__options) .variation-groups {
  margin: 0;
}
.quick-buy__unavailable {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.quick-buy__details {
  justify-self: start;
  margin-top: 0.25rem;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
@media (min-width: 768px) {
  .quick-buy--side {
    width: min(100%, 30rem);
    height: 100%;
    max-height: none;
    margin: 0 0 0 auto;
    border-radius: var(--radius-overlay) 0 0 var(--radius-overlay);
  }
  :where(.quick-buy--side) > .quick-buy__body {
    grid-template-areas: "media" "summary" "purchase";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  :where(.quick-buy--side) .quick-buy__stage {
    max-width: 16rem;
  }
}
@media (max-width: 767px) {
  :where(.quick-buy--with-media) > .quick-buy__body {
    grid-template-areas: "media summary" "purchase purchase";
    grid-template-columns: 9rem minmax(0, 1fr);
    grid-template-rows: none;
    gap: 1rem;
  }
  .quick-buy__body {
    padding: 1rem;
  }
  .quick-buy__header {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
  }
  .quick-buy--mobile-sheet {
    width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    margin: auto 0 0;
    border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  :where(.quick-buy--mobile-sheet) .quick-buy__thumbs {
    display: none;
  }
}
/* Gatilho esperando o fragmento: o texto fica, um giro pequeno entra no fim. */
:where([data-quick-buy-trigger])[aria-busy="true"] {
  cursor: progress;
}
:where([data-quick-buy-trigger])[aria-busy="true"]::after {
  content: "";
  flex: 0 0 auto;
  width: 0.9em;
  height: 0.9em;
  margin-inline-start: 0.4rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-pill);
  animation: confirm-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  :where([data-quick-buy-trigger])[aria-busy="true"]::after {
    animation: none;
    border-top-color: currentColor;
    opacity: 0.6;
  }
}
/* Aviso curto depois de adicionar sem abrir a gaveta. */
.quick-buy-toast {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  left: 50%;
  z-index: calc(var(--layer-dialog) + 1);
  width: max-content;
  max-width: min(30rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--color-text-strong);
  box-shadow: var(--shadow-lg);
  color: var(--color-surface);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  transform: translateX(-50%);
}
:where(.quick-buy-toast)[data-tone="error"] {
  background: var(--color-error-text);
}
.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(--cart-icon-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);
}
:where(.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(--cart-icon-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 :where(.form-control),
.cart-summary-card__shipping :where(.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-summary-card__coupon-trigger .icon,
.cart-coupon-applied .icon {
  color: var(--cart-icon-color, inherit);
}
.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 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(--cart-icon-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);
  max-height: min(80dvh, 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: 1rem 1rem 0.4rem;
  color: var(--color-text-soft);
  font-size: 0.75rem;
}
/* Com cupons listados acima, a divisória separa "escolher" de "digitar". */
.cart-coupon-list + form .cart-coupon-manual {
  border-top: 1px solid var(--color-border);
}
.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;
}
/* Endereço temporário da sessão ("desta compra") — informativo, não estado. */
.tag--session {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}
/* ── 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: var(--sf-page-block) 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;
}
/* Campo de senha com olho: o botão ocupa a altura toda do controle, colado à
   direita, e o input reserva o espaço só quando o botão está visível (sem JS
   ele continua `hidden` e o campo fica como qualquer outro). */
.auth-field__control {
  position: relative;
  display: block;
}
.auth-field__control:has(.auth-field__toggle:not([hidden])) > input {
  padding-inline-end: 2.75rem;
}
.auth-field__toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .auth-field__toggle:hover {
    color: var(--color-text);
  }
}
.auth-field__toggle:focus-visible {
  outline: none;
  color: var(--color-text);
  box-shadow: inset 0 0 0 3px var(--color-focus-ring);
}
/* Modal de confirmação da senha atual (editar cadastro). Só existe com Alpine;
   sem JS o campo fica inline no formulário. */
.account-confirm {
  position: fixed;
  inset: 0;
  z-index: var(--layer-fullscreen);
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.account-confirm__box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 28rem;
  width: 100%;
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.account-confirm__box h2 {
  margin: 0;
  font-size: 1.05rem;
}
.account-confirm__box p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.account-confirm__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
/* 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;
}
/* Verificação anti-robô (snippet `turnstile` + `bindTurnstile` do storefront.js).
   O widget só ocupa espaço quando a Cloudflare pede o clique; a nota diz o que
   está acontecendo com o envio que espera o token. */
.turnstile-note {
  margin: 0.5rem 0 0;
  font-size: var(--type-meta-size);
  color: var(--color-text-soft);
}
.turnstile-note[data-tone='error'] {
  color: var(--color-error-text);
}

.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;
}
.fixed-shipping-offer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  font-size: var(--cart-fixed-shipping-notice-font-size);
}
:where(.cart-summary-card) > .fixed-shipping-offer {
  margin-inline: var(--cart-fixed-shipping-notice-margin);
}
.fixed-shipping-offer form {
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 0;
}
.fixed-shipping-included {
  display: block;
  margin-top: var(--cart-fixed-shipping-notice-margin);
  color: var(--color-success-text);
  font-size: var(--cart-fixed-shipping-notice-font-size);
  font-weight: 600;
  white-space: normal;
}
.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;
}
/* ==========================================================================
   Afiliado (D-15, D-16): a barra no alto da loja, a área em /minha-conta/afiliado
   e o "Compartilhar este carrinho". Ferramenta de quem divulga, não desenho da
   loja: usa só os tokens neutros e some na prévia do editor.
   ========================================================================== */
:where(.affiliate-bar, .affiliate-cart-share, .affiliate-area) [hidden] {
  display: none;
}
/* Botões lado a lado que quebram linha; no celular cada um ocupa a sua metade,
   com a altura de toque cheia. */
.affiliate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.affiliate-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* Barra do afiliado. Fica no fluxo, acima do cabeçalho, e não fixa na tela:
   assim nunca cobre o botão de comprar nem a barra de compra do celular. */
.affiliate-bar {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-size: 0.875rem;
}
:where([data-sf-preview]) .affiliate-bar {
  display: none;
}
.affiliate-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  max-width: var(--container-width);
  margin-inline: auto;
  padding: 0.4rem var(--sf-page-gutter);
}
.affiliate-bar__who {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.affiliate-bar__earn {
  white-space: nowrap;
}
.affiliate-bar__earn strong {
  color: var(--color-success-text);
}
.affiliate-bar__earn-short,
.affiliate-bar__open,
.affiliate-bar__sheet-head,
.affiliate-bar__backdrop {
  display: none;
}
.affiliate-bar__panel {
  display: flex;
  flex: 1 1 32rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.affiliate-bar__campaign select {
  min-height: 2.25rem;
  padding-block: 0.3rem;
  font-size: 0.875rem;
}
.affiliate-bar__new form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.affiliate-bar__new-hint {
  flex-basis: 100%;
  margin: 0;
}
.affiliate-bar__new input[type='text'] {
  width: 14rem;
  max-width: 100%;
  min-height: 2.25rem;
  font-size: 0.875rem;
}
.affiliate-bar__share {
  position: relative;
  /* O endereço é só pra conferir (quem copia usa o botão): ele é o que encolhe
     pra barra caber numa linha a 1280 px, com o ganho e "Área do afiliado". */
  flex: 1 1 7rem;
  min-width: 0;
}
.affiliate-bar__link {
  width: 100%;
  min-height: 2.25rem;
  padding-block: 0.3rem;
  font-size: 0.8125rem;
  background: var(--color-surface);
}
/* No computador o QR Code abre por cima da página, logo abaixo do link. */
.affiliate-bar__qr {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: var(--layer-shell-popover);
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-md);
}
.affiliate-bar__qr:not([hidden]) {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
}
.affiliate-bar__qr-download {
  font-size: 0.8125rem;
}
.affiliate-bar__qr img,
.affiliate-cart-share__qr img {
  display: block;
  width: 10rem;
  height: 10rem;
}
.affiliate-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.affiliate-bar__status {
  margin: 0;
}
.affiliate-bar__status:empty {
  display: none;
}
.affiliate-bar__area {
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* Celular: uma linha só, com o ganho e "Compartilhar"; o resto abre numa
     folha por baixo. Com o ganho na linha, o rótulo fica só para o leitor de
     tela, porque os três não cabem a 390 px. */
  .affiliate-bar__inner {
    flex-wrap: nowrap;
    min-height: 2.75rem;
    padding-block: 0.25rem;
  }
  .affiliate-bar__who {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .affiliate-bar:has(.affiliate-bar__earn:not([hidden])) .affiliate-bar__who > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .affiliate-bar__earn-long {
    display: none;
  }
  .affiliate-bar__earn-short {
    display: inline;
  }
  .affiliate-bar__earn {
    flex: 1 1 auto;
  }
  .affiliate-bar__open {
    display: inline-flex;
    flex: none;
    min-height: 2.75rem;
  }
  .affiliate-bar__panel {
    display: none;
  }
  .affiliate-bar.is-open .affiliate-bar__panel {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--layer-dialog);
    display: grid;
    gap: 0.75rem;
    max-height: 85dvh;
    overflow-y: auto;
    padding: 1rem var(--sf-page-gutter) calc(1rem + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }
  .affiliate-bar.is-open .affiliate-bar__backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: calc(var(--layer-dialog) - 1);
    display: block;
    background: rgb(0 0 0 / 0.45);
  }
  .affiliate-bar__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .affiliate-bar__sheet-title {
    margin: 0;
    font-size: 1.05rem;
  }
  .affiliate-bar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.5rem;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }
  .affiliate-bar__campaign select,
  .affiliate-bar__new input[type='text'],
  .affiliate-bar__link {
    width: 100%;
    min-height: var(--control-height);
    font-size: 1rem;
  }
  .affiliate-bar__new input[type='text'] {
    flex: 1 1 100%;
  }
  /* Na folha: o link, "Copiar link" largo (a ação principal) e, embaixo, WhatsApp,
     Compartilhar e QR Code em duas colunas. O QR Code só aparece quando a pessoa
     pede, no fim da folha: aberto de saída ele tomava um terço da altura. */
  .affiliate-bar__share {
    display: contents;
  }
  .affiliate-bar__qr {
    position: static;
    order: 1;
    justify-self: center;
    box-shadow: none;
  }
  .affiliate-bar__area {
    order: 2;
  }
  .affiliate-bar__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .affiliate-bar__actions > [data-sf-affiliate-copy],
  .affiliate-bar__actions > [data-sf-affiliate-native]:not([hidden]) + .affiliate-bar__qr-toggle {
    grid-column: 1 / -1;
  }
  .affiliate-bar__actions :where(.btn),
  .affiliate-bar__new :where(.btn) {
    flex: 1 1 0;
    justify-content: center;
    min-height: var(--control-height);
    white-space: nowrap;
  }
  .affiliate-bar__area {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: 2.75rem;
  }
}

/* Área do afiliado (/minha-conta/afiliado e as partes dela). Cada parte é uma
   página própria com o mesmo cabeçalho: título, sino dos avisos e abas. */
.affiliate-area {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}
.affiliate-area > * {
  margin: 0;
}
.affiliate-area h2 {
  margin: 0;
}
/* Título de seção dentro da área: um degrau abaixo do título da página. O h2 do
   tema é dimensionado pra seção de vitrine e ficaria maior que o próprio título
   "Área do afiliado". O h2 com classe tem regra própria. */
.affiliate-area h2:where(:not([class])) {
  font-size: 1.15rem;
  line-height: 1.3;
}
.affiliate-muted {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.affiliate-subtitle {
  margin: 0;
  font-size: 1.05rem;
}

/* Cabeçalho: título e sino na mesma linha, abas embaixo. */
.affiliate-head {
  display: grid;
  gap: 0.75rem;
}
.affiliate-head__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.affiliate-head__title {
  margin: 0;
  font-size: var(--type-h2-size);
}
.affiliate-bell {
  position: relative;
}
.affiliate-bell__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--control-height);
  padding: 0 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-strong);
  font-size: 0.875rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.affiliate-bell__button::-webkit-details-marker {
  display: none;
}
.affiliate-bell[open] > .affiliate-bell__button,
.affiliate-bell__button:focus-visible {
  border-color: var(--color-primary);
}
.affiliate-bell__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-error);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.affiliate-bell__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: var(--layer-shell-popover);
  display: flex;
  flex-direction: column;
  width: min(24rem, calc(100vw - 2 * var(--sf-page-gutter)));
  max-height: min(32rem, 75vh);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
/* O cabeçalho do painel fica fixo: "Ver todos" e "Marcar todos como lidos" sempre à vista. */
.affiliate-bell__panel-head {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 0.75rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--color-border);
}
.affiliate-bell__panel-head form {
  margin: 0;
}
.affiliate-bell__panel-head :where(.affiliate-bell__all, .affiliate-link-button) {
  min-height: 2.75rem;
}
.affiliate-bell__empty {
  margin: 0;
  padding: 1rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.affiliate-bell__list {
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}
.affiliate-bell__list > li + li {
  border-top: 1px solid var(--color-border);
}
.affiliate-bell__list form {
  margin: 0;
}
.affiliate-bell__all {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

/* Um aviso: o ponto de não lido, o título, o texto e a data. No sino o aviso
   inteiro é o alvo do toque; um não lido é botão (marca e abre), um lido é link. */
.affiliate-notice-row {
  display: grid;
  grid-template-columns: 0.5rem minmax(0, 1fr);
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .affiliate-notice-row:hover {
    background: var(--color-bg-alt);
  }
}
.affiliate-notice-row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.affiliate-notice-row__dot {
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.45rem;
  border-radius: var(--radius-pill);
}
.affiliate-notice-row--unread .affiliate-notice-row__dot {
  background: var(--color-primary);
}
.affiliate-notice-row__text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.affiliate-notice-row__title {
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.affiliate-notice-row--unread .affiliate-notice-row__title {
  color: var(--color-text-strong);
  font-weight: 600;
}
.affiliate-notice-row__body {
  color: var(--color-text-soft);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.affiliate-notice-row__date {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* Abas: uma linha só, cada aba com a mesma largura. */
.affiliate-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-border);
}
.affiliate-tabs--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.affiliate-tabs--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.affiliate-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 0.25rem;
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .affiliate-tabs a:hover {
    color: var(--color-text-strong);
    background: var(--color-bg-alt);
  }
}
.affiliate-tabs a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.affiliate-tabs a[aria-current="page"] {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

/* Barra fina de uma tela: o que filtra à esquerda, a ação principal à direita. */
.affiliate-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}
.affiliate-bar--end {
  justify-content: flex-end;
}
.affiliate-bar form {
  margin: 0;
}

/* Título de página, voltar e barras de ferramenta. */
.affiliate-page-head,
.affiliate-toolbar,
.affiliate-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}
.affiliate-page-head > div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}
.affiliate-page-head form {
  margin: 0;
}
.affiliate-page-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.affiliate-page-title {
  margin: 0;
  overflow-wrap: anywhere;
}
.affiliate-area > .affiliate-back {
  margin-bottom: -0.75rem;
}
.affiliate-back {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.35rem;
  min-height: 2.25rem;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .affiliate-back:hover {
    color: var(--color-text-strong);
  }
}
.affiliate-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  font-weight: 600;
}
.affiliate-period {
  display: flex;
  gap: 0.5rem;
  margin: 0;
}
.affiliate-period :where(.form-control) {
  width: auto;
}
.affiliate-section {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}
.affiliate-section__link {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.affiliate-link-button {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .affiliate-link-button:hover {
    text-decoration: underline;
  }
}

/* Superfícies e textos de apoio. */
.affiliate-card {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.affiliate-card > :where(h2, p, ol, ul) {
  margin: 0;
}
.affiliate-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius);
  background: var(--color-info-surface);
  color: var(--color-info-text);
  font-size: 0.875rem;
}
.affiliate-callout svg {
  flex: none;
  margin-top: 0.1rem;
}
.affiliate-empty {
  margin: 0;
  padding: 1.25rem 1rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  text-align: center;
}
.affiliate-empty-state {
  justify-items: start;
}
.affiliate-empty-state__title {
  color: var(--color-text-strong);
  font-size: 1.05rem;
  font-weight: 700;
}
/* Passos numerados: inscrição e primeiros passos. */
.affiliate-steps {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
  counter-reset: affiliate-step;
}
.affiliate-steps li {
  position: relative;
  padding-left: 2.25rem;
  counter-increment: affiliate-step;
}
.affiliate-steps li::before {
  content: counter(affiliate-step);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Formulários. */
.affiliate-field {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}
.affiliate-form-card form {
  display: grid;
  gap: 1rem;
  max-width: 36rem;
}
.affiliate-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.affiliate-inline-form {
  display: flex;
  gap: 0.5rem;
  max-width: 30rem;
}
.affiliate-inline-form :where(.form-control) {
  flex: 1;
  min-width: 0;
}
/* Campo com o começo do link fixo à esquerda: a pessoa vê o link inteiro
   enquanto escolhe como ele termina. */
.affiliate-prefixed {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}
.affiliate-prefixed:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.affiliate-prefixed__prefix {
  display: flex;
  align-items: center;
  max-width: 60%;
  padding: 0.4rem 0.6rem;
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.affiliate-prefixed :where(.form-control) {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.affiliate-prefixed :where(.form-control:focus) {
  outline: none;
  box-shadow: none;
}

/* O link do afiliado numa linha só: endereço, "Copiar" e "Compartilhar". O compartilhar abre um
   painel pequeno com WhatsApp, os outros apps e o QR Code. */
.affiliate-share {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.affiliate-share__line {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}
.affiliate-share__url {
  display: block;
  flex: 1;
  min-width: 0;
  height: var(--control-height);
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  color: var(--color-text-strong);
  font-size: 0.9375rem;
  line-height: calc(var(--control-height) - 2px);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  user-select: all;
}
.affiliate-share__copy {
  flex: none;
}
.affiliate-share__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.affiliate-share__more {
  position: relative;
}
.affiliate-share__more > summary {
  list-style: none;
  cursor: pointer;
}
.affiliate-share__toggle {
  height: var(--control-height);
}
.affiliate-share__more > summary::-webkit-details-marker {
  display: none;
}
.affiliate-share__menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 0.5rem;
  width: max-content;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.affiliate-share__menu > :where(.btn) {
  justify-content: flex-start;
}
.affiliate-share__qr {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  margin: 0;
}
.affiliate-share__qr img {
  display: block;
  width: 9rem;
  height: 9rem;
  padding: 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
}

/* Cupons do afiliado, um por linha, com "Copiar". */
.affiliate-coupons {
  display: grid;
  gap: 0.5rem;
}
.affiliate-coupons__title {
  font-size: 1.05rem;
}
.affiliate-coupons ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.affiliate-coupon-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
}
.affiliate-coupon-chip__text {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.affiliate-coupon-chip__code {
  color: var(--color-primary-dark);
  font-size: 1rem;
  font-weight: 700;
}
.affiliate-coupon-chip__meta {
  color: var(--color-text-soft);
  font-size: 0.8125rem;
}

/* Dinheiro: o "Liberado" grande e a barra empilhada A liberar / Liberado / Já recebido. */
.affiliate-money {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.affiliate-money__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.affiliate-money__main {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.affiliate-money__label {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  font-weight: 600;
}
.affiliate-money__hint {
  color: var(--color-text-muted);
  font-weight: 400;
}
.affiliate-money__amount {
  margin: 0;
  color: var(--color-success-text);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.affiliate-money__bar {
  display: block;
  width: 100%;
  height: 0.625rem;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.affiliate-money__track {
  fill: var(--color-bg-alt);
}
.affiliate-money__part--pending {
  fill: var(--color-warning);
}
.affiliate-money__part--available {
  fill: var(--color-success);
}
.affiliate-money__part--paid {
  fill: var(--color-primary);
}
.affiliate-money__legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}
.affiliate-money__legend > div {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}
.affiliate-money__legend dt {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.affiliate-money__legend dd {
  margin: 0;
  color: var(--color-text-strong);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.affiliate-money__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
}
.affiliate-money__dot--pending {
  background: var(--color-warning);
}
.affiliate-money__dot--available {
  background: var(--color-success);
}
.affiliate-money__dot--paid {
  background: var(--color-primary);
}

/* Números soltos (a página de uma campanha ainda usa os cartões). */
.affiliate-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
}
.affiliate-kpis--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.affiliate-kpi {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.affiliate-kpi dt {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}
.affiliate-kpi dd {
  margin: 0;
  color: var(--color-text-strong);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Seus números: quatro valores numa faixa só, separados por linha fina. */
.affiliate-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}
.affiliate-strip__item {
  display: grid;
  align-content: start;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.65rem 1rem;
}
.affiliate-strip__item + .affiliate-strip__item {
  border-left: 1px solid var(--color-border);
}
.affiliate-strip dt {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}
.affiliate-strip dd {
  margin: 0;
  color: var(--color-text-strong);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Gráficos de barras. O SVG é montado no servidor (`affiliate-charts.ts`) num quadro de 100 x 40
   que estica até a largura da coluna; o texto do eixo fica fora dele, em HTML. */
.affiliate-chart {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.affiliate-chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.affiliate-chart__pills {
  display: flex;
  gap: 0.4rem;
}
.affiliate-chart__pill {
  position: relative;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
/* A área de toque chega a 44 px sem engordar o botão. */
.affiliate-chart__pill::after {
  content: '';
  position: absolute;
  inset: -0.25rem 0;
}
.affiliate-chart__pill[aria-pressed='true'] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.affiliate-chart__title {
  margin: 0;
  font-size: 1.05rem;
}
.affiliate-chart__total {
  margin: 0;
  color: var(--color-text-strong);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.affiliate-chart .is-off {
  display: none;
}
.affiliate-chart__svg {
  display: block;
  width: 100%;
  height: 8rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-primary);
}
.affiliate-chart__series {
  fill: currentColor;
}
.affiliate-chart__axis {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.affiliate-chart__axis--each {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  text-align: center;
}

/* Mais vendidos: foto, nome e "3 vendidos · R$ 389,70" em duas linhas fixas. */
.affiliate-products {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}
.affiliate-products > li + li {
  border-top: 1px solid var(--color-border);
}
.affiliate-product {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  color: inherit;
  text-decoration: none;
}
.affiliate-product__photo {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  overflow: hidden;
}
.affiliate-product__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.affiliate-product__text {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.affiliate-product__name {
  color: var(--color-text-strong);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.affiliate-product__meta {
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .affiliate-product:hover .affiliate-product__name {
    text-decoration: underline;
  }
}

/* Lista de campanhas: uma superfície, linhas com divisor. A linha inteira abre
   a campanha; "Copiar link" fica à direita. */
.affiliate-campaigns,
.affiliate-others,
.affiliate-statement,
.affiliate-notice-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}
.affiliate-campaign,
.affiliate-others > li,
.affiliate-statement__row,
.affiliate-notice-item {
  border-bottom: 1px solid var(--color-border);
}
.affiliate-campaign:last-child,
.affiliate-others > li:last-child,
.affiliate-statement__row:last-child,
.affiliate-notice-item:last-child {
  border-bottom: 0;
}
.affiliate-campaign {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-right: 0.5rem;
}
.affiliate-campaign__main {
  display: grid;
  flex: 1;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .affiliate-campaign__main:hover .affiliate-campaign__name {
    color: var(--color-primary);
  }
}
.affiliate-campaign__name {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-text-strong);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.affiliate-campaign__name svg {
  flex: none;
  color: var(--color-text-muted);
}
.affiliate-campaign__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  margin-top: 0.25rem;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.affiliate-campaign__stats strong {
  color: var(--color-text-strong);
}
/* A fatia da comissão, com o rótulo ao lado da barra. */
.affiliate-campaign__share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.affiliate-campaign__share .affiliate-meter {
  flex: none;
  width: 6rem;
  margin-top: 0;
}
.affiliate-campaign__share-label {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
/* Botão só-ícone (copiar o link). O aviso "Copiado!" aparece ao lado e some sozinho. */
.affiliate-icon-button {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-soft);
  cursor: pointer;
}
.affiliate-icon-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
@media (hover: hover) and (pointer: fine) {
  .affiliate-icon-button:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary);
  }
}
.affiliate-icon-button__tip {
  position: absolute;
  top: 50%;
  right: 100%;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius);
  background: var(--color-text-strong);
  color: var(--color-surface);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  transform: translateY(-50%);
  pointer-events: none;
}
.affiliate-icon-button__tip:empty {
  display: none;
}
/* A fatia da comissão do período, como barra fina sob a linha. */
.affiliate-meter {
  display: block;
  width: 100%;
  max-width: 14rem;
  height: 0.25rem;
  margin-top: 0.4rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  appearance: none;
  overflow: hidden;
}
.affiliate-meter::-webkit-progress-bar {
  background: var(--color-border);
}
.affiliate-meter::-webkit-progress-value {
  background: var(--color-primary);
}
.affiliate-meter::-moz-progress-bar {
  background: var(--color-primary);
}
.affiliate-others > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.75rem 1rem;
}
.affiliate-others__label {
  color: var(--color-text-strong);
  font-weight: 600;
}
.affiliate-others__stats {
  color: var(--color-text-soft);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.affiliate-archived {
  display: grid;
  gap: 0.5rem;
}
.affiliate-archived > summary {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.affiliate-archived__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}
.affiliate-archived__list a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

/* Uma campanha: o cabeçalho (voltar e nome), ajustes e arquivar. */
.affiliate-subhead {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.affiliate-quiet-action {
  display: grid;
  gap: 0.1rem;
  justify-items: start;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}
.affiliate-link-button--quiet {
  color: var(--color-text-soft);
}
.affiliate-settings {
  gap: 1rem;
}
.affiliate-settings form {
  margin: 0;
}

/* Ganhos: do pagamento ao repasse, e o extrato. */
.affiliate-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.affiliate-flow li {
  display: grid;
  gap: 0.1rem;
  padding-top: 0.5rem;
  border-top: 3px solid var(--color-border);
  font-size: 0.875rem;
}
.affiliate-flow li:nth-child(2) {
  border-top-color: var(--color-success-border);
}
.affiliate-flow li:nth-child(3) {
  border-top-color: var(--color-primary);
}
.affiliate-flow__step {
  color: var(--color-text-strong);
  font-weight: 600;
}
.affiliate-flow__note {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}
.affiliate-statement__row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}
.affiliate-statement__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
}
.affiliate-statement__row--commission .affiliate-statement__icon {
  background: var(--color-success-surface);
  color: var(--color-success-text);
}
.affiliate-statement__row--reversal .affiliate-statement__icon {
  background: var(--color-error-surface);
  color: var(--color-error-text);
}
.affiliate-statement__row--payout .affiliate-statement__icon {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.affiliate-statement__text,
.affiliate-statement__value {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.affiliate-statement__value {
  justify-items: end;
  text-align: right;
}
.affiliate-statement__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--color-text-strong);
  font-weight: 500;
  overflow-wrap: anywhere;
  overflow: hidden;
}
.affiliate-statement__more {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
}
.affiliate-statement__date {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}
.affiliate-statement__amount {
  color: var(--color-text-strong);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.affiliate-statement__amount--in {
  color: var(--color-success-text);
}
/* Comissão que foi estornada: neutra e riscada, sem sinal. O estorno vem em linha própria. */
.affiliate-statement__row--voided .affiliate-statement__icon {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}
.affiliate-statement__row--voided .affiliate-statement__title {
  color: var(--color-text-muted);
}
.affiliate-statement__amount--voided {
  color: var(--color-text-muted);
  font-weight: 500;
  text-decoration: line-through;
}
.affiliate-chip {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.affiliate-chip--pending {
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
}
.affiliate-chip--available {
  background: var(--color-success-surface);
  color: var(--color-success-text);
}
.affiliate-more {
  justify-self: start;
}

/* Página de avisos: avisos agrupados por dia. A linha toda abre o aviso (e marca como lido, se
   era novo), como no sino. */
.affiliate-notice-groups {
  display: grid;
  gap: 1rem;
}
.affiliate-notice-group {
  display: grid;
  gap: 0.35rem;
}
.affiliate-notice-group__label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}
.affiliate-notice-item form {
  margin: 0;
}
.affiliate-pager {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Inscrição e afiliado desligado. */
.affiliate-join form {
  display: grid;
  gap: 0.75rem;
  max-width: 32rem;
}
.affiliate-join textarea {
  min-height: 6rem;
  resize: vertical;
}
.affiliate-join__reason,
.affiliate-off__reason {
  padding-left: 0.75rem;
  border-left: 3px solid var(--color-warning-border);
  color: var(--color-text-strong);
  overflow-wrap: anywhere;
}
.affiliate-join__again {
  display: grid;
  gap: 0.75rem;
}
.affiliate-join__again > summary {
  justify-self: start;
  list-style: none;
  cursor: pointer;
}
.affiliate-join__again > summary::-webkit-details-marker {
  display: none;
}
.affiliate-join__again[open] > summary {
  display: none;
}
.affiliate-off {
  border-color: var(--color-warning-border);
  background: var(--color-warning-surface);
}

@media (max-width: 767px) {
  /* Celular: a página tem a folga de 16 px; as superfícies, no máximo 16 px
     dentro dela. O QR Code sai do lado do link e vai pra trás de um botão. */
  .affiliate-area {
    gap: 1rem;
  }
  .affiliate-bell__label {
    display: none;
  }
  .affiliate-bell__button {
    padding: 0 0.7rem;
  }
  .affiliate-bell__count {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
  }
  .affiliate-tabs a {
    font-size: 0.8125rem;
  }
  .affiliate-card {
    padding: 1rem;
  }
  /* O link e o dinheiro: uma superfície com 12 px de folga, por dentro dos 16 px da página. */
  .affiliate-share,
  .affiliate-money,
  .affiliate-chart {
    padding: 0.75rem;
  }
  /* Sem o texto, o botão de compartilhar é um quadrado de 44 px ao lado de "Copiar". */
  .affiliate-share__toggle {
    justify-content: center;
    width: var(--control-height);
    padding: 0;
  }
  .affiliate-share__toggle-label {
    display: none;
  }
  .affiliate-share__line {
    gap: 0.4rem;
  }
  .affiliate-share__menu {
    min-width: min(14rem, calc(100vw - 3.5rem));
  }
  .affiliate-share__menu > :where(.btn) {
    min-height: var(--control-height);
  }
  .affiliate-share__qr img {
    width: 8.5rem;
    height: 8.5rem;
  }
  .affiliate-money__amount {
    font-size: 1.75rem;
  }
  .affiliate-money__legend dd {
    font-size: 0.875rem;
  }
  /* Os quatro números numa fileira só, com mais espaço para o valor em reais. */
  .affiliate-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
  }
  .affiliate-strip__item {
    padding: 0.5rem 0.45rem;
  }
  .affiliate-strip dt {
    font-size: 0.75rem;
  }
  .affiliate-strip dd {
    font-size: 1rem;
  }
  .affiliate-chart__svg {
    height: 7.5rem;
  }
  .affiliate-product {
    padding: 0.4rem 0.75rem;
  }
  .affiliate-product__photo {
    width: 2.75rem;
    height: 2.75rem;
  }
  .affiliate-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .affiliate-kpis--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .affiliate-kpi {
    padding: 0.7rem 0.75rem;
  }
  .affiliate-kpi dd {
    font-size: 1.15rem;
  }
  .affiliate-kpis--3 dd {
    font-size: 1rem;
  }
  /* Os três passos lado a lado, com a nota curta embaixo de cada um. */
  .affiliate-flow {
    gap: 0.5rem;
  }
  .affiliate-flow li {
    padding-top: 0.4rem;
    font-size: 0.8125rem;
  }
  .affiliate-flow__note {
    font-size: 0.75rem;
  }
  .affiliate-campaign {
    gap: 0;
    padding-right: 0.25rem;
  }
  .affiliate-campaign__main {
    padding: 0.75rem 0 0.75rem 0.75rem;
  }
  .affiliate-campaign__stats {
    gap: 0 0.75rem;
  }
  .affiliate-link-button,
  .affiliate-quiet-action .affiliate-link-button {
    min-height: var(--control-height);
  }
  .affiliate-archived > summary {
    min-height: var(--control-height);
  }
  .affiliate-others > li,
  .affiliate-statement__row {
    padding: 0.75rem;
  }
  .affiliate-statement__row {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0.6rem;
  }
  .affiliate-statement__icon {
    width: 2rem;
    height: 2rem;
  }
  .affiliate-notice-row {
    gap: 0.6rem;
    padding: 0.75rem;
  }
  .affiliate-prefixed {
    flex-direction: column;
  }
  .affiliate-prefixed__prefix {
    max-width: none;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .affiliate-form-card form,
  .affiliate-join form {
    max-width: none;
  }
  .affiliate-form-actions > :where(.btn) {
    flex: 1 1 0;
    justify-content: center;
    min-height: var(--control-height);
  }
  .affiliate-inline-form {
    max-width: none;
  }
  .affiliate-coupon-chip :where(.btn),
  .affiliate-join :where(.btn),
  .affiliate-more {
    min-height: var(--control-height);
  }
  .affiliate-period :where(.form-control) {
    min-height: var(--control-height);
  }
}

/* "Compartilhar este carrinho" (página do carrinho e gaveta). */
.affiliate-cart-share {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.affiliate-cart-share > p {
  margin: 0;
}
.affiliate-cart-share__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-strong);
  font-weight: 600;
}
.affiliate-cart-share__qr:not([hidden]) {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
}
.affiliate-cart-share__qr {
  justify-self: center;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
}
.affiliate-cart-share :where(.btn) {
  flex: 1 1 0;
}
@media (max-width: 767px) {
  .affiliate-cart-share :where(.btn) {
    min-height: var(--control-height);
  }
}
/* 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);
}
/* Formulário de contato configurável (componente `contact-form`). A raiz não
   declara margem vertical: o ritmo entre seções é do reset global. Campos em
   uma coluna por padrão; duas colunas no desktop quando o uso pede, com
   textarea e consentimento sempre na largura toda. */
.contact-form-section {
  display: grid;
  gap: 1rem;
}
.contact-form-section__title {
  margin: 0;
}
.contact-form-section__intro {
  margin: 0;
  color: var(--color-text-soft);
}
.contact-form-section form {
  display: grid;
  gap: 1rem;
}
.contact-form-section__fields {
  display: grid;
  gap: 0.9rem;
}
.contact-form-section__field--wide {
  grid-column: 1 / -1;
}
.contact-form-section__consent {
  max-width: 60ch;
}
.contact-form-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.contact-form-section__success {
  margin-bottom: 0;
}
.contact-form-section__success-text {
  margin: 0.35rem 0 0;
}
/* Linha de caixa de seleção (campo do tipo checkbox e consentimento): duas
   colunas, quadrinho + texto; a mensagem de erro nasce na segunda coluna. O
   wrapper continua `.form-field` pro validador do storefront.js encontrá-lo. */
.contact-form-section__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);
}
:where(.contact-form-section__check) > span {
  font-weight: 500;
}
/* Só o quadrinho é filho direto da linha; sem `[type]` a regra fica em (0,0,1). */
:where(.contact-form-section__check) > input {
  margin-top: 0.2rem;
}
:where(.contact-form-section__check) .field-error {
  grid-column: 2;
}
:where(.contact-form-section__check[data-sf-invalid]) > input {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}
.contact-form-section__error {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .contact-form-section--cols-2 .contact-form-section__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 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: var(--sf-page-block);
}
.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);
}
/* O mesmo ponto no item da lista da conta que tem aviso não visto ("Afiliado"). */
.account-dot {
  display: inline-block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  vertical-align: middle;
}
.account-nav__item--active .icon {
  color: var(--color-primary);
}
/* As listas com nome embaixo de "Favoritos e listas" (preenchidas pelo
   `storefront.js`), recuadas até o rótulo do item. */
.account-nav__lists[hidden] {
  display: none;
}
.account-nav__sublist {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
  padding: 0 0 0 calc(18px + 0.6rem);
  list-style: none;
}
.account-nav__item--sub {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-block: 0.35rem;
  font-weight: 400;
}
.account-nav__item--sub[aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--type-label-weight);
}
.account-nav__item--all {
  color: var(--color-primary);
}
/* O botão que abre a lista só existe no celular (faixa de 767px). */
.account-nav__toggle {
  display: none;
}
.account-nav__logout-item {
  margin-top: 0.35rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.35rem;
}
.account-nav__logout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  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);
}
/* Endereços dentro do perfil (3 primeiros): o mesmo card da página de
   endereços, sem ações, dentro de um painel. */
.account-panel .address-list {
  margin-top: 0.75rem;
}
.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-block: 1rem 1.25rem;
}
/* Mesmo passo dos painéis acima e abaixo: o painel de cima já dá 1,25rem, e no
   fim da página as ações não somam espaço ao rodapé da conta. */
.account-panel + .account-actions {
  margin-top: 0;
}
.account-actions:last-child {
  margin-bottom: 0;
}
.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;
}
/* No celular a folga da superfície é a mesma da página (16 px): com 20 o texto do formulário
   ficava abaixo de 320 px numa tela de 390. */
@media (max-width: 767px) {
  .account-form {
    padding: 1rem;
  }
}

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

/* ── Assinaturas da conta ── */
.subscription-page__intro {
  margin-top: -0.35rem;
  margin-bottom: 1.25rem;
}
.subscription-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.subscription-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  background: var(--color-surface);
}
.subscription-card__head,
.subscription-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.subscription-detail__head {
  margin-bottom: 1.25rem;
}
.subscription-card__head h2,
.subscription-detail__head h1 {
  margin: 0.1rem 0 0.15rem;
}
.subscription-card__eyebrow {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.subscription-badge {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.subscription-badge--success {
  border-color: var(--color-success-border);
  background: var(--color-success-surface);
  color: var(--color-success-text);
}
.subscription-badge--warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
}
.subscription-badge--danger {
  border-color: var(--color-error-border);
  background: var(--color-error-surface);
  color: var(--color-error-text);
}
.subscription-badge--info {
  border-color: var(--color-info-border);
  background: var(--color-info-surface);
  color: var(--color-info-text);
}
.subscription-badge--neutral {
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
}
.subscription-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1rem 0 0;
}
.subscription-summary-grid--detail {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.subscription-summary-grid div {
  min-width: 0;
}
.subscription-summary-grid dt {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
.subscription-summary-grid dd {
  margin: 0.15rem 0 0;
  color: var(--color-text-strong);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.subscription-card__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-border);
}
.subscription-card__link,
.subscription-order-link a,
.subscription-cycle__foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
}
.subscription-order-link {
  margin: 1rem 0 0;
}
.subscription-item-list,
.subscription-cycle-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}
.subscription-item-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}
.subscription-item-list li:last-child {
  border-bottom: 0;
}
.subscription-item-list span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
}
.subscription-address {
  line-height: 1.5;
}
.subscription-address-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.75rem;
  margin-top: 1rem;
}
.subscription-address-form .auth-field {
  margin: 0;
}
.subscription-address-note,
.subscription-policy-note {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
  font-size: 0.85rem;
}
.subscription-cycle-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.subscription-cycle {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.8rem;
}
.subscription-cycle__main,
.subscription-cycle__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.subscription-cycle__main span:not(.subscription-badge),
.subscription-cycle__foot small {
  display: block;
  margin-top: 0.15rem;
}
.subscription-cycle__foot {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-border);
}
.subscription-cancellation {
  border-color: var(--color-warning-border);
}
.subscription-cancel-confirm {
  margin-top: 1rem;
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius);
  background: var(--color-warning-surface);
}
.subscription-cancel-confirm summary {
  padding: 0.75rem;
  color: var(--color-warning-text);
  font-weight: 600;
  cursor: pointer;
}
.subscription-cancel-confirm > div {
  padding: 0 0.75rem 0.75rem;
}
.subscription-cancel-confirm form {
  margin-top: 0.75rem;
}

.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-shipments {
  display: grid;
  gap: 0.75rem;
}
.order-shipment {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}
.order-shipment__head,
.order-shipment__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.order-shipment__method {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.order-shipment__items {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
}
.order-shipment__foot {
  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 — partes atendidas por outra loja do grupo (delegação, D-11) */
.order-delegated-parts,
.order-delegated-parts__items {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}
.order-delegated-parts__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}
.order-delegated-parts__item:last-child {
  border-bottom: none;
}
.order-delegated-parts__items {
  flex-basis: 100%;
  margin-top: 0.25rem;
  color: var(--color-text-soft);
}
.order-items__delegation {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
}
.order-card__derived,
.order-card__delegated {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
}

/* 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);
}
/*
  O que está a liberar não é saldo: fica neutro, abaixo do disponível, pra não ser lido como
  valor que já paga compra.
*/
.credit-balance--pending {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
  margin-top: -0.75rem;
  margin-bottom: 0.5rem;
}
.credit-balance--pending .credit-balance__label,
.credit-balance--pending .credit-balance__value {
  color: var(--color-text-soft);
}
.credit-balance--pending .credit-balance__value {
  font-size: 1.15rem;
}
.credit-balance__hint {
  font-size: 0.85rem;
  margin: 0 0 1.25rem;
}
.credit-debt {
  background: var(--color-warning-surface);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  margin: 0 0 1.25rem;
  overflow-wrap: anywhere;
}
.credit-debt__title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}
.credit-debt__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
}
.credit-debt__note {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
}
.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;
  overflow-wrap: anywhere;
}
.credit-card__list {
  display: inline-block;
  /* Área de toque de 44px sem mexer na altura da linha: o padding volta na margem. */
  padding-block: 0.85rem;
  margin-block: -0.85rem;
  color: inherit;
  text-decoration: underline;
}
.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--pending {
  background: var(--color-warning-bg);
  color: var(--color-warning-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);
}
/* Cores próprias do fluxo (grupo Checkout): a casca do `layouts/system` marca
   o body, e dentro das raízes do checkout e da confirmação os tokens globais
   são reapontados pros tokens do fluxo — as regras abaixo continuam lendo
   `--color-surface`/`--color-primary`/`--color-border-input` e passam a
   responder ao setting sem uma cópia por regra. Sem setting, cada token do
   fluxo vale o global (defaults no :root). O cabeçalho `.co-chrome` é raiz do
   mesmo fluxo (a lista é `SCOPED_CUSTOM_CSS_FIELDS` no theme-kit, a mesma do
   CSS adicional do checkout). O hover de botão é redeclarado aqui porque o do
   :root já foi resolvido com a primária global. */
body.layout-system {
  background: var(--checkout-bg);
}
#checkout,
.checkout-confirmation,
.co-chrome {
  --color-surface: var(--checkout-surface);
  --color-primary: var(--checkout-accent);
  --color-primary-dark: var(--checkout-accent-dark);
  --color-on-primary: var(--checkout-on-accent);
  --color-border-input: var(--checkout-field-border);
  --hover-button-background: var(--color-primary-dark);
  --hover-button-color: var(--color-on-primary);
}
#checkout
  .auth-field
  :is(
    input:not([type="checkbox"], [type="radio"], [type="hidden"]),
    select,
    textarea
  ):focus {
  border-color: var(--checkout-field-focus);
  box-shadow: 0 0 0 3px var(--checkout-field-focus-ring);
}
/* Ícones auxiliares (selo, cadeado, aviso de etapas restantes): cor opcional
   do grupo Checkout; vazio = a cor que cada um já tinha. */
.co-chrome__secure .icon,
.concl-waiting .icon {
  color: var(--checkout-icon-color, inherit);
}
.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);
  /* Sem overflow:hidden — ancestral com overflow mata o position:sticky do
     cabeçalho da etapa aberta (experimento adiante). */
  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(--checkout-icon-color, var(--color-text-faint));
  display: inline-flex;
}
/* Etapa resolvida inverte a hierarquia: o título vira etiqueta e a resolução
   assume a linha principal — o que foi decidido vale mais que o rótulo. */
.step--done .step__head {
  padding: 0.7rem 1.15rem;
}
.step--done .step__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.step--done .step__summary {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-strong);
}
/* Linhas estruturadas da entrega resolvida — uma por loja, alterar próprio. */
.ship-rows {
  padding: 0 1.15rem 0.7rem 3.75rem;
}
/* Sem JS o x-show não age: espelha a regra do corpo e só mostra na resolvida. */
.step:not(.step--done) .ship-rows {
  display: none;
}
.ship-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.5rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius);
  font: inherit;
  color: inherit;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .ship-row:hover {
    background: var(--color-bg-alt);
  }
}
.ship-row + .ship-row {
  border-top: 1px solid var(--color-border);
  border-radius: 0;
}
.ship-row__main {
  flex: 1;
  min-width: 0;
}
.ship-row__loja {
  display: block;
}
.ship-row__choice {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text);
}
/* Título do envio (snippet `envio-head`), o mesmo na linha resolvida e no bloco
   aberto: loja em negrito, "Envio 1 de 3" em peso médio, estoque em cinza. */
.envio-head {
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--color-text-strong);
}
.envio-head__loja {
  font-weight: 700;
}
.envio-head__n {
  font-weight: 600;
}
.envio-head__sep,
.envio-head__where {
  color: var(--color-text-muted);
  font-weight: 400;
}
.ship-row__price {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ship-row__price--free {
  color: var(--color-success-text);
}
.ship-row__edit {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0.15rem 0.25rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}
@media (hover: hover) and (pointer: fine) {
  .ship-row__edit:hover {
    text-decoration: underline;
  }
}
/* Etiquetas de comparação nas opções de frete. */
.ship-chip {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.05rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  white-space: nowrap;
  vertical-align: 0.1rem;
}
.ship-chip--fast {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  color: var(--color-primary);
}
/* O form de logout convive no rail de ações da etapa sem quebrar o flex. */
.step__cta form {
  display: contents;
}
.ident-switch {
  border-top: 1px solid var(--color-border);
  padding-top: 0.9rem;
}
/* Código de 6 dígitos (snippet otp-input): uma caixa por dígito. */
.otp__cells {
  display: flex;
  gap: 0.45rem;
}
.otp__cell {
  width: 2.6rem;
  height: 3.1rem;
  text-align: center;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
}
.otp__cell:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
@media (max-width: 767px) {
  .ship-rows {
    padding-left: 1.15rem;
  }
}
.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);
}




.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 do cartão (título na conclusão) */
.review-pay-title {
  margin: 0.4rem 0 0;
  font-size: 1rem;
}

/* ── Chrome do checkout (layout `system`): voltar + logo + compra protegida ── */
.co-chrome {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.co-chrome__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.co-chrome__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  color: var(--checkout-back-color);
  font-size: 0.85rem;
  font-weight: var(--checkout-back-weight);
  text-decoration: none;
  min-width: 0;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .co-chrome__back:hover {
    color: var(--color-text);
  }
}
.co-chrome__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* A logo pode ser a arte do tema, de qualquer proporção: os dois limites valem
   juntos e a imagem encolhe inteira, sem esticar. */
.co-chrome__logo-img {
  display: block;
  width: auto;
  max-width: 11rem;
  height: auto;
  max-height: 2rem;
  object-fit: contain;
}
.co-chrome__logo-text {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
}
.co-chrome__secure {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  color: var(--checkout-secure-color);
  font-size: 0.8rem;
  font-weight: var(--checkout-secure-weight);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .co-chrome__back span {
    display: none;
  }
  .co-chrome__secure-text {
    display: none;
  }
}

/* Celular: menos moldura e mais conteúdo. Botões de etapa de ponta a ponta,
   respiro das etapas e da página menores, sem o link de voltar (a seta do
   cabeçalho já faz isso) e sem o cartão "faltam N etapas" (a barra fixa já
   diz o mesmo). As medidas são variáveis do fluxo pra o grupo Checkout poder
   ajustá-las sem tocar em regra. */
@media (max-width: 767px) {
  .co-shell {
    --checkout-step-padding-x: 0.9rem;
    --checkout-step-padding-y: 0.8rem;
    --checkout-step-gap: 0.65rem;
    padding-top: 0.75rem;
  }
  .step__head {
    padding: var(--checkout-step-padding-y) var(--checkout-step-padding-x);
    gap: 0.65rem;
  }
  .step__body {
    padding: 0 var(--checkout-step-padding-x) var(--checkout-step-padding-x);
  }
  .co-steps {
    gap: var(--checkout-step-gap);
  }
  .step__body :where(.btn--primary, .step__cta .btn) {
    width: 100%;
    justify-content: center;
  }
  .co-back {
    display: none;
  }
  .conclusion:not(.conclusion--ready) {
    display: none;
  }
}
/* `<input type="date">` no iOS ignora a largura do container e centraliza o
   valor; força o mesmo comportamento dos outros campos. Em (0,0,1): o input do
   formulário de contato é a parte `field` da Aparência, e o painel precisa vencer. */
:where(.auth-field, .form-field) input:where([type="date"]) {
  display: block;
  width: 100%;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  -webkit-min-logical-width: 0;
}

/* Botão-link do checkout (ações leves: adicionar endereço, reenviar código,
   "Agora não"). */
.linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0.25rem 0.15rem;
  cursor: pointer;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--radius);
}
@media (hover: hover) and (pointer: fine) {
  .linkbtn:hover {
    text-decoration: underline;
  }
}
.linkbtn.mutedlink {
  color: var(--color-text-muted);
}
.linkbtn--inline {
  display: inline;
  padding: 0;
  font-size: inherit;
}
.co-opts--narrow {
  max-width: 30rem;
}

/* ── Padrão único de OPÇÃO (endereço, envio, pagamento) ──────────────────
   Hierarquia de superfícies: etapa < opção (fundo/borda próprios, é clicável)
   < selecionada (barra de 3px + tinta + radio preenchido). No celular o grupo
   vira LISTA AGRUPADA (um contêiner, linhas divididas, sem radio) — bloco de
   media DEPOIS destas bases: com especificidade igual, a ordem decide. */
.co-opts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.co-opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-lg);
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s,
    opacity 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .co-opt:not(.co-opt--disabled):hover {
    border-color: var(--color-primary);
  }
}
.co-opt--sel {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.co-opt--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.co-payment-option__reason {
  margin: 0.35rem 0 0;
  padding-inline: 0.85rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}
.co-payment-option__reason a {
  color: var(--color-primary);
  font-weight: 600;
}
/* O radio nativo segue no DOM (valor + teclado), mas o desenho é sem
   bolinha em QUALQUER largura (decisão do dono sobre o protótipo): quem está
   escolhido se lê pela barra lateral, pela tinta e pelo ícone de concluído
   no título (`.co-opt__tick`, papel `done` do `icon-role`). */
.co-opt input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.co-opt:has(input:focus-visible),
.co-opt:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* O tick sai do Liquid em toda opção e só aparece na escolhida: a seleção é
   decidida no servidor (`co-opt--sel` / `pt-row--sel`). */
.co-opt__tick {
  display: none;
}
.co-opt--sel .co-opt__tick,
.pt-row--sel .co-opt__tick {
  display: inline-flex;
  vertical-align: -0.125em;
  margin-inline-start: 0.3em;
  color: var(--color-primary);
}
.co-opt__main {
  flex: 1;
  min-width: 0;
}
.co-opt__title {
  display: block;
  font-weight: 600;
  color: var(--color-text-strong);
  font-size: 0.92rem;
}
.co-opt__desc {
  display: block;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}
.co-opt__side {
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-strong);
}
.co-opt__side--free {
  color: var(--color-success-text);
}
.co-opt__disclose {
  display: inline-flex;
  vertical-align: -0.15rem;
}

/* ── Envio (etapa 3): bloco aberto (título + itens + opções) ou, resolvido e
   fora de edição, a mesma `.ship-row` da etapa fechada. Linhas vizinhas
   anulam o gap do grupo e ganham divisor, como na lista da etapa fechada. ── */
.envios {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.envio,
.envio__open {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.envio--row + .envio--row {
  margin-top: -0.9rem;
  border-top: 1px solid var(--color-border);
}
.envio--row .ship-row {
  border-radius: 0;
}
.envio__who {
  display: block;
}
.envio__items {
  display: block;
  font-size: 0.82rem;
  color: var(--color-text-soft);
}

/* ── Pontos de retirada: linhas leves ancoradas na opção-mãe (nada de caixa
   dentro de caixa) — trilho à esquerda liga os pontos ao "Retirar em loja". */
.pickup-points {
  margin: 0.15rem 0 0.4rem 1.25rem;
  padding-left: 0.6rem;
  border-left: 2px solid color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  display: flex;
  flex-direction: column;
}
.pt-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: var(--radius);
}
@media (hover: hover) and (pointer: fine) {
  .pt-row:hover {
    background: var(--color-bg-alt);
  }
}
.pt-row--sel {
  background: var(--color-primary-soft);
}
.pt-row__pick {
  flex: 1;
  min-width: 0;
  display: block;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0.55rem 0.6rem;
}
.pt-row__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pt-row__name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-strong);
}
.pt-row__eta {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}
.pt-row__addr {
  display: block;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}
.pt-row__obs {
  display: block;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}
.pt-row__map {
  flex-shrink: 0;
  align-self: flex-start;
  margin: 0.5rem 0.5rem 0 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-control);
  color: var(--color-primary);
  background: var(--color-surface);
}
@media (hover: hover) and (pointer: fine) {
  .pt-row__map:hover {
    background: var(--color-primary-soft);
  }
}

/* ── Conclusão (bloco não-numerado no lugar da revisão) ─────────────────── */
.conclusion {
  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);
  padding: 1.15rem;
}
.conclusion--ready {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  box-shadow: var(--shadow-sm);
}
.concl-title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-strong);
}
.concl-rows {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1rem;
}
.concl-row {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.9rem;
}
.concl-row__label {
  flex: none;
  width: 6.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.concl-row__value {
  min-width: 0;
  color: var(--color-text-soft);
}
.concl-row__value b {
  color: var(--color-text-strong);
}
.concl-waiting {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ── Modal de retomada: pausa a página até o comprador decidir ──────────── */
.resume-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--layer-fullscreen);
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.resume-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 28rem;
  width: 100%;
  padding: 1.4rem 1.5rem;
}
.resume-modal h2 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}
.resume-modal p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.resume-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}
.resume-actions form {
  display: contents;
}
.resume-actions .btn {
  flex: 1 1 auto;
  white-space: nowrap;
}

/* ── Micro-animação da escolha + congelamento anti toque-duplo ──────────── */
/* Pulso curto ANTES do submit (o fechamento + scroll deixam de parecer layout
   shift); enquanto `co--busy`, a página muda embaixo do dedo e cliques são
   ignorados (o fragmento novo ou o failsafe descongelam). */
@keyframes co-selpulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.985);
    background-color: var(--color-primary-soft);
  }
  100% {
    transform: scale(1);
  }
}
.co-pulse {
  animation: co-selpulse 0.18s ease;
}
.co--busy .co-steps,
.co--busy .mobar {
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .co-pulse {
    animation: none;
  }
}

/* POST de etapa que falhou (API indisponível, sessão expirada): toast fixo —
   a etapa ativa pode estar em qualquer altura da página, então o aviso não
   pode depender da posição do scroll. Fica acima da barra fixa do celular
   (`.mobar`, `--layer-shell-bar`) e da folha do resumo, na camada de popover. */
.co-fail {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: var(--layer-shell-popover);
  max-width: min(92vw, 26rem);
  background: var(--color-error-surface);
  border: 1px solid var(--color-error-border);
  color: var(--color-error);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
/* No mobile a barra fixa de finalizar ocupa o rodapé — o toast sobe. */
@media (max-width: 767px) {
  .co-fail {
    bottom: calc(7.5rem + env(safe-area-inset-bottom));
  }
}

/* EXPERIMENTO (fácil desistir: apagar este bloco): o título da etapa aberta
   fica colado no topo enquanto o corpo rola — sempre se sabe onde está. */
.step--active > .step__head {
  position: sticky;
  top: var(--header-sticky-offset, 0px);
  z-index: 5;
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* Coluna resumo (desktop sticky) */
.summary {
  position: sticky;
  top: 1rem;
}
.summary__card {
  background: var(--checkout-summary-bg);
  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;
}
.checkout-recurring-summary {
  margin: 0.5rem 0 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-surface);
  background: var(--color-info-bg);
}
.checkout-recurring-summary h2 {
  margin: 0;
  color: var(--color-info-text);
  font-size: 0.9rem;
}
.checkout-recurring-summary > p {
  margin: 0.25rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}
.checkout-recurring-summary ul {
  display: grid;
  gap: 0.65rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.checkout-recurring-summary li + li {
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-info-border);
}
.checkout-recurring-summary li > strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--color-text-strong);
  font-size: 0.85rem;
}
.checkout-recurring-summary dl {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  font-size: 0.76rem;
}
.checkout-recurring-summary dl > div {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.7fr) minmax(0, 1.3fr);
  gap: 0.45rem;
}
.checkout-recurring-summary dt {
  color: var(--color-text-muted);
}
.checkout-recurring-summary dd {
  margin: 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.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;
}
/* O único Finalizar do desktop: ao lado do total, submete o form da conclusão. */
.summary__finalize {
  padding: 0 1.15rem 1.1rem;
}
.checkout-recurring-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.85rem 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-surface);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: 0.84rem;
  line-height: 1.45;
  cursor: pointer;
}
.checkout-recurring-consent input {
  flex: 0 0 auto;
  margin-top: 0.2rem;
}
.checkout-recurring-consent:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.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;
}
[data-sf-advancing] .co-opt:not(:has(input:checked)):not(.co-pulse) {
  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: var(--layer-shell-bar);
  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__toggle {
  flex: 1;
  min-width: 0;
}
.mobar__totals {
  min-width: 0;
}
.mobar__chevron {
  transition: transform 0.2s, background-color 0.15s;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.mobar.is-open .mobar__chevron {
  transform: rotate(180deg);
}
.mobar__cta {
  margin-left: auto;
}
.mobar__status {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
/* Tudo resolvido: o Finalizar assume o lugar do total; o resumo vira alça. */
.mobar__finalize {
  flex: 1;
  min-width: 0;
}
.mobar__peek {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  background: none;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-control);
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
}
.sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--layer-shell-backdrop);
  background: var(--color-overlay);
}
.sheet-backdrop.is-open {
  display: block;
}
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  z-index: var(--layer-shell-panel);
  bottom: 0;
  background: var(--checkout-summary-bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  max-height: 75vh;
  max-height: 75dvh;
  overflow-y: auto;
  padding: 0 1rem calc(6rem + env(safe-area-inset-bottom));
}
/* No celular a folha é a superfície do resumo: o cartão de dentro perde moldura e
   preenchimento, e título e itens encostam na folga da folha (16 px da borda da
   tela). Caixa dentro de caixa somaria a borda e o recuo do cartão aos da folha. */
:where(.sheet) .summary__card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
:where(.sheet) .summary__head {
  padding: 0 0 0.5rem;
}
:where(.sheet) .summary__body {
  padding: 0;
}
/* Cabeçalho sticky da gaveta: alça e fechar ficam parados enquanto o conteúdo
   rola por baixo — sem ele o fechar (absoluto no contêiner que rola) descia
   junto e o conteúdo cortava nos cantos arredondados. */
.sheet__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  background: var(--checkout-summary-bg);
  padding: 0.5rem 0 0.4rem;
  margin: 0 -1rem;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.sheet__grip {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border-input);
  margin: 0 auto;
}
.sheet__close {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  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));
  }
}

/* Celular: opções viram LISTA AGRUPADA — um contêiner, linhas divididas, sem
   radio; selecionada = barra lateral + tinta + tick no título. Este bloco vem
   DEPOIS das bases de propósito: mesma especificidade, a ordem decide (e o
   divisor precisa vir DEPOIS do reset de borda do .co-opt, senão o
   `border: none` o apaga — armadilha já paga duas vezes no protótipo). */
@media (max-width: 767px) {
  .co-opts {
    gap: 0;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-alt);
  }
  .co-opt {
    border: none;
    border-radius: 0;
    padding: 0.65rem 0.75rem;
    gap: 0.6rem;
  }
  .co-opts > * + * {
    border-top: 1px solid var(--color-border-input);
  }
  .co-payment-option__reason {
    margin: 0;
    padding: 0 0.75rem 0.65rem;
  }
  .pickup-points {
    margin: 0;
    padding-left: 0;
    border-left: none;
  }
  .pt-row {
    border-radius: 0;
    padding-left: 0.75rem;
  }
  .pt-row + .pt-row {
    border-top: 1px solid var(--color-border-input);
  }
  .pt-row--sel {
    box-shadow: inset 3px 0 0 var(--color-primary);
  }
}

.confirm-ship__maps {
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
}


/* 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;
  }
}
/* QR do Pix ampliado: pagar apontando a câmera de outro aparelho pede o código
   grande e sobre painel claro — leitor precisa de contraste, então o painel é
   branco por decisão, inclusive no tema escuro (cores explícitas, sem token). */
.confirm-pay__qr-open {
  border: 0;
  background: none;
  padding: 0;
  cursor: zoom-in;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  margin-inline: auto;
  color: inherit;
  font: inherit;
}
.confirm-pay__qr-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.qr-zoom {
  position: fixed;
  inset: 0;
  z-index: var(--layer-fullscreen);
  display: grid;
  place-items: center;
  padding: 1rem;
}
.qr-zoom[hidden] {
  display: none;
}
.qr-zoom__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(10, 12, 16, 0.72);
  cursor: zoom-out;
}
.qr-zoom__panel {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  background: #fff;
  color: #16181d;
  border-radius: var(--radius-overlay);
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 2rem);
}
.qr-zoom__image {
  /* O QR ampliado precisa caber inteiro na tela visível: no celular a barra do
     navegador come parte do `vh`. */
  width: min(85vw, 62vh, 30rem);
  width: min(85vw, 62dvh, 30rem);
  aspect-ratio: 1;
  height: auto;
  display: block;
}
.qr-zoom__caption {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.qr-zoom__close {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #d5d9e0;
  border-radius: var(--radius-control);
  background: #fff;
  color: #16181d;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .qr-zoom__close:hover {
    background: #f3f4f6;
  }
}

.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;
  }
  /* Sem a referência (desligada por padrão) as ações continuam à direita. */
  .confirm-foot__row .checkout-confirmation__actions {
    margin-inline-start: auto;
  }
}

/* ── 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;
}
:where(.hero--reading-narrow) .hero__content {
  max-width: 28rem;
}
:where(.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;
}
:where(.hero--overlay-none) .hero__content {
  background: transparent;
}
:where(.hero--overlay-dark) .hero__content {
  background: rgba(17, 24, 39, 0.82);
  color: #fff;
}
/* O nível do título (H1/H2/H3) é escolha de estrutura, não de tamanho: o
   Hero desenha sempre com a escala do H1, qualquer que seja a tag. */
.hero__title {
  margin: 0 0 0.5rem;
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-line-height, var(--type-heading-line-height));
}
.hero__subtitle {
  color: var(--color-text-soft);
  margin-bottom: 1rem;
}
/* Depois da regra-base de propósito: as duas pesam (0,1,0), e o véu escuro
   precisa vencer a cor suave. */
:where(.hero--overlay-dark) .hero__subtitle {
  color: rgba(255, 255, 255, 0.82);
}
.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);
  }
}

/* Faixa de categorias. Fileira rola para o lado com encaixe; no celular ela vai
   de borda a borda e o primeiro item começa na folga da página (a lista devolve
   a folga que o `main` deu, para o corte ser na tela e não no container). A
   largura do item na fileira segue a imagem: ícone estreito, banner largo. */
.category-strip {
  margin-block-end: 1.25rem;
}
.category-strip__list {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(.category-strip--row) .category-strip__list {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
:where(.category-strip--row) .category-strip__list::-webkit-scrollbar {
  display: none;
}
:where(.category-strip--grid) .category-strip__list {
  display: grid;
  grid-template-columns: repeat(var(--category-strip-cols-mobile, 3), minmax(0, 1fr));
}
.category-strip__entry {
  flex: 0 0 auto;
  min-width: 0;
  scroll-snap-align: start;
}
:where(.category-strip--row.category-strip--image-icon) .category-strip__entry {
  width: 5.5rem;
}
:where(.category-strip--row.category-strip--image-banner) .category-strip__entry {
  width: 10rem;
}
.category-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  height: 100%;
  color: var(--color-text);
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .category-strip__item:hover {
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
/* Sem imagem a categoria é uma pílula com o nome numa linha só. */
:where(.category-strip--image-none) .category-strip__item {
  flex-direction: row;
  justify-content: center;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  white-space: nowrap;
}
.category-strip__image {
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}
:where(.category-strip--image-icon) .category-strip__image {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-pill);
}
:where(.category-strip--image-banner) .category-strip__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
}
.category-strip__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(.category-strip--image-icon) .category-strip__image img {
  padding: 0.6rem;
  object-fit: contain;
}
.category-strip__initial {
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
}
.category-strip__label {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
:where(.category-strip--image-none) .category-strip__label {
  display: block;
}
@media (max-width: 767px) {
  :where(.category-strip--row) .category-strip__list {
    margin-inline: calc(-1 * var(--sf-page-gutter));
    padding-inline: var(--sf-page-gutter);
    scroll-padding-inline: var(--sf-page-gutter);
  }
}
@media (min-width: 768px) {
  :where(.category-strip--grid) .category-strip__list {
    grid-template-columns: repeat(var(--category-strip-cols, 6), minmax(0, 1fr));
  }
}
.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;
}
:where(.category-grid--pill) .category-card {
  align-items: center;
  border-radius: var(--radius-pill);
  text-align: center;
}
:where(.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;
}
:where(.collection-list--ratio-square) .collection-card__image {
  aspect-ratio: 1 / 1;
}
:where(.collection-list--ratio-portrait) .collection-card__image {
  aspect-ratio: 4 / 5;
}
:where(.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;
}
:where(.image-mosaic--mobile-grid) .image-mosaic__grid {
  grid-template-columns: 1fr 1fr;
}
:where(.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);
}
:where(.image-mosaic--aspect-square) .mosaic-tile {
  aspect-ratio: 1 / 1;
}
:where(.image-mosaic--aspect-landscape) .mosaic-tile {
  aspect-ratio: 4 / 3;
}
:where(.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;
}
:where(.image-mosaic--hover-zoom) .mosaic-tile__image {
  transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  :where(.image-mosaic--hover-zoom) :where(.mosaic-tile):hover .mosaic-tile__image {
    transform: scale(1.035);
  }
}
:where(.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;
}
:where(.image-mosaic--title-overlay-none) .mosaic-tile__title {
  background: transparent;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
:where(.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;
}
/* A altura da arte cabe na área útil da tela: a viewport menos o cabeçalho
   fixo (`--header-sticky-offset`, medido pelo `storefront.js`; 8rem enquanto a medida não chega) e um
   respiro. A imagem nunca é recortada; se sobra largura, a moldura centraliza
   e o fundo da área aparece dos lados. */
.product-hotspots {
  --product-hotspots-max-height: calc(100svh - var(--header-sticky-offset, 8rem) - 2rem);
}
.product-hotspots__media {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.product-hotspots__frame {
  position: relative;
  max-width: 100%;
}
/* Com as dimensões da mídia conhecidas, a moldura tem a proporção da arte e a
   maior largura que cabe na altura útil: a imagem cresce até a coluna sem
   depender do tamanho do arquivo. Sem dimensões (URL externa), vale o tamanho
   natural da imagem, limitado pela mesma altura. */
@media (min-width: 768px) {
  .product-hotspots__frame--sized {
    width: min(100%, calc(var(--product-hotspots-max-height) * var(--hs-w) / var(--hs-h)));
    aspect-ratio: var(--hs-w) / var(--hs-h);
  }
  :where(.product-hotspots__frame--sized) img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
  }
}
@media (max-width: 767px) {
  .product-hotspots__frame--sized-mobile {
    width: min(100%, calc(var(--product-hotspots-max-height) * var(--hs-w-m) / var(--hs-h-m)));
    aspect-ratio: var(--hs-w-m) / var(--hs-h-m);
  }
  :where(.product-hotspots__frame--sized-mobile) img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
  }
}
.product-hotspots__picture {
  display: block;
}
:where(.product-hotspots__picture) img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--product-hotspots-max-height);
}
.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;
  text-decoration: none;
  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,
:where(.product-hotspots__marker)[aria-expanded="true"] {
  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;
  text-decoration: none;
  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,
:where(.product-hotspots__product)[aria-expanded="true"] {
  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-box {
  position: relative;
  width: 4.75rem;
  height: 4.75rem;
}
.product-hotspots__thumb {
  width: 100%;
  height: 100%;
  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;
}
:where(.product-hotspots__product-copy) strong {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.product-hotspots__product-price) .price {
  align-items: baseline;
  gap: 0.35rem;
}
:where(.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;
}

@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%);
    align-self: flex-start;
  }
  :where(.product-hotspots--image-right) .product-hotspots__media {
    order: 2;
  }
  .product-hotspots__products {
    flex: 1;
    align-content: stretch;
  }
}

/* Celular: escala própria, pensada em 360/390/430px. A arte fica em até 62%
   da altura útil para sobrar lugar para o título e as primeiras linhas; cada
   linha encolhe miniatura e espaçamento, e o nome quebra em até duas linhas.
   O marcador desenha 1.75rem, mas o anel (`::after`) leva a área de toque a
   44px, que é o que o dedo precisa. */
@media (max-width: 767px) {
  .product-hotspots {
    --product-hotspots-max-height: min(62svh, calc(100svh - var(--header-sticky-offset, 8rem) - 1rem));
    margin: 2rem 0;
  }
  .product-hotspots__layout {
    gap: 0.75rem;
  }
  .product-hotspots__title {
    padding-bottom: 0.6rem;
    font-size: clamp(1.2rem, 5.2vw, 1.5rem);
  }
  .product-hotspots__product {
    grid-template-columns: 1.5rem 3.5rem minmax(0, 1fr) 1.75rem;
    gap: 0.6rem;
    min-height: 2.75rem;
    padding: 0.6rem 0;
  }
  .product-hotspots__number {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.7rem;
  }
  .product-hotspots__thumb-box {
    width: 3.5rem;
    height: 3.5rem;
  }
  .product-hotspots__product-copy {
    gap: 0.2rem;
    font-size: 0.875rem;
  }
  :where(.product-hotspots__product-copy) strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }
  .product-hotspots__open {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1.15rem;
  }
  .product-hotspots__marker {
    width: 1.75rem;
    height: 1.75rem;
  }
  .product-hotspots__marker::after {
    inset: calc((2.75rem - 1.75rem) / -2);
  }
}

/* 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;
}
:where(.icon-strip--crop-circle) .icon-strip__avatar {
  border-radius: 50%;
}
:where(.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%);
  }
  :where(.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%);
  }
  :where(.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;
}
/* Gap efetivo por dispositivo. O snippet emite `--carousel-gap-tablet`/`-mobile`
   só quando diferem do herdado; a cadeia de fallback reproduz a herança
   base → tablet → celular. Todo consumidor de vão lê `-eff`, nunca as cruas —
   é o que deixa o mesmo calc() de slide valer nas três larguras. */
.carousel {
  --carousel-gap-eff: var(--carousel-gap-mobile, var(--carousel-gap-tablet, var(--carousel-gap, 1rem)));
}
@media (min-width: 768px) {
  .carousel {
    --carousel-gap-eff: var(--carousel-gap-tablet, var(--carousel-gap, 1rem));
  }
}
@media (min-width: 1024px) {
  .carousel {
    --carousel-gap-eff: var(--carousel-gap, 1rem);
  }
}
.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;
}
/* Arrasto com o mouse: a afordância só aparece onde há ponteiro fino e mais de
   uma página. Durante o arrasto o snap sai do caminho — com ele ligado, cada
   escrita em scrollLeft brigaria com o ponto de encaixe — e volta na soltura,
   quando o próprio script encaixa no slide mais próximo. */
@media (hover: hover) and (pointer: fine) {
  .carousel__viewport:where(.carousel__viewport--draggable) {
    cursor: grab;
  }
  .carousel__viewport:where(.is-dragging) {
    cursor: grabbing;
    user-select: none;
    scroll-snap-type: none;
  }
}
/* Padding e margem se anulam no fluxo: o primeiro e o último card continuam
   alinhados à seção, enquanto a caixa que recorta ganha área de pintura para
   sombra e hover. O scroll-padding mantém o mesmo início para o snap.
   Nas laterais o respiro nunca passa do espaço entre os itens: o card vizinho
   está a um gap de distância, então nenhum pedaço dele entra na folga. Com gap
   menor que 1rem a sombra lateral das pontas fica mais curta; com gap 0 os
   cards já se encostam. */
:where(.carousel:has(.product-card)) .carousel__viewport {
  --carousel-card-visual-room: 1rem;
  --carousel-card-visual-room-inline: min(var(--carousel-card-visual-room), var(--carousel-gap-eff));
  margin: calc(-1 * var(--carousel-card-visual-room)) calc(-1 * var(--carousel-card-visual-room-inline));
  padding: var(--carousel-card-visual-room) var(--carousel-card-visual-room-inline);
  scroll-padding-inline: var(--carousel-card-visual-room-inline);
}
.carousel__viewport::-webkit-scrollbar {
  display: none;
}
/* O trilho é a área Lista (`track_part: 'list'` em todo chamador). O espaço
   gravado na Aparência dessa área chega como `--sf-list-gap` (espelho do
   compilador) e entra na conta da largura do slide; sem ele vale o `gap` do
   snippet. O reset vem antes, no próprio trilho, para um carrossel dentro de
   um slide não herdar o espaço do carrossel de fora. */
.carousel__track {
  --sf-list-gap: initial;
  --carousel-track-gap: var(--sf-list-gap, var(--carousel-gap-eff));
  display: flex;
  gap: var(--carousel-track-gap);
  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-track-gap)
        ) /
        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%;
}
/* Carrossel de peças: a caixa de dentro estica até a altura da faixa, então
   cartões com textos de tamanhos diferentes ficam da mesma altura. Só a caixa:
   uma imagem esticada perderia a proporção. */
:where(.primitive-carousel__item) {
  display: flex;
  flex-direction: column;
}
:where(.primitive-carousel__item) > :where([data-layout="box"]) {
  flex: 1 1 auto;
}
.carousel__arrow {
  position: absolute;
  top: var(--carousel-arrow-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 navegador tira os quatro cantos de um botão redondo do alvo do ponteiro:
   quem recebe o mouse ali é o card de baixo, que sobe 2px ao ser apontado.
   Passando o mouse rente à borda curva, o card sobe, sai de baixo do ponteiro,
   desce, volta — e a seta parece piscar. Esta camada quadrada e invisível
   devolve o canto ao botão, e a fronteira volta a ser reta, atravessada uma vez
   só. Ela herda `pointer-events` e `visibility` do botão, então seta escondida
   continua sem capturar nada. */
.carousel__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
}
/* 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. */
/* A opacidade sai por variável porque a regra do desabilitado pesa uma classe
   mais um pseudo-estado, e a do "só ao passar o mouse" pesa uma classe só —
   a seta desabilitada vencia e aparecia esmaecida numa configuração que pediu
   seta escondida. Quem revela decide o valor; aqui só se lê. */
.carousel__arrow:disabled,
.carousel__arrow:disabled:hover {
  opacity: var(--carousel-arrow-disabled-opacity, 0.4);
  border-color: var(--color-border);
  color: var(--color-text-strong);
  cursor: default;
}
/* Sobre o conteúdo ("dentro" e "na borda"), a seta sem destino some: esmaecida
   ela cobre a foto do primeiro card sem fazer nada. No cabeçalho e do lado de
   fora ela não cobre nada, e o recuo marca onde a navegação mora. */
:where(
    .carousel[data-arrow-position="inside"] .carousel__arrow:disabled,
    .carousel[data-arrow-position="edge"] .carousel__arrow:disabled
  ) {
  visibility: hidden;
}
.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 {
    --carousel-arrow-disabled-opacity: 0;
    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 {
    --carousel-arrow-disabled-opacity: 0.4;
    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;
}
/* No toque, os pontos se afastam o bastante para a área de cada um (ver "Área
   de toque") não invadir a do vizinho: com 0.4rem entre eles, o dedo no ponto 2
   acertava o 3. A área fica com 44px de altura e a largura do passo entre os
   pontos. */
@media (pointer: coarse) {
  .carousel__dots {
    gap: 1rem;
  }
  :where(.carousel__dot)::after {
    inset-inline: -0.5rem;
  }
}

@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. Quando ela é
   o primeiro node da página, encosta no cabeçalho: quem abre mão do espaço é o
   cabeçalho (margem zerada), não a barra com margem negativa. A margem negativa
   lia `--site-header-bottom-spacing`, que o cabeçalho declara no próprio
   elemento; a barra, irmã dele, nunca via o valor e recuava sempre 24px — com
   "Espaço após o cabeçalho" menor que isso, entrava por baixo do cabeçalho.
   Margem escrita no painel (na barra ou no cabeçalho) continua vencendo. */
.announcement-bar {
  --announcement-justify: center;
  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;
}
.site-shell:has(+ #sf-main > .announcement-bar:first-child) .site-header {
  margin-bottom: 0;
}
.announcement-bar--compact {
  padding-block: 0.12rem;
  font-size: 0.78rem;
}
.announcement-bar--align-left {
  --announcement-justify: flex-start;
  text-align: left;
}
.announcement-bar--align-right {
  --announcement-justify: flex-end;
  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 {
  display: flex;
  align-items: center;
  justify-content: var(--announcement-justify);
  gap: 0.4rem;
  min-height: 1.5rem;
}
:where(.announcement-bar__slide) > a {
  display: inline-flex;
  align-items: center;
  gap: inherit;
}
.announcement-bar__icon {
  display: inline-flex;
  flex: 0 0 auto;
}
/* Aviso de economia (block `savings`): linha fixa acima das mensagens, com o
   mesmo alinhamento e a mesma cor da barra. O valor vem em negrito do texto da
   barra; o link de adesão sublinha. Sem mensagens e com o aviso escondido pelo
   contador, a barra inteira some, para não ficar uma faixa vazia. */
/* Fluxo de texto, e não flex: num texto longo no celular, ícone, frase e link
   quebram juntos como uma frase só, em vez de o ícone ficar sozinho na
   primeira linha. O alinhamento vem do `text-align` da barra. */
:where(.announcement-bar__savings) {
  display: block;
  min-height: 1.5rem;
  line-height: 1.5rem;
}
:where(.announcement-bar__savings) > .announcement-bar__icon {
  vertical-align: middle;
  margin-inline-end: 0.4rem;
}
/* Escondido pelo contador vence qualquer `display` da Aparência da parte. */
:where(.announcement-bar__savings)[hidden] {
  display: none !important;
}
:where(.announcement-bar__savings) [data-savings-amount] {
  font-weight: 800;
}
:where(.announcement-bar__savings-cta) {
  margin-inline-start: 0.4rem;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.announcement-bar:where(:has(> .announcement-bar__savings[hidden]):not(:has(.announcement-bar__slide))) {
  display: none;
}
/* 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;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  list-style: none;
}
:where(.faq__item) summary::-webkit-details-marker {
  display: none;
}
:where(.faq__item[open]) summary {
  border-bottom: 1px solid var(--color-border);
}
.faq__question {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.faq__question-icon {
  display: inline-flex;
  flex: 0 0 auto;
}
.faq__indicator {
  display: inline-flex;
  flex: 0 0 auto;
  transition: transform 160ms ease;
}
:where(.faq__item[open]) .faq__indicator {
  transform: rotate(180deg);
}
.faq__answer {
  padding: 0.9rem 1rem;
  color: var(--color-text-soft);
}
.faq__col {
  display: grid;
  align-content: start;
  gap: 0.65rem;
}
@media (max-width: 1023px) {
  :where(.faq--cols-2) .faq__grid {
    display: flex;
    flex-direction: column;
  }
  :where(.faq--cols-2) .faq__col {
    display: contents;
  }
}
@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-track-gap)
        ) /
        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-track-gap)
        ) /
        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: 0;
    padding: 0;
    scroll-padding-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;
  }
  :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: 0;
    padding: 0;
    scroll-padding-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;
  }
  :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: 0;
    padding: 0;
    scroll-padding-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;
  }
  :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 :where(.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);
  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:where(.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:where(.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:where(.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:where(.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;
}
/* "Ocupar a largura": cada item ocupa a linha inteira e o conteúdo dele começa
   no início. O título acompanha o início, como na coluna de rodapé. */
.item-list--align-stretch {
  --item-list-align: stretch;
}
:where(.item-list--align-stretch) .item-list__title {
  text-align: start;
}
:where(.item-list--align-stretch) .item-list__item,
:where(.item-list--align-stretch) .list-item {
  width: 100%;
}
:where(.item-list--align-stretch.item-list--horizontal:not(.item-list--carousel)) .item-list__item {
  flex: 1 1 0;
}
.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;
}
/* Marcador é do navegador: `list-style` só desenha em caixa `list-item`, e o
   flex da lista some com ela. Por isso a lista com marcador volta a ser bloco e
   o espaço entre itens vira margem, no lugar do `gap`. A lista numerada é `ol`
   no Liquid — o número aqui é só a apresentação do que a marcação já diz. */
:where(.item-list--markers-bullet, .item-list--markers-number) .item-list__list {
  display: block;
  padding-inline-start: 1.5rem;
  list-style-position: outside;
}
:where(.item-list--markers-bullet) .item-list__list {
  list-style-type: disc;
}
:where(.item-list--markers-number) .item-list__list {
  list-style-type: decimal;
}
:where(.item-list--markers-bullet, .item-list--markers-number) .item-list__item {
  display: list-item;
}
:where(.item-list--markers-bullet, .item-list--markers-number)
  .item-list__item
  + .item-list__item {
  margin-top: .5rem;
}
.list-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  color: inherit;
  overflow-wrap: anywhere;
}
/* Estilo "Texto" (padrão): o link fica um pouco apagado e acende com o mouse,
   o visual que os rodapés sempre tiveram. Os outros estilos nascem com a cor
   cheia. */
.list-item--link {
  opacity: .82;
  transition: opacity .12s;
}
:where(.item-list--items-link, .item-list--items-pill, .item-list--items-button) .list-item--link {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .list-item--link:hover {
    opacity: 1;
  }
  /* "Link do tema", Pílula e Botão seguem o padrão de link do tema. A cor do
     hover é a do próprio texto: numa coluna de rodapé escuro, a cor primária
     sumiria no fundo. Pílula e Botão trocam os tokens logo abaixo. */
  :where(.item-list--items-link, .item-list--items-pill, .item-list--items-button) .list-item--link:hover {
    --hover-link-color: currentColor;
    --hover-link-decoration: underline;
    color: var(--hover-link-color);
    text-decoration: var(--hover-link-decoration);
  }
}
/* Estilo do item. Os dois desenham o item inteiro (link ou não) com os tokens
   do tema; a Aparência da área Item e a do bloco continuam vencendo. */
/* A pílula ocupa o item inteiro: "Largura do item" mede o `<li>`, e é a
   pílula que a pessoa vê. Sem largura definida o `<li>` tem o tamanho dela. */
:where(.item-list--items-pill, .item-list--items-button) .list-item {
  flex: 1 1 auto;
  min-height: var(--control-height);
  padding: .35rem 1rem;
  justify-content: center;
  text-decoration: none;
}
:where(.item-list--items-pill) .list-item {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
}
:where(.item-list--items-button) .list-item {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}
:where(.item-list--align-stretch.item-list--items-pill, .item-list--align-stretch.item-list--items-button) .list-item {
  justify-content: flex-start;
}
@media (hover: hover) and (pointer: fine) {
  :where(.item-list--items-pill) .list-item--link:hover {
    --hover-link-decoration: none;
    border-color: var(--color-primary);
  }
  :where(.item-list--items-button) .list-item--link:hover {
    --hover-link-color: var(--hover-button-color);
    --hover-link-decoration: none;
    background: var(--hover-button-background);
  }
}
.list-item__image {
  max-height: 2.5rem;
  width: auto;
}
/* A caixa do ícone dimensiona o desenho pelo corpo da fonte — 20px é o default
   de antes, e a parte `icon` da Aparência troca por cima. Sem isto, mudar o
   tamanho exigiria um campo novo disputando a mesma decisão. */
.list-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: inherit;
}
.list-item__icon > .icon {
  width: 1em;
  height: 1em;
}
/* O item é `inline-flex`, então dentro do `<li>` ele nasce numa linha de texto e
   herda o espaço do descendente embaixo — a faixa branca que aparecia sob as
   bandeiras de pagamento e que padding nenhum apagava. Com o `<li>` sendo caixa
   flexível, o item deixa de ser inline e a linha some. */
.item-list__item {
  display: flex;
  min-width: 0;
}

/* 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;
}
/* Indicador com ícone escolhido: o desenho é o ícone, que gira meia volta com
   a lista aberta. A caixa cresce para o tamanho do ícone pelo corpo da fonte. */
/* Sem `display` aqui: quem mostra e esconde o indicador são as regras do
   acordeão por largura, e esta empataria com elas. */
.item-list__indicator--icon {
  width: auto;
  height: auto;
  font-size: 1rem;
  line-height: 0;
  transition: transform .18s ease;
}
.item-list__indicator--icon > .icon {
  display: block;
  width: 1em;
  height: 1em;
}
:where(.item-list__indicator--icon)::before,
:where(.item-list__indicator--icon)::after {
  content: none;
}
:where(.item-list--accordion[open]) > :where(.item-list__summary) .item-list__indicator--icon {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  :where(.item-list__indicator--icon),
  :where(.item-list__indicator)::before,
  :where(.item-list__indicator)::after {
    transition: none;
  }
}
/* Título ao lado da lista, por dispositivo. O título não quebra e a lista
   fica com o resto da linha. No celular com acordeão o Liquid não emite a
   classe: lá o título é o cabeçalho que abre e fecha. */
@media (min-width: 1024px) {
  :where(.item-list--title-start-desktop) {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  :where(.item-list--title-start-desktop) > :where(.item-list__title, .item-list__summary) {
    flex: none;
    margin: 0;
    white-space: nowrap;
  }
  :where(.item-list--title-start-desktop) > :where(.item-list__list, nav, .carousel) {
    flex: 1 1 auto;
    min-width: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :where(.item-list--title-start-tablet) {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  :where(.item-list--title-start-tablet) > :where(.item-list__title, .item-list__summary) {
    flex: none;
    margin: 0;
    white-space: nowrap;
  }
  :where(.item-list--title-start-tablet) > :where(.item-list__list, nav, .carousel) {
    flex: 1 1 auto;
    min-width: 0;
  }
}
@media (max-width: 767px) {
  :where(.item-list--title-start-mobile) {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  :where(.item-list--title-start-mobile) > :where(.item-list__title, .item-list__summary) {
    flex: none;
    margin: 0;
    white-space: nowrap;
  }
  :where(.item-list--title-start-mobile) > :where(.item-list__list, nav, .carousel) {
    flex: 1 1 auto;
    min-width: 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;
  }
  /* Em carrossel a faixa é do snippet comum, sem a classe da lista. */
  :where(.item-list--accordion[open]) .carousel {
    padding-block-end: .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(var(--cart-drawer-width), 100vw);
  display: flex;
  flex-direction: column;
  background: var(--cart-drawer-bg);
  color: var(--cart-drawer-text-color);
  box-shadow: var(--shadow-md);
  /* O miolo (loja, item, resumo) é o mesmo snippet da página e lê os tokens
     globais. Reapontá-los aqui é o que leva a cor escolhida pro painel até as
     divisórias e os nomes sem uma regra por peça; sem setting, cada token vale
     o próprio global (ver os defaults no :root). */
  --color-text: var(--cart-drawer-text-color);
  --color-text-strong: var(--cart-drawer-text-color-strong);
  --color-border: var(--cart-drawer-divider-color);
}
.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);
}
/* Tipografia do título é do papel `type-item-title` (classe no snippet);
   aqui só a cor, que o painel pode trocar. */
.cart-drawer__title {
  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(--cart-icon-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;
}
/* Mesma folga lateral do cabeçalho da gaveta: o texto alinha com o título. */
.cart-drawer__loading {
  padding: 1rem;
}
.cart-body--drawer,
.cart-layout--drawer {
  height: 100%;
  min-height: 0;
}
.cart-layout--drawer {
  display: flex;
  flex-direction: column;
}
:where(.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;
}
:where(.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 :where(.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%;
}
.cart-page--drawer {
  padding-block: 0;
}

/* ── Responsivo (mobile) ── */
@media (max-width: 767px) {
  .cart-layout--page {
    grid-template-columns: 1fr;
  }
  :where(.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;
    max-height: 85dvh;
    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;
  }
  /* Busca ocupa a linha de cima inteira e a contagem a de baixo; "Filtrar" e
     "Ordenar" continuam lado a lado no meio. */
  .listing-search {
    grid-column: 1 / -1;
    order: -1;
    max-width: none;
    margin-right: 0;
  }
  :where(.listing-toolbar) > .search-summary {
    grid-column: 1 / -1;
    order: 1;
  }
  .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;
    max-height: 85dvh;
    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%);
  }
  /* A animação só acompanha abrir e fechar: no quadro em que `data-js` entra a
     folha deixa de ser bloco da página e nasce fechada, sem deslizar pela tela.
     `data-sheet-motion` chega dois quadros depois (`snippets/listing-results`). */
  :where(.listing-form[data-sheet-motion]) .search-facets {
    transition: transform 0.25s ease;
  }
  :where(.listing-form[data-js]) .search-facets--open {
    transform: translateY(0);
  }
  /* Cabeçalho e ações ficam presos às bordas da folha enquanto os filtros
     rolam: "Aplicar filtros" aparece sempre, por mais longa que seja a lista.
     As margens negativas desfazem o padding da folha para a faixa ir de borda
     a borda e cobrir o que passa por baixo. */
  :where(.listing-form[data-js]) .facets-head {
    display: flex;
    position: sticky;
    top: -1rem;
    z-index: 1;
    margin: -1rem -1rem 0.5rem;
    padding: 1rem 1rem 0.75rem;
    background: var(--color-surface);
  }
  :where(.listing-form[data-js]) .facets-actions {
    position: sticky;
    bottom: -1rem;
    z-index: 1;
    margin: 1.25rem -1rem -1rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
  }
  @media (prefers-reduced-motion: reduce) {
    :where(.listing-form[data-sheet-motion]) .search-facets {
      transition: none;
    }
  }
  .account-shell {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  /* Na página inicial da conta os cards já levam aos mesmos destinos da
     navegação. Empilhados um sobre o outro no celular, a pessoa lê "Dados
     pessoais, Meus Pedidos, Meus Vouchers" duas vezes seguidas. O card explica
     o que tem lá dentro, o item não — então some a navegação. Nas telas
     internas ela é a única navegação e continua. */
  :where(.account-shell--home) .account-nav {
    display: none;
  }
  /* Nas telas internas a navegação vira um seletor: o botão "Minha conta"
     abre a lista em coluna. Sem moldura própria — a lista encosta na folga da
     página, e o texto do item fica com 320px ou mais a 390px de tela. A classe
     que esconde a lista (`account-nav--picker`) só entra pelo Alpine; sem
     JavaScript a lista fica aberta e o botão, escondido pelo x-cloak. */
  .account-nav {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .account-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text-strong);
    cursor: pointer;
  }
  .account-nav__toggle-chevron {
    transition: transform 0.2s ease;
  }
  .account-nav.is-open .account-nav__toggle-chevron {
    transform: rotate(180deg);
  }
  @media (prefers-reduced-motion: reduce) {
    .account-nav__toggle-chevron {
      transition: none;
    }
  }
  .account-nav--picker:not(.is-open) .account-nav__list {
    display: none;
  }
  .account-nav--picker .account-nav__list {
    margin-top: 0.5rem;
    padding-block: 0.25rem;
    border-block: 1px solid var(--color-border);
  }
  .account-nav__item,
  .account-nav__logout {
    min-height: 44px;
  }
  .subscription-card__head,
  .subscription-detail__head,
  .subscription-cycle__main {
    flex-direction: column;
  }
  .subscription-summary-grid,
  .subscription-summary-grid--detail {
    grid-template-columns: 1fr;
  }
  .subscription-address-form {
    grid-template-columns: 1fr;
  }
  .subscription-address-form__submit {
    width: 100%;
  }
  .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);
  }
}
.footer-newsletter__button:where(.btn--outline) {
  background: transparent;
  color: var(--footer-newsletter-button-text, var(--color-primary));
  border-color: var(
    --footer-newsletter-button-bg,
    var(--color-border-input)
  );
}

.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;
}

/* Texto rico em (0,0,1) sobre os elementos: o valor rico dos campos extras do
   produto é a parte `value` da Aparência, e o painel precisa vencer. Os globais
   de `p`/`h2` vêm antes no arquivo, então a ordem ainda decide a favor daqui. */
:where(.rich-text) > :where(:first-child) {
  margin-top: 0;
}
:where(.rich-text) p {
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
}
:where(.rich-text) h2,
:where(.rich-text) h3 {
  margin: 1.5rem 0 0.6rem;
}
:where(.rich-text) ul,
:where(.rich-text) ol {
  margin: 0 0 1rem 1.4rem;
}
:where(.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;
}

/* Âncora de seção (`id` escrito pelo campo Âncora do editor): o alvo do link
   para abaixo do cabeçalho fixo, cuja altura o storefront.js mede. */
:where([data-node-id][id]) {
  scroll-margin-top: calc(var(--header-sticky-offset, 0px) + 1rem);
}

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

/* Divisor: a linha é o border-top desta regra, alimentado pelos campos do
   componente. O border default do navegador é zerado — com ele vivo, escolher
   "Cor da borda" na Aparência desenhava um retângulo AO REDOR da linha cinza,
   em vez de pintar a linha. Margem explícita da Aparência continua vencendo. */
.primitive-divider {
  border: none;
  border-top: var(--divider-thickness, 1px) var(--divider-style, solid)
    var(--divider-color, var(--color-border));
  inline-size: var(--divider-length, auto);
  margin-inline: var(--divider-center, 0);
}
.primitive-divider--vertical {
  border-top: none;
  border-inline-start: var(--divider-thickness, 1px)
    var(--divider-style, solid) var(--divider-color, var(--color-border));
  align-self: stretch;
  inline-size: 0;
  block-size: var(--divider-length, auto);
  margin-inline: 0;
  margin-block: var(--divider-center, 0);
  min-block-size: 1.5rem;
}
@media (max-width: 1023px) {
  .primitive-divider {
    inline-size: var(--divider-length-tablet, var(--divider-length, auto));
    margin-inline: var(--divider-center-tablet, var(--divider-center, 0));
  }
  .primitive-divider--vertical {
    inline-size: 0;
    block-size: var(--divider-length-tablet, var(--divider-length, auto));
    margin-inline: 0;
    margin-block: var(--divider-center-tablet, var(--divider-center, 0));
  }
}
@media (max-width: 767px) {
  .primitive-divider {
    inline-size: var(
      --divider-length-mobile,
      var(--divider-length-tablet, var(--divider-length, auto))
    );
    margin-inline: var(
      --divider-center-mobile,
      var(--divider-center-tablet, var(--divider-center, 0))
    );
  }
  .primitive-divider--vertical {
    inline-size: 0;
    block-size: var(
      --divider-length-mobile,
      var(--divider-length-tablet, var(--divider-length, auto))
    );
    margin-inline: 0;
    margin-block: var(
      --divider-center-mobile,
      var(--divider-center-tablet, var(--divider-center, 0))
    );
  }
}

/* Vídeo e Mapa: quem tem proporção é o wrapper, não o iframe. A Aparência
   (capacidade `dimensions`) escreve `aspect-ratio` neste mesmo elemento pelo
   seletor `[data-sf-style]`, de especificidade igual à destas classes, e o CSS
   dela é emitido depois do system.css — então a escolha do uso vence pela
   ordem, sem precisar de `!important` aqui. */
.primitive-video {
  aspect-ratio: 16 / 9;
}
.primitive-map {
  aspect-ratio: 4 / 3;
}
.primitive-video > iframe,
.primitive-map > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mapa com pinos: o mapa (Leaflet) ocupa a moldura, e a lista de lugares vem
   abaixo, em texto. A moldura não tem proporção própria; quem tem é o mapa, para
   a lista crescer sem espremer o desenho. Partes em 0-1-0 ou menos, para a
   Aparência vencer pela ordem. */
.primitive-map--pins {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}
:where(.primitive-map__canvas) {
  position: relative;
  z-index: 0;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-surface, 8px);
  background: var(--color-bg-alt, #f3f4f6);
}
:where(.primitive-map__failed) {
  display: none;
  margin: 0;
  color: var(--color-text-muted, #6b7280);
  font-size: var(--type-meta-size, 0.875rem);
}
:where(.primitive-map.is-failed) :where(.primitive-map__failed) {
  display: block;
}
:where(.primitive-map__places) {
  display: grid;
  gap: var(--space-3, 0.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(.primitive-map__place) {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
:where(.primitive-map__place-name) {
  font-weight: var(--type-item-title-weight, 600);
}
:where(.primitive-map__place-address) {
  color: var(--color-text-soft, #4b5563);
  font-size: var(--type-meta-size, 0.875rem);
  overflow-wrap: anywhere;
}
:where(.primitive-map__route) {
  align-self: flex-start;
  color: var(--color-primary);
  font-size: var(--type-meta-size, 0.875rem);
}
@media (min-width: 768px) {
  :where(.primitive-map__canvas) {
    aspect-ratio: 16 / 9;
    max-height: 30rem;
  }
  :where(.primitive-map__places) {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }
}
/* Pino: marca redonda na cor principal com o ícone escolhido e a ponta embaixo
   (o ponto exato fica na ponta, 38 px abaixo do topo, a âncora do marcador no
   storefront.js), rótulo ao lado. */
:where(.primitive-map__pin) {
  position: absolute;
  width: 0;
  height: 0;
}
:where(.primitive-map__pin-mark) {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 2px solid var(--color-surface, #fff);
  border-radius: 50% 50% 50% 0;
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
  box-shadow: var(--shadow-sm, 0 1px 3px rgb(0 0 0 / 0.25));
  transform: rotate(-45deg);
}
:where(.primitive-map__pin-mark) > * {
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
}
:where(.primitive-map__pin-label) {
  position: absolute;
  top: 4px;
  left: 38px;
  max-width: min(12rem, 45vw);
  padding: 0.125rem 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-surface, #fff);
  color: var(--color-text-strong, #111827);
  font: 600 0.8125rem / 1.4 var(--font-family, inherit);
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: var(--shadow-sm, 0 1px 3px rgb(0 0 0 / 0.25));
}

/* Detalhes, Abas e Contagem regressiva (Construção). Peças básicas: vêm
   discretas, com divisores finos, e o desenho fica com a Aparência de cada
   parte. Regras sobre partes ficam em 0-1-0 para a Aparência vencer pela ordem.
   O que deve continuar escondido (aba fechada, contagem que terminou) não volta
   por uma escolha de exibição da Aparência. */
:where(.primitive-details, .primitive-tabs, .primitive-countdown) [hidden] {
  display: none !important;
}
.primitive-details {
  border-bottom: 1px solid var(--color-border);
}
.primitive-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding-block: 0.75rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.primitive-details__summary::-webkit-details-marker {
  display: none;
}
.primitive-details__label {
  min-width: 0;
}
.primitive-details__indicator {
  display: inline-flex;
  flex: 0 0 auto;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  transition: transform 160ms ease;
}
:where(.primitive-details[open] > summary) .primitive-details__indicator {
  transform: rotate(180deg);
}
.primitive-details__content {
  padding-block: 0 1rem;
}

.primitive-tabs__list {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.primitive-tabs__tab,
.primitive-tabs__toggle {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  color: var(--color-text-soft);
  cursor: pointer;
  min-height: 44px;
}
.primitive-tabs__tab {
  flex: 0 0 auto;
  padding: 0.625rem 0.875rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.primitive-tabs__tab:where([aria-selected="true"]) {
  color: var(--color-text-strong);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}
.primitive-tabs__toggle {
  display: none;
}
.primitive-tabs__panel {
  padding-block: 1rem;
}
:where(.primitive-tabs__tab, .primitive-tabs__toggle, .primitive-tabs__panel):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (max-width: 767px) {
  :where(.primitive-tabs[data-tabs-mobile="accordion"]) .primitive-tabs__list {
    display: none;
  }
  :where(.primitive-tabs[data-tabs-mobile="accordion"]) .primitive-tabs__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    inline-size: 100%;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-strong);
    font-weight: 600;
    text-align: start;
  }
  :where(.primitive-tabs[data-tabs-mobile="accordion"]) .primitive-tabs__panel {
    padding-block: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
  }
}
.primitive-tabs__indicator {
  display: inline-flex;
  flex: 0 0 auto;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  transition: transform 160ms ease;
}
:where(.primitive-tabs__toggle[aria-expanded="true"]) .primitive-tabs__indicator {
  transform: rotate(180deg);
}

.primitive-countdown__clock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.875rem;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.primitive-countdown__unit {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}
.primitive-countdown__value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text-strong);
}
.primitive-countdown__separator {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
/* Menos movimento: os segundos saem e a contagem muda por minuto
   (`storefront.js`), a não ser que segundos seja a única unidade. */
@media (prefers-reduced-motion: reduce) {
  .primitive-details__indicator,
  .primitive-tabs__indicator {
    transition: none;
  }
  :where(.primitive-countdown:is([data-countdown-units*="d"], [data-countdown-units*="h"], [data-countdown-units*="m"])) [data-countdown-unit="s"] {
    display: none;
  }
}

/* ── Conta: listas de presentes ──
   "Minhas listas", a criação e o editor (`account-gift-list*-page`). O miolo de
   cada tela leva a classe `.giftlist`; o resto herda da família Conta
   (`.account-shell`, `.account-form`, `.auth-field`, `.address-action`).

   Alvo de toque: quantidade, cor, modelo e os botões dos painéis têm 44px de
   altura mínima, porque a tela é usada principalmente no celular. */
.giftlist form {
  margin: 0;
}
.giftlist-pagehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.giftlist-pagehead h1 {
  margin: 0;
}
.giftlist .address-action {
  text-decoration: none;
}
.giftlist-lead {
  margin: -0.25rem 0 1rem;
}
.giftlist-hint {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}
.giftlist-field-error {
  color: var(--color-error-text);
  font-size: 0.8125rem;
  font-weight: 600;
}
.giftlist-field-warning {
  color: var(--color-warning-text);
  font-size: 0.8125rem;
  font-weight: 600;
}
.giftlist :is(input, textarea)[aria-invalid="true"] {
  border-color: var(--color-error);
}
.giftlist-form__error {
  margin: 0;
}
/* Formulário em envio: a região inteira espera a resposta. */
[data-giftlist-form][aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* Cartão de uma lista em "Minhas listas". */
.giftlist-cards {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.giftlist-card {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.giftlist-card__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  color: var(--color-text-faint);
}
.giftlist-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.giftlist-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.giftlist-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.giftlist-card__top .credit-badge {
  flex: none;
}
.giftlist-card__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.giftlist-card__title a {
  display: inline-block;
  /* Área de toque de 44px sem mexer na altura do cartão: o padding vem de volta na margem. */
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  color: inherit;
  text-decoration: none;
}
.giftlist-card__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.giftlist-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: auto 0 0;
}

/* Link público: endereço, copiar e abrir. */
.giftlist-link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.65rem;
  border: 1px dashed var(--color-border-input);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}
.giftlist-link__url {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  flex: 1 1 12rem;
  gap: 0.4rem;
  min-width: 0;
  color: var(--color-text-soft);
  font-size: 0.875rem;
}
.giftlist-link__url .icon {
  flex: none;
}
.giftlist-link__url span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.giftlist-link__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.giftlist .address-action {
  min-height: 2.75rem;
}
.giftlist .account-back a {
  min-height: 2.75rem;
}

/* A criação por conversa abre em tela inteira (casca `layouts/gift-studio`), com a barra presa no
   alto. Resumo, Recebidos e Itens usam a mesma barra (voltar, nome, "Compartilhar" e abas) dentro
   da conta, com o cabeçalho da loja: ali ela é o começo da coluna de conteúdo e não fica presa. */
.giftdesk {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
}
.giftdesk__bar {
  position: sticky;
  top: 0;
  z-index: var(--layer-shell-bar);
  flex: none;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.giftdesk__top,
.giftdesk__bar .giftlist-tabs,
.giftdesk__intro,
.giftdesk__body {
  box-sizing: border-box;
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
.giftdesk__top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.5rem;
}
.giftdesk__top--wide {
  max-width: none;
}
.giftdesk__back {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin-left: -0.6rem;
  padding: 0 0.6rem;
  border-radius: var(--radius);
  color: var(--color-text-soft);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.giftdesk__name {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.giftdesk__name .credit-badge {
  flex: none;
}
.giftdesk__name h1,
.giftdesk__title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--color-text-strong);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.giftdesk__title {
  flex: 1 1 auto;
}
.giftdesk__back:focus-visible,
.giftdesk__share > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* "Compartilhar" guarda o endereço e as três ações: abertos, ocupavam um terço da tela do celular. */
.giftlist-head {
  flex: none;
}
.giftdesk__share {
  position: relative;
}
.giftdesk__share > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  cursor: pointer;
}
.giftdesk__share > summary::-webkit-details-marker {
  display: none;
}
.giftdesk__share-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: var(--layer-shell-popover);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-sizing: border-box;
  width: min(26rem, calc(100vw - 2rem));
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.giftdesk__share-title {
  margin: 0;
  color: var(--color-text-strong);
  font-size: 0.9375rem;
  font-weight: 700;
}
.giftdesk__share-panel .giftlist-link__actions > * {
  flex: 1 1 auto;
  justify-content: center;
}
.giftdesk__bar .giftlist-tabs {
  margin-bottom: 0;
  border-bottom: 0;
}
.giftdesk__intro {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
}
.giftdesk__body {
  flex: 1 1 auto;
  padding-block: 1rem 3rem;
}
.giftdesk__body--form {
  max-width: 42rem;
  padding-top: 1.5rem;
}
.account-content .giftdesk__bar {
  position: static;
  margin-bottom: 1rem;
  padding-top: 0;
  background: none;
}
.account-content .giftdesk__top,
.account-content .giftdesk__bar .giftlist-tabs,
.account-content .giftdesk__intro {
  max-width: none;
  padding-inline: 0;
}
.account-content .giftdesk__intro {
  margin-bottom: 1rem;
  padding-top: 0;
}
.giftlist-head__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
@media (max-width: 767px) {
  .giftdesk__back span,
  .giftdesk__share > summary span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .giftdesk__share > summary {
    justify-content: center;
    min-width: 2.75rem;
    padding-inline: 0;
  }
}

/* Abas do editor: Resumo, Recebidos, Itens e Página. As quatro cabem em 400px de largura. */
.giftlist-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.giftlist-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 0.25rem;
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .giftlist-tabs a:hover {
    color: var(--color-text-strong);
    background: var(--color-bg-alt);
  }
}
.giftlist-tabs a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.giftlist-tabs a[aria-current="page"] {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

/* Resumo: uma linha de fato e o link da tela. */
.giftlist-summary__line {
  margin: 0 0 0.5rem;
}
.giftlist-summary__link {
  margin: 0;
}

/* Partes do editor. */
.giftlist-section {
  margin-top: 1.75rem;
}
.giftlist-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.giftlist-section__head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.giftlist-section__count {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.giftlist-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.giftlist-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.giftlist-notice .icon {
  flex: none;
  margin-top: 0.15rem;
}
.giftlist-closed-note {
  margin: 0 0 1rem;
}
.giftlist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 2rem 1rem;
  border: 1px dashed var(--color-border-input);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  text-align: center;
}

/* Um presente no editor. */
.giftlist-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.giftlist-item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.giftlist-item--unavailable {
  border-color: var(--color-warning-border);
  background: var(--color-warning-surface);
}
.giftlist-item__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  color: var(--color-text-faint);
}
.giftlist-item__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* O ícone fica depois da foto no HTML e só aparece no quadro sem ela (item sem foto, ou foto
   que não carregou: `data-sf-img-fallback`). */
.giftlist-item__media img + * {
  display: none;
}
.giftlist-item--unavailable .giftlist-item__media img {
  filter: grayscale(1);
  opacity: 0.6;
}
.giftlist-item__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.giftlist-item__name {
  margin: 0;
  color: var(--color-text-strong);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.giftlist-item__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}
.giftlist-item__price {
  margin: 0.15rem 0 0;
  font-weight: 700;
}
.giftlist-item__price s {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}
.giftlist-item__warning {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.15rem 0 0;
  color: var(--color-warning-text);
  font-size: 0.8125rem;
  font-weight: 600;
}
.giftlist-item__warning .icon {
  flex: none;
}
/* Item que passa do limite do cartão: o convidado só paga com Pix. */
.giftlist-item__pix {
  margin: 0.15rem 0 0;
  color: var(--color-warning-text);
  font-size: 0.8125rem;
  font-weight: 600;
}
/* Quanto o item já ganhou de convidados. */
.giftlist-item__received {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.15rem 0 0;
  color: var(--color-success-text);
  font-size: 0.8125rem;
  font-weight: 600;
}
.giftlist-item__received .icon {
  flex: none;
}

/* Presentes recebidos, no editor da lista. */
.giftlist-received__empty {
  margin: 0;
}
.giftlist-received__total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-surface);
  background: var(--color-success-surface);
}
.giftlist-received__sum {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--color-success-text);
  font-size: 0.8125rem;
  font-weight: 600;
}
.giftlist-received__sum strong {
  color: var(--color-text-strong);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.giftlist-received__credit {
  flex: 1 1 14rem;
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.875rem;
}
.giftlist-received__credit a {
  font-weight: 600;
  white-space: nowrap;
}
.giftlist-received {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.giftlist-gift {
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}
.giftlist-gift__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.giftlist-gift__who {
  margin: 0;
  color: var(--color-text-strong);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.giftlist-gift__value {
  flex: none;
  margin: 0;
  color: var(--color-text-strong);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.giftlist-gift__when {
  margin: 0.1rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}
.giftlist-gift__release {
  display: inline-flex;
  margin: 0.4rem 0 0;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: 0.75rem;
  font-weight: 600;
}
.giftlist-gift__message {
  margin: 0.6rem 0 0;
  padding: 0 0 0 0.75rem;
  border-left: 3px solid var(--color-border);
  color: var(--color-text);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.giftlist-gift__lines {
  display: grid;
  gap: 0.25rem;
  margin: 0.6rem 0 0;
  padding: 0.6rem 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
  color: var(--color-text-soft);
  font-size: 0.875rem;
}
.giftlist-gift__lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.giftlist-gift__lines li span:last-child {
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* Acompanhamento do dono: os três números, a agenda e a lista de presentes que abrem o detalhe. */
.giftlist-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}
.giftlist-number {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}
.giftlist-number__label {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}
.giftlist-number__value {
  color: var(--color-text-strong);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.giftlist-number__note {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}
.giftlist-numbers--compact .giftlist-number {
  padding: 0.6rem 0.75rem;
}
.giftlist-numbers--compact .giftlist-number__value {
  font-size: 1.05rem;
}
@media (max-width: 30rem) {
  /* A 400px o texto não cabe ao lado do valor: fica a seta, e o texto segue pros leitores de tela. */
  .giftlist-gift__more-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (max-width: 40rem) {
  .giftlist-numbers {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .giftlist-numbers--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.giftlist-schedule {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-surface);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.giftlist-schedule__title {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}
.giftlist-schedule ul {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}
.giftlist-received__credit-link {
  margin: 0.5rem 0 1.25rem;
}
.giftlist-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
}
.giftlist-gift--row {
  padding: 0;
}
.giftlist-gift__open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
  width: 100%;
  min-height: 44px;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: var(--radius-surface);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.giftlist-gift__more {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.15rem;
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 600;
}
.giftlist-gift__head-end {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 0.75rem;
}
@media (hover: hover) and (pointer: fine) {
  .giftlist-gift__open:hover {
    background: var(--color-bg-alt);
  }
}
.giftlist-gift__open:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.giftlist-gift__preview {
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.giftlist-gift__badge {
  align-self: flex-start;
  margin-top: 0.3rem;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: 0.75rem;
  font-weight: 600;
}
.giftlist-gift__badge--undone {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}
.giftlist-gift__badge--wall {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
/* O recado e o mural, no detalhe de um presente recebido. */
.giftlist-wall {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  margin: 0 0 1rem;
}
.giftlist-wall .giftlist-hint {
  margin: 0;
}
.giftlist-dialog {
  box-sizing: border-box;
  margin: auto;
  width: min(32rem, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100% - 2rem);
  padding: 1.25rem;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  color: var(--color-text);
}
.giftlist-dialog::backdrop {
  background: rgb(0 0 0 / 0.45);
}
.giftlist-dialog__title {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}
.giftlist-dialog__when {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.giftlist-dialog__value {
  margin: 0.5rem 0 0;
  color: var(--color-text-strong);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.giftlist-dialog__status {
  margin: 0.75rem 0 1rem;
  color: var(--color-text-soft);
  font-size: 0.9rem;
}
.giftlist-latest {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}
.giftlist-latest li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 1rem;
}
.giftlist-latest__who {
  color: var(--color-text-strong);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.giftlist-latest__value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.giftlist-latest__when {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}
.giftlist-card__received {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  font-weight: 600;
}
.giftlist-item__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.giftlist-item__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}
.giftlist-item__fixed {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* Quantidade com − e +. O seletor leva a classe do miolo e o elemento pra
   vencer a regra geral de campo de `.auth-field`, que o painel do item próprio
   também usa. */
.giftlist-qty {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.giftlist-qty__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  background: none;
  color: var(--color-text-soft);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .giftlist-qty__button:hover {
    background: var(--color-bg-alt);
  }
}
.giftlist .giftlist-qty input.giftlist-qty__input {
  width: 3.25rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--color-border);
  border-radius: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.giftlist-qty__input::-webkit-outer-spin-button,
.giftlist-qty__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* Botão que abre a escolha de arquivo: o campo cobre o botão inteiro. */
.giftlist-file {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.giftlist-file input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.giftlist-file:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Campos da lista. */
.giftlist-form {
  max-width: 40rem;
}
.giftlist-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.giftlist-fieldset legend {
  margin-bottom: 0.4rem;
  padding: 0;
  color: var(--color-text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}
/* Opção de variação de produto no painel "Adicionar presente": o rádio cobre o
   cartão inteiro e fica invisível. */
.giftlist-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.giftlist-option:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
  background: var(--color-primary-soft);
}
.giftlist-option:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Galeria de temas da página. Cada variação é um rádio com a prévia viva dela:
   a própria página num <iframe> de 400×720, reduzido pela escala abaixo. A
   largura da miniatura e a escala andam juntas (largura = 400 × escala). Em
   tela larga as três variações de um tema cabem lado a lado; no celular elas
   ficam numa fileira que rola de lado, com a terceira aparecendo pela metade. */
.giftlist-themes {
  --giftlist-preview-width: 184px;
  --giftlist-preview-scale: 0.46;
}
@media (max-width: 767px) {
  .giftlist-themes {
    --giftlist-preview-width: 128px;
    --giftlist-preview-scale: 0.32;
  }
}
.giftlist-themes__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
@media (max-width: 767px) {
  /* No celular as ocasiões ficam numa fileira só, que rola de lado. */
  .giftlist-themes__filter {
    flex-wrap: nowrap;
    margin-inline: -5px;
    padding: 2px 5px 0.4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
}
.giftlist-themes__chip {
  flex: none;
  min-height: 2.5rem;
  padding: 0 0.85rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.giftlist-themes__chip[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.giftlist-themes__more {
  margin: 1.25rem 0 0;
}
.giftlist-theme {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.giftlist-theme__head {
  margin-bottom: 0.75rem;
}
.giftlist-theme__name {
  margin: 0;
  color: var(--color-text-strong);
  font-size: 1rem;
  font-weight: 700;
}
.giftlist-theme__desc,
.giftlist-theme__occasions {
  margin: 0.15rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.giftlist-theme__variations {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--giftlist-preview-width));
  gap: 0.9rem 0.75rem;
}
@media (max-width: 767px) {
  /* O respiro em volta é o espaço do contorno da miniatura escolhida, que a
     rolagem cortaria. */
  .giftlist-theme__variations {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-template-columns: none;
    margin-inline: -5px;
    padding: 5px 5px 0.6rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 5px;
    scrollbar-width: thin;
  }
  .giftlist-variation {
    scroll-snap-align: start;
  }
}
/* `position: relative` segura dentro do cartão o texto só de leitor de tela do
   link da prévia: ele é absoluto e, solto, escaparia da fileira que rola e
   alargaria a página. */
.giftlist-variation {
  position: relative;
  display: grid;
  gap: 0.2rem;
  justify-items: start;
  min-width: 0;
}
.giftlist-variation__pick {
  position: relative;
  display: grid;
  gap: 0.4rem;
  cursor: pointer;
}
.giftlist-variation__pick input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.giftlist-variation__frame {
  display: block;
  box-sizing: content-box;
  width: var(--giftlist-preview-width);
  height: calc(var(--giftlist-preview-width) * 1.8);
  overflow: hidden;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}
.giftlist-variation__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.giftlist-variation__frame iframe {
  display: block;
  width: 400px;
  height: 720px;
  border: 0;
  transform: scale(var(--giftlist-preview-scale));
  transform-origin: 0 0;
  pointer-events: none;
}
.giftlist-variation__pick:has(input:checked) .giftlist-variation__frame {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}
.giftlist-variation__pick:has(input:focus-visible) .giftlist-variation__frame {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
.giftlist-variation__chosen {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  display: none;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.75rem;
  font-weight: 700;
}
.giftlist-variation__pick:has(input:checked) .giftlist-variation__chosen {
  display: inline-block;
}
.giftlist-variation__name {
  color: var(--color-text-strong);
  font-size: 0.875rem;
  font-weight: 600;
}
.giftlist-variation__open {
  font-size: 0.8125rem;
}
.giftlist-slug {
  display: flex;
  align-items: stretch;
}
.giftlist-slug__prefix {
  display: inline-flex;
  align-items: center;
  max-width: 55%;
  min-height: var(--control-height);
  padding: 0 0.65rem;
  overflow: hidden;
  border: 1px solid var(--color-border-input);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.giftlist .giftlist-slug input {
  flex: 1 1 8rem;
  width: auto;
  min-width: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Encerrar e apagar: cada ação abre a própria confirmação. */
.giftlist-section--end {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.giftlist-section--end .giftlist-section__head {
  margin-bottom: 0;
}
.giftlist-confirm {
  width: 100%;
}
.giftlist-confirm summary {
  width: max-content;
  max-width: 100%;
  min-height: 2.75rem;
  list-style: none;
}
.giftlist-confirm summary::-webkit-details-marker {
  display: none;
}
.giftlist-confirm__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 34rem;
  margin-top: 0.6rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.giftlist-confirm__body p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
}
/* No lugar do botão de apagar, quando a lista não pode mais ser apagada. */
.giftlist-end-note {
  max-width: 34rem;
  margin: 0;
  font-size: 0.9rem;
}

/* Painéis de adicionar presente: caixa centralizada no desktop, folha que sobe
   do pé da tela no celular. */
.giftlist-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--layer-fullscreen);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: var(--color-overlay);
  overscroll-behavior: contain;
}
.giftlist-sheet__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 34rem;
  max-height: min(42rem, 100%);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.giftlist-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
}
.giftlist-sheet__head h2 {
  margin: 0;
  font-size: 1.05rem;
}
.giftlist-sheet__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-soft);
  cursor: pointer;
}
.giftlist-sheet__body {
  padding: 1rem 1.1rem 1.25rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.giftlist-sheet__pane,
.giftlist-sheet__fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.giftlist-sheet__fields {
  gap: 0.9rem;
  margin-top: 0.9rem;
}
.giftlist-sheet__lead,
.giftlist-sheet__status {
  margin: 0;
}
.giftlist-sheet__status {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
/* `:where` mantém a regra em (0,1,0): os avisos são área exposta à Aparência. */
:where(.giftlist-sheet__body) .auth-error,
:where(.giftlist-sheet__body) .auth-notice {
  margin: 0;
}
.giftlist-sheet__back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.giftlist-sheet__product {
  margin: 0;
  color: var(--color-text-strong);
  font-size: 1rem;
  font-weight: 700;
}
.giftlist-sheet__choice {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.giftlist-sheet__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.giftlist-sheet__label {
  color: var(--color-text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}
/* O botão que conclui fica sempre à vista no pé do painel, mesmo com muitas
   opções de variação: gruda no fim da área que rola, e a sombra na cor do
   painel cobre o conteúdo que passa por trás e pela folga do rodapé do celular. */
.giftlist-sheet__submit {
  position: sticky;
  bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  width: 100%;
  box-shadow:
    0 0 0 0.6rem var(--color-surface),
    0 2rem 0 0.6rem var(--color-surface);
}
.giftlist-sheet__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.9rem;
}
.giftlist-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.giftlist-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .giftlist-option:hover {
    background: var(--color-bg-alt);
  }
}
.giftlist-option__media {
  flex: none;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}
.giftlist-option__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.giftlist-option__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.giftlist-option__name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.giftlist-option__price {
  color: var(--color-text-soft);
  font-size: 0.875rem;
}

/* Painel "Adicionar produto da loja": uma vitrine dentro do painel. Em cima a
   busca e a ordem; à esquerda a árvore de categorias; à direita a grade, que é
   a única parte que rola. A altura é fixa pra o painel não pular de tamanho a
   cada resposta. */
.giftpick__box {
  max-width: 68rem;
  height: min(48rem, 100%);
  max-height: none;
  outline: none;
}
.giftpick__browse {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.giftpick__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
}
.giftpick__search {
  position: relative;
  display: flex;
  flex: 1 1 14rem;
  align-items: center;
  min-width: 0;
  color: var(--color-text-muted);
}
.giftpick__search .icon {
  position: absolute;
  left: 0.75rem;
  pointer-events: none;
}
.giftpick__search-input {
  padding-left: 2.4rem;
}
.giftpick__sort {
  flex: 0 1 12rem;
  min-width: 9rem;
}
.giftpick__ai-open {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--control-height);
  padding: 0 0.9rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.giftpick__ai-open[aria-expanded="true"] {
  box-shadow: 0 0 0 1px var(--color-primary);
}
.giftpick__layout {
  display: grid;
  flex: 1;
  grid-template-columns: 15rem minmax(0, 1fr);
  min-height: 0;
}
.giftpick__cats {
  min-height: 0;
  padding: 0.6rem;
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  overscroll-behavior: contain;
}
/* No desktop a árvore está sempre à vista; o botão que a recolhe é do celular. */
.giftpick__cats-toggle {
  display: none;
}
.giftpick__branch {
  margin: 0;
  padding: 0;
  list-style: none;
}
.giftpick__children {
  margin-left: 0.7rem;
  padding-left: 0.35rem;
  border-left: 1px solid var(--color-border);
}
.giftpick__cat-row {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.giftpick__cat {
  display: block;
  flex: 1;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.giftpick__cat--all {
  width: 100%;
  font-weight: 600;
}
.giftpick__cat[aria-current="true"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 700;
}
.giftpick__cat-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}
.giftpick__cat-toggle .icon {
  transition: rotate 0.15s;
}
.giftpick__cat-toggle[aria-expanded="true"] .icon {
  rotate: 180deg;
}
@media (hover: hover) and (pointer: fine) {
  .giftpick__cat:hover,
  .giftpick__cat-toggle:hover {
    background: var(--color-bg-alt);
  }
  .giftpick__cat[aria-current="true"]:hover {
    background: var(--color-primary-soft);
  }
}
.giftpick__main {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  min-height: 0;
  padding: 0.9rem 1.1rem 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.giftpick__filters {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.giftpick__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.giftpick__chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.85rem;
  border: 1px solid var(--color-border-input);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-soft);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.giftpick__chip[aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.giftpick__chip:disabled {
  opacity: 0.55;
  cursor: default;
}
.giftpick__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.giftpick__clear {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.giftpick__empty {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 0;
}
.giftpick__empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.giftpick__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.giftpick__card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .giftpick__card:not(:disabled):hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
  }
}
.giftpick__card:disabled {
  cursor: default;
}
.giftpick__card:disabled .giftpick__media,
.giftpick__card:disabled .giftpick__name,
.giftpick__card:disabled .giftpick__price {
  opacity: 0.5;
}
.giftpick__media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: calc(var(--radius) - 2px);
  background: var(--color-bg-alt);
}
.giftpick__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.giftpick__mark {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--color-success);
  color: var(--color-surface);
  font-size: 0.72rem;
  font-weight: 700;
}
.giftpick__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.giftpick__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.4rem;
  margin-top: auto;
  font-size: 0.9rem;
}
.giftpick__price s {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
.giftpick__price strong {
  color: var(--color-text-strong);
}
.giftpick__reason {
  color: var(--color-text-soft);
  font-size: 0.78rem;
  line-height: 1.35;
}
.giftpick__off {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.giftpick__more {
  align-self: center;
}
/* Ajuda da IA: fica no alto da coluna dos produtos e a grade passa a mostrar o
   que ela separou. */
.giftpick__ai {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.85rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-primary-soft);
}
.giftpick__ai-lead {
  margin: 0;
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.4;
}
.giftpick__ai-row {
  display: flex;
  gap: 0.5rem;
}
.giftpick__ai-input {
  flex: 1;
  min-width: 0;
}
.giftpick__ai-reply {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
  line-height: 1.45;
}
.giftpick__ai-reply p {
  margin: 0;
}
/* As opções do produto escolhido não esticam na largura da vitrine. */
.giftpick__picked {
  flex: 1;
}
.giftpick__picked > .giftlist-sheet__pane {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
}
.giftlist-photo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.giftlist-photo__preview {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  color: var(--color-text-faint);
}
.giftlist-photo__preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.giftlist-photo__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.giftlist-photo__actions .address-action {
  min-height: 2.25rem;
}

/* Aviso curto do que acabou de acontecer, fixo no pé da tela. */
.giftlist-toast {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  left: 50%;
  z-index: calc(var(--layer-fullscreen) + 1);
  width: max-content;
  max-width: min(30rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--color-text-strong);
  box-shadow: var(--shadow-lg);
  color: var(--color-surface);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  transform: translateX(-50%);
}
.giftlist-toast[data-tone="error"] {
  background: var(--color-error-text);
}
.giftlist-toast[data-tone="warning"] {
  border: 1px solid var(--color-warning-border);
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
}
.giftlist-clipboard {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
  .giftlist-card {
    grid-template-columns: 1fr;
  }
  .giftlist-card__cover {
    aspect-ratio: 16 / 7;
  }
  .giftlist-card__cover--empty {
    display: none;
  }
  .giftlist-card__title a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .giftlist-card__actions > *,
  .giftlist-add > * {
    flex: 1 1 100%;
  }
  .giftlist-item {
    grid-template-columns: 4rem minmax(0, 1fr);
  }
  .giftlist-item__media {
    width: 4rem;
  }
  .giftlist-item__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .giftlist-sheet {
    align-items: flex-end;
    padding: 0;
  }
  .giftlist-sheet__box {
    max-width: none;
    max-height: 92dvh;
    border-bottom: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .giftlist-sheet__body {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  }
  /* No celular o painel de produtos ocupa a altura da folha; as categorias
     viram um botão que abre a árvore em cima da grade. */
  .giftpick__box {
    height: 92dvh;
  }
  .giftpick__bar {
    padding: 0.6rem 0.9rem;
  }
  .giftpick__sort {
    flex: 1 1 9rem;
  }
  .giftpick__ai-open {
    flex: 1 1 100%;
    justify-content: center;
  }
  .giftpick__layout {
    display: flex;
    flex-direction: column;
  }
  .giftpick__cats {
    flex: none;
    max-height: 55%;
    padding: 0.5rem 0.9rem;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .giftpick__cats-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .giftpick__cats-toggle span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .giftpick__cats[data-open="false"] .giftpick__tree {
    display: none;
  }
  .giftpick__cats[data-open="true"] .giftpick__tree {
    margin-top: 0.4rem;
  }
  .giftpick__main {
    flex: 1;
    padding: 0.75rem 0.9rem calc(1.25rem + env(safe-area-inset-bottom));
  }
  .giftpick__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .giftpick__ai-row {
    flex-direction: column;
  }
  .giftlist-slug {
    flex-direction: column;
  }
  .giftlist-slug__prefix {
    max-width: none;
    border-right: 1px solid var(--color-border-input);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .giftlist .giftlist-slug input {
    flex: none;
    width: 100%;
    border-radius: 0 0 var(--radius) var(--radius);
  }
}

/* A página da lista no Resumo: a miniatura ao lado do tema em uso e do botão que
   leva ao editor. A miniatura é a página gravada, num <iframe> de 400×720
   reduzido pela escala; a largura da caixa e a escala andam juntas. */
.pagestudio-entry {
  --pagestudio-thumb-scale: 0.46;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
}
.pagestudio-entry__thumb {
  display: block;
  box-sizing: content-box;
  width: calc(400px * var(--pagestudio-thumb-scale));
  height: calc(720px * var(--pagestudio-thumb-scale));
  overflow: hidden;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}
.pagestudio-entry__thumb iframe {
  display: block;
  width: 400px;
  height: 720px;
  border: 0;
  transform: scale(var(--pagestudio-thumb-scale));
  transform-origin: 0 0;
  pointer-events: none;
}
.pagestudio-entry__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}
.pagestudio-entry__info p {
  margin: 0;
}
.pagestudio-entry__look {
  color: var(--color-text-strong);
  font-size: 1rem;
}
.pagestudio-entry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
@media (max-width: 767px) {
  .pagestudio-entry {
    --pagestudio-thumb-scale: 0.3;
    gap: 0.9rem;
  }
  .pagestudio-entry__actions > * {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* O editor da página é a tela inteira de `layouts/gift-studio`. Em tela larga são
   três faixas: a barra (com as ações à direita), o aviso de saída e, embaixo, a
   prévia ao lado do painel. */
html:has(.pagestudio) {
  overflow: hidden;
}
.pagestudio {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--color-bg-alt);
  color: var(--color-text);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "bar actions"
    "notice notice"
    "stage panel";
}
.pagestudio__bar,
.pagestudio__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.pagestudio__bar {
  grid-area: bar;
}
.pagestudio__actions {
  grid-area: actions;
  justify-content: flex-end;
}
.pagestudio__back,
.pagestudio__replay {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.6rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-soft);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.pagestudio__back {
  margin-left: -0.6rem;
  text-decoration: none;
}
.pagestudio__noscript {
  grid-column: 1 / -1;
  margin: 1rem;
}
.pagestudio__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--color-text-strong);
  font-size: 1rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pagestudio__devices {
  display: flex;
  flex: none;
  gap: 0.25rem;
}
/* Só o ícone, em toda largura: com o painel ao lado, a barra não comporta mais um rótulo. */
.pagestudio__replay--icon {
  justify-content: center;
  width: 2.75rem;
  padding: 0;
}
.pagestudio__status {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: right;
}
.pagestudio__status[data-tone="pending"] {
  color: var(--color-warning-text);
}
.pagestudio__status[data-tone="error"] {
  color: var(--color-error-text);
}
.pagestudio__status[data-tone="ok"] {
  color: var(--color-success-text);
}
.pagestudio__toggle {
  display: none;
}
.pagestudio__save {
  flex: none;
}
.pagestudio__save:disabled {
  cursor: default;
  opacity: 0.55;
}
.pagestudio__notice {
  display: flex;
  grid-area: notice;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--color-warning-border);
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
  font-size: 0.9rem;
  font-weight: 600;
}
.pagestudio__notice p {
  margin: 0;
}
.pagestudio__notice-actions,
.pagestudio__ask-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Prévia. "Celular" é a página na largura de um aparelho. "Computador" é a
   página numa tela de 1280px, encolhida pra caber: o <iframe> é maior que a
   caixa na proporção inversa da escala, que o componente mede e põe em
   `--pagestudio-scale`. */
.pagestudio__stage {
  display: flex;
  grid-area: stage;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 1rem;
  overflow: hidden;
}
.pagestudio__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.pagestudio__stage[data-device="phone"] .pagestudio__viewport {
  width: min(400px, 100%);
}
.pagestudio__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.pagestudio__stage[data-device="desktop"] .pagestudio__frame {
  width: calc(100% / var(--pagestudio-scale, 1));
  height: calc(100% / var(--pagestudio-scale, 1));
  transform: scale(var(--pagestudio-scale, 1));
  transform-origin: 0 0;
}

/* Barra de ações do bloco selecionado. Em tela larga é uma faixa de uma linha no canto do bloco,
   por cima da prévia: ocupa a mesma área da grade que a prévia, e o componente a leva até o
   bloco com `transform` (`placeBar`). Com a prévia em largura de celular os botões mostram só o
   ícone, e o nome da ação fica pro leitor de tela e pra dica. Até 1023px ela é o pé da tela: o
   nome do bloco e o "Pronto" numa linha, as ações na outra, cada uma com ícone e nome. */
.pagestudio__blockbar {
  z-index: 2;
  display: flex;
  grid-area: stage;
  align-items: center;
  align-self: start;
  justify-self: start;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.2rem 0.25rem 0.2rem 0.6rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}
.pagestudio__blockbar[data-away="true"] {
  visibility: hidden;
}
.pagestudio__blockbar-head,
.pagestudio__blockbar-tools {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
}
.pagestudio__blockbar-head {
  display: contents;
}
.pagestudio__blockbar-name {
  max-width: 9rem;
  overflow: hidden;
  color: var(--color-text-strong);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pagestudio__blockbar-note {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}
.pagestudio__blockbar-done {
  order: 3;
}
.pagestudio__blockbar button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-soft);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.pagestudio__blockbar button:disabled {
  color: var(--color-border-input);
  cursor: default;
}
.pagestudio__blockbar button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.pagestudio__blockbar-icon {
  display: inline-flex;
}
.pagestudio__blockbar[data-device="phone"] button > span:not(.pagestudio__blockbar-icon) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .pagestudio__blockbar button:not(:disabled):hover {
    background: var(--color-bg-alt);
  }
}
@media (pointer: coarse) {
  .pagestudio__blockbar button {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* Mapa do "Mover para…": toma o lugar da prévia enquanto um bloco está pego. A página inteira
   cabe numa tela: cada bloco é uma faixa baixa, e entre as faixas ficam os lugares onde o bloco
   pode ser solto. As faixas e os lugares dividem a altura que há; o lugar tem piso maior, e a
   área de toque dele passa da borda (`::after`) pra dar 44px mesmo quando a tela é baixa. Faixa
   é a única superfície entre a borda da tela e o texto: nada dentro dela ganha caixa. */
.pagestudio__map {
  z-index: 3;
  display: flex;
  grid-area: stage;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: 0;
  background: var(--color-bg-alt);
}
.pagestudio__map-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.25rem;
  box-sizing: border-box;
  width: min(30rem, 100%);
  min-height: 0;
  padding: 1rem 1rem 0.5rem;
  overflow-y: auto;
}
.pagestudio__map-item {
  display: contents;
}
.pagestudio__map-strip {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  min-height: 1.625rem;
  max-height: 2.75rem;
  margin: 0;
  padding: 0 0.75rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  white-space: nowrap;
}
.pagestudio__map-strip strong {
  flex: none;
  color: var(--color-text-strong);
  font-size: 0.875rem;
}
.pagestudio__map-strip span {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
}
.pagestudio__map-strip[data-off="true"] {
  border-style: dashed;
  background: none;
}
.pagestudio__map-strip[data-off="true"] strong {
  color: var(--color-text-muted);
}
.pagestudio__map-strip[data-picked="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.pagestudio__map-place {
  position: relative;
  flex: 1.5 1 0;
  box-sizing: border-box;
  min-height: 2rem;
  max-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius);
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.pagestudio__map-place::after {
  position: absolute;
  inset: -0.4rem 0;
  content: "";
}
:is(.pagestudio__map-place, .pagestudio__map-cancel):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  background: var(--color-primary-soft);
}
.pagestudio__map-foot {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.75rem;
  box-sizing: border-box;
  width: min(30rem, 100%);
  padding: 0.5rem 1rem 1rem;
}
.pagestudio__map-moving {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.3;
}
.pagestudio__map-moving strong {
  color: var(--color-text-strong);
}
.pagestudio__map-moving small {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}
.pagestudio__map-cancel {
  flex: none;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-strong);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .pagestudio__map-place:hover {
    background: var(--color-primary-soft);
  }
  .pagestudio__map-cancel:hover {
    background: var(--color-bg-alt);
  }
}

/* Painel. */
.pagestudio__panel {
  display: flex;
  grid-area: panel;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0;
  padding: 1rem 1rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
  -webkit-overflow-scrolling: touch;
}
.pagestudio__panel[inert] {
  opacity: 0.6;
}
.pagestudio__sheet-head {
  display: none;
}
/* A faixa presa no alto do painel: os atalhos pras partes dos ajustes e, no celular, o título com
   o fechar. O painel é comprido, e sem os atalhos o estúdio de fotos e os blocos ficam a várias
   telas de rolagem. */
.pagestudio__panel-top {
  position: sticky;
  top: -1rem;
  z-index: 1;
  margin: -1rem -1rem -0.75rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.pagestudio__jump {
  display: flex;
  gap: 0.3rem;
  padding: 0.5rem 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.pagestudio__jump::-webkit-scrollbar {
  display: none;
}
.pagestudio__jump button {
  flex: none;
  min-height: 2.75rem;
  padding: 0 0.7rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.pagestudio__jump button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .pagestudio__jump button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
  }
}
.pagestudio__group {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}
.pagestudio__group + .pagestudio__group {
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.pagestudio__group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.pagestudio__group-title {
  margin: 0;
  color: var(--color-text-strong);
  font-size: 0.9375rem;
  font-weight: 700;
}
.pagestudio__group p {
  margin: 0;
}
.pagestudio__label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  font-weight: 600;
}
.pagestudio__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
/* Ação solta dentro de um campo ("Tirar a data") fica do tamanho do texto dela. */
.pagestudio__field > .address-action {
  align-self: flex-start;
}
/* O nome de um ajuste com o "?" que abre a explicação do tema. O nome e o "?"
   ficam na mesma linha; a área de toque do "?" passa do desenho dele, e a
   margem negativa devolve essa sobra pra linha não crescer. */
.pagestudio__name {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
}
.pagestudio__name > .pagestudio__label {
  margin-bottom: 0;
}
.pagestudio__why {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-block: -0.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text-faint);
  cursor: pointer;
}
.pagestudio__why[aria-expanded="true"] {
  color: var(--color-primary);
}
@media (hover: hover) and (pointer: fine) {
  .pagestudio__why:hover {
    color: var(--color-primary);
  }
}
.pagestudio__why:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.pagestudio__info {
  margin: 0;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  line-height: 1.45;
}
/* Chave com explicação: a chave ocupa a linha e o "?" fica na ponta. */
.pagestudio__switch-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}
.pagestudio__switch-row > .pagestudio__why {
  margin-block: 0;
}
.pagestudio__segments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pagestudio__segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.pagestudio__segment[aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

/* A imagem de uma variação de tema: o alto da página dela num celular, em 5:9.
   Sem imagem no pacote do tema, fica a moldura vazia. */
.pagestudio__thumb {
  display: block;
  aspect-ratio: 5 / 9;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}
.pagestudio__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* O tema em uso, no painel: o cartão inteiro abre a escolha de tema. */
.pagestudio__current {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pagestudio__current-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  font-size: 0.875rem;
}
.pagestudio__current-text strong {
  color: var(--color-text-strong);
  font-size: 1.0625rem;
}
.pagestudio__current-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  color: var(--color-primary);
  font-weight: 600;
}
.pagestudio__ask {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius);
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
  font-size: 0.875rem;
}

/* Chave de ligar. Com texto, a linha inteira é o botão e o texto fica à esquerda;
   `--bare` é só a chave, na linha de um bloco. */
.pagestudio__switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-strong);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.pagestudio__switch--bare {
  flex: none;
  justify-content: center;
  width: 2.75rem;
}
.pagestudio__switch-track {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 1.4rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.pagestudio__switch-track::after {
  content: "";
  position: absolute;
  top: 0.14rem;
  left: 0.14rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: transform 150ms ease, background-color 150ms ease;
}
.pagestudio__switch[aria-checked="true"] .pagestudio__switch-track {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.pagestudio__switch[aria-checked="true"] .pagestudio__switch-track::after {
  background: var(--color-surface);
  transform: translateX(1.08rem);
}
:is(.pagestudio__back, .pagestudio__replay, .pagestudio__segment, .pagestudio__current, .giftpicker__card, .pagestudio__switch, .pagestudio__block-name, .pagestudio__move button):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Blocos: uma linha por bloco, na ordem da página. */
.pagestudio__blocks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagestudio__block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.pagestudio__block[data-open="true"] {
  border-color: var(--color-primary);
}
.pagestudio__block-head {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
}
.pagestudio__block-name {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.25rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pagestudio__block-name > .icon {
  flex: none;
  color: var(--color-text-muted);
  transition: transform 150ms ease;
}
.pagestudio__block-name[aria-expanded="true"] > .icon {
  transform: rotate(90deg);
}
.pagestudio__block-name > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pagestudio__block-name strong {
  color: var(--color-text-strong);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.pagestudio__block-name small {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.3;
}
.pagestudio__block[data-off="true"] .pagestudio__block-name strong {
  color: var(--color-text-muted);
}
.pagestudio__move {
  display: flex;
  flex: none;
}
.pagestudio__move button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-soft);
  cursor: pointer;
}
.pagestudio__move button:disabled {
  color: var(--color-border-input);
  cursor: default;
}
.pagestudio__always {
  flex: none;
  padding: 0 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}
/* O que falta num bloco ligado que a página não desenha, com o botão que resolve: é o mesmo
   texto e o mesmo botão da moldura que a prévia põe no lugar do bloco. O ponto vermelho ao
   lado do nome marca o que o dono resolve; o que não depende dele fica em cinza. A linha usa a
   largura da caixa do bloco, sem recuo próprio. */
.pagestudio__block .pagestudio__block-hint {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0 0.5rem 0.6rem;
  color: var(--color-error-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}
.pagestudio__block-hint .address-action {
  min-height: 2.75rem;
}
.pagestudio__block .pagestudio__block-hint:not([data-tone="fix"]) {
  color: var(--color-text-muted);
  font-weight: 400;
}
.pagestudio__block-name strong[data-fix="true"]::after {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: var(--color-error);
  vertical-align: 0.05em;
}
.pagestudio__block-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0.75rem;
  border-top: 1px solid var(--color-border);
}
/* Mover, duplicar e apagar: depois dos ajustes, porque quem abre o bloco vem preenchê-lo. */
.pagestudio__block-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}
.pagestudio__block-tools > :where(.address-action) {
  min-height: 2.75rem;
  font-size: 0.8125rem;
}
.pagestudio__photo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.pagestudio__photo-thumb {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  color: var(--color-text-faint);
}
.pagestudio__photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pagestudio__photo-info {
  min-width: 0;
}
.pagestudio__photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

@media (hover: hover) and (pointer: fine) {
  :is(.pagestudio__back, .pagestudio__replay, .pagestudio__block-name, .pagestudio__move button:not(:disabled)):hover {
    background: var(--color-bg-alt);
  }
  .pagestudio__segment:not([aria-pressed="true"]):hover,
  .pagestudio__current:hover {
    border-color: var(--color-text-muted);
  }
  .giftpicker__card:not([aria-current="true"]):hover .pagestudio__thumb {
    border-color: var(--color-text-muted);
    box-shadow: var(--shadow-md);
  }
}

/* Escolha de tema: um segundo diálogo, por cima do editor. A cabeça e o filtro
   por ocasião ficam parados; a lista de temas rola; a confirmação, quando a
   troca desfaz ajustes do dono, prende no pé. */
.giftpicker {
  box-sizing: border-box;
  margin: auto;
  width: min(68rem, 100vw - 3rem);
  max-width: none;
  height: min(54rem, 100dvh - 3rem);
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.giftpicker::backdrop {
  background: rgba(17, 24, 39, 0.55);
}
.giftpicker__box {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.giftpicker__head {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0.75rem;
}
.giftpicker__heading {
  min-width: 0;
}
.giftpicker__heading p,
.giftpicker__theme-head p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  line-height: 1.45;
}
.giftpicker__title {
  margin: 0 0 0.2rem;
  color: var(--color-text-strong);
  font-size: 1.375rem;
  font-weight: 700;
}
.giftpicker__filters {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.giftpicker__filters .pagestudio__segment {
  flex: none;
  border-radius: 999px;
}
.giftpicker__list {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
  align-content: start;
  gap: 2rem 2.5rem;
  min-height: 0;
  padding: 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.giftpicker__theme {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  scroll-margin-top: 0.75rem;
}
.giftpicker__theme-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
}
.giftpicker__theme-head p {
  flex: 1 1 100%;
}
.giftpicker__theme-name {
  margin: 0;
  color: var(--color-text-strong);
  font-size: 1.125rem;
  font-weight: 700;
}
.giftpicker__theme-head .giftpicker__occasions {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}
.giftpicker__variations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.giftpicker__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.giftpicker__card-name {
  font-size: 0.875rem;
  font-weight: 600;
}
.giftpicker__card:is([aria-current="true"], [data-chosen="true"]) .pagestudio__thumb {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}
.giftpicker__card[aria-current="true"] .giftpicker__card-name {
  color: var(--color-primary-dark);
}
.giftpicker__badge {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}
.giftpicker__badge--suggested {
  background: var(--color-accent);
}
.giftpicker__card .giftpicker__badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
}
.giftpicker__ask {
  flex: none;
  margin: 0;
  padding: 0.9rem 1.5rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  border-width: 1px 0 0;
  border-radius: 0;
}
.giftpicker__ask p {
  margin: 0;
}

/* Até 1023px a prévia ocupa a tela, as ações descem pro pé e o painel sobe por
   cima da prévia quando o dono toca em "Ajustar". */
@media (max-width: 1023px) {
  .giftpicker {
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .giftpicker__head {
    padding: 0.9rem 1rem 0.6rem;
  }
  .giftpicker__title {
    font-size: 1.1875rem;
  }
  /* No celular as ocasiões ficam numa linha só, que rola de lado. */
  .giftpicker__filters {
    flex-wrap: nowrap;
    padding: 0.25rem 1rem 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .giftpicker__list {
    gap: 1.75rem;
    padding: 1rem;
  }
  .giftpicker__variations {
    gap: 0.5rem;
  }
  .giftpicker__ask {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .pagestudio {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "bar"
      "notice"
      "stage"
      "actions";
  }
  .pagestudio__devices {
    display: none;
  }
  .pagestudio__replay span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pagestudio__replay {
    justify-content: center;
    width: 2.75rem;
    padding: 0;
  }
  .pagestudio__actions {
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border);
    border-bottom: 0;
  }
  .pagestudio__status {
    flex: 1 1 100%;
    text-align: left;
  }
  .pagestudio__toggle {
    display: inline-flex;
  }
  /* O pé com um bloco selecionado. A faixa tem a folga da página dos dois lados e nada dentro
     dela ganha caixa: a linha do nome e a linha das ações usam a largura toda. */
  .pagestudio__blockbar {
    grid-area: actions;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    justify-self: stretch;
    gap: 0;
    padding: 0.25rem 1rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  .pagestudio__blockbar[data-away="true"] {
    visibility: visible;
  }
  .pagestudio__blockbar-head {
    display: flex;
    gap: 0.5rem;
    min-height: 2.75rem;
  }
  .pagestudio__blockbar-name {
    flex: 0 1 auto;
    max-width: none;
    font-size: 0.9375rem;
  }
  .pagestudio__blockbar-note {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    text-overflow: ellipsis;
  }
  .pagestudio__blockbar-done {
    order: 0;
    margin-right: -0.5rem;
    margin-left: auto;
  }
  .pagestudio__blockbar .pagestudio__blockbar-done {
    min-height: 2.75rem;
    color: var(--color-primary);
    font-size: 0.875rem;
  }
  .pagestudio__blockbar-tools {
    gap: 0;
    margin: 0 -0.5rem;
  }
  .pagestudio__blockbar-tools button {
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 2.75rem;
    min-height: 3.25rem;
    padding: 0.25rem 0.1rem;
    font-size: 0.75rem;
  }
  .pagestudio__blockbar[data-device] button > span:not(.pagestudio__blockbar-icon) {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
  /* O mapa ocupa a prévia e o pé: o "Movendo" e o "Cancelar" ficam onde estava a barra. */
  .pagestudio__map {
    grid-row: stage-start / actions-end;
    grid-column: 1 / -1;
    align-items: stretch;
    background: var(--color-bg-alt);
  }
  .pagestudio__map-list,
  .pagestudio__map-foot {
    width: 100%;
  }
  .pagestudio__map-list {
    padding: 0.5rem 1rem;
  }
  .pagestudio__map-foot {
    padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .pagestudio__toggle,
  .pagestudio__save {
    flex: 1 1 0;
  }
  .pagestudio__stage {
    padding: 0;
  }
  .pagestudio__stage .pagestudio__viewport {
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .pagestudio__stage .pagestudio__frame {
    width: 100%;
    height: 100%;
    transform: none;
  }
  .pagestudio__panel {
    z-index: 1;
    grid-area: stage;
    align-self: end;
    max-height: 62%;
    padding-top: 0;
    border-top: 1px solid var(--color-border);
    border-left: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-lg);
  }
  .pagestudio__panel[data-open="false"] {
    display: none;
  }
  .pagestudio__panel-top {
    top: 0;
    margin: 0 -1rem -0.5rem;
  }
  .pagestudio__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 1rem 0;
    color: var(--color-text-strong);
  }
  .pagestudio__jump {
    padding-top: 0.25rem;
  }
}

/* Presentes da lista abertos de dentro do editor da página: um diálogo por cima
   dele com a região de itens da tela Itens. A cabeça fica parada e os itens
   rolam no miolo. Os painéis de adicionar e editar são fixos na tela e abrem
   por cima do diálogo. */
.giftitems {
  box-sizing: border-box;
  margin: auto;
  width: min(46rem, 100vw - 3rem);
  max-width: none;
  height: min(48rem, 100dvh - 3rem);
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.giftitems::backdrop {
  background: rgba(17, 24, 39, 0.55);
}
.giftitems__box {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.giftitems__head {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
}
.giftitems__heading {
  min-width: 0;
}
.giftitems__heading p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  line-height: 1.45;
}
.giftitems__title {
  margin: 0 0 0.2rem;
  color: var(--color-text-strong);
  font-size: 1.375rem;
  font-weight: 700;
}
.giftitems__body {
  flex: 1;
  min-height: 0;
  padding: 1rem 1.5rem 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.giftitems .giftlist-section {
  margin-top: 0;
}
/* O título do diálogo já diz o que é: o da região fica só pra quem ouve a tela. */
.giftitems .giftlist-section__head h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pagestudio__gifts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pagestudio__gifts .giftlist-hint {
  margin: 0;
}

/* O assistente do editor (`account-gift-studio-assistant`). Não é um diálogo: a
   prévia segue à vista. Em tela larga fica sobre o pé do painel de ajustes; na
   estreita sobe do pé da tela, no lugar do painel. */
.pagestudio__assist-open {
  border: 1px solid currentColor;
  color: var(--color-primary);
}
.pagestudio__assist-open--compact {
  display: none;
}
.giftassist {
  z-index: 2;
  display: flex;
  grid-area: panel;
  align-self: end;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-height: min(36rem, 80%);
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.giftassist__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.giftassist__title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--color-text-strong);
  font-size: 1rem;
  font-weight: 700;
}
.giftassist__log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  padding: 0.75rem 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.giftassist__log .giftlist-hint {
  margin: 0;
}
.giftassist__ideas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.giftassist__turns {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.giftassist__turn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
}
.giftassist__asked {
  align-self: flex-end;
  max-width: 90%;
  margin: 0;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
  color: var(--color-text-strong);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}
.giftassist__reply {
  margin: 0;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.giftassist__changed {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 0.25rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
  font-size: 0.875rem;
  list-style: none;
  overflow-wrap: anywhere;
}
.giftassist__changed strong {
  color: var(--color-text-strong);
  font-weight: 600;
}
.giftassist__undo {
  min-height: 2.75rem;
}
.giftassist__shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  gap: 0.4rem;
}
.giftassist__shortcut {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}
.giftassist__focus {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding: 0 0.25rem 0 1rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
  font-size: 0.8125rem;
}
.giftassist__focus span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.giftassist__focus strong {
  color: var(--color-text-strong);
  font-weight: 600;
}
.giftassist__focus-drop {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}
.giftassist__focus-drop:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.giftassist__ask {
  display: flex;
  flex: none;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--color-border);
}
.giftassist__ask .auth-field {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.giftassist__ask textarea {
  resize: none;
}
@media (max-width: 1023px) {
  .pagestudio__assist-open {
    display: none;
  }
  .pagestudio__assist-open--compact {
    display: inline-flex;
  }
  /* Com o assistente o pé da tela tem três botões: cada um ocupa o que o texto dele pede, em
     uma linha só. */
  .pagestudio__action--tight {
    flex: 1 1 auto;
    gap: 0.35rem;
    padding-right: 0.55rem;
    padding-left: 0.55rem;
    font-size: 0.9375rem;
    white-space: nowrap;
  }
  .giftassist {
    grid-area: stage;
    max-height: 72%;
    border-left: 0;
  }
}
@media (max-width: 767px) {
  .giftitems {
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .giftitems__head {
    padding: 0.9rem 1rem 0.7rem;
  }
  .giftitems__title {
    font-size: 1.1875rem;
  }
  .giftitems__body {
    padding: 0.9rem 1rem 1.25rem;
  }
}

/* Estúdio de foto da lista: um diálogo por cima do editor da página. A cabeça
   fica parada e cada tela rola no próprio miolo. O véu escuro sobre foto
   (marca, botão de tirar) não segue a paleta do tema: precisa ler sobre
   qualquer imagem. */
.photostudio {
  --photostudio-scrim: rgba(17, 24, 39, 0.72);
  --photostudio-on-scrim: #fff;
  box-sizing: border-box;
  margin: auto;
  width: min(46rem, 100vw - 3rem);
  max-width: none;
  height: min(52rem, 100dvh - 3rem);
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.photostudio::backdrop {
  background: rgba(17, 24, 39, 0.55);
}
.photostudio__box {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.photostudio__head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.6rem 0.6rem 0.6rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.photostudio[data-view]:not([data-view="library"]) .photostudio__head {
  padding-left: 0.6rem;
}
.photostudio__heading {
  flex: 1 1 auto;
  min-width: 0;
}
.photostudio__title {
  margin: 0;
  outline: none;
  color: var(--color-text-strong);
  font-size: 1.1875rem;
  font-weight: 700;
}
.photostudio__target {
  margin: 0.1rem 0 0;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  line-height: 1.4;
}
.photostudio__target strong {
  color: var(--color-text-strong);
}
.photostudio__icon-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-soft);
  cursor: pointer;
}
.photostudio__notes {
  position: relative;
  z-index: 2;
  flex: none;
  height: 0;
}
.photostudio__note {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  padding: 0.6rem 1.25rem;
  box-shadow: var(--shadow-sm);
  background: var(--color-success-surface);
  color: var(--color-success-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}
.photostudio__note[data-tone="error"] {
  background: var(--color-error-surface);
  color: var(--color-error-text);
}
.photostudio__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 0;
  padding: 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.photostudio__body > * {
  flex: none;
}
.photostudio__progress,
.photostudio__count,
.photostudio__foot {
  margin: 0;
}
.photostudio__progress {
  color: var(--color-text-soft);
  font-size: 0.875rem;
  font-weight: 600;
}
.photostudio__count {
  color: var(--color-text-strong);
  font-size: 0.9375rem;
  font-weight: 600;
}
.photostudio__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 1.5rem 1rem;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
}
.photostudio__empty p {
  max-width: 28rem;
  margin: 0;
}
.photostudio__empty strong {
  color: var(--color-text-strong);
}
.photostudio__spinner {
  display: inline-block;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 999px;
  animation: confirm-spin 0.9s linear infinite;
}

/* De onde a foto vem: três portas do mesmo tamanho, a da IA em destaque. */
.photostudio__sources {
  display: flex;
  gap: 0.6rem;
}
.photostudio__source {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 0;
  min-height: 5.25rem;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-strong);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}
.photostudio__source--ai {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.photostudio__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.photostudio__filters .pagestudio__segment {
  flex: none;
  min-height: 2.5rem;
  border-radius: 999px;
}

/* A grade de fotos: quadrados que cortam a foto pelo meio. */
.photostudio__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.photostudio__grid--small {
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.4rem;
}
.photostudio__grid--versions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.photostudio__tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  cursor: pointer;
}
.photostudio__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photostudio__tile[aria-pressed="true"] {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}
.photostudio__tile-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
}
.photostudio__marks {
  position: absolute;
  bottom: 0.3rem;
  left: 0.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  max-width: calc(100% - 0.6rem);
}
.photostudio__badge {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--photostudio-scrim);
  color: var(--photostudio-on-scrim);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.photostudio__badge--used {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.photostudio__fav,
.photostudio__check {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
}
.photostudio__fav {
  background: var(--photostudio-scrim);
  color: var(--color-warning);
}
.photostudio__fav .icon {
  fill: currentColor;
}
.photostudio__check {
  display: none;
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.photostudio__tile[aria-pressed="true"] .photostudio__check {
  display: inline-flex;
}

/* Uma foto aberta: a foto inteira, de onde ela veio e o que dá pra fazer. */
.photostudio__photo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.photostudio__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}
.photostudio__stage img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(50dvh, 30rem);
  object-fit: contain;
}
.photostudio__waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 22rem;
  padding: 2rem 1rem;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
}
.photostudio__waiting strong {
  color: var(--color-text-strong);
  font-size: 1rem;
}
.photostudio__about {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.photostudio__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--color-text-strong);
}
.photostudio__asked {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  line-height: 1.45;
}
.photostudio__origin {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  padding: 0.25rem 0.7rem 0.25rem 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.photostudio__origin img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.photostudio__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.photostudio__primary {
  width: 100%;
}
.photostudio__primary:disabled {
  cursor: default;
  opacity: 0.55;
}
.photostudio__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.photostudio__tools .address-action {
  min-height: 2.5rem;
  padding: 0 0.8rem;
  font-size: 0.875rem;
}
.photostudio__tools .address-action[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

/* O pedido de fotos com IA: quem aparece, o estilo, o lugar e o texto livre. */
.photostudio__step {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.photostudio__step .giftlist-hint {
  margin: 0;
}
.photostudio__step-title {
  margin: 0;
  color: var(--color-text-strong);
  font-size: 0.9375rem;
  font-weight: 700;
}
.photostudio__step-title small,
.photostudio__more small {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}
.photostudio__refs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.photostudio__ref,
.photostudio__ref-add {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--radius);
}
.photostudio__ref {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.photostudio__ref img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A área de toque é maior que o círculo desenhado, que fica no ícone. */
.photostudio__ref-remove {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.2rem;
  border: 0;
  background: none;
  color: var(--photostudio-on-scrim);
  cursor: pointer;
}
.photostudio__ref-remove svg {
  box-sizing: content-box;
  padding: 0.4375rem;
  border-radius: 999px;
  background: var(--photostudio-scrim);
}
.photostudio__ref-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border: 1px dashed var(--color-border-input);
  background: none;
  color: var(--color-text-soft);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.photostudio__chooser {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}
.photostudio__chooser-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.photostudio__chooser-sources .address-action {
  min-height: 2.5rem;
  padding: 0 0.8rem;
  font-size: 0.875rem;
}
.photostudio__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.photostudio__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0 0.9rem;
  border: 1px solid var(--color-border-input);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.photostudio__chip[aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
/* O desenho do formato: a altura é fixa e a largura sai da proporção. */
.photostudio__shape {
  display: block;
  height: 0.9rem;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.photostudio__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-strong);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}
.photostudio__more[aria-expanded="true"] .icon {
  rotate: 90deg;
}
.photostudio__submit {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.photostudio__submit .giftlist-hint {
  margin: 0;
}
.photostudio__submit .address-action {
  align-self: center;
  min-height: 2.5rem;
  padding: 0 0.8rem;
  font-size: 0.875rem;
}
/* O botão do pedido fica à mão enquanto o dono rola as opções: o miolo abre mão
   do respiro de baixo, que passa a ser do próprio pé. */
.photostudio__body--pinned {
  padding-bottom: 0;
}
.photostudio__submit--pinned {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 0 -1.25rem;
  padding: 0.75rem 1.25rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.photostudio__legal {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}
.photostudio__legal button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* A câmera: o vídeo ocupa o miolo e o disparo fica no pé. */
.photostudio__body--camera {
  gap: 0;
  padding: 0;
}
.photostudio__camera {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  background: #000;
}
/* A contagem antes do disparo, por cima do vídeo. */
.photostudio__countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: clamp(5rem, 28vmin, 11rem);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.55);
  pointer-events: none;
  animation: photostudio-count 1s ease-out both;
}
@keyframes photostudio-count {
  from {
    opacity: 0;
    scale: 1.5;
  }
  25% {
    opacity: 1;
    scale: 1;
  }
  to {
    opacity: 0.35;
    scale: 0.9;
  }
}
.photostudio__camera video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.photostudio__camera video[data-mirror="true"] {
  scale: -1 1;
}
.photostudio__camera-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
}
.photostudio__camera-actions .address-action {
  justify-self: start;
  min-height: 2.5rem;
  padding: 0 0.8rem;
  font-size: 0.875rem;
}
.photostudio__camera-actions .photostudio__progress {
  grid-column: 3;
  justify-self: end;
  text-align: right;
}
.photostudio__shutter {
  grid-column: 2;
  width: 4rem;
  height: 4rem;
  padding: 0.3rem;
  border: 3px solid var(--color-text-strong);
  border-radius: 999px;
  background: none;
  cursor: pointer;
}
.photostudio__shutter span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
}
.photostudio__shutter:disabled {
  cursor: default;
  opacity: 0.4;
}
/* Contando: o miolo vira um quadrado, o sinal de parar. */
.photostudio__shutter[data-counting="true"] span {
  scale: 0.55;
  border-radius: 0.35rem;
  background: var(--color-error);
}
.photostudio__body--camera .photostudio__empty {
  flex: 1 1 auto;
  justify-content: center;
}

/* O recorte: a moldura tem a proporção escolhida e a foto anda por trás dela.
   A largura da moldura sai da altura que cabe na tela. */
.photostudio__crop-area {
  --photostudio-crop-height: min(48dvh, 30rem);
  display: flex;
  justify-content: center;
}
.photostudio__crop-frame {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  box-shadow: 0 0 0 1px var(--color-border);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.photostudio__crop-frame:active {
  cursor: grabbing;
}
.photostudio__crop-frame img {
  position: absolute;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* As linhas dos terços, por cima da foto. */
.photostudio__crop-frame[data-ready="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, transparent calc(100% - 1px), rgba(255, 255, 255, 0.45) calc(100% - 1px)),
    linear-gradient(to bottom, transparent calc(100% - 1px), rgba(255, 255, 255, 0.45) calc(100% - 1px));
  background-size:
    33.34% 100%,
    100% 33.34%;
  pointer-events: none;
}
.photostudio__crop-frame .photostudio__spinner {
  position: absolute;
  inset: 0;
  margin: auto;
}
.photostudio__crop-tools {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.photostudio__crop-tools .giftlist-hint {
  margin: 0;
}
.photostudio__zoom {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  font-weight: 600;
}
.photostudio__zoom input {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--color-primary);
}

.photostudio__terms {
  font-size: 0.9375rem;
  line-height: 1.55;
}
.photostudio__terms p {
  margin: 0;
}
.photostudio__terms ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding-left: 1.2rem;
}

/* O botão do painel do editor que abre o estúdio sem destino. */
.pagestudio__studio {
  justify-content: flex-start;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  font-size: 0.875rem;
}

:is(.photostudio__icon-button, .photostudio__source, .photostudio__tile, .photostudio__origin, .photostudio__ref-remove, .photostudio__ref-add, .photostudio__chip, .photostudio__more, .photostudio__legal button, .photostudio__shutter, .photostudio__crop-frame):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.photostudio__tile:focus-visible {
  outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
  :is(.photostudio__icon-button, .photostudio__origin, .photostudio__ref-add):hover {
    background: var(--color-bg-alt);
  }
  :is(.photostudio__source, .photostudio__chip):not([aria-pressed="true"]):hover {
    border-color: var(--color-text-muted);
  }
  .photostudio__tile:hover img {
    opacity: 0.88;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photostudio__spinner {
    animation-duration: 2.7s;
  }
  .photostudio__countdown {
    animation: none;
  }
}

/* No celular o estúdio ocupa a tela, e os filtros ficam numa linha que rola. */
@media (max-width: 767px) {
  .photostudio {
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .photostudio__head {
    padding-top: calc(0.4rem + env(safe-area-inset-top, 0px));
    padding-bottom: 0.4rem;
    padding-left: 1rem;
  }
  .photostudio__note {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .photostudio__body {
    padding: 1rem;
  }
  .photostudio__body--camera {
    padding: 0;
  }
  .photostudio__body--pinned {
    padding-bottom: 0;
  }
  .photostudio__submit--pinned {
    margin: 0 -1rem;
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .photostudio__filters {
    flex-wrap: nowrap;
    margin: 0 -1rem;
    padding: 0 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .photostudio__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
  }
  .photostudio__grid--small {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .photostudio__grid--versions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
}

/* ── Conta: criação da lista de presentes por conversa ──
   `account-gift-list-assistant-page`: a conversa com a IA de um lado e a ficha
   da lista do outro. No celular a ficha vira um painel que sobe por cima da
   conversa, aberto pela barra de resumo. Botões e campos têm 44px de altura
   mínima. Os três estados da ficha (vazio, em dúvida, pronto) saem dos papéis
   neutro, aviso e sucesso. */
.giftai {
  position: fixed;
  inset: 0 0 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
}
.giftai__bar {
  display: none;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.5rem 0 0.75rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}
.giftai__bar-count {
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.giftai__layout {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  min-height: 0;
}
.giftai__chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
/* A conversa e o campo ficam numa coluna de leitura no meio da tela. */
.giftai__log,
.giftai__dock {
  padding-inline: max(1rem, calc((100% - 46rem) / 2));
}
.giftai__log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  padding-block: 1.25rem 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Antes da primeira mensagem: a saudação no meio da tela, com as respostas prontas. */
.giftai__welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: auto 0;
  padding: 0.5rem 0;
  text-align: center;
}
.giftai__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.giftai__avatar--big {
  width: 3.5rem;
  height: 3.5rem;
}
.giftai__welcome-title {
  margin: 0;
  font-size: clamp(1.375rem, 5.5vw, 1.75rem);
  line-height: 1.2;
  text-wrap: balance;
}
.giftai__welcome-text {
  max-width: 32rem;
  margin: 0;
  color: var(--color-text-soft);
}
.giftai__starters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: 34rem;
  margin-top: 0.5rem;
}
.giftai__turn {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.giftai__who {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--color-primary-dark);
  font-size: 0.8125rem;
  font-weight: 700;
}
.giftai__bubble {
  max-width: min(32rem, 88%);
  margin: 0;
  padding: 0.65rem 0.9rem;
  border-radius: 1rem;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.giftai__bubble--ai {
  align-self: flex-start;
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 0.25rem;
  background: var(--color-surface);
}
.giftai__bubble--me {
  align-self: flex-end;
  border-bottom-right-radius: 0.25rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
}
/* No celular a fala da IA usa a largura toda da conversa: é o texto principal da tela, e o recuo
   de balão tirava 43 px de cada linha. A mensagem do dono segue recuada, pra se ver de quem é. */
@media (max-width: 767px) {
  .giftai__bubble--ai {
    max-width: 100%;
  }
}
.giftai__noted {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-success-surface);
  color: var(--color-success-text);
  font-size: 0.8125rem;
  font-weight: 600;
}
.giftai__typing {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.giftai__typing-dots {
  display: inline-flex;
  gap: 0.2rem;
}
.giftai__typing-dots i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  animation: giftai-typing 1.2s infinite ease-in-out;
}
.giftai__typing-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.giftai__typing-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes giftai-typing {
  0%,
  80%,
  100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}
.giftai__error {
  align-self: stretch;
  margin: 0;
}

/* O que uma resposta mostra além do texto: temas, rascunho de texto, presentes. */
.giftai__themes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
}
.giftai__theme,
.giftai__draft,
.giftai__mount {
  display: flex;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}
.giftai__theme[data-chosen="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.giftai__theme-thumb {
  flex: none;
  width: 6rem;
  height: 10.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: 50% 0;
}
.giftai__theme-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.giftai__theme-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.giftai__theme-desc {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.875rem;
}
.giftai__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.85rem;
  margin-top: auto;
  padding-top: 0.35rem;
}
.giftai__choose,
.giftai__talk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}
.giftai__choose[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.giftai__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-soft);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
:is(.giftai__choose, .giftai__talk, .giftai__link, .giftai__pick, .giftai__option, .giftai__send):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.giftai__draft,
.giftai__mount {
  flex-direction: column;
  gap: 0.4rem;
  max-width: 34rem;
}
.giftai__draft-label {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.giftai__draft-text,
.giftai__mount-text {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.giftai__mount {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.giftai__mount-action {
  align-self: flex-start;
}
.giftai__gifts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.giftai__gift {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.giftai__gift[data-off="true"] {
  opacity: 0.6;
}
.giftai__gift-media {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}
.giftai__gift-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.giftai__gift-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.giftai__gift-name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.giftai__gift-meta {
  color: var(--color-text-soft);
  font-size: 0.8125rem;
}
.giftai__pick,
.giftai__send,
.giftai__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
}
.giftai__pick[aria-pressed="true"] {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-on-primary);
}
.giftai__pick--remove,
.giftai__close {
  border-color: var(--color-border-input);
  color: var(--color-text-soft);
}

/* As respostas prontas e o campo de mensagem. */
.giftai__dock {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: 0.5rem calc(0.75rem + env(safe-area-inset-bottom));
}
.giftai__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.giftai__option {
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px dashed var(--color-text-faint);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
/* A pergunta da data ganha o seletor do aparelho ao lado do botão que confirma. Fica na mesma
   faixa das respostas prontas, sem caixa em volta. */
.giftai__ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.giftai__ask-label {
  flex: 1 0 100%;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}
.giftai__ask input[type='date'] {
  flex: 1 1 10rem;
  box-sizing: border-box;
  min-width: 0;
  min-height: 2.75rem;
  margin: 0;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 1rem;
}
.giftai__ask-go {
  flex: none;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.giftai__ask-go:disabled {
  opacity: 0.5;
  cursor: default;
}
/* O campo é uma caixa só, com o botão de enviar dentro: é o desenho que a pessoa conhece de
   conversa com IA. Nasce com duas linhas e cresce com o texto. */
.giftai__composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border-input);
  border-radius: 1.5rem;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.giftai__composer:focus-within {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 0;
}
.giftai__composer textarea {
  flex: 1;
  box-sizing: border-box;
  min-width: 0;
  min-height: 3.5rem;
  max-height: 9rem;
  margin: 0;
  padding: 0.25rem 0;
  border: 0;
  outline: 0;
  background: none;
  box-shadow: none;
  color: var(--color-text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  overflow-y: auto;
  resize: none;
}
.giftai__send {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
/* Com o campo vazio o botão de enviar dá lugar ao microfone, vazado pra não parecer "enviar". */
.giftai__mic {
  background: var(--color-surface);
  color: var(--color-primary);
}
.giftai__composer[data-voice="on"] {
  align-items: center;
}
/* O botão de foto fica à esquerda do campo, sem contorno: quem manda na caixa é o de enviar. */
.giftai__attach {
  border-color: transparent;
  background: none;
  color: var(--color-text-soft);
}
/* A pergunta da foto põe o botão da câmera na frente das respostas prontas, com traço cheio. */
.giftai__option--photo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  border-style: solid;
  border-color: var(--color-primary);
  color: var(--color-primary);
  white-space: nowrap;
}
/* As fotos que a mensagem levou ficam acima do balão dela, do lado de quem enviou. */
.giftai__shots {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-end;
  justify-content: flex-end;
  gap: 0.35rem;
  max-width: 88%;
}
.giftai__shot {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 0.75rem;
  background: var(--color-bg-alt);
  object-fit: cover;
}
.giftai__shot:only-of-type {
  width: 11rem;
  height: auto;
  max-height: 14rem;
}
.giftai__typing--me {
  align-self: flex-end;
}
/* As fotos na ficha: uma grade de miniaturas, cada uma com o botão de tirar. */
.giftai__album {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.giftai__album-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--color-bg-alt);
  aspect-ratio: 1;
}
.giftai__album-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.giftai__album-tag {
  position: absolute;
  bottom: 0.25rem;
  left: 0.25rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.6875rem;
  font-weight: 700;
}
.giftai__album-remove {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
/* O toque alcança 44 px em volta do botão pequeno. */
.giftai__album-remove::after {
  position: absolute;
  inset: -0.5rem;
  content: '';
}
.giftai__add-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px dashed var(--color-text-faint);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
:is(.giftai__album-remove, .giftai__add-photo):disabled {
  opacity: 0.5;
  cursor: default;
}

/* Áudio nas conversas com IA da lista (criação e "Pedir à IA"): a barra da gravação, que toma o
   lugar do campo de texto, e o balão do que foi falado. */
.voicebar {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.voicebar__drop,
.voicebar__send,
.giftassist__mic {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-border-input);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-soft);
  cursor: pointer;
}
.voicebar__send {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.giftassist__mic {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
:is(.voicebar__drop, .voicebar__send, .giftassist__mic):disabled {
  opacity: 0.5;
  cursor: default;
}
:is(.voicebar__drop, .voicebar__send, .giftassist__mic, button.voicenote):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.voicebar__state {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  margin: 0;
}
.voicebar__now {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.voicebar__dot {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-border-input);
}
.voicebar__dot[data-on="true"] {
  background: var(--color-error);
  animation: voicebar-pulse 1.2s ease-in-out infinite;
}
.voicebar__clock {
  color: var(--color-text-soft);
  font-weight: 500;
}
.voicebar__note {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
@keyframes voicebar-pulse {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .voicebar__dot[data-on="true"] {
    animation: none;
  }
}
.giftassist__ask[data-voice="on"] {
  align-items: center;
}
/* O balão de uma mensagem falada: o tempo do áudio e o texto em duas linhas, que o toque abre. */
:where(button.voicenote) {
  border: 0;
  font: inherit;
  cursor: pointer;
}
.voicenote {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
}
.voicenote__head {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.voicenote__more {
  display: none;
  margin-left: auto;
  padding-left: 0.5rem;
}
.voicenote[data-clipped="true"] .voicenote__more {
  display: inline-flex;
}
.voicenote[aria-expanded="true"] .voicenote__more {
  transform: rotate(180deg);
  padding-left: 0;
  padding-right: 0.5rem;
}
.voicenote__text {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.voicenote__text[data-open="true"] {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}
.giftai__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-align: center;
}
.giftai__hint a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-text-soft);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.giftai[data-started="true"] .giftai__hint {
  display: none;
}
:is(.giftai__choose, .giftai__talk, .giftai__link, .giftai__pick, .giftai__option, .giftai__send, .giftai__close, .giftai__bar, .giftai__album-remove, .giftai__add-photo):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* A ficha. */
.giftai__sheet {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  min-height: 0;
  padding: 1.25rem;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.giftai__sheet-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.giftai__sheet-head h2 {
  margin: 0 auto 0 0;
  font-size: 1.0625rem;
}
.giftai__count {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.giftai__close,
.giftai__scrim {
  display: none;
}
.giftai__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}
.giftai__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.giftai__dot {
  display: inline-block;
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border: 1.5px dashed var(--color-text-faint);
  border-radius: 50%;
}
.giftai__dot[data-state="doubt"] {
  border: 1.5px solid var(--color-warning);
  background: linear-gradient(90deg, var(--color-warning) 50%, transparent 50%);
}
.giftai__dot[data-state="ready"] {
  border: 1.5px solid var(--color-success);
  background: var(--color-success);
}
.giftai__group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--color-border);
}
.giftai__group-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
}
.giftai__group-head h3 {
  margin: 0 auto 0 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.giftai__talk {
  padding: 0 0.75rem;
  font-size: 0.8125rem;
}
.giftai__items {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.giftai__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.giftai__item .giftai__dot {
  margin-top: 0.15rem;
}
.giftai__item-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.giftai__item-label {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
}
.giftai__item-detail {
  color: var(--color-text-soft);
  font-size: 0.875rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.giftai__item[data-state="doubt"] .giftai__item-detail {
  color: var(--color-warning-text);
}
.giftai__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.giftai__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.giftai__picks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.giftai__bands {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.85rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}
.giftai__foot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}
.giftai__foot-action {
  min-height: 3.1rem;
  font-size: 1.0625rem;
}
/* "Montar minha página" fica preso no pé da ficha: é a ação que conclui a criação. */
.giftai__foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 0 -1.25rem;
  padding: 0.75rem 1.25rem 1rem;
  background: var(--color-surface);
}
.giftai__foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.25rem;
}
@media (hover: hover) and (pointer: fine) {
  .giftai__option:hover,
  :is(.giftai__choose, .giftai__talk):not([aria-pressed="true"]):hover {
    border-style: solid;
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
  }
  .giftai__link:hover {
    color: var(--color-primary-dark);
  }
}
@media (prefers-reduced-motion: reduce) {
  .giftai__typing-dots i {
    animation: none;
  }
}
@media (max-width: 1023px) {
  .giftai__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .giftai__bar {
    display: inline-flex;
  }
  /* A ficha sobe por cima da conversa, até quase o alto da tela. */
  .giftai__sheet {
    position: fixed;
    inset: auto 0 0;
    z-index: calc(var(--layer-dialog) + 1);
    max-height: 88dvh;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-lg);
    visibility: hidden;
    transform: translateY(100%);
    transition:
      transform 0.2s ease,
      visibility 0s linear 0.2s;
  }
  .giftai[data-sheet="open"] .giftai__sheet {
    visibility: visible;
    transform: none;
    transition: transform 0.2s ease;
  }
  .giftai__sheet-head {
    align-items: center;
  }
  .giftai__close {
    display: inline-flex;
  }
  .giftai__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--layer-dialog);
    background: var(--color-overlay);
  }
}
@media (max-width: 767px) {
  .giftai__options {
    flex-wrap: nowrap;
    margin-inline: -1rem;
    padding-inline: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .giftai__options::-webkit-scrollbar {
    display: none;
  }
  .giftai__options .giftai__option {
    flex: none;
    white-space: nowrap;
  }
  .giftai__composer textarea {
    min-height: 3rem;
  }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .giftai__sheet,
  .giftai[data-sheet="open"] .giftai__sheet {
    transition: none;
  }
}

/* ── Editor da página da lista: ajuda da IA num texto ──
   `account-gift-studio-text-help`, embaixo da história e do recado. As ações
   são tracejadas, como as opções da conversa de criação: é o sinal de "a IA
   propõe". As versões ficam em cartões, e nenhuma troca o texto sozinha. */
.gifthelp {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  margin-top: 0.25rem;
  padding: 0.65rem 0.75rem;
  border: 1px dashed var(--color-text-faint);
  border-radius: var(--radius-lg);
}
.gifthelp__title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}
.gifthelp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.gifthelp__action {
  min-height: 2.75rem;
  padding: 0 0.8rem;
  border: 1px dashed var(--color-text-faint);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.gifthelp__action--mic {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.gifthelp__action[aria-expanded="true"] {
  border-style: solid;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.gifthelp__action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  .gifthelp__action:not(:disabled):hover {
    background: var(--color-bg-alt);
  }
}
.gifthelp__body,
.gifthelp__ask,
.gifthelp__versions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.gifthelp__versions {
  margin: 0;
  padding: 0;
  list-style: none;
}
.gifthelp__ask .address-action,
.gifthelp__version .address-action {
  align-self: flex-start;
  min-height: 2.75rem;
}
.gifthelp__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.gifthelp__error {
  margin: 0;
}
.gifthelp__version {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.gifthelp__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.gifthelp__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.gifthelp__foot .address-action {
  min-height: 2.75rem;
}
.gifthelp__foot .giftlist-hint {
  flex-basis: 100%;
}

/* Ajuda do comprador: lista e conversa de atendimentos */
.support-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.support-list__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1rem; border: 1px solid var(--color-border, #e5e5e5); border-radius: 0.5rem; }
.support-list__link { display: grid; gap: 0.25rem; min-width: 0; text-decoration: none; color: inherit; }
.support-list__subject { font-weight: 600; overflow-wrap: anywhere; }
/* Chat do atendimento: moldura de altura limitada, lista com rolagem própria e campo fixo
   embaixo. A página não rola junto com as mensagens. */
.support-chat { display: flex; flex-direction: column; height: clamp(26rem, calc(100dvh - 19rem), 46rem); border: 1px solid var(--color-border, #e5e5e5); border-radius: 0.75rem; background: var(--color-surface, #fff); overflow: hidden; }
.support-chat__state { margin: 0; padding: 0.625rem 1rem; border-bottom: 1px solid var(--color-border, #e5e5e5); background: var(--color-surface-muted, #f6f6f6); font-size: 0.875rem; }
.support-chat__state--ticket { background: var(--color-info-surface, #eef4ff); border-bottom-color: var(--color-info-border, #c7d8f5); }
.support-chat__log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; scroll-padding-bottom: 1rem; }
.support-chat__empty { margin: 0; }
.support-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.support-thread__item { display: grid; gap: 0.75rem; }
.support-message { max-width: min(85%, 36rem); justify-self: start; padding: 0.625rem 0.875rem; border: 1px solid var(--color-border, #e5e5e5); border-radius: 0.875rem 0.875rem 0.875rem 0.25rem; background: var(--color-surface-muted, #f6f6f6); }
.support-message--mine { justify-self: end; border-color: transparent; border-radius: 0.875rem 0.875rem 0.25rem 0.875rem; background: var(--color-primary-soft, #eff6ff); }
.support-message__head { margin: 0; font-size: 0.8125rem; }
.support-message__body { margin: 0.25rem 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.support-message__files { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.875rem; }
.support-handoff { margin: 0; padding: 0.5rem 1rem; border: 1px dashed var(--color-border, #e5e5e5); border-radius: 0.5rem; color: var(--color-text-soft, #555); text-align: center; font-size: 0.8125rem; }
.support-chat__thinking { display: flex; align-items: center; gap: 0.5rem; margin: 0.75rem 0 0; font-size: 0.875rem; }
.support-chat__dots { display: inline-flex; gap: 3px; }
.support-chat__dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: support-chat-dot 1.2s infinite ease-in-out; }
.support-chat__dots i:nth-child(2) { animation-delay: 0.2s; }
.support-chat__dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes support-chat-dot { 0%, 80%, 100% { opacity: 0.35; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .support-chat__dots i { animation: none; opacity: 0.7; } }
.support-chat__foot { flex: 0 0 auto; display: grid; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--color-border, #e5e5e5); background: var(--color-surface, #fff); }
.support-chat__foot > p { margin: 0; }
.support-chat__quick { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.support-chat__chip { min-height: 2.25rem; padding-block: 0.25rem; font-size: 0.875rem; }
.support-chat__composer { display: grid; gap: 0.5rem; }
.support-chat__composer textarea { width: 100%; resize: none; max-height: 8rem; field-sizing: content; min-height: 3rem; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border-input, #d1d5db); border-radius: var(--radius, 0.5rem); font: inherit; }
.support-chat__actions { display: flex; align-items: center; gap: 0.5rem; }
.support-chat__attach { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--color-border-input, #d1d5db); border-radius: var(--radius, 0.5rem); cursor: pointer; }
.support-chat__attach:focus-within { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; }
.support-chat__files { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; }
.support-chat__send { margin-left: auto; }
.support-chat__hint { margin: 0; font-size: 0.75rem; }
.support-chat__link { padding: 0; border: 0; background: none; color: var(--color-primary, #2563eb); font: inherit; font-size: 0.875rem; text-decoration: underline; cursor: pointer; }
.support-chat__link:disabled { opacity: 0.5; cursor: default; }
/* "Nova mensagem": preso ao pé da lista enquanto a pessoa lê mais acima; altura zero para não empurrar nada. */
.support-chat__jump { position: sticky; bottom: 0; display: flex; justify-content: center; height: 0; overflow: visible; pointer-events: none; }
.support-chat__jump-button { pointer-events: auto; transform: translateY(calc(-100% - 0.5rem)); min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--color-border, #e5e5e5); border-radius: 999px; background: var(--color-surface, #fff); color: var(--color-text, #111); box-shadow: var(--shadow-md, 0 4px 12px rgb(0 0 0 / 0.12)); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
@media (max-width: 40rem) {
  .support-chat { height: clamp(20rem, calc(100dvh - 15rem), 46rem); border-radius: 0.5rem; }
  /* Na tela do chat o celular não repete o menu da conta nem o rótulo da conversa, e o título fica
     pequeno: a moldura sobe e a lista de mensagens ganha altura. */
  .account-shell--chat { padding-block: 0.75rem 1rem; gap: 0; }
  .account-shell--chat > .account-nav, .account-shell--chat .subscription-card__eyebrow { display: none; }
  .account-shell--chat .account-back { margin-bottom: 0.25rem; }
  .account-shell--chat .subscription-detail__head .subscription-badge { display: none; }
  .account-shell--chat h1 { margin: 0 0 0.5rem; font-size: 1.25rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .support-chat__state { padding: 0.4rem 0.75rem; font-size: 0.8125rem; }
  .support-chat__log { padding: 0.5rem; }
  .support-chat__foot { padding: 0.5rem; }
  .support-message { max-width: 97%; padding: 0.5rem 0.625rem; }
  .support-chat__hint { display: none; }
  /* Campo, clipe e Enviar numa linha só; o botão vira ícone para o campo não encolher. */
  .support-chat__composer { grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; column-gap: 0; row-gap: 0.25rem; }
  .support-chat__actions { display: contents; }
  .support-chat__composer textarea { grid-column: 1; grid-row: 1; min-height: 2.75rem; margin-right: 0.5rem; }
  .support-chat__attach { grid-column: 2; grid-row: 1; margin-right: 0.5rem; }
  .support-chat__send { grid-column: 3; grid-row: 1; margin-left: 0; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; padding: 0; }
  .support-chat__send-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .support-chat__files { grid-column: 1 / -1; grid-row: 2; }
}
.support-chat--idle { height: auto; overflow: visible; }
.support-chat--idle .support-chat__state, .support-chat--idle .support-chat__log, .support-chat--idle .support-chat__hint { display: none; }
.support-chat--idle .support-chat__foot { border-top: 0; padding: 0.75rem; }
.support-intro { margin: 0 0 0.75rem; }
.support-previous { margin-top: 1.5rem; }
.support-previous__title { margin: 0 0 0.75rem; font-size: var(--type-h2-size, 1.125rem); font-weight: var(--type-h2-weight, 600); }

/* ── A vitrine na área do afiliado (`/minha-conta/afiliado/vitrine`, F4-7) e os pedaços dela no
   editor de página (`account-affiliate-vitrine-editor-page`). Fora da seção da área do afiliado:
   tudo aqui tem o prefixo `affiliate-vitrine-editor`. No celular as linhas viram lista com
   divisor, sem moldura própria, e os `<dialog>` sobem do pé da tela. */
.affiliate-area.affiliate-vitrine-editor {
  gap: 1rem;
}
.affiliate-vitrine-editor__down {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid var(--color-error-border);
  border-radius: var(--radius-surface);
  background: var(--color-error-surface);
  color: var(--color-error-text);
}
.affiliate-vitrine-editor__down p {
  margin: 0;
}
.affiliate-vitrine-editor__down-title {
  font-weight: 700;
}
/* A faixa do alto das Páginas: o endereço com "Copiar" e "Ver" numa linha só, os números da
   vitrine inteira e a quantidade de seguidores. Uma superfície, sem caixa dentro. */
.affiliate-vitrine-editor__strip {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}
.affiliate-vitrine-editor__strip > p {
  margin: 0;
}
.affiliate-vitrine-editor__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.affiliate-vitrine-editor__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-strong);
  font-size: 0.9375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}
.affiliate-vitrine-editor__link :where(.btn) {
  flex: none;
  min-height: var(--control-height);
}
.affiliate-vitrine-editor__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.9rem;
  color: var(--color-text-strong);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.affiliate-vitrine-editor__see {
  display: none;
}
@media (min-width: 768px) {
  .affiliate-vitrine-editor__see {
    display: inline;
  }
  .affiliate-vitrine-editor__link :where(.btn) {
    min-height: 0;
  }
}
.affiliate-vitrine-editor__row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.affiliate-vitrine-editor__row-actions form {
  display: contents;
}
.affiliate-vitrine-editor__tabs {
  display: flex;
  justify-self: start;
  gap: 0.125rem;
  padding: 0.1875rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
}
.affiliate-vitrine-editor__tabs a {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 1.1rem;
  border-radius: var(--radius-pill);
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.affiliate-vitrine-editor__tabs a[aria-current="page"] {
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-strong);
}
.affiliate-vitrine-editor__rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}
.affiliate-vitrine-editor__row {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
}
.affiliate-vitrine-editor__row > p {
  margin: 0;
}
.affiliate-vitrine-editor__row-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1rem;
  align-items: center;
}
.affiliate-vitrine-editor__row + .affiliate-vitrine-editor__row {
  border-top: 1px solid var(--color-border);
}
.affiliate-vitrine-editor__row-main {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}
.affiliate-vitrine-editor__row-title {
  margin: 0;
  color: var(--color-text-strong);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.affiliate-vitrine-editor__row-title a {
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .affiliate-vitrine-editor__row-title a:hover {
    text-decoration: underline;
  }
}
.affiliate-vitrine-editor__row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
/* O que a página ou a lista trouxe nos últimos 30 dias, com a parte dela nos cliques da vitrine
   numa barra rotulada. Linha sem clique não tem barra. */
.affiliate-vitrine-editor__stats {
  display: grid;
  gap: 0.35rem;
}
.affiliate-vitrine-editor__results {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  margin: 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.affiliate-vitrine-editor__share {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}
.affiliate-vitrine-editor__bar {
  flex: 1;
  max-width: 16rem;
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
}
.affiliate-vitrine-editor__bar > span {
  display: block;
  min-width: 0.25rem;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}
.affiliate-vitrine-editor__share-label {
  flex: none;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
/* "Páginas apagadas (N)": um link discreto perto do título das subpáginas. */
.affiliate-vitrine-editor__trash > summary {
  gap: 0.4rem;
  min-height: var(--control-height);
  color: var(--color-text-soft);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
/* O menu "⋯" de uma página ou lista: a ação principal fica de fora, o resto abre aqui. */
.affiliate-vitrine-editor__menu {
  position: relative;
}
.affiliate-vitrine-editor__menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-soft);
  list-style: none;
  cursor: pointer;
}
.affiliate-vitrine-editor__menu-button::-webkit-details-marker {
  display: none;
}
.affiliate-vitrine-editor__menu[open] > .affiliate-vitrine-editor__menu-button,
.affiliate-vitrine-editor__menu-button:focus-visible {
  border-color: var(--color-primary);
}
.affiliate-vitrine-editor__menu-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: var(--layer-shell-popover);
  display: grid;
  min-width: 11rem;
  padding: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.affiliate-vitrine-editor__menu-panel form {
  display: contents;
}
.affiliate-vitrine-editor__menu-panel button {
  display: flex;
  align-items: center;
  min-height: var(--control-height);
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.affiliate-vitrine-editor__menu-panel .affiliate-vitrine-editor__menu-danger {
  color: var(--color-error);
}
@media (hover: hover) and (pointer: fine) {
  .affiliate-vitrine-editor__menu-panel button:hover {
    background: var(--color-bg-alt);
  }
}
.affiliate-vitrine-editor__deleted {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}
.affiliate-vitrine-editor__deleted > li {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}
.affiliate-vitrine-editor__state {
  padding: 0.1rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
  font-size: 0.75rem;
  font-weight: 600;
}
.affiliate-vitrine-editor__state[data-state="no_ar"],
.affiliate-vitrine-editor__state[data-state="publicada"] {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.affiliate-vitrine-editor__state[data-state="fora_do_ar"] {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}
.affiliate-vitrine-editor__reason {
  margin: 0;
  color: var(--color-error-text);
  font-size: 0.875rem;
}
/* Aparência compacta: três cartões pequenos lado a lado, cada um com uma amostra do tema (os
   valores do próprio tema da vitrine: fundo leve, cantos, texto e destaque). */
.affiliate-vitrine-editor__themes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.affiliate-vitrine-editor__themes legend {
  margin-bottom: 0.5rem;
  padding: 0;
  font-weight: 600;
}
.affiliate-vitrine-editor__theme {
  position: relative;
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  padding: 0.5rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  font-size: 0.875rem;
  cursor: pointer;
}
.affiliate-vitrine-editor__theme input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.affiliate-vitrine-editor__theme:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.affiliate-vitrine-editor__theme:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.affiliate-vitrine-editor__theme-sample {
  display: grid;
  align-content: center;
  gap: 0.3rem;
  box-sizing: border-box;
  width: 100%;
  height: 2.75rem;
  padding: 0 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--vitrine-radius);
  background: var(--vitrine-tint);
}
.affiliate-vitrine-editor__theme-sample::before,
.affiliate-vitrine-editor__theme-sample::after {
  content: "";
  display: block;
  height: 0.35rem;
  border-radius: var(--radius-pill);
}
.affiliate-vitrine-editor__theme-sample::before {
  width: 65%;
  background: var(--vitrine-text);
}
.affiliate-vitrine-editor__theme-sample::after {
  width: 35%;
  background: var(--vitrine-accent-color);
}
.affiliate-vitrine-editor__accent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.affiliate-vitrine-editor__check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
}
.affiliate-vitrine-editor__check input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
}
.affiliate-vitrine-editor__check > span {
  display: grid;
  gap: 0.15rem;
}
.affiliate-vitrine-editor__color input {
  width: 3rem;
  height: 2.25rem;
  padding: 0.15rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}
/* "Salvar aparência": no celular fica preso ao pé da tela enquanto o formulário está à vista. */
.affiliate-vitrine-editor__save {
  display: flex;
}
.affiliate-vitrine-editor__save :where(.btn) {
  min-height: var(--control-height);
}
.affiliate-vitrine-editor__look > form {
  display: grid;
  gap: 1rem;
  max-width: 36rem;
}
/* Os `<dialog>` da vitrine: caixa no meio da tela no computador, folha do pé no celular. */
.affiliate-vitrine-editor-dialog {
  box-sizing: border-box;
  width: min(32rem, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100% - 2rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-overlay);
  background: var(--color-surface);
  color: var(--color-text);
}
.affiliate-vitrine-editor-dialog::backdrop {
  background: var(--color-overlay);
}
.affiliate-vitrine-editor-dialog__box {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2rem);
}
.affiliate-vitrine-editor-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
}
.affiliate-vitrine-editor-dialog__head h2 {
  margin: 0;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}
.affiliate-vitrine-editor-dialog__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-soft);
  cursor: pointer;
}
.affiliate-vitrine-editor-dialog__body {
  display: grid;
  gap: 0.9rem;
  padding: 1rem 1.1rem 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.affiliate-vitrine-editor-dialog__body > form {
  display: grid;
  gap: 0.9rem;
}
.affiliate-vitrine-editor-dialog__body p {
  margin: 0;
}
.affiliate-vitrine-editor-dialog__submit {
  width: 100%;
}
.affiliate-vitrine-editor-dialog__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.affiliate-vitrine-editor__types {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.affiliate-vitrine-editor__type {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.affiliate-vitrine-editor__type span {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
@media (hover: hover) and (pointer: fine) {
  .affiliate-vitrine-editor__type:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
  }
}
/* Página sem bloco, no meio da prévia do editor: uma frase e o botão que abre o "Adicionar bloco". */
.affiliate-vitrine-editor__empty {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  padding: 2.5rem 1rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-surface);
  color: var(--color-text-muted);
  text-align: center;
}
.affiliate-vitrine-editor__empty p {
  max-width: 24rem;
  margin: 0;
}
.affiliate-vitrine-editor__publish {
  white-space: nowrap;
}
.affiliate-vitrine-editor__publish[aria-disabled="true"] {
  opacity: 0.6;
}

@media (max-width: 767px) {
  /* O controle segmentado ocupa a largura toda, em três partes iguais. */
  .affiliate-vitrine-editor__tabs {
    justify-self: stretch;
  }
  .affiliate-vitrine-editor__tabs a {
    flex: 1 1 0;
    padding: 0 0.5rem;
  }
  /* A lista encosta na borda da página: sem moldura, só os divisores. */
  .affiliate-vitrine-editor__rows {
    border-width: 1px 0;
    border-radius: 0;
    background: none;
  }
  .affiliate-vitrine-editor__row {
    padding: 0.75rem 0;
  }
  /* Lista tem três ações: a linha das ações desce pra baixo do nome. */
  .affiliate-vitrine-editor__row-head--wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .affiliate-vitrine-editor__menu-button {
    width: var(--control-height);
    height: var(--control-height);
  }
  .affiliate-vitrine-editor__row-actions :where(.btn) {
    min-height: var(--control-height);
  }
  .affiliate-vitrine-editor :where(.affiliate-section__head) :where(.btn) {
    min-height: var(--control-height);
  }
  .affiliate-vitrine-editor__themes {
    gap: 0.4rem;
  }
  /* "Salvar aparência" fica no pé da tela, preso enquanto o formulário está à vista. */
  .affiliate-vitrine-editor__save {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-inline: calc(-1 * var(--sf-page-gutter));
    padding: 0.75rem var(--sf-page-gutter) calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .affiliate-vitrine-editor__save :where(.btn) {
    flex: 1;
    justify-content: center;
  }
  .affiliate-vitrine-editor-dialog {
    width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
  }
  .affiliate-vitrine-editor-dialog__box {
    max-height: 92dvh;
  }
  .affiliate-vitrine-editor-dialog__body {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Consentimento: banner inicial e preferências no fluxo do rodapé. */
  .sf-ads-choice[hidden],.sf-ads-choice__open[hidden]{display:none}
  /* Na prévia do editor o aviso cobre boa parte da página e não é o que se
     está desenhando: fica escondido, e aparece só com "Forçar aberto". */
  :where([data-sf-preview]) .sf-ads-choice:not([data-sf-preview-forced]){display:none}
  .sf-ads-choice{position:fixed;z-index:var(--layer-shell-notice);right:0;bottom:0;left:0;padding:1.5rem max(1.5rem,env(safe-area-inset-right)) max(1.5rem,env(safe-area-inset-bottom)) max(1.5rem,env(safe-area-inset-left));background:#fff;color:#202020;border-top:1px solid #d7d7d7;box-shadow:0 -8px 32px #0002;font:inherit}
  .sf-ads-choice__content{max-width:76rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem}
  .sf-ads-choice__copy strong{display:block;font-size:1.2rem;line-height:1.35}
  .sf-ads-choice__copy p{margin:.5rem 0 0;line-height:1.5;max-width:52rem}
  .sf-ads-choice__actions{display:flex;gap:.75rem;align-items:center}
  .sf-ads-choice__actions button{min-height:3rem;min-width:10rem;padding:.75rem 1.25rem;border:1px solid #202020;border-radius:.4rem;background:#fff;color:#202020;font:inherit;font-weight:600;cursor:pointer}
  .sf-ads-choice__actions button:first-child{background:#202020;color:#fff}
  @media (hover: hover) and (pointer: fine) {
    .sf-ads-choice__actions button:hover:not(:disabled){box-shadow:0 0 0 2px #2020203b}
  }
  .sf-ads-choice__actions button:focus-visible,.sf-ads-choice__open:focus-visible{outline:3px solid #3265ac;outline-offset:3px}
  .sf-ads-choice__actions button:disabled{cursor:wait;opacity:.65}
  .sf-ads-choice__error{max-width:76rem;margin:.75rem auto 0;color:#a31919}
  .sf-ads-choice__preferences{padding:1rem;text-align:center}
  .sf-ads-choice__open{padding:.5rem;background:none;color:inherit;border:0;font:inherit;font-size:.875rem;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
  @media(max-width:48rem){.sf-ads-choice{padding:1.25rem max(1rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}.sf-ads-choice__content{display:block}.sf-ads-choice__actions{margin-top:1rem;display:grid;grid-template-columns:1fr 1fr}.sf-ads-choice__actions button{min-width:0;padding:.75rem .5rem}}
  @media(max-width:23rem){.sf-ads-choice__actions{grid-template-columns:1fr}}

} /* @layer sf-base */