/* ==========================================================================
   DOHA CLOUD — LAYOUT DA LOJA
   Referências da coleção de e-commerce do Awwwards, escolhidas entre as
   marcas de consumo (não as de luxo):
   - Koffiracha: palavra enorme com o produto por cima, bloco de cor chapado,
     letreiro corrido e navegação flutuante;
   - Simply Chocolate / Bennett Tea: cada produto com a própria cor — o card
     e a ficha tingem com a cor do sabor escolhido;
   - ETQ: barra de compra fixa no pé da ficha;
   - Anti: aviso de "adicionado" com a foto do produto;
   - Seed: carrinho que sugere o que falta ("leve junto").
   A loja continua popular: preço grande, Pix em verde, ícone com palavra.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Base da loja
   -------------------------------------------------------------------------- */
body { background: var(--bg); font-family: var(--font-body); }

#view { display: block; min-height: 60vh; outline: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

[data-icon] { display: inline-flex; flex: none; }
[data-icon] .icon { width: 100%; height: 100%; }

::selection { background: var(--p-gold-300); color: var(--p-gray-900); }

/* Blocos escuros no tema claro: o foco grafite sumia no fundo grafite */
.finder, .band, .helpbox, .site-footer { --focus-color: var(--p-gold-300); }
:root:not([data-theme='dark']) :is(.finder, .band) .pcard { --focus-color: var(--p-gray-900); }

/* --------------------------------------------------------------------------
   1 · Letreiro corrido de avisos
   -------------------------------------------------------------------------- */
.ticker {
  overflow: hidden;
  background: var(--p-gray-900);
  color: var(--p-gold-300);
  font-size: var(--text-sm);
  font-weight: 700;
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 48s linear infinite;
}

.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding-inline: 22px;
  white-space: nowrap;
}

.ticker__item .icon { width: 17px; height: 17px; color: #fff; }
.ticker__item::after { content: '✦'; margin-left: 22px; color: var(--p-gold-500); font-size: 12px; }

@keyframes ticker { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   2 · Cabeçalho: pílula flutuante
   -------------------------------------------------------------------------- */
.hdr {
  position: sticky;
  top: 10px;
  z-index: var(--z-header);
  margin-top: 10px;
  padding-inline: var(--gutter);
  pointer-events: none;
}

.hdr__pill {
  pointer-events: auto;
  max-width: var(--container);
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 10px 8px 22px;
  border-radius: var(--radius-full);
  background: var(--header-bg);
  color: var(--header-fg);
  box-shadow: 0 0 0 1px var(--header-border), 0 10px 30px rgba(20, 20, 20, 0.08);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  transition: box-shadow var(--dur-base) var(--ease-std);
}

.hdr[data-scrolled='true'] .hdr__pill {
  box-shadow: 0 0 0 1px var(--header-border), 0 16px 40px rgba(20, 20, 20, 0.14);
}

.brand { flex: none; }
.brand__logo { height: 48px; width: auto; filter: none; }

.hicon {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--header-fg);
  transition: background-color var(--dur-fast);
}

.hicon:hover { background: var(--header-field); }
.hicon [data-icon] { width: 22px; height: 22px; }

.hdr__menu, .hdr__search-btn { display: none; }

/* Busca: sempre à vista no computador */
.search { position: relative; flex: 1; max-width: 620px; margin-inline: auto; display: flex; align-items: center; }

.search__icon {
  position: absolute;
  left: 18px;
  width: 20px;
  height: 20px;
  color: var(--header-muted);
  pointer-events: none;
  z-index: 1;
}

.search__input {
  width: 100%;
  height: 52px;
  padding: 0 116px 0 50px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--header-field);
  color: var(--text-strong);
  box-shadow: inset 0 0 0 1px var(--header-border);
  font-size: var(--text-base);
  font-weight: 500;
}

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

.search__input:focus {
  outline: none;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--text-strong), 0 0 0 5px var(--focus-ring);
}

.search__clear {
  position: absolute;
  right: 100px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--text-muted);
}

.search__clear:hover { background: var(--surface-3); }
.search__clear [data-icon] { width: 17px; height: 17px; }

.search__go {
  position: absolute;
  right: 6px;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--radius-full);
  background: var(--p-gray-900);
  color: #fff;
  font-weight: 800;
  font-size: var(--text-sm);
  transition: background-color var(--dur-fast);
}

.search__go:hover { background: #000; }
:root[data-theme='dark'] .search__go { background: var(--p-gold-500); color: var(--p-gray-900); }

.search__close { display: none; }

/* Sugestões */
.suggest {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--border);
}

.suggest__group {
  padding: 10px 10px 6px;
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.suggest__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 8px 10px; }

.suggest__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-strong);
}

.suggest__chip:hover, .suggest__chip[data-active='true'] { background: var(--p-gold-300); color: var(--p-gray-900); }
.suggest__chip .icon { width: 16px; height: 16px; }

.suggest__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  min-height: 56px;
}

.suggest__item:hover, .suggest__item[data-active='true'] { background: var(--surface-2); }

.suggest__thumb {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--tone, #999) 18%, var(--surface));
  overflow: hidden;
  color: var(--text-strong);
}

.suggest__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.suggest__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.suggest__name { font-weight: 700; color: var(--text-strong); font-size: var(--text-sm); }
.suggest__sub { font-size: var(--text-xs); color: var(--text-muted); }
.suggest__price { margin-left: auto; font-weight: 800; color: var(--text-strong); white-space: nowrap; text-align: right; }
.suggest__price small { display: block; font-size: 11px; font-weight: 700; color: var(--pix); }

/* Atalhos: ícone e palavra lado a lado */
.hdr__actions { display: flex; align-items: center; gap: 4px; flex: none; }

.hact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  color: var(--header-fg);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: background-color var(--dur-fast);
}

.hact:hover { background: var(--header-field); }
.hact__icon { width: 24px; height: 24px; }
.hact--wa .hact__icon { color: var(--wa-icon); }
.hact__label { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.hact__total { font-size: var(--text-xs); font-weight: 800; }
.hact__total:empty { display: none; }

.hact--cart { gap: 16px; background: var(--p-gold-500); color: var(--p-gray-900); }
.hact--cart:hover { background: var(--p-gold-400); }
.hact--cart .hact__total { color: var(--p-gray-900); opacity: 0.75; }

.hact__icon-wrap, .mbar__icon { position: relative; display: inline-flex; }

.hact__badge {
  position: absolute;
  top: -8px;
  right: -11px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--p-gray-900);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 0 0 2px var(--p-gold-500);
}

.hact__badge[data-bump='true'] { animation: bump var(--dur-slow) var(--ease-spring); }

@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

@media (max-width: 1099px) {
  .hact--wa .hact__label { display: none; }
  .hact--wa { padding: 0 13px; }
}

/* Celular: menu | logo | busca e carrinho; a busca abre por cima */
@media (max-width: 859px) {
  .hdr { top: 8px; margin-top: 8px; }
  .hdr__pill { min-height: 60px; gap: 4px; padding: 6px; }
  .hdr__menu, .hdr__search-btn { display: grid; }
  .brand { margin-inline: auto; min-height: 44px; }
  .brand__logo { height: 40px; }
  .hact--wa { display: none; }
  .hact--cart { padding: 0 14px; min-height: 46px; }
  .hact--cart .hact__label { display: none; }

  .search { display: none; }

  /* Com a busca aberta o cabeçalho sobe acima da camada branca, e o
     desfoque sai da pílula: backdrop-filter prenderia a busca (position:
     fixed) dentro dela em vez da tela inteira */
  body.search-open .hdr { z-index: calc(var(--z-modal) + 1); }
  body.search-open .hdr__pill { -webkit-backdrop-filter: none; backdrop-filter: none; }

  body.search-open .search {
    display: flex;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: calc(var(--z-modal) + 1);
    max-width: none;
    padding: 12px var(--gutter) 14px;
    gap: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
  }

  body.search-open .search__icon { left: calc(var(--gutter) + 16px); top: 28px; }
  body.search-open .search__input { padding-right: 44px; }
  body.search-open .search__go { display: none; }
  body.search-open .search__clear { right: calc(var(--gutter) + 104px); top: 21px; }

  body.search-open .search__close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    height: 52px;
    padding: 0 14px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--text-strong);
  }

  body.search-open .search__close [data-icon] { width: 18px; height: 18px; }

  body.search-open .suggest {
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--border);
    padding: 12px var(--gutter) 90px;
  }

  body.search-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--surface);
  }
}

/* --------------------------------------------------------------------------
   3 · Categorias em pílulas (logo abaixo do cabeçalho)
   -------------------------------------------------------------------------- */
.catbar { margin-top: 12px; }

.catbar__inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 2px var(--gutter) 6px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: center;
}

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

.navitem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 42px;
  padding: 0 18px 0 14px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
  transition: background-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}

.navitem .icon { width: 18px; height: 18px; }
.navitem:hover { box-shadow: inset 0 0 0 1.5px var(--text-strong); transform: translateY(-1px); }
.navitem[aria-current='true'] { background: var(--p-gray-900); color: #fff; box-shadow: none; }
:root[data-theme='dark'] .navitem[aria-current='true'] { background: #fff; color: var(--p-gray-900); }

.navitem--accent { background: var(--p-gold-500); color: var(--p-gray-900); box-shadow: none; }
.navitem--accent:hover { box-shadow: none; background: var(--p-gold-400); }

@media (max-width: 1099px) {
  .catbar__inner { justify-content: flex-start; }
}

/* Celular: alvo de toque de 44px */
@media (max-width: 719px) {
  .navitem { height: 44px; }
}

/* --------------------------------------------------------------------------
   4 · Página, migalhas, cabeçalho de listagem
   -------------------------------------------------------------------------- */
.page { padding-bottom: 8px; }

.crumbbar { margin-top: 18px; }
.crumbs { font-size: var(--text-sm); gap: 6px; color: var(--text-muted); }
.crumbs a { color: var(--text-strong); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.crumbs a:hover { text-decoration-color: currentColor; }

.page__head { padding: 22px 0 6px; }

.page__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--text-strong);
}

.page__title small {
  display: inline-block;
  margin-left: 12px;
  vertical-align: super;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--p-gold-300);
  color: var(--p-gray-900);
}

.page__lede { margin-top: 12px; font-size: var(--text-md); color: var(--text-muted); max-width: 60ch; }

.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

.subnav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}

.subnav a:hover { box-shadow: inset 0 0 0 1.5px var(--text-strong); }
.subnav a[aria-current='true'] { background: var(--p-gray-900); color: #fff; box-shadow: none; }
:root[data-theme='dark'] .subnav a[aria-current='true'] { background: #fff; color: var(--p-gray-900); }
.subnav small { font-size: 11px; font-weight: 800; opacity: 0.65; }

/* --------------------------------------------------------------------------
   5 · Cabeçalho de seção: selo pequeno e título grande
   -------------------------------------------------------------------------- */
.sec { padding: 72px 0 0; }
.sec--tint { background: var(--surface-2); padding-bottom: 72px; margin-top: 72px; }
.sec--tint + .sec { padding-top: 72px; }

.sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.sec__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--p-gold-300);
  color: var(--p-gray-900);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

.sec__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--text-strong);
}

/* Palavra marcada com o amarelo da marca, como caneta marca-texto */
.sec__title em { font-style: normal; background: linear-gradient(transparent 60%, var(--p-gold-300) 60%); padding-inline: 2px; }
:root[data-theme='dark'] .sec__title em { background: linear-gradient(transparent 60%, rgba(239, 186, 46, 0.45) 60%); }

.sec__sub { margin-top: 14px; font-size: var(--text-md); color: var(--text-muted); max-width: 56ch; }

.sec__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--text-strong);
  white-space: nowrap;
}

.sec__link .icon {
  width: 46px;
  height: 46px;
  padding: 12px;
  border-radius: var(--radius-full);
  background: var(--p-gray-900);
  color: #fff;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast);
}

:root[data-theme='dark'] .sec__link .icon { background: #fff; color: var(--p-gray-900); }
.sec__link:hover .icon { transform: translateX(4px) rotate(-8deg); background: var(--p-gold-500); color: var(--p-gray-900); }

@media (max-width: 719px) {
  .sec { padding-top: 52px; }
  .sec--tint { margin-top: 52px; padding-bottom: 52px; }
  .sec--tint + .sec { padding-top: 52px; }
  .sec__head { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 20px; }
  .sec__link .icon { width: 44px; height: 44px; padding: 12px; }
}

/* --------------------------------------------------------------------------
   6 · Home — hero: a palavra enorme e o produto por cima
   -------------------------------------------------------------------------- */
.hero { padding-top: 14px; }

.hero__box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 12px;
  min-height: clamp(540px, 74vh, 700px);
  padding: clamp(28px, 4.5vw, 64px);
  border-radius: var(--radius-2xl);
  background: var(--p-gold-500);
  color: var(--p-gray-900);
  overflow: hidden;
  isolation: isolate;
}

/* A nuvem do logo, gigante, no fundo */
.hero__box::before {
  content: '';
  position: absolute;
  right: -6%;
  bottom: -18%;
  width: 62%;
  aspect-ratio: 137 / 126;
  background: var(--p-gold-300);
  -webkit-mask: url('../img/marca/nuvem.svg') center / contain no-repeat;
  mask: url('../img/marca/nuvem.svg') center / contain no-repeat;
  z-index: -1;
}

.hero__copy { position: relative; z-index: 2; }

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 6px;
  border-radius: var(--radius-full);
  background: var(--p-gray-900);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
}

.hero__tag .icon { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--p-gold-500); color: var(--p-gray-900); }

.hero__title {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(3.75rem, 10vw, 9.5rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.82;
  text-transform: uppercase;
  color: var(--p-gray-900);
}

.hero__title span { display: block; }
/* Letra vazada e letra branca com contorno: um pouco mais de espaço entre
   as letras para os contornos não se cruzarem, e o traço pintado por baixo
   do preenchimento na branca */
.hero__title .is-outline { color: transparent; -webkit-text-stroke: 2.5px var(--p-gray-900); letter-spacing: -0.01em; }
.hero__title .is-white { color: #fff; -webkit-text-stroke: 6px var(--p-gray-900); paint-order: stroke fill; letter-spacing: -0.025em; }

.hero__lede {
  margin-top: 24px;
  max-width: 40ch;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.45;
}

.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }

.hero__media {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 340px;
}

.hero__media img {
  width: min(118%, 560px);
  max-width: none;
  height: auto;
  transform: rotate(-9deg);
  filter: drop-shadow(0 34px 34px rgba(60, 40, 0, 0.35));
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: rotate(-9deg) translateY(0); }
  50% { transform: rotate(-6deg) translateY(-14px); }
}

/* Selos colados no bloco */
.hero__sticker {
  position: absolute;
  z-index: 3;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  font-weight: 800;
  line-height: 1;
}

.hero__sticker--pix {
  top: 7%;
  right: 5%;
  width: clamp(104px, 11vw, 150px);
  aspect-ratio: 1;
  background: var(--p-gray-900);
  color: var(--p-gold-300);
  transform: rotate(12deg);
  font-size: clamp(0.8rem, 1vw, 1rem);
}

.hero__sticker--pix strong { display: block; font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3.25rem); letter-spacing: -0.04em; color: #fff; }

.hero__sticker--price {
  left: 0;
  bottom: 6%;
  width: clamp(116px, 11vw, 156px);
  aspect-ratio: 1;
  background: #fff;
  color: var(--p-gray-900);
  transform: rotate(-10deg);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 30px rgba(60, 40, 0, 0.18);
}

.hero__sticker--price strong { display: block; margin-top: 4px; font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -0.03em; text-transform: none; }
.hero__sticker--price small { display: block; margin-top: 4px; font-size: 10px; color: var(--p-green-700); }

@media (max-width: 899px) {
  .hero__box { grid-template-columns: 1fr; min-height: 0; padding: 26px 22px 0; }
  .hero__box::before { width: 120%; right: -30%; bottom: -8%; }
  .hero__title { font-size: clamp(3.5rem, 17vw, 6rem); }
  .hero__media { min-height: 0; margin-top: 8px; padding-bottom: 24px; }
  .hero__media img { width: min(88%, 420px); }
  .hero__sticker--pix { top: 14px; right: 12px; width: 84px; font-size: 0.6875rem; }
  .hero__sticker--pix strong { font-size: 1.625rem; }
  .hero__sticker--price { bottom: 8%; left: 0; }
}

/* Celular estreito: o selo de 10% encostava na pílula do motoboy */
@media (max-width: 479px) {
  .hero__tag { font-size: var(--text-xs); gap: 6px; padding-right: 12px; }
  .hero__tag .icon { width: 24px; height: 24px; padding: 4px; }
  .hero__sticker--pix { top: 10px; right: 8px; width: 76px; }
  .hero__sticker--pix strong { font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   7 · Letreiro de marcas
   -------------------------------------------------------------------------- */
.bmarq {
  margin-top: 56px;
  overflow: hidden;
  border-block: 1.5px solid var(--text-strong);
  background: var(--surface);
}

.bmarq__track { display: flex; width: max-content; animation: ticker 36s linear infinite; }
.bmarq:hover .bmarq__track { animation-play-state: paused; }

.bmarq__item {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 18px 28px 18px 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-strong);
  white-space: nowrap;
  transition: color var(--dur-fast);
}

.bmarq__item:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--text-strong); letter-spacing: -0.005em; }
.bmarq__item:hover { color: var(--p-gold-500); -webkit-text-stroke: 1.5px var(--text-strong); }

.bmarq__item::after {
  content: '';
  width: 0.62em;
  height: 0.57em;
  background: var(--p-gold-500);
  -webkit-mask: url('../img/marca/nuvem.svg') center / contain no-repeat;
  mask: url('../img/marca/nuvem.svg') center / contain no-repeat;
}

@media (max-width: 719px) { .bmarq { margin-top: 40px; } }

/* --------------------------------------------------------------------------
   8 · Home — "Encontre seu pod" (compra guiada)
   -------------------------------------------------------------------------- */
.finder {
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--radius-2xl);
  background: var(--p-gray-900);
  color: #fff;
}

.finder .sec__title { color: #fff; }
/* No fundo preto o marca-texto vira a própria cor da palavra */
.finder .sec__title em, .band .sec__title em { background: none; color: var(--p-gold-300); padding: 0; }
.finder .sec__sub { color: #cfcfca; }

.finder__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.fq {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: opacity var(--dur-base);
}

.fq[data-off='true'] { opacity: 0.35; pointer-events: none; }

.fq__label { display: flex; align-items: center; gap: 10px; font-size: var(--text-md); font-weight: 800; }

.fq__n {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--p-gold-500);
  color: var(--p-gray-900);
  font-size: var(--text-sm);
}

.fchips { display: flex; flex-wrap: wrap; gap: 8px; }

.fchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}

.fchip:hover { background: rgba(255, 255, 255, 0.16); }
.fchip:active { transform: scale(0.97); }
.fchip[aria-pressed='true'] { background: var(--p-gold-500); color: var(--p-gray-900); }
.fchip .icon { width: 17px; height: 17px; }
.fchip .fswatch { width: 16px; height: 16px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }

.finder__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 18px;
}

.finder__count { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; }
.finder__count em { font-style: normal; color: var(--p-gold-300); }
.finder__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.finder__empty { padding: 28px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.06); color: #cfcfca; }

.finder .rail__arrow { background: #fff; color: var(--p-gray-900); }
.finder .pcard { box-shadow: none; }

@media (max-width: 959px) {
  .finder__grid { grid-template-columns: 1fr; }
}

@media (max-width: 719px) {
  .finder { border-radius: var(--radius-xl); padding: 22px 16px; }
  .finder .rail__track { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
}

/* --------------------------------------------------------------------------
   9 · Home — categorias em mosaico (cada uma com a sua cor)
   -------------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 230px;
  gap: 14px;
}

.btile {
  --tile: var(--p-gold-300);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  border-radius: var(--radius-xl);
  background: var(--tile);
  color: var(--p-gray-900);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-base) var(--ease-out);
}

.btile:hover { transform: translateY(-4px); }
.btile:first-child { grid-column: span 2; grid-row: span 2; }

.btile__name {
  position: relative;
  z-index: 1;
  max-width: 62%;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2.125rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.btile:first-child .btile__name { font-size: clamp(2.5rem, 5vw, 4.5rem); max-width: 70%; }

.btile__count { display: block; margin-top: 8px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0; opacity: 0.75; }

.btile__go {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--p-gray-900);
  color: #fff;
  transition: transform var(--dur-base) var(--ease-out);
}

.btile__go .icon { width: 22px; height: 22px; }
.btile:hover .btile__go { transform: rotate(-35deg); }

.btile__img {
  position: absolute;
  right: -4%;
  bottom: -6%;
  width: 60%;
  height: 90%;
  object-fit: contain;
  object-position: bottom right;
  z-index: 0;
  transform: rotate(-8deg);
  filter: drop-shadow(0 16px 18px rgba(20, 20, 20, 0.18));
  transition: transform var(--dur-slower) var(--ease-out);
}

.btile:first-child .btile__img { width: 76%; height: 84%; right: -6%; bottom: -4%; }
.btile:hover .btile__img { transform: rotate(-3deg) scale(1.06); }

:root[data-theme='dark'] .btile { background: color-mix(in srgb, var(--tile) 22%, var(--surface)); color: var(--text-strong); }

@media (max-width: 959px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; gap: 10px; }
  .btile:first-child { grid-column: span 2; grid-row: span 1; }
  .btile { padding: 16px; border-radius: var(--radius-lg); }
  .btile__name { font-size: 1.375rem; max-width: 72%; }
  .btile:first-child .btile__name { font-size: 2.25rem; }
  .btile__go { width: 40px; height: 40px; }
  .btile__img { width: 58%; height: 70%; }
  .btile:first-child .btile__img { width: 52%; height: 96%; }
}

/* --------------------------------------------------------------------------
   10 · Trilho de produtos
   -------------------------------------------------------------------------- */
.rail { position: relative; }

.rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 16px * 4) / 5);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px 12px;
  margin: -4px -2px 0;
  overscroll-behavior-x: contain;
}

.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }

@media (max-width: 1179px) { .rail__track { grid-auto-columns: calc((100% - 16px * 3) / 4); } }
@media (max-width: 959px)  { .rail__track { grid-auto-columns: calc((100% - 14px * 2) / 3); gap: 14px; } }
@media (max-width: 719px)  {
  .rail__track {
    grid-auto-columns: 46%;
    gap: 10px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}

.rail__arrow {
  position: absolute;
  top: 32%;
  z-index: 2;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--p-gray-900);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: opacity var(--dur-base), transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}

.rail__arrow:hover { background: var(--p-gold-500); color: var(--p-gray-900); transform: scale(1.08); }
.rail__arrow .icon { width: 22px; height: 22px; }
.rail__arrow--prev { left: -24px; }
.rail__arrow--next { right: -24px; }
.rail__arrow[disabled] { opacity: 0; pointer-events: none; }

@media (max-width: 1399px) {
  .rail__arrow--prev { left: -10px; }
  .rail__arrow--next { right: -10px; }
}

@media (max-width: 719px) { .rail__arrow { display: none; } }

.pgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@container shop (max-width: 1100px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container shop (max-width: 720px)  { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* --------------------------------------------------------------------------
   11 · Card de produto — tingido com a cor do sabor
   -------------------------------------------------------------------------- */
.pcard {
  --tone: #cfcfca;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .pcard:hover { box-shadow: 0 18px 40px rgba(20, 20, 20, 0.1), inset 0 0 0 1px var(--border-strong); transform: translateY(-4px); }
  .pcard:hover .pcard__img { transform: rotate(-5deg) scale(1.07); }
}

.pcard__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin: 6px 6px 0;
  border-radius: calc(var(--radius-lg) - 4px);
  background: color-mix(in srgb, var(--tone) 24%, var(--surface));
  overflow: hidden;
}

.pcard__media::before {
  content: '';
  position: absolute;
  width: 84%;
  aspect-ratio: 137 / 126;
  background: color-mix(in srgb, var(--tone) 8%, var(--surface));
  -webkit-mask: url('../img/marca/nuvem.svg') center / contain no-repeat;
  mask: url('../img/marca/nuvem.svg') center / contain no-repeat;
}

.pcard__img {
  position: relative;
  width: 82%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(20, 20, 20, 0.16));
  transition: transform var(--dur-slower) var(--ease-out);
}

.pcard__brand {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-strong);
  opacity: 0.7;
}

.pcard__flags {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.pflag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--p-gray-900);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pflag--sale { background: var(--p-gray-900); color: var(--p-gold-300); transform: rotate(-4deg); }
.pflag--new { background: #fff; color: var(--p-gray-900); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.pflag--out { background: var(--surface-3); color: var(--text-muted); }

:root[data-theme='dark'] .pflag--sale { background: var(--p-gold-500); color: var(--p-gray-900); }
:root[data-theme='dark'] .pflag--new { background: var(--surface-3); color: #fff; }

/* Sabores em bolinhas no pé da foto */
.pcard__dots {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
}

.pcard__dots i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.pcard__dots span { margin-left: 3px; }

.pcard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
}

.pcard__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
}

.pcard__title a::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }

.pcard__meta { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }

/* Preço e botão descem para o pé do card: numa fileira, os botões ficam alinhados */
.pcard__prices { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 1px; }
.pcard__old { font-size: var(--text-xs); color: var(--text-subtle); text-decoration: line-through; }
.pcard__old--none { visibility: hidden; }

.pcard__pix {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-strong);
  line-height: 1.1;
}

.pcard__pix span { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0; color: var(--pix); }
.pcard__parcel { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.35; }

.pcard__buy, .pcard__notify {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 800;
  transition: background-color var(--dur-fast), transform var(--dur-instant), color var(--dur-fast);
}

.pcard__buy { background: var(--p-gray-900); color: #fff; }
.pcard__buy .icon, .pcard__notify .icon { width: 18px; height: 18px; }
.pcard__buy:hover { background: var(--p-gold-500); color: var(--p-gray-900); }
.pcard__buy:active { transform: scale(0.97); }
.pcard__buy[data-in-cart='true'] { background: var(--success-soft); color: var(--success); box-shadow: inset 0 0 0 1.5px var(--success); }
:root[data-theme='dark'] .pcard__buy { background: #fff; color: var(--p-gray-900); }
:root[data-theme='dark'] .pcard__buy[data-in-cart='true'] { background: var(--success-soft); color: var(--p-green-400); }

.pcard__notify { box-shadow: inset 0 0 0 1.5px var(--border-strong); color: var(--text-strong); }
.pcard__notify:hover { box-shadow: inset 0 0 0 1.5px var(--text-strong); }
.pcard__notify .icon { color: var(--wa-icon); }

.pcard[data-out='true'] .pcard__img { opacity: 0.45; filter: grayscale(1); }

@media (max-width: 599px) {
  .pcard__body { padding: 10px 10px 12px; }
  .pcard__title { font-size: var(--text-sm); }
  .pcard__pix { font-size: 1.25rem; }
  .pcard__buy, .pcard__notify { height: 44px; font-size: var(--text-xs); gap: 6px; }
  .pcard__media { margin: 5px 5px 0; }
  .pcard__dots { left: 8px; bottom: 8px; }
  .pcard__dots i { width: 11px; height: 11px; }
}

/* --------------------------------------------------------------------------
   12 · Home — mosaico de promoções (Losgal + artes da marca)
   -------------------------------------------------------------------------- */
.promos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 14px;
}

.promos__side { display: grid; gap: 14px; align-content: start; }

.ptile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--p-gray-900);
  transition: transform var(--dur-base) var(--ease-out);
}

.ptile:hover { transform: translateY(-4px); }
.ptile--banner { aspect-ratio: 1800 / 745; }
.ptile--banner img { width: 100%; height: 100%; object-fit: cover; }

.ptile--promo {
  --tone: #a3e635;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 3vw, 36px);
  color: #fff;
  isolation: isolate;
}

.ptile--promo::before {
  content: '';
  position: absolute;
  right: -18%;
  bottom: -22%;
  width: 90%;
  aspect-ratio: 137 / 126;
  background: color-mix(in srgb, var(--tone) 22%, var(--p-gray-900));
  -webkit-mask: url('../img/marca/nuvem.svg') center / contain no-repeat;
  mask: url('../img/marca/nuvem.svg') center / contain no-repeat;
  z-index: -1;
}

.ptile__kicker {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--p-gold-300);
  color: var(--p-gray-900);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ptile__title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.88;
  text-transform: uppercase;
}

.ptile__title em { display: block; font-style: normal; color: var(--tone); }

.ptile__img {
  position: absolute;
  right: 3%;
  bottom: 8%;
  width: 50%;
  height: 58%;
  object-fit: contain;
  z-index: -1;
  transform: rotate(-8deg);
  filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.45));
  transition: transform var(--dur-slower) var(--ease-out);
}

.ptile--promo:hover .ptile__img { transform: rotate(-3deg) scale(1.05); }

.ptile__foot { display: flex; flex-direction: column; gap: 4px; max-width: 50%; }
.ptile__old { font-size: var(--text-sm); color: #b5b5b0; text-decoration: line-through; }
.ptile__price { font-family: var(--font-display); font-size: clamp(2.25rem, 3.6vw, 3.25rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.ptile__pix { font-size: var(--text-sm); font-weight: 700; color: var(--p-green-400); }

.ptile__cta {
  margin-top: 14px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-full);
  background: var(--p-gold-500);
  color: var(--p-gray-900);
  font-size: var(--text-sm);
  font-weight: 800;
  white-space: nowrap;
}

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

@media (max-width: 859px) {
  .promos { grid-template-columns: 1fr; gap: 10px; }
  .promos__side { gap: 10px; }
  .ptile--promo { min-height: 440px; }
  .ptile { border-radius: var(--radius-lg); }
}

/* --------------------------------------------------------------------------
   13 · Home — faixa escura de ofertas
   -------------------------------------------------------------------------- */
.band {
  margin-top: 72px;
  padding: 64px 0 68px;
  background: var(--p-gray-900);
  color: #fff;
}

.band .sec { padding: 0; }
.band .sec__title { color: #fff; }
.band .sec__sub { color: #cfcfca; }
.band .sec__link { color: #fff; }
.band .sec__link .icon { background: #fff; color: var(--p-gray-900); }
.band .rail__arrow { background: #fff; color: var(--p-gray-900); }
.band .pcard { box-shadow: none; }

@media (max-width: 719px) { .band { margin-top: 52px; padding: 48px 0 52px; } }

/* --------------------------------------------------------------------------
   14 · Home — marcas em destaque (artes Elf Bar e Ignite)
   -------------------------------------------------------------------------- */
.bbanners { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.bbanner {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-xl);
  aspect-ratio: 16 / 10;
  background: var(--p-gold-300);
}

.bbanner img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slower) var(--ease-out); }
.bbanner:hover img { transform: scale(1.05); }

.bbanner__cta {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--radius-full);
  background: var(--p-gray-900);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 800;
}

.bbanner__cta .icon { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.bbanner:hover .bbanner__cta .icon { transform: translateX(3px); }

/* O botão por cima da arte cobria o nome da marca: no alto à esquerda,
   que é o canto vazio das artes; no estreito vira só a seta, no canto de baixo */
@media (min-width: 1100px) {
  .bbanner__cta { top: 18px; bottom: auto; }
}

@media (max-width: 1099px) {
  .bbanner__cta { left: auto; right: 12px; bottom: 12px; width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
}

@media (max-width: 719px) {
  .bbanners { grid-template-columns: 1fr; gap: 10px; }
  .bbanner { border-radius: var(--radius-lg); }
}

/* --------------------------------------------------------------------------
   15 · Home — como comprar
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}

.step__n {
  font-family: var(--font-display);
  font-size: 5.5rem;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--p-gold-500);
  -webkit-text-stroke: 2px var(--p-gray-900);
}

:root[data-theme='dark'] .step__n { -webkit-text-stroke: 0; }

.step__icon {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-strong);
}

.step__icon .icon { width: 26px; height: 26px; }
.step__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-strong); }
.step__text { margin-top: 8px; font-size: var(--text-base); color: var(--text-muted); line-height: 1.55; }

.helpbox {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 20px 20px 24px;
  border-radius: var(--radius-xl);
  background: var(--p-gray-900);
  color: #fff;
}

.helpbox__text { display: flex; align-items: center; gap: 14px; font-size: var(--text-md); line-height: 1.4; }
.helpbox__text strong { color: var(--p-gold-300); }
.helpbox__icon { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.helpbox__icon .icon { width: 24px; height: 24px; color: var(--p-gold-300); }

@media (max-width: 859px) {
  .steps { grid-template-columns: 1fr; gap: 10px; }
  .step { padding: 20px; gap: 12px; }
  .step__n { font-size: 4rem; }
  .helpbox { flex-direction: column; align-items: stretch; padding: 18px; }
  .helpbox .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   16 · Home — sabores, marcas e perguntas
   -------------------------------------------------------------------------- */
.flavors { display: flex; flex-wrap: wrap; gap: 10px; }

.flavor {
  --tone: #ccc;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px 0 8px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--tone) 18%, var(--surface));
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-strong);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}

.flavor:hover { transform: translateY(-2px) rotate(-1.5deg); background: color-mix(in srgb, var(--tone) 34%, var(--surface)); }
.flavor .fswatch { width: 36px; height: 36px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.flavor small { font-size: var(--text-xs); font-weight: 800; color: var(--text-muted); }

.brands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }

.brandcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast);
}

.brandcard:hover { transform: translateY(-3px); background: var(--p-gold-300); }
.brandcard img { width: 80px; height: 80px; object-fit: contain; }
.brandcard strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong); }
.brandcard span { font-size: var(--text-xs); color: var(--text-muted); font-weight: 700; }
.brandcard:hover span, .brandcard:hover strong { color: var(--p-gray-900); }

@media (max-width: 1023px) { .brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .brands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .brandcard img { width: 56px; height: 56px; } .brandcard strong { font-size: var(--text-sm); } }

.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.faq .sec__head { position: sticky; top: calc(var(--header-h) + 36px); flex-direction: column; align-items: flex-start; }

.faq__list details { border-bottom: 1.5px solid var(--text-strong); }
.faq__list details:first-child { border-top: 1.5px solid var(--text-strong); }

.faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.faq__list summary::-webkit-details-marker { display: none; }

.faq__list summary::after {
  content: '+';
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 500;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast);
}

.faq__list details[open] summary::after { transform: rotate(45deg); background: var(--p-gold-500); color: var(--p-gray-900); }
.faq__list p { padding: 0 56px 22px 0; font-size: var(--text-md); line-height: 1.6; color: var(--text-muted); }
.faq__list p strong { color: var(--text-strong); }

@media (max-width: 859px) {
  .faq { grid-template-columns: 1fr; gap: 8px; }
  .faq .sec__head { position: static; }
  .faq__list p { padding-right: 0; }
}

/* --------------------------------------------------------------------------
   17 · Grupo VIP (antes do rodapé)
   -------------------------------------------------------------------------- */
.vip { padding: 72px 0 0; }

.vip__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 32px 36px;
  border-radius: var(--radius-2xl);
  background: var(--p-gold-500);
  color: var(--p-gray-900);
}

.vip__icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--p-gray-900);
  color: var(--p-wa-500);
  transform: rotate(-8deg);
}

.vip__icon .icon { width: 36px; height: 36px; }
.vip__title { font-family: var(--font-display); font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: var(--p-gray-900); }
.vip__text { margin-top: 8px; font-size: var(--text-md); font-weight: 600; }

.vip .btn--dark { --_bg: var(--p-gray-900); --_fg: #fff; }
.vip .btn--dark:hover { --_bg: #000; }

@media (max-width: 719px) {
  .vip { padding-top: 52px; }
  .vip__inner { grid-template-columns: auto 1fr; gap: 14px; padding: 22px; border-radius: var(--radius-xl); }
  .vip__icon { width: 54px; height: 54px; }
  .vip__icon .icon { width: 28px; height: 28px; }
  .vip__inner .btn { grid-column: 1 / -1; width: 100%; }
}

/* --------------------------------------------------------------------------
   18 · Listagem (PLP)
   -------------------------------------------------------------------------- */
.plp {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 26px;
}

@media (min-width: 960px) {
  .plp { grid-template-columns: var(--filters-w) minmax(0, 1fr); }
}

.plp__aside {
  display: none;
  position: sticky;
  top: calc(var(--header-h) + 30px);
  max-height: calc(100dvh - var(--header-h) - 50px);
  overflow-y: auto;
  padding: 6px 18px 18px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

@media (min-width: 960px) { .plp__aside { display: block; } }

.plp__results { min-width: 0; container-type: inline-size; container-name: shop; }

.aside__head { padding: 14px 0 10px; border-bottom: 1px solid var(--border); }
.aside__title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; }
.aside__title .icon { width: 20px; height: 20px; }

.toolbar { gap: 12px; padding-bottom: 14px; margin-bottom: 16px; }
.toolbar__count { font-size: var(--text-sm); }

.filter-trigger { display: inline-flex; }
@media (min-width: 960px) { .filter-trigger { display: none; } }

.sort label { font-weight: 700; color: var(--text-muted); }
.sort .select { border-radius: var(--radius-full); min-height: 46px; font-size: var(--text-sm); font-weight: 700; padding-inline: 18px 38px; }

.hbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-muted);
}

.hbtn:hover { background: var(--surface); color: var(--text-strong); }

.fgroup__head { font-size: var(--text-base); font-weight: 800; }
.fcheck { font-size: var(--text-sm); min-height: 40px; }
.fcheck[aria-pressed='true'] .fcheck__box { background: var(--p-gray-900); color: #fff; box-shadow: none; }
:root[data-theme='dark'] .fcheck[aria-pressed='true'] .fcheck__box { background: var(--p-gold-500); color: var(--p-gray-900); }

.applied__tag { border-radius: var(--radius-full); }

.empty { padding: 64px 16px; }
.empty__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; }

.pager__btn { border-radius: var(--radius-full); }
.pager__btn[aria-current='true'] { background: var(--p-gray-900); color: #fff; }

/* --------------------------------------------------------------------------
   19 · Ficha de produto — a página muda de cor com o sabor
   -------------------------------------------------------------------------- */
.pdp {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 20px;
}

.pdp > * { min-width: 0; }

@media (min-width: 960px) {
  .pdp { grid-template-columns: minmax(0, 1.1fr) minmax(400px, 0.9fr); gap: 48px; }
}

.pstage {
  --tone: #cfcfca;
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius-2xl);
  background: color-mix(in srgb, var(--tone) 30%, var(--surface));
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--dur-slower) var(--ease-out);
}

@media (min-width: 960px) {
  .pstage { position: sticky; top: calc(var(--header-h) + 30px); }
}

/* O nome do sabor gigante atrás do produto */
.pstage__word {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 16% 6% 0;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 8.5vw, 8rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tone) 55%, var(--surface));
  overflow: hidden;
  overflow-wrap: anywhere;
  transition: color var(--dur-slower) var(--ease-out);
}

.pstage img {
  position: relative;
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 30px 30px rgba(20, 20, 20, 0.22));
  animation: float 7s ease-in-out infinite;
}

.pstage__flags { position: absolute; top: 18px; left: 18px; z-index: 1; display: flex; gap: 6px; }
.pstage__flags .pflag { height: 32px; padding: 0 14px; font-size: var(--text-sm); }

.pstage__flavor {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--text-strong);
}

.pstage__flavor:empty { display: none; }
.pstage__flavor .fswatch { width: 24px; height: 24px; }

.pdp__buy { display: flex; flex-direction: column; gap: 20px; }

.pdp__brand {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.pdp__brand:hover { background: var(--p-gold-300); color: var(--p-gray-900); }

.pdp__title {
  margin-top: -6px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--text-strong);
}

.pdp__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; }

.pchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text);
}

.pchip .icon { width: 15px; height: 15px; }
.pchip--ok { background: var(--success-soft); color: var(--success); }

.pricebox { padding: 20px 22px; border-radius: var(--radius-lg); background: var(--surface-2); }
.pricebox__old { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--text-subtle); }
.pricebox__old s { text-decoration-thickness: 1.5px; }

.pricebox__pix {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--text-strong);
}

.pricebox__pix span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: var(--text-base); font-weight: 800; letter-spacing: 0; color: var(--pix); }
.pricebox__pix span .icon { width: 18px; height: 18px; }
.pricebox__card { margin-top: 10px; font-size: var(--text-base); color: var(--text-muted); }
.pricebox__card strong { color: var(--text-strong); font-weight: 800; }

.pdp__step { display: flex; flex-direction: column; gap: 12px; }

.pdp__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--text-strong);
}

.pdp__label-n {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--p-gray-900);
  color: var(--p-gold-300);
  font-size: var(--text-xs);
  font-weight: 800;
}

:root[data-theme='dark'] .pdp__label-n { background: var(--p-gold-500); color: var(--p-gray-900); }
.pdp__label strong { font-weight: 600; color: var(--text-muted); }

.fopt-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.fopt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px 0 8px;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--border);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  transition: box-shadow var(--dur-fast), background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}

.fopt:not(:has(.fswatch)) { padding-left: 18px; }
.fopt:hover { box-shadow: inset 0 0 0 1.5px var(--text-strong); }
.fopt:active { transform: scale(0.97); }

.fopt[aria-checked='true'] {
  background: var(--p-gray-900);
  box-shadow: none;
  color: #fff;
}

:root[data-theme='dark'] .fopt[aria-checked='true'] { background: #fff; color: var(--p-gray-900); }

.fopt[data-out='true'] { opacity: 0.4; text-decoration: line-through; pointer-events: none; }
.fopt .fswatch { width: 32px; height: 32px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }

.pdp__actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.pdp__actions .btn { height: 58px; font-size: var(--text-md); }
.pdp__wa { height: 54px; font-size: var(--text-base); }

/* Celular: "Adicionar ao carrinho" passava da borda do botão */
@media (max-width: 479px) {
  .pdp__actions .btn { padding-inline: 12px; font-size: 15px; }
  .pdp__actions .btn .icon { display: none; }
  .pdp__actions .stepper--lg .stepper__btn { width: 44px; height: 44px; }
}

.stepper { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong); border-radius: var(--radius-full); padding: 4px; }
.stepper__btn { border-radius: 50%; box-shadow: none; background: var(--surface-2); font-size: 20px; font-weight: 700; }
.stepper__btn:hover { background: var(--surface-3); }
.stepper--lg .stepper__btn { width: 48px; height: 48px; }
.stepper--lg .stepper__value { min-width: 40px; font-size: var(--text-lg); font-weight: 800; }

/* "Leve junto": acessórios e reposições que combinam */
.upsell { display: flex; flex-direction: column; gap: 8px; }
.upsell__title { font-size: var(--text-base); font-weight: 800; color: var(--text-strong); }

.uline {
  --tone: #cfcfca;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--border);
}

.uline__img { width: 56px; height: 56px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--tone) 22%, var(--surface)); display: grid; place-items: center; }
.uline__img img { width: 88%; height: 88%; object-fit: contain; }
.uline__name { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--text-strong); line-height: 1.3; }
.uline__name:hover { text-decoration: underline; }
.uline__price { font-size: var(--text-xs); color: var(--text-muted); }
.uline__price strong { color: var(--pix); font-weight: 800; }

.uline__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--text-strong);
  white-space: nowrap;
}

.uline__add:hover { background: var(--p-gold-500); color: var(--p-gray-900); }
.uline__add .icon { width: 15px; height: 15px; }

.ship {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}

.ship__title { padding: 16px 18px 4px; font-size: var(--text-base); font-weight: 800; color: var(--text-strong); }

.ship__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
}

.ship__row + .ship__row { border-top: 1px solid var(--border); }

.ship__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--p-gold-300);
  color: var(--p-gray-900);
}

.ship__icon .icon { width: 22px; height: 22px; }
.ship__text { display: flex; flex-direction: column; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.4; }
.ship__text strong { font-size: var(--text-base); font-weight: 800; color: var(--text-strong); }
.ship__text a { color: var(--text-strong); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.trust { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-lg); background: var(--success-soft); color: var(--success-fg); font-size: var(--text-sm); line-height: 1.4; }
.trust .icon { width: 26px; height: 26px; flex: none; color: var(--success); }
.trust strong { font-weight: 800; }
:root[data-theme='dark'] .trust { color: var(--text); }

.pdp__warn {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

.pdp__warn--out { background: var(--warn-soft); color: var(--warn-fg); font-size: var(--text-sm); font-weight: 700; }

.acc { margin-top: 56px; }
.acc details { border-bottom: 1.5px solid var(--text-strong); }
.acc details:first-child { border-top: 1.5px solid var(--text-strong); }

.acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.acc summary::-webkit-details-marker { display: none; }

.acc summary::after {
  content: '+';
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 500;
  transition: transform var(--dur-base) var(--ease-out);
}

.acc details[open] summary::after { transform: rotate(45deg); background: var(--p-gold-500); color: var(--p-gray-900); }
.acc__body { padding: 0 0 26px; font-size: var(--text-base); color: var(--text); line-height: 1.65; max-width: 80ch; }
.acc__body p + p { margin-top: 12px; }
.acc__body strong { color: var(--text-strong); font-weight: 800; }
.acc .table-card { box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--radius-md); overflow: hidden; }

/* Barra de compra fixa: aparece quando o botão principal sai da tela */
.buybar {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: var(--z-float);
  width: min(760px, calc(100% - 24px));
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 8px;
  border-radius: var(--radius-full);
  background: var(--p-gray-900);
  color: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, 160%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.buybar[data-on='true'] { transform: translate(-50%, 0); }

.buybar__img { --tone: #999; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--tone) 45%, #fff); display: grid; place-items: center; overflow: hidden; }
.buybar__img img { width: 84%; height: 84%; object-fit: contain; }
.buybar__name { display: block; font-size: var(--text-sm); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__meta { display: block; font-size: var(--text-xs); color: #cfcfca; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__meta strong { color: var(--p-green-400); }
.buybar .btn { height: 52px; padding-inline: 24px; }

body:has(.buybar[data-on='true']) .wa-float { opacity: 0; pointer-events: none; }

@media (max-width: 719px) {
  .buybar { bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); border-radius: var(--radius-xl); grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; }
  .buybar__img { width: 46px; height: 46px; }
  .buybar .btn { height: 46px; padding-inline: 16px; font-size: var(--text-sm); }
}

/* --------------------------------------------------------------------------
   20 · Componentes no desenho da loja
   -------------------------------------------------------------------------- */
.btn { font-weight: 800; letter-spacing: 0; gap: 10px; border-radius: var(--radius-full); }
.btn .icon { width: 20px; height: 20px; }

.btn--primary {
  --_bg: var(--p-gold-500);
  --_fg: var(--p-gray-900);
  --_border: transparent;
  --_shadow: 0 0 0 0 transparent;
  background-size: auto;
  transition: background-color var(--dur-fast) var(--ease-std), transform var(--dur-instant);
}

.btn--primary:hover { --_bg: var(--p-gold-400); }
.btn--primary:active { filter: none; }

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

.btn--ghost { --_fg: var(--text-strong); }

.btn--dark { --_bg: var(--p-gray-900); --_fg: #fff; --_shadow: 0 0 0 0 transparent; }
.btn--dark:hover { --_bg: #000; }
:root[data-theme='dark'] .btn--dark { --_bg: #fff; --_fg: var(--p-gray-900); }

.btn--light { --_bg: #fff; --_fg: var(--p-gray-900); --_border: transparent; --_shadow: 0 0 0 0 transparent; }
.btn--light:hover { --_bg: var(--p-gray-50); }

.btn--whatsapp { --_bg: var(--wa); --_fg: #fff; --_shadow: 0 0 0 0 transparent; }
.btn--whatsapp:hover { --_bg: var(--wa-hover); }

.btn--lg { height: 56px; font-size: var(--text-base); padding-inline: 26px; }
.btn--sm { font-size: var(--text-sm); }

.alink { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--text-strong); text-decoration: underline; text-underline-offset: 4px; }
.alink .icon { width: 17px; height: 17px; }

.badge--discount { background: var(--p-gray-900); color: var(--p-gold-300); box-shadow: none; }
.badge--success { background: var(--success-soft); color: var(--success); }

.input, .textarea, .select { border-radius: var(--radius-md); font-size: var(--text-base); }
.input:focus, .textarea:focus, .select:focus { box-shadow: inset 0 0 0 2px var(--p-gray-900), 0 0 0 4px var(--focus-ring); }
:root[data-theme='dark'] .input:focus, :root[data-theme='dark'] .textarea:focus, :root[data-theme='dark'] .select:focus { box-shadow: inset 0 0 0 2px var(--p-gold-400), 0 0 0 4px var(--focus-ring); }
.field__label { font-size: var(--text-sm); font-weight: 800; color: var(--text-strong); }

.segmented { border-radius: var(--radius-full); padding: 4px; gap: 4px; }
.segmented__item { border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 700; height: 48px; gap: 6px; }
.segmented__item .icon { width: 19px; height: 19px; }
.segmented__item[aria-selected='true'] { background: var(--p-gray-900); color: #fff; box-shadow: none; }
:root[data-theme='dark'] .segmented__item[aria-selected='true'] { background: var(--p-gold-500); color: var(--p-gray-900); }
.segmented--sm .segmented__item { height: 46px; font-size: var(--text-xs); }

.option { border-radius: var(--radius-lg); min-height: 58px; }
.option[aria-checked='true'] { background: var(--p-gold-50); box-shadow: inset 0 0 0 2.5px var(--p-gold-500); }
:root[data-theme='dark'] .option[aria-checked='true'] { background: rgba(239, 186, 46, 0.12); }
.option[aria-checked='true'] .option__mark { box-shadow: inset 0 0 0 6px var(--p-gold-500); }
.option__label { font-weight: 800; }

.notice { border-radius: var(--radius-md); }
.progress-note { font-size: var(--text-sm); font-weight: 600; line-height: 1.4; align-items: flex-start; }
.progress-note .icon { margin-top: 1px; }

.total-row { font-size: var(--text-sm); }
.total-row--grand { font-family: var(--font-body); font-size: var(--text-base); }
.total-row--grand .total-row__value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.04em; }
.total-row--grand small { display: block; margin-top: 2px; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }

.savings {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--success-soft);
  color: var(--success-fg);
  font-size: var(--text-sm);
  font-weight: 600;
}

.savings .icon { width: 20px; height: 20px; color: var(--success); flex: none; }
.savings strong { font-weight: 800; }
:root[data-theme='dark'] .savings { color: var(--text); }

/* Gavetas */
.drawer { background: var(--bg); }
.drawer__head { min-height: 70px; padding: 10px 12px 10px 22px; }
.drawer__title { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; }
.drawer__title [data-icon] { width: 24px; height: 24px; }
.drawer__count { font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; color: var(--text-muted); letter-spacing: 0; }
.drawer__body { padding: 16px 20px; }
.drawer__foot { padding: 16px 20px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

.drawer__close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--text-strong);
  background: var(--surface-2);
}

.drawer__close:hover { background: var(--surface-3); }
.drawer__close [data-icon] { width: 18px; height: 18px; }
.drawer__close--back { background: transparent; padding-left: 4px; }

.cart-line { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: var(--radius-lg); }
.cart-line__media { width: 80px; height: 80px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--tone, #999) 22%, var(--surface)); }
.cart-line__title { font-size: var(--text-sm); font-weight: 700; }
.cart-line__variant { font-size: var(--text-xs); font-weight: 700; color: var(--text); background: var(--surface-2); align-self: flex-start; padding: 2px 8px; border-radius: var(--radius-full); }
.cart-line__price { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.02em; }

.cupsell { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.cupsell__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong); }

.modal__panel { border-radius: var(--radius-xl); }
.modal__media { background: color-mix(in srgb, var(--tone, #999) 22%, var(--surface)); }
.sheet__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.sheet__brand { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.sheet__price { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.04em; color: var(--text-strong); }
.sheet__price span { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0; color: var(--pix); margin-left: 6px; }
.sheet__parcel { font-size: var(--text-sm); color: var(--text-muted); margin-top: -10px; }

@media (max-width: 719px) {
  .modal__panel { border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; }
}

/* Aviso de "adicionado" com a foto do produto */
.toast { border-radius: var(--radius-lg); background: var(--p-gray-900); color: #fff; font-weight: 600; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); }

.toast__thumb {
  --tone: #999;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--tone) 45%, #fff);
  display: grid;
  place-items: center;
  animation: pop var(--dur-slow) var(--ease-spring);
}

.toast__thumb img { width: 86%; height: 86%; object-fit: contain; }
.toast__action { color: var(--p-gold-300); font-weight: 800; }
:root[data-theme='dark'] .toast { background: #fff; color: var(--p-gray-900); }
:root[data-theme='dark'] .toast__action { color: var(--p-gold-800); }

@keyframes pop {
  0% { transform: scale(0.4) rotate(-20deg); }
  100% { transform: scale(1) rotate(0); }
}

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

@media (max-width: 719px) {
  .toast-region { bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom)); }
  /* Painel aberto ocupa a tela: o aviso sobe para não cobrir "Enviar pedido" */
  body:has(.drawer[data-open='true']) .toast-region { top: calc(14px + env(safe-area-inset-top)); bottom: auto; }
}

.table-card { border-radius: var(--radius-md); }

.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot--open { background: var(--p-green-400); box-shadow: 0 0 0 3px rgba(76, 196, 127, 0.25); }
.status-dot--closed { background: var(--p-red-400); }

/* Menu de categorias do celular */
.mnav { display: flex; flex-direction: column; gap: 8px; }

.mnav__item {
  --tile: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 8px 14px 8px 8px;
  border-radius: var(--radius-lg);
  background: var(--tile);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--p-gray-900);
}

:root[data-theme='dark'] .mnav__item { background: color-mix(in srgb, var(--tile) 20%, var(--surface)); color: var(--text-strong); }
.mnav__item img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.mnav__icon { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--p-gray-900); color: #fff; }
.mnav__icon .icon { width: 22px; height: 22px; }
.mnav__item > .icon { margin-left: auto; width: 20px; height: 20px; opacity: 0.6; }
.mnav__item small { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; opacity: 0.7; }
.mnav__sep { margin: 14px 0 2px; font-size: var(--text-2xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   21 · Rodapé
   -------------------------------------------------------------------------- */
.site-footer { margin-top: 72px; border-top: none; background: var(--footer-bg); color: var(--footer-fg); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }

.site-footer__inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 56px var(--gutter) 32px;
}

.site-footer__top {
  max-width: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
}

.fcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.fcol__title {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--p-gold-300);
}

.fcol a, .fcol__item, .fcol span.fcol__item { font-size: var(--text-sm); color: var(--footer-muted); line-height: 1.5; }
.fcol a { display: inline-flex; align-items: center; gap: 8px; }
.fcol a .icon { width: 18px; height: 18px; }
.fcol a:hover { color: #fff; }
.fcol__logo { width: 120px; height: auto; margin-bottom: 6px; }
.fcol .fcol__lead { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: #fff; }

.site-footer__trust {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--footer-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}

.ftrust { display: flex; flex-direction: column; gap: 12px; }
.ftrust__title { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.ftrust__row { display: flex; flex-wrap: wrap; gap: 8px; }

.tbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  background: var(--footer-chip);
  box-shadow: inset 0 0 0 1px var(--footer-border);
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
}

.tbadge .icon { width: 19px; height: 19px; color: var(--p-gold-400); }
.tbadge--pay { background: #fff; color: var(--p-gray-900); box-shadow: none; }
.tbadge--pay .icon { color: var(--p-gray-900); }

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

.site-footer__bottom-inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--text-xs);
  color: var(--footer-muted);
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1px var(--footer-border);
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
}

.theme-btn:hover { background: rgba(255, 255, 255, 0.06); }
.theme-btn .icon { width: 17px; height: 17px; }

.legal-strip {
  padding: 14px var(--gutter) calc(18px + env(safe-area-inset-bottom));
  background: #000;
  color: #a3a39e;
  font-size: var(--text-xs);
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 959px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .fcol--brand { grid-column: 1 / -1; }
}

@media (max-width: 479px) {
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 719px) {
  .site-footer { margin-top: 52px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  /* Links do rodapé com 44px de toque, sem o vão extra entre eles */
  .fcol:not(.fcol--brand) { gap: 0; }
  .fcol a { min-height: 44px; }
  .fcol span.fcol__item { padding-block: 5px; }
  .theme-btn { min-height: 44px; }
  .legal-strip { padding-bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   22 · WhatsApp flutuante (computador) e barra de atalhos (celular)
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 22px 0 16px;
  border-radius: var(--radius-full);
  background: var(--p-wa-500);
  color: #06281a;
  font-size: var(--text-sm);
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(18, 140, 74, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}

.wa-float:hover { transform: translateY(-2px) rotate(-2deg); }
.wa-float [data-icon] { width: 28px; height: 28px; }

body:has(.scrim[data-open='true']) .wa-float { opacity: 0; pointer-events: none; }

.mbar { display: none; }

@media (max-width: 719px) {
  .wa-float { display: none; }

  .mbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-float);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 0 4px env(safe-area-inset-bottom);
    background: var(--header-bg);
    box-shadow: 0 -1px 0 var(--border), 0 -8px 24px rgba(0, 0, 0, 0.06);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    backdrop-filter: saturate(1.6) blur(16px);
  }

  .mbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
  }

  .mbar__item [data-icon] { width: 24px; height: 24px; }
  .mbar__item[aria-current='true'] { color: var(--text-strong); }
  .mbar__item[aria-current='true'] > [data-icon] { color: var(--p-gold-600); }
  .mbar__item--wa [data-icon] { color: var(--wa-icon); }
  .mbar .hact__badge { top: -6px; right: -12px; box-shadow: 0 0 0 2px var(--surface); background: var(--p-gold-500); color: var(--p-gray-900); }

  body:has(.scrim[data-open='true']) .mbar { visibility: hidden; }
}

/* --------------------------------------------------------------------------
   23 · Portão de idade (18+)
   -------------------------------------------------------------------------- */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-toast) + 1);
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: hidden auto;
  background: var(--p-gold-500);
  transition: opacity var(--dur-slow) var(--ease-out);
}

.age-gate::before {
  content: '';
  position: fixed;
  width: 90vmax;
  aspect-ratio: 137 / 126;
  background: var(--p-gold-300);
  -webkit-mask: url('../img/marca/nuvem.svg') center / contain no-repeat;
  mask: url('../img/marca/nuvem.svg') center / contain no-repeat;
}

.age-gate[data-leaving='true'] { opacity: 0; pointer-events: none; }

.age-gate__card {
  position: relative;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 34px 28px 26px;
  border-radius: var(--radius-2xl);
  background: #fff;
  color: var(--p-gray-800);
  text-align: center;
  box-shadow: 0 30px 80px rgba(60, 40, 0, 0.3);
}

.age-gate__logo { width: 124px; height: auto; }

.age-gate__badge {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--p-gray-900);
  color: var(--p-gold-300);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  transform: rotate(-8deg);
}

.age-gate__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; line-height: 1; letter-spacing: -0.035em; color: var(--p-gray-900); }
.age-gate__text { font-size: var(--text-base); color: var(--p-gray-600); line-height: 1.5; }
.age-gate__actions { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.age-gate__actions .btn--primary { --_bg: var(--p-gray-900); --_fg: #fff; }
.age-gate__actions .btn--primary:hover { --_bg: #000; }
.age-gate__actions .btn--secondary { --_bg: #fff; --_fg: var(--p-gray-900); --_border: var(--p-gray-300); }
.age-gate__legal { font-size: var(--text-xs); color: var(--p-gray-500); line-height: 1.5; }

/* --------------------------------------------------------------------------
   24 · Entrada suave dos blocos e "reduzir movimento"
   -------------------------------------------------------------------------- */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--d, 0) * 70ms);
}

.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal] { opacity: 1; transform: none; transition: none; }
  .ticker__track, .bmarq__track { animation: none; }
  .hero__media img, .pstage img { animation: none; }
  .rail__track { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   25 · Frete do motoboy em tempo real (99 Entrega)
   Mesma calculadora na ficha, no carrinho e no checkout. Só aparece quando
   o servidor (api/frete-99.js) está configurado.
   -------------------------------------------------------------------------- */
.frete99 { display: flex; flex-direction: column; gap: 8px; }

.frete99__title { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 800; color: var(--text-strong); }
.frete99__title .icon { width: 18px; height: 18px; flex: none; }
.frete99__title .badge { margin-left: auto; }

.frete99__form { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; gap: 8px; }
.frete99__form .input { min-width: 0; }
.frete99__form .btn { white-space: nowrap; }

.frete99__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: var(--text-xs); }
.frete99__links a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }

.frete99__geo,
.frete99__again {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.frete99__geo .icon { width: 14px; height: 14px; }

/* Links de texto pequenos: área de toque de 44px sem mexer no desenho */
.frete99__geo, .frete99__again, .frete99__links a { position: relative; }
.frete99__geo::after, .frete99__again::after, .frete99__links a::after,
.stepper__btn::after, .uline__add::after { content: ''; position: absolute; inset: -12px -4px; }
.stepper__btn::after { inset: -5px; }
.stepper__btn, .uline__add { position: relative; }
.uline__add::after { inset: -2px; }

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

.frete99__msg { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-sm); font-weight: 600; line-height: 1.4; color: var(--text); }
.frete99__msg .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }

.frete99__err {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--warn-soft);
  color: var(--warn-fg);
}
.frete99__err .frete99__msg { color: inherit; }
.frete99__wa { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 700; color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; }
.frete99__wa .icon { width: 16px; height: 16px; }

.frete99__ok {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--success-soft);
  color: var(--success-fg);
}
.frete99__price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--success);
}
.frete99__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: var(--text-xs); line-height: 1.35; }
.frete99__info strong { font-size: var(--text-sm); font-weight: 800; }
.frete99__info small { font-size: var(--text-xs); opacity: 0.85; }
.frete99__demo { font-weight: 800; color: var(--warn); }
:root[data-theme='dark'] .frete99__ok { color: var(--text); }

.frete99__spin {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--text-strong);
  animation: frete99-spin 0.7s linear infinite;
}
@keyframes frete99-spin { to { transform: rotate(360deg); } }

/* Na ficha, a calculadora mora dentro do bloco "Como receber" */
.ship .frete99-slot:not(:empty) { padding: 0 18px 16px; }
.ship .frete99-slot + .ship__row { border-top: 1px solid var(--border); }

@media (prefers-reduced-motion: reduce) {
  .frete99__spin { animation-duration: 2.4s; }
}