/* ==========================================================================
   DOHA CLOUD DESIGN SYSTEM — COMPONENTES
   Índice:
     01 Botão            08 Card de produto      15 Toast
     02 Botão de ícone   09 Trilho de categoria  16 Skeleton
     03 Badge            10 Cabeçalho de seção   17 Estado vazio
     04 Chip             11 Item do carrinho     18 Barra de progresso
     05 Campo            12 Drawer / Sheet       19 Controle segmentado
     06 Busca            13 Scrim                20 Cartão de opção
     07 Stepper          14 Modal                21 Banner / faixa de confiança
     08 Card de produto  15 Toast                22 App bar
     08b Preço  08c Nota  08d Sabor              23 Navbar + mega-menu
                                                 24 Migalhas
                                                 25 Ferramentas da listagem
                                                 26 Painel de filtros
                                                 27 Paginação
                                                 28 Galeria
                                                 29 Especificações
                                                 30 Abas
                                                 31 Marca
                                                 32 Prateleira
                                                 33 Rodapé
   ========================================================================== */

/* ==========================================================================
   01 · BOTÃO
   ========================================================================== */
.btn {
  --_bg: transparent;
  --_fg: var(--text);
  --_border: transparent;
  --_shadow: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-h-md);
  padding-inline: var(--btn-px);
  border-radius: var(--btn-radius);
  background: var(--_bg);
  color: var(--_fg);
  box-shadow: var(--_shadow), inset 0 0 0 1px var(--_border);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--btn-font);
  letter-spacing: var(--tracking-snug);
  white-space: nowrap;
  user-select: none;
  position: relative;
  /* Só transform/opacity/cor — nada que force reflow */
  transition: background-color var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-fast) var(--ease-std),
              transform var(--dur-instant) var(--ease-spring);
}

.btn:active {
  transform: scale(var(--btn-press));
}

/* --- Variantes --- */
.btn--primary {
  --_bg: var(--brand-fill);
  --_fg: var(--on-brand);
  --_border: rgba(138, 101, 8, 0.32);
  --_shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  background-size: 100% 140%;
  background-position: 50% 0;
  transition: background-position var(--dur-base) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-std),
              transform var(--dur-instant) var(--ease-spring);
}
/* O gradiente não anima cor: quem se move é a posição do brilho */
.btn--primary:hover { background-position: 50% 100%; }
.btn--primary:active { filter: brightness(0.96); }

/* Contorno claro — CTA secundária sobre fundo escuro (hero, faixas) */
.btn--outline-light {
  --_bg: rgba(255, 248, 232, 0.04);
  --_fg: #fff;
  --_border: rgba(255, 248, 232, 0.22);
  backdrop-filter: blur(8px);
}
.btn--outline-light:hover { --_bg: rgba(255, 248, 232, 0.1); --_border: rgba(255, 248, 232, 0.4); }

.btn--secondary {
  --_bg: var(--surface);
  --_fg: var(--text);
  --_border: var(--border);
  --_shadow: var(--shadow-xs);
}
.btn--secondary:hover { --_bg: var(--surface-2); --_border: var(--border-strong); }

.btn--ghost {
  --_bg: transparent;
  --_fg: var(--text-muted);
}
.btn--ghost:hover { --_bg: var(--surface-2); --_fg: var(--text); }

.btn--soft {
  --_bg: var(--brand-soft);
  --_fg: var(--brand-soft-fg);
}
.btn--soft:hover { --_bg: var(--brand-soft); --_border: var(--brand-ring); }

.btn--dark {
  --_bg: var(--surface-inverse);
  --_fg: var(--text-inverse);
  --_shadow: var(--shadow-md);
}
.btn--dark:hover { opacity: 0.88; }

.btn--danger {
  --_bg: transparent;
  --_fg: var(--danger);
  --_border: var(--border);
}
.btn--danger:hover { --_bg: var(--danger-soft); --_border: var(--danger); }

/* WhatsApp usa a cor oficial da marca — exceção documentada à paleta */
.btn--whatsapp {
  --_bg: #25d366;
  --_fg: #06281a;
  --_shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
}
.btn--whatsapp:hover { --_bg: #1fbe5a; }

/* --- Tamanhos --- */
.btn--sm {
  height: var(--btn-h-sm);
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius-xs);
}

.btn--lg {
  height: var(--btn-h-lg);
  padding-inline: var(--space-6);
  font-size: var(--text-md);
  border-radius: var(--radius-md);
}

.btn--block { width: 100%; }

/* --- Estado de carregamento: trava o clique e mostra spinner --- */
.btn[data-loading='true'] {
  pointer-events: none;
  color: transparent !important;
}

.btn[data-loading='true']::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  color: var(--_fg);
  animation: spin 0.6s linear infinite;
}

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

.btn .icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ==========================================================================
   02 · BOTÃO DE ÍCONE
   Ícone visual de 20px dentro de alvo de toque de 44px.
   ========================================================================== */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  flex: none;
  transition: background-color var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std),
              transform var(--dur-instant) var(--ease-spring);
}

.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:active { transform: scale(0.92); }

.icon-btn .icon { width: 20px; height: 20px; }

.icon-btn--sm { width: 36px; height: 36px; border-radius: var(--radius-xs); }
.icon-btn--sm .icon { width: 17px; height: 17px; }

.icon-btn--onDark { color: var(--header-muted); }
.icon-btn--onDark:hover { background: var(--header-field); color: var(--header-fg); }

/* ==========================================================================
   03 · BADGE
   Nunca comunica só por cor — sempre tem texto ou ícone junto.
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding-inline: var(--space-2);
  border-radius: var(--badge-radius);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  white-space: nowrap;
  flex: none;
}

.badge .icon { width: 12px; height: 12px; }

.badge--discount { background: var(--brand-fill); color: var(--on-brand); box-shadow: inset 0 0 0 1px rgba(138, 101, 8, 0.25); }
.badge--gold     { background: var(--brand-soft); color: var(--brand-soft-fg); }
.badge--success  { background: var(--success-soft); color: var(--success-fg); }
.badge--warn     { background: var(--warn-soft); color: var(--warn-fg); }
.badge--info     { background: var(--info-soft); color: var(--info-fg); }
.badge--neutral  { background: var(--surface-2); color: var(--text-muted); }
.badge--dark     { background: rgba(10, 11, 15, 0.82); color: #fff; backdrop-filter: blur(6px); }

/* Badge sobreposto à imagem do produto */
.badge--overlay {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  box-shadow: var(--shadow-sm);
}

.badge--overlay-br {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  z-index: 2;
}

/* Contador no ícone do carrinho */
.badge-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 19px;
  height: 19px;
  padding-inline: 5px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  box-shadow: 0 0 0 2px var(--header-bg);
  animation: badge-pop var(--dur-base) var(--ease-spring);
}

@keyframes badge-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   04 · CHIP (filtro / seleção)
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--chip-h);
  padding-inline: var(--space-3);
  border-radius: var(--chip-radius);
  background: var(--surface);
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  flex: none;
  transition: background-color var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-fast) var(--ease-std),
              transform var(--dur-instant) var(--ease-spring);
}

.chip:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.chip:active { transform: scale(0.96); }

.chip .icon { width: 15px; height: 15px; }

/* Selecionado: cor + peso + marca — três sinais, não só cor */
.chip[aria-pressed='true'],
.chip[aria-selected='true'],
.chip--active {
  background: var(--text-strong);
  color: var(--bg);
  box-shadow: inset 0 0 0 1px var(--text-strong);
}

.chip--brand[aria-pressed='true'] {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

/* Trilho horizontal de chips com rolagem por toque */
.chip-rail {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-1) 0;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

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

/* ==========================================================================
   05 · CAMPO DE FORMULÁRIO
   ========================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.field__label .req {
  color: var(--danger);
  margin-left: 2px;
}

.field__control {
  position: relative;
  display: flex;
  align-items: center;
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--field-h);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--field-radius);
  background: var(--field-bg);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--field-border);
  border: none;
  font-size: var(--text-md); /* 16px evita o auto-zoom do iOS */
  font-family: var(--font-body);
  transition: box-shadow var(--dur-fast) var(--ease-std),
              background-color var(--dur-fast) var(--ease-std);
}

.textarea {
  min-height: 96px;
  resize: vertical;
  line-height: var(--leading-normal);
}

.select {
  appearance: none;
  padding-right: var(--space-10);
  cursor: pointer;
}

.field__control:has(.select)::after {
  content: '';
  position: absolute;
  right: var(--space-4);
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-subtle);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-color), 0 0 0 4px var(--focus-ring);
}

/* Erro: anel vermelho + fundo tingido + ícone + texto. Quatro sinais, para
   não depender da cor e para não se confundir com o anel de foco. */
.field[data-invalid='true'] .input,
.field[data-invalid='true'] .textarea,
.field[data-invalid='true'] .select {
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 2px var(--danger);
}

.field[data-invalid='true'] .input:focus,
.field[data-invalid='true'] .textarea:focus,
.field[data-invalid='true'] .select:focus {
  box-shadow: inset 0 0 0 2px var(--danger), 0 0 0 4px var(--danger-ring);
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-snug);
}

.field__error {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--danger);
}

.field__error .icon { width: 14px; height: 14px; flex: none; }

/* ==========================================================================
   06 · BUSCA
   ========================================================================== */
.search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.search__icon {
  position: absolute;
  left: var(--space-4);
  width: 18px;
  height: 18px;
  color: var(--header-muted);
  pointer-events: none;
}

.search__input {
  width: 100%;
  height: var(--field-h);
  padding: 0 var(--space-12) 0 46px;
  border-radius: var(--radius-sm);
  background: var(--header-field);
  color: var(--header-fg);
  box-shadow: inset 0 0 0 1px var(--header-border);
  border: none;
  font-size: var(--text-md);
  transition: box-shadow var(--dur-fast) var(--ease-std),
              background-color var(--dur-fast) var(--ease-std);
}

.search__input::placeholder { color: var(--header-muted); }

.search__input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 4px rgba(255, 255, 255, 0.18);
}

.search__input::-webkit-search-cancel-button { display: none; }

.search__clear {
  position: absolute;
  right: var(--space-2);
  color: var(--header-muted);
}

.search__clear:hover { background: var(--header-field); color: var(--header-fg); }

/* Atalho de teclado exibido no campo */
.search__kbd {
  position: absolute;
  right: var(--space-3);
  display: flex;
  gap: 3px;
  pointer-events: none;
}

kbd {
  min-width: 22px;
  height: 22px;
  padding-inline: 5px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xs);
  background: var(--header-field);
  box-shadow: inset 0 0 0 1px var(--header-border);
  color: var(--header-muted);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   07 · STEPPER DE QUANTIDADE
   ========================================================================== */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}

.stepper__btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
  transition: background-color var(--dur-fast) var(--ease-std),
              transform var(--dur-instant) var(--ease-spring),
              opacity var(--dur-fast) var(--ease-std);
}

.stepper__btn:hover { background: var(--surface-3); }
.stepper__btn:active { transform: scale(0.88); }
.stepper__btn .icon { width: 16px; height: 16px; }

.stepper__btn[data-variant='remove'] { color: var(--danger); }

.stepper__value {
  min-width: 34px;
  text-align: center;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

.stepper--lg .stepper__btn { width: 42px; height: 42px; }
.stepper--lg .stepper__value { min-width: 48px; font-size: var(--text-lg); }

/* ==========================================================================
   08 · CARD DE PRODUTO (vertical, padrão e-commerce)
   Foto grande, marca acima do nome, bloco de preço com Pix e parcelas,
   amostras de sabor e uma única CTA. Anatomia igual em qualquer grade.
   ========================================================================== */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow), inset 0 0 0 1px var(--card-border);
  overflow: hidden;
  text-align: left;
  height: 100%;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .pcard:hover {
    box-shadow: var(--card-shadow-hover), inset 0 0 0 1px var(--brand-ring);
    transform: translateY(var(--card-lift));
  }
  .pcard:hover .pcard__img { transform: scale(1.05); }
  .pcard:hover .pcard__quick { opacity: 1; transform: none; }
}

.pcard:focus-within {
  box-shadow: var(--card-shadow-hover), inset 0 0 0 1px var(--border-strong);
}

/* --- Mídia --- */
.pcard__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--media-bg);
  overflow: hidden;
  flex: none;
}

.pcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `contain` porque a capa é recorte de produto — arte SVG ou foto com fundo
     removido. Com foto ambientada, troque para `cover` e remova o padding. */
  object-fit: contain;
  padding: 9%;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Selos empilhados no canto superior esquerdo */
.pcard__flags {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Compra rápida — só no hover, nunca no lugar da CTA principal */
.pcard__quick {
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 3;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

@media (hover: none) {
  .pcard__quick { display: none; }
}

/* --- Corpo --- */
.pcard__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-3) var(--space-3) var(--space-4);
  flex: 1;
  min-width: 0;
}

.pcard__brand {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.pcard__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--text);
  /* Reserva duas linhas para os preços alinharem entre cards vizinhos */
  min-height: 2.7em;
}

/* Toda a área do card vira alvo do link do título */
.pcard__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pcard__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.pcard__prices {
  margin-top: auto;
  padding-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pcard__cta {
  margin-top: var(--space-3);
  position: relative;
  z-index: 2;
}

/* Esgotado */
.pcard[data-out='true'] .pcard__img { filter: grayscale(1); opacity: 0.5; }
.pcard[data-out='true'] .pcard__prices { opacity: 0.55; }

/* --- Grade de produtos ---------------------------------------------------
   Responde à largura da COLUNA, não da janela: com a barra de filtros
   aberta a grade precisa recalcular sozinha. */
.pgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@container shop (min-width: 560px) {
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container shop (min-width: 860px) {
  .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
}

@container shop (min-width: 1180px) {
  .pgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Prateleira da home para em 4 colunas: foto maior, menos itens por linha */
.pgrid--shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@container shop (min-width: 560px) {
  .pgrid--shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container shop (min-width: 860px) {
  .pgrid--shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@supports not (container-type: inline-size) {
  @media (min-width: 900px)  { .pgrid, .pgrid--shelf { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1280px) { .pgrid, .pgrid--shelf { grid-template-columns: repeat(4, 1fr); } }
}

/* ==========================================================================
   08b · BLOCO DE PREÇO
   Quatro linhas com uma hierarquia só: o preço à vista é o número grande,
   porque é o que fecha a venda.
   ========================================================================== */
.price-block { display: flex; flex-direction: column; gap: 2px; }

.price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.price-now {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-snug);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

.price-was {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-subtle);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.price-off {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--success);
}

.price-pix {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--success);
  font-variant-numeric: tabular-nums;
}

.price-pix .icon { width: 13px; height: 13px; flex: none; }

.price-parcel {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Na ficha do produto o bloco cresce */
.price-block--lg .price-now { font-size: var(--text-3xl); }
.price-block--lg .price-was { font-size: var(--text-md); }
.price-block--lg .price-pix { font-size: var(--text-md); }
.price-block--lg .price-pix .icon { width: 17px; height: 17px; }
.price-block--lg .price-parcel { font-size: var(--text-base); }

/* ==========================================================================
   08c · AVALIAÇÃO
   ========================================================================== */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.rating__stars {
  display: inline-flex;
  gap: 1px;
  color: var(--p-gold-600);
}

.rating__stars .icon { width: 13px; height: 13px; }
.rating__stars .icon[data-off='true'] { color: var(--border-strong); }
.rating__value { font-weight: var(--weight-bold); color: var(--text); }

/* ==========================================================================
   08d · AMOSTRA DE SABOR
   Bolinha com a cor do sabor. A cor nunca vem sozinha: tem title no card,
   rótulo no seletor e nome completo na ficha.
   ========================================================================== */
.swatch-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.fswatch {
  width: 15px;
  height: 15px;
  border-radius: var(--radius-full);
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18),
              0 0 0 1.5px var(--surface);
}

.swatch-more {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--text-muted);
  margin-left: 2px;
}

/* Seletor de sabor da ficha: bolinha + nome, alvo de 44px */
.fopt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: box-shadow var(--dur-fast) var(--ease-std),
              background-color var(--dur-fast) var(--ease-std);
}

.fopt:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }

.fopt[aria-checked='true'] {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 2px var(--brand);
  font-weight: var(--weight-semibold);
}

.fopt[data-out='true'] {
  opacity: 0.45;
  pointer-events: none;
  text-decoration: line-through;
}

.fopt .fswatch { width: 18px; height: 18px; }

.fopt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-2);
}

/* ==========================================================================
   09 · TRILHO DE CATEGORIA (sidebar desktop)
   ========================================================================== */
.rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-align: left;
  width: 100%;
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std);
}

.rail__item:hover { background: var(--surface-2); color: var(--text); }

/* Ativo: barra + cor + peso */
.rail__item[aria-current='true'] {
  background: var(--brand-soft);
  color: var(--brand-soft-fg);
}

.rail__item[aria-current='true']::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 3px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--brand);
}

.rail__icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: none;
  color: currentColor;
}

.rail__icon .icon { width: 18px; height: 18px; }

.rail__count {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.rail__item[aria-current='true'] .rail__count { color: currentColor; }

/* ==========================================================================
   10 · CABEÇALHO DE SEÇÃO
   ========================================================================== */
.section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}

.section-head__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand-soft-fg);
  flex: none;
}

.section-head__icon .icon { width: 19px; height: 19px; }

.section-head__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.section-head__sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.section-head__line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ==========================================================================
   11 · ITEM DO CARRINHO
   ========================================================================== */
.cart-line {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  animation: line-in var(--dur-base) var(--ease-out);
}

@keyframes line-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cart-line[data-removing='true'] {
  animation: line-out var(--dur-fast) var(--ease-in) forwards;
}

@keyframes line-out {
  to { opacity: 0; transform: translateX(24px); }
}

.cart-line__media {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xs);
  background: var(--media-bg);
  overflow: hidden;
  flex: none;
}

.cart-line__media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

.cart-line__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.cart-line__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: var(--leading-snug);
}

.cart-line__variant {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.cart-line__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.cart-line__price {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-extra);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* Linha de totais */
.total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-base);
  color: var(--text-muted);
}

.total-row__value { font-variant-numeric: tabular-nums; color: var(--text); font-weight: var(--weight-semibold); }

.total-row--discount { color: var(--success); }
.total-row--discount .total-row__value { color: var(--success); }

.total-row--grand {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-extra);
  color: var(--text-strong);
}

.total-row--grand .total-row__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extra);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
}

/* ==========================================================================
   12 · DRAWER / SHEET
   Desktop: desliza da direita. Mobile: sobe do rodapé com alça de arrasto.
   ========================================================================== */
.drawer {
  position: fixed;
  z-index: var(--z-drawer);
  background: var(--bg);
  box-shadow: var(--drawer-shadow);
  display: flex;
  flex-direction: column;
  /* Não animamos width/height — só transform */
  transition: transform var(--dur-slow) var(--ease-out);
}

.drawer[data-side='right'] {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  transform: translateX(100%);
  border-left: 1px solid var(--border);
}

.drawer[data-side='left'] {
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 86vw);
  transform: translateX(-100%);
  border-right: 1px solid var(--border);
}

.drawer[data-side='bottom'] {
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92dvh;
  transform: translateY(100%);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
}

.drawer[data-open='true'] { transform: none; }
/* Fechado, a sombra larga vazava pela borda da tela como uma faixa cinza */
.drawer:not([data-open='true']) { box-shadow: none; }

.drawer__handle {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  margin: var(--space-3) auto var(--space-1);
  flex: none;
}

.drawer__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  flex: none;
}

.drawer__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain; /* não "vaza" o scroll para a página */
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.drawer__foot {
  flex: none;
  padding: var(--space-4);
  /* Respeita a barra de gestos do iOS */
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ==========================================================================
   13 · SCRIM
   ========================================================================== */
.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--scrim);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-std);
}

.scrim[data-open='true'] { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   14 · MODAL / FICHA DE PRODUTO
   Nasce do card: escala + fade, mantendo continuidade espacial.
   ========================================================================== */
.modal {
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  pointer-events: none;
}

.modal__panel {
  width: min(520px, 100%);
  max-height: min(88dvh, 820px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.94) translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.modal[data-open='true'] { pointer-events: auto; }
.modal[data-open='true'] .modal__panel { opacity: 1; transform: none; }

/* No mobile vira bottom sheet: sobe do rodapé */
@media (max-width: 719px) {
  .modal { place-items: end center; padding: 0; }

  .modal__panel {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    transform: translateY(100%);
  }

  .modal[data-open='true'] .modal__panel { transform: none; }

  /* Mídia menor no celular: cada pixel a menos aqui é uma linha de sabor
     a mais visível sem rolar. */
  .modal__media { max-height: 23dvh; }
}

/* A mídia nunca pode empurrar o seletor de variação para fora da tela:
   a escolha do sabor é o passo que fecha a venda. Teto de 30dvh. */
.modal__media {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: 30dvh;
  background: var(--media-bg);
  flex: none;
}

/* Absoluto para o tamanho intrínseco do SVG não vencer o aspect-ratio */
.modal__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-4);
}

.modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  color: var(--text);
  z-index: 2;
}

.modal__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.modal__foot {
  flex: none;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ==========================================================================
   15 · TOAST
   ========================================================================== */
.toast-region {
  position: fixed;
  z-index: var(--z-toast);
  left: 50%;
  translate: -50% 0;
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  pointer-events: none;
  width: var(--toast-w);
}

@media (min-width: 720px) {
  .toast-region { left: auto; right: var(--space-5); translate: none; }
}

/* Com o painel do carrinho aberto, o toast não pode cobrir "Finalizar pedido" */
@media (min-width: 1280px) {
  .toast-region { right: calc(var(--cart-w) + var(--space-5)); }
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--toast-radius);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  pointer-events: auto;
  animation: toast-in var(--dur-slow) var(--ease-spring);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.toast[data-closing='true'] {
  animation: toast-out var(--dur-fast) var(--ease-in) forwards;
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(8px) scale(0.96); }
}

.toast__icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  flex: none;
}

.toast--success .toast__icon { background: var(--p-green-500); color: #04240f; }
.toast--error .toast__icon { background: var(--danger); color: #fff; }
.toast--info .toast__icon { background: var(--p-blue-400); color: #06183d; }
.toast__icon .icon { width: 14px; height: 14px; }

.toast__action {
  margin-left: auto;
  color: var(--p-gold-300);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
}

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

/* ==========================================================================
   16 · SKELETON
   ========================================================================== */
.skeleton {
  background: var(--skeleton-base);
  border-radius: var(--radius-xs);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  to { transform: translateX(100%); }
}

.skeleton--text { height: 12px; }
.skeleton--title { height: 16px; width: 65%; }
.skeleton--price { height: 20px; width: 40%; }

/* ==========================================================================
   17 · ESTADO VAZIO
   ========================================================================== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-5);
  text-align: center;
  margin: auto 0;
}

.empty__icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-subtle);
}

.empty__icon .icon { width: 28px; height: 28px; }

.empty__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}

.empty__text {
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: 34ch;
  line-height: var(--leading-normal);
}

/* ==========================================================================
   18 · BARRA DE PROGRESSO (frete grátis)
   ========================================================================== */
.progress {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--p-gold-sheen);
  transition: width var(--dur-slower) var(--ease-out);
}

.progress[data-complete='true'] .progress__bar {
  background: linear-gradient(90deg, var(--p-green-600), var(--p-green-400));
}

.progress-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

.progress-note .icon { width: 15px; height: 15px; flex: none; }
.progress-note strong { color: var(--text-strong); }

/* ==========================================================================
   19 · CONTROLE SEGMENTADO
   ========================================================================== */
.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  width: 100%;
}

.segmented__item {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 38px;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  transition: background-color var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-fast) var(--ease-std);
}

.segmented__item .icon { width: 17px; height: 17px; }

.segmented__item[aria-selected='true'] {
  background: var(--surface);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   20 · CARTÃO DE OPÇÃO (sabor, pagamento)
   ========================================================================== */
.option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-fast) var(--ease-std);
}

.option:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }

.option[aria-checked='true'] {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 2px var(--brand);
}

.option__mark {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 2px var(--border-strong);
  display: grid;
  place-items: center;
  flex: none;
  transition: box-shadow var(--dur-fast) var(--ease-std);
}

.option[aria-checked='true'] .option__mark {
  box-shadow: inset 0 0 0 6px var(--brand);
}

.option__label {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.option__desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.option__meta { margin-left: auto; text-align: right; flex: none; }

.option[data-out='true'] {
  opacity: 0.4;
  pointer-events: none;
  text-decoration: line-through;
}

.option-list {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 480px) {
  .option-list--2col { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   21 · BANNER / FAIXA DE CONFIANÇA
   ========================================================================== */
.hero-banner {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--media-bg);
  aspect-ratio: 21 / 9;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border);
}

.hero-banner img { width: 100%; height: 100%; object-fit: cover; }

/* Em coluna estreita vira trilho horizontal: dois cards lado a lado a 390px
   quebram o texto em três linhas e ficam desalinhados. */
.trust-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(182px, 1fr);
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin-inline: calc(var(--space-4) * -1);
  padding-inline: var(--space-4);
  -webkit-overflow-scrolling: touch;
}

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

@container catalog (min-width: 840px) {
  .trust-strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}

.trust-item__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  flex: none;
}

.trust-item__icon .icon { width: 18px; height: 18px; }

.trust-item__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: 1.25;
}

.trust-item__text {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.3;
}

/* Alerta em linha — status da loja, avisos legais */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.notice .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.notice--warn { background: var(--warn-soft); color: var(--warn-fg); }
.notice--info { background: var(--info-soft); color: var(--info-fg); }
.notice--success { background: var(--success-soft); color: var(--success-fg); }
.notice--danger { background: var(--danger-soft); color: var(--danger); }

/* Indicador de loja aberta/fechada */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex: none;
  position: relative;
}

.status-dot--open { background: var(--p-green-400); }
.status-dot--open::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--p-green-400);
  animation: pulse 2s var(--ease-out) infinite;
}

.status-dot--closed { background: var(--text-subtle); }

@keyframes pulse {
  0%   { opacity: 0.8; transform: scale(0.8); }
  70%  { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Divisor */
.divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: var(--space-2) 0;
}

.divider--labeled {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: auto;
  background: none;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.divider--labeled::before,
.divider--labeled::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}


/* ==========================================================================
   22 · APP BAR
   Barra superior escura — é a assinatura da marca e não inverte com o tema.
   Compartilhada pela loja e pela documentação.
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 1px solid var(--header-border);
  backdrop-filter: blur(12px);
  padding-top: env(safe-area-inset-top);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--header-h);
  padding-inline: var(--space-4);
  max-width: var(--container);
  margin-inline: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

/* Logo oficial em vetor — o contorno preto do adesivo some no header preto
   e sobram as letras em ouro e prata, como no letreiro luminoso da marca. */
.brand__logo {
  height: 50px;
  width: auto;
  aspect-ratio: 743 / 541;
  flex: none;
  filter: drop-shadow(0 4px 14px rgba(239, 186, 46, 0.14));
  transition: transform var(--dur-base) var(--ease-spring);
}

.brand:hover .brand__logo { transform: rotate(-3deg) scale(1.04); }

/* Símbolo compacto (nuvem) — docs e usos onde o logo não cabe */
.brand__mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--p-gray-925);
  box-shadow: inset 0 0 0 1px rgba(244, 210, 122, 0.22);
  display: grid;
  place-items: center;
  flex: none;
}

.brand__mark img { width: 28px; height: 28px; }

.brand__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--header-fg);
  line-height: 1;
}

.brand__meta { display: flex; flex-direction: column; gap: 3px; }

.brand__city {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--p-gold-300);
  line-height: 1;
}

.brand__status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--header-muted);
  margin-top: 3px;
}

.header__search { flex: 1; max-width: 640px; }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex: none;
}

/* Botão do carrinho no header — some no desktop (o painel já está fixo) */
.header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--tap-min);
  padding-inline: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--header-field);
  box-shadow: inset 0 0 0 1px var(--header-border);
  color: var(--header-fg);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  transition: background-color var(--dur-fast) var(--ease-std),
              transform var(--dur-instant) var(--ease-spring);
}

.header__cart:hover { background: rgba(255, 255, 255, 0.12); }
.header__cart:active { transform: scale(0.96); }
.header__cart .icon { width: 18px; height: 18px; }

/* --- App bar no mobile ---------------------------------------------------
   A 390px não cabem marca escrita + busca + duas ações. A busca é a função
   mais usada, então ela fica com a largura; a marca vira só o símbolo e o
   carrinho vira ícone. O status da loja migra para a barra abaixo do header. */
@media (max-width: 719px) {
  .brand__name,
  .brand__status { display: none; }

  .header__inner { gap: var(--space-2); padding-inline: var(--space-3); }

  .header__cart {
    width: var(--tap-min);
    padding-inline: 0;
    justify-content: center;
  }

  .header__cart > span:not(.badge-count) { display: none; }

  .search__input { padding-right: var(--space-4); }
  .search__kbd { display: none; }
}

/* --- Barra de status da loja (abaixo do header, só em telas estreitas) --- */
.store-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  white-space: nowrap;
  overflow-x: auto;
}

.store-bar strong { color: var(--text-strong); }
.store-bar .icon { width: var(--icon-sm); height: var(--icon-sm); }
.store-bar__sep { color: var(--text-subtle); }

@media (min-width: 1024px) {
  .store-bar { display: none; }
}

/* ==========================================================================
   23 · BARRA DE NAVEGAÇÃO + MEGA-MENU
   Segundo nível do header: as seções da loja. No desktop abre um painel
   com subseções e marcas; no mobile vira trilho horizontal rolável.
   ========================================================================== */
.navbar {
  position: relative;
  z-index: var(--z-dropdown);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}

.navbar__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.navitem {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--nav-h);
  padding-inline: var(--space-4);
  color: var(--nav-fg);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  white-space: nowrap;
  flex: none;
  transition: color var(--dur-fast) var(--ease-std),
              background-color var(--dur-fast) var(--ease-std);
}

.navitem:hover,
.navitem[aria-expanded='true'] { color: var(--nav-fg-hover); background: var(--nav-hover); }

/* Indicador da seção atual — sublinhado, não só cor */
.navitem[aria-current='true'] { color: var(--nav-fg-hover); }

.navitem[aria-current='true']::after {
  content: '';
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: 0;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--brand);
}

.navitem .icon { width: 16px; height: 16px; opacity: 0.75; }

.navitem--accent { color: var(--p-gold-400); }
.navitem--accent:hover { color: var(--p-gold-200); }

.navitem__caret {
  width: 13px;
  height: 13px;
  transition: transform var(--dur-fast) var(--ease-std);
}

.navitem[aria-expanded='true'] .navitem__caret { transform: rotate(180deg); }

/* --- Painel do mega-menu --- */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}

.mega[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mega__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-6) var(--space-4);
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .mega__inner { grid-template-columns: 1.1fr 1.1fr 1fr; }
}

.mega__col { display: flex; flex-direction: column; gap: var(--space-2); }

.mega__title {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 2px;
}

.mega__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 34px;
  padding: 4px var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: var(--text-base);
  transition: background-color var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std);
}

.mega__link:hover { background: var(--surface-2); color: var(--brand-text); }
.mega__link .icon { width: 15px; height: 15px; opacity: 0.6; }
.mega__link strong { font-weight: var(--weight-semibold); color: var(--text); }
.mega__link:hover strong { color: var(--brand-text); }

/* Cartão promocional dentro do mega-menu */
.mega__promo {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background:
    radial-gradient(80% 90% at 10% 0%, rgba(239, 186, 46, 0.24), transparent 70%),
    linear-gradient(140deg, var(--p-gray-1000), var(--p-gray-850));
  box-shadow: inset 0 0 0 1px rgba(244, 210, 122, 0.14);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.mega__promo h4 {
  color: #fff;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
}

.mega__promo p {
  font-size: var(--text-sm);
  color: var(--p-gray-400);
  line-height: var(--leading-snug);
}

/* ==========================================================================
   24 · MIGALHAS
   ========================================================================== */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.crumbs a { transition: color var(--dur-fast) var(--ease-std); }
.crumbs a:hover { color: var(--brand-text); text-decoration: underline; }
.crumbs .icon { width: 12px; height: 12px; color: var(--text-subtle); }
.crumbs [aria-current='page'] { color: var(--text); font-weight: var(--weight-semibold); }

/* ==========================================================================
   25 · BARRA DE FERRAMENTAS DA LISTAGEM
   ========================================================================== */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
}

.toolbar__count {
  font-size: var(--text-base);
  color: var(--text-muted);
}

.toolbar__count strong { color: var(--text-strong); font-weight: var(--weight-bold); }

.toolbar__spacer { flex: 1; }

.sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.sort .select {
  min-height: 40px;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  width: auto;
}

/* Filtros aplicados */
.applied {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.applied__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 var(--space-2) 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--brand-soft);
  color: var(--brand-soft-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  transition: background-color var(--dur-fast) var(--ease-std);
}

.applied__tag:hover { background: var(--danger-soft); }
.applied__tag .icon { width: 13px; height: 13px; }

/* ==========================================================================
   26 · PAINEL DE FILTROS
   ========================================================================== */
.filters { display: flex; flex-direction: column; }

.fgroup { border-bottom: 1px solid var(--border); }

.fgroup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  text-align: left;
}

.fgroup__head .icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-std);
}

.fgroup__head[aria-expanded='true'] .icon { transform: rotate(180deg); }

.fgroup__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--space-4);
  max-height: 264px;
  overflow-y: auto;
}

.fgroup__head[aria-expanded='false'] + .fgroup__body { display: none; }

/* Item de filtro — caixa de seleção com contagem */
.fcheck {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 38px;
  padding: 4px var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius-xs);
  font-size: var(--text-base);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: calc(100% + var(--space-4));
  transition: background-color var(--dur-fast) var(--ease-std);
}

.fcheck:hover { background: var(--surface-2); }

.fcheck__box {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  flex: none;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
  background: var(--surface);
  color: transparent;
  transition: background-color var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std);
}

.fcheck__box .icon { width: 13px; height: 13px; }

.fcheck[aria-pressed='true'] .fcheck__box {
  background: var(--brand);
  box-shadow: inset 0 0 0 1.5px var(--brand);
  color: var(--on-brand);
}

.fcheck[aria-pressed='true'] { font-weight: var(--weight-semibold); }

.fcheck__label { flex: 1; min-width: 0; }

.fcheck__count {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.fcheck[data-empty='true'] { opacity: 0.4; pointer-events: none; }

/* Faixa de preço */
.frange {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.frange .input {
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
}

.frange__sep { color: var(--text-subtle); font-size: var(--text-sm); }

/* ==========================================================================
   27 · PAGINAÇÃO
   ========================================================================== */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.pager__btn {
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-muted);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-fast) var(--ease-std);
}

.pager__btn:hover { background: var(--surface-2); color: var(--text); }

.pager__btn[aria-current='true'] {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.pager__btn .icon { width: 15px; height: 15px; }
.pager__gap { color: var(--text-subtle); padding-inline: 2px; }

/* ==========================================================================
   28 · GALERIA DA FICHA DE PRODUTO
   ========================================================================== */
/* min-width:0 é obrigatório: como item de grade, o padrão `auto` impede
   encolher abaixo do conteúdo e a galeria estoura a coluna no celular. */
.gallery {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-3);
  min-width: 0;
}

@media (min-width: 700px) {
  .gallery { flex-direction: row; }
}

.gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}

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

@media (min-width: 700px) {
  .gallery__thumbs { flex-direction: column; overflow: visible; flex: none; }
}

.gthumb {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-sm);
  background: var(--media-bg);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
  flex: none;
  padding: 6px;
  transition: box-shadow var(--dur-fast) var(--ease-std);
}

.gthumb img { width: 100%; height: 100%; object-fit: contain; }
.gthumb:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.gthumb[aria-current='true'] { box-shadow: inset 0 0 0 2px var(--brand); }

.gallery__main {
  position: relative;
  flex: 1;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--media-bg);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}

.gallery__main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
}

/* ==========================================================================
   29 · TABELA DE ESPECIFICAÇÕES
   ========================================================================== */
.specs {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.specs th,
.specs td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.specs tr:nth-child(odd) { background: var(--surface-2); }
.specs tr:last-child th,
.specs tr:last-child td { border-bottom: none; }

.specs th {
  width: 42%;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

.specs td { color: var(--text-strong); font-weight: var(--weight-semibold); }

/* ==========================================================================
   30 · ABAS
   ========================================================================== */
.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

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

.tab {
  position: relative;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  white-space: nowrap;
  flex: none;
  transition: color var(--dur-fast) var(--ease-std);
}

.tab:hover { color: var(--text); }
.tab[aria-selected='true'] { color: var(--text-strong); }

.tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -1px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
}

/* ==========================================================================
   31 · BLOCO DE MARCA
   ========================================================================== */
.brand-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 92px;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.brand-tile:hover {
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--brand-ring);
  transform: translateY(-2px);
}

/* Monograma em medalha preta com aro dourado — uniforme para qualquer marca */
.brand-tile__mark {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  font-family: var(--font-poster);
  font-size: var(--text-lg);
  color: var(--p-gold-300);
  background: radial-gradient(circle at 50% 30%, #2a261f, var(--p-gray-925) 70%);
  box-shadow: inset 0 0 0 1.5px rgba(244, 210, 122, 0.35), 0 6px 14px -8px rgba(0, 0, 0, 0.6);
  transition: transform var(--dur-base) var(--ease-spring);
}

.brand-tile:hover .brand-tile__mark { transform: scale(1.08); }

.brand-tile__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  text-align: center;
  line-height: 1.2;
}

.brand-tile__count { font-size: var(--text-2xs); color: var(--text-subtle); }

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
  gap: var(--space-2);
}

/* ==========================================================================
   32 · CABEÇALHO DE PRATELEIRA
   ========================================================================== */
.shelf-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.shelf-head__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.shelf-head__title .icon { width: 24px; height: 24px; color: var(--brand-text); }
.shelf-head__sub { font-size: var(--text-base); color: var(--text-muted); margin-top: 2px; }

.shelf-head__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--brand-text);
  white-space: nowrap;
  transition: gap var(--dur-fast) var(--ease-out);
}

.shelf-head__link:hover { gap: var(--space-2); }
.shelf-head__link .icon { width: 16px; height: 16px; }

/* ==========================================================================
   33 · RODAPÉ EM COLUNAS
   ========================================================================== */
.site-footer {
  margin-top: var(--space-16);
  background: var(--footer-bg);
  color: var(--footer-fg);
  border-top: 1px solid var(--border);
}

.site-footer__top {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-12) var(--space-4) var(--space-8);
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .site-footer__top { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: 1.4fr repeat(3, 1fr); }
}

.fcol { display: flex; flex-direction: column; gap: var(--space-3); }

.fcol__title {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--footer-title);
}

.fcol a,
.fcol span.fcol__item {
  font-size: var(--text-base);
  color: var(--footer-muted);
  line-height: 1.5;
  transition: color var(--dur-fast) var(--ease-std);
}

.fcol a:hover { color: var(--footer-fg); }

.site-footer__bottom {
  border-top: 1px solid var(--footer-border);
}

.site-footer__bottom-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--footer-muted);
}

.pay-row { display: flex; flex-wrap: wrap; gap: 6px; }

.pay-chip {
  height: 26px;
  padding-inline: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-xs);
  background: var(--footer-chip);
  color: var(--footer-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.pay-chip .icon { width: 13px; height: 13px; }

/* Aviso legal obrigatório para nicotina */
.legal-strip {
  background: var(--warn-soft);
  color: var(--warn-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-align: center;
  padding: var(--space-3) var(--space-4);
}