/* ============================================================================
   VITRINE MEGA — redesign da vitrine pública (cliente não-logado)

   Origem: handoff bundle "mega/" do Claude Design (chat 3 — Vitrine Distribuidora).
   Plano: C:\Users\freit\.claude\plans\vitrine-mega-redesign.md
   Branch: redesign/vitrine-mega
   Rastreabilidade: cada onda é prefixada por VitrineMega/W{N}.
   Tudo escopado em .vmega-shell pra não vazar pro resto do app.

   Tipografia: system-ui como fonte primaria (CSP fechada nao permite
   carregar Google Fonts; self-host nao foi adotado). Os tokens
   --vmega-font-sans/--vmega-font-mono ainda referenciam "Manrope" /
   "IBM Plex Mono" como primeira opcao — se o usuario tiver instalado
   localmente, sera usado; caso contrario, cai pro fallback do sistema.
   Paleta: dark padrão (#0A0E1A), light alternativo via [data-theme="light"].
   ============================================================================ */

/* ─── VitrineMega/W1 — Foundation: tokens + tipografia base ───────────────── */

.vmega-shell {
  /* paleta — defaults dark (combina com o sx-dark herdado do body) */
  --vmega-bg:            #0A0E1A;
  --vmega-bg-2:          #0F1422;
  --vmega-surface:       #141828;
  --vmega-surface-2:     #1A1F33;
  --vmega-border:        rgba(255, 255, 255, 0.08);
  --vmega-border-strong: rgba(255, 255, 255, 0.16);
  --vmega-text:          #F5F6F8;
  --vmega-text-2:        rgba(245, 246, 248, 0.72);
  --vmega-text-3:        rgba(245, 246, 248, 0.48);
  --vmega-text-4:        rgba(245, 246, 248, 0.32);
  --vmega-img-bg:        #1A1F33;

  --vmega-accent:        #E8B547;
  --vmega-accent-fg:     #1A1A1A;
  --vmega-primary:       #1E3A8A;
  --vmega-primary-2:     #2A4FAD;

  /* tipografia */
  --vmega-font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --vmega-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* curvas / durations */
  --vmega-radius-sm: 6px;
  --vmega-radius-md: 10px;
  --vmega-radius-lg: 14px;

  /* container */
  --vmega-max:    1440px;
  --vmega-gutter: clamp(16px, 4vw, 32px);
}

/* light mode */
[data-theme="light"] .vmega-shell {
  --vmega-bg:            #F5F6F8;
  --vmega-bg-2:          #FFFFFF;
  --vmega-surface:       #FFFFFF;
  --vmega-surface-2:     #FAFAFC;
  --vmega-border:        rgba(15, 20, 34, 0.08);
  --vmega-border-strong: rgba(15, 20, 34, 0.16);
  --vmega-text:          #0F1422;
  --vmega-text-2:        rgba(15, 20, 34, 0.7);
  --vmega-text-3:        rgba(15, 20, 34, 0.5);
  --vmega-text-4:        rgba(15, 20, 34, 0.35);
  --vmega-img-bg:        #F0F1F4;
}

/* W1 ainda não muda nada visualmente — só prepara o terreno.
   As próximas ondas (W2 topbar, W3 header, W4 nav, W5 vitrine head, W6 cards,
   W7 grid, W8 footer, W9 polish, W10 mobile) virão como blocos abaixo,
   cada um com seu próprio comentário /‌* ─── VitrineMega/W{N} — ... ─── *‌/
   pra você identificar e poder pedir "reverte W7" sem ambiguidade. */

/* ─── VitrineMega/W2 — TopBar B2B (selos refinados + SAC/Ajuda) ──────────── */

/* Refina a public-utility-bar existente quando dentro de .vmega-shell.
   Tom mais sutil que a versão atual (gradiente forte) — alinha com o design
   Vitrine MEGA (chat 3): faixa fina, ícones em accent gold, texto em
   --vmega-text-2/3, divisor sutil pro mainbar abaixo. */
.vmega-shell .public-utility-bar {
  background: var(--vmega-bg-2);
  border-bottom: 1px solid var(--vmega-border);
  padding: 8px var(--vmega-gutter);
  gap: 8px 28px;
  color: var(--vmega-text-2);
  font-family: var(--vmega-font-sans);
  font-size: 11px;
  align-items: center;
  max-width: var(--vmega-max);
  margin-inline: auto;
}

.vmega-shell .public-utility-bar .public-utility-item {
  font-family: var(--vmega-font-sans);
  color: var(--vmega-text-2);
}

.vmega-shell .public-utility-bar .public-benefit-icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--vmega-accent);
  flex: 0 0 auto;
}
.vmega-shell .public-utility-bar .public-benefit-icon svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: currentColor;
}

.vmega-shell .public-utility-bar .public-utility-item strong {
  color: var(--vmega-text);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
}
.vmega-shell .public-utility-bar .public-utility-item small {
  color: var(--vmega-text-3);
  font-size: 10.5px;
  font-weight: 500;
}

/* lado direito: SAC + Ajuda */
.vmega-shell .vmega-topbar-aside {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--vmega-text-3);
  font-size: 11px;
  font-family: var(--vmega-font-mono);
  letter-spacing: 0.02em;
}
.vmega-shell .vmega-topbar-aside .vmega-topbar-sac {
  color: var(--vmega-text-3);
}
.vmega-shell .vmega-topbar-aside .vmega-dot-sep {
  opacity: 0.5;
}
.vmega-shell .vmega-topbar-aside a.vmega-topbar-help {
  color: var(--vmega-text-2);
  text-decoration: none;
  transition: color 150ms ease;
  font-family: var(--vmega-font-mono);
}
.vmega-shell .vmega-topbar-aside a.vmega-topbar-help:hover,
.vmega-shell .vmega-topbar-aside a.vmega-topbar-help:focus-visible {
  color: var(--vmega-accent);
}
.vmega-shell .vmega-topbar-aside a.vmega-topbar-help:focus-visible {
  outline: 2px solid var(--vmega-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* mobile (<800px): selos somem, SAC mantém. */
@media (max-width: 800px) {
  .vmega-shell .public-utility-bar .public-utility-item {
    display: none;
  }
  .vmega-shell .vmega-topbar-aside {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    font-size: 10.5px;
  }
}

/* ─── VitrineMega/W3 — Header redesign (logo + search + actions) ─────────── */

/* Container do header sticky com border-bottom sutil */
.vmega-shell .cliente-public-header-v2 {
  background: var(--vmega-bg);
  border-bottom: 1px solid var(--vmega-border);
  font-family: var(--vmega-font-sans);
}
.vmega-shell .public-header-surface {
  background: transparent;
}

/* Mainbar — grid 3 colunas: logo / search / actions */
.vmega-shell .public-mainbar {
  padding: 16px var(--vmega-gutter);
  max-width: var(--vmega-max);
  margin: 0 auto;
  background: transparent;
}
.vmega-shell .public-desktop-primary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}

/* Logo lockup MD */
.vmega-shell .public-brand-lockup.public-desktop-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.vmega-shell .public-brand-lockup .cliente-brand-mark {
  flex-shrink: 0;
}
[data-theme="dark"] .vmega-shell .public-brand-lockup .mega-mark--light {
  --mark-ink: #ffffff;
  --mark-accent: #bcd1ee;
  --mark-front: #eaf1fb;
}
.vmega-shell .public-brand-lockup .public-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.vmega-shell .public-brand-lockup .public-brand-text strong {
  font-family: 'Sora', var(--vmega-font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--vmega-text);
  text-transform: none;
}
.vmega-shell .public-brand-lockup .public-brand-text small {
  font-family: var(--vmega-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--vmega-text-3);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Search bar (desktop): tag CATÁLOGO esquerda + input + botão accent direita */
.vmega-shell .cliente-public-search-v2.public-desktop-search {
  display: flex;
  align-items: center;
  background: var(--vmega-surface);
  border: 1px solid var(--vmega-border);
  border-radius: var(--vmega-radius-md);
  padding: 4px 4px 4px 0;
  height: 44px;
  transition: border-color 150ms ease;
  font-family: var(--vmega-font-sans);
  position: relative;
  max-width: 720px;
  width: 100%;
  justify-self: stretch;
}
.vmega-shell .cliente-public-search-v2.public-desktop-search:focus-within {
  border-color: var(--vmega-accent);
}
.vmega-shell .public-desktop-search-prefix {
  font-family: var(--vmega-font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--vmega-text-3);
  letter-spacing: 0.12em;
  padding: 0 14px;
  border-right: 1px solid var(--vmega-border);
  margin-right: 4px;
  height: 22px;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  background: transparent;
}
.vmega-shell .cliente-public-search-v2.public-desktop-search input[type="search"] {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--vmega-text);
  font-size: 13.5px;
  font-family: inherit;
  padding: 0 8px;
  min-width: 0;
}
.vmega-shell .cliente-public-search-v2.public-desktop-search input[type="search"]::placeholder {
  color: var(--vmega-text-3);
}
.vmega-shell .cliente-public-search-v2.public-desktop-search .public-search-submit {
  background: var(--vmega-accent);
  color: var(--vmega-accent-fg);
  border: 0;
  border-radius: 7px;
  padding: 0 18px;
  height: 36px;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--vmega-font-sans);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: filter 150ms ease, transform 120ms ease;
  flex-shrink: 0;
}
.vmega-shell .cliente-public-search-v2.public-desktop-search .public-search-submit:hover {
  filter: brightness(1.05);
}
.vmega-shell .cliente-public-search-v2.public-desktop-search .public-search-submit:active {
  transform: translateY(1px);
}

/* Header actions container */
.vmega-shell .public-desktop-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Cards "Oferta do dia" / "Categorias" — escondidos em W3 (vão virar tabs em W4) */
.vmega-shell .public-desktop-actions .public-desktop-action-card {
  display: none;
}

/* Theme control — preserva a animação "gota d'água" definida em
   syntax-cliente-overrides.css (.cliente-theme-control.is-public-header).
   Não sobrescrevemos nada aqui pra que o pseudo-element ::before
   (com translateX + morph de border-radius + cubic-bezier elastic
   no clique) continue funcionando exatamente como antes do redesign. */
.vmega-shell .public-desktop-actions .cliente-theme-control {
  display: inline-flex;
  align-items: center;
}

/* CTA "Sua conta B2B" — accent gold com sombra suave */
.vmega-shell .public-login-cta {
  background: var(--vmega-accent);
  color: var(--vmega-accent-fg);
  border: 0;
  border-radius: var(--vmega-radius-md);
  height: 40px;
  padding: 0 16px;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--vmega-font-sans);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(232, 181, 71, 0.25);
  transition: filter 150ms ease, transform 120ms ease, box-shadow 150ms ease;
  cursor: pointer;
}
.vmega-shell .public-login-cta:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(232, 181, 71, 0.35);
}
.vmega-shell .public-login-cta:active {
  transform: translateY(1px);
}
.vmega-shell .public-login-cta:focus-visible {
  outline: 2px solid var(--vmega-accent);
  outline-offset: 2px;
}
/* O avatar visual interno do botão (cabeça/corpo) some no design Mega — fica só "Sua conta B2B / Entrar" */
.vmega-shell .public-login-cta .public-login-avatar {
  display: none;
}
.vmega-shell .public-login-cta .public-login-copy {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.vmega-shell .public-login-cta .public-login-copy small {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--vmega-accent-fg);
  opacity: 0.75;
  text-transform: uppercase;
}
.vmega-shell .public-login-cta .public-login-text {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.005em;
}

/* ─── VitrineMega/W4 — Header Nav (tabs B2B + pill "Compra protegida") ──── */

.vmega-shell .public-desktop-subbar {
  max-width: var(--vmega-max);
  margin: 0 auto;
  padding: 10px var(--vmega-gutter) 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: transparent;
  border-top: 0;
}

.vmega-shell .cliente-public-nav-v2.public-header-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

.vmega-shell .vmega-nav-tab {
  font-family: var(--vmega-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--vmega-text-2);
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.vmega-shell .vmega-nav-tab:hover {
  color: var(--vmega-text);
  background: var(--vmega-surface);
}
.vmega-shell .vmega-nav-tab:focus-visible {
  outline: 2px solid var(--vmega-accent);
  outline-offset: 2px;
}
.vmega-shell .vmega-nav-tab.is-active {
  color: var(--vmega-accent);
  background: color-mix(in srgb, var(--vmega-accent) 12%, transparent);
}

/* lado direito: pill "Compra protegida" + helper */
.vmega-shell .public-desktop-subbar-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  padding: 0;
}

.vmega-shell .vmega-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--vmega-accent) 14%, transparent);
  color: var(--vmega-accent);
  font-family: var(--vmega-font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 0;
}
.vmega-shell .vmega-nav-pill .vmega-nav-pill-icon {
  flex-shrink: 0;
  color: currentColor;
}

.vmega-shell .vmega-nav-help {
  font-family: var(--vmega-font-sans);
  font-size: 11.5px;
  color: var(--vmega-text-3);
  font-weight: 500;
}

/* mobile: pill some, tabs viram chips horizontais com scroll */
@media (max-width: 980px) {
  .vmega-shell .public-desktop-subbar {
    padding: 8px var(--vmega-gutter) 12px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .vmega-shell .cliente-public-nav-v2.public-header-actions {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
  }
  .vmega-shell .cliente-public-nav-v2.public-header-actions::-webkit-scrollbar {
    display: none;
  }
  .vmega-shell .vmega-nav-help {
    display: none;
  }
}
@media (max-width: 640px) {
  .vmega-shell .vmega-nav-pill {
    font-size: 10px;
    padding: 5px 9px;
  }
}

/* ─── VitrineMega/W5 — VitrineHeader (eyebrow + título + sub mono) ──────── */

.vmega-shell main {
  max-width: var(--vmega-max);
  margin: 0 auto;
  padding: 32px var(--vmega-gutter) 64px;
}

.vmega-shell .cliente-public-products-section {
  padding: 0;
  margin: 0;
}

.vmega-shell .cliente-public-hero-v2 {
  margin-top: clamp(32px, 5vw, 56px);
}

.vmega-shell .cliente-public-section-head-v2 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--vmega-border);
  background: transparent;
}

/* Bloco eyebrow + h2 puxado pra esquerda (escapando parte do gutter)
   pra dar mais peso visual ao título. Em mobile mantém alinhado pra
   não estourar viewport. */
.vmega-shell .cliente-public-section-head-v2 > div:first-child {
  margin-left: calc(var(--vmega-gutter) * -0.5);
}

@media (max-width: 760px) {
  .vmega-shell .cliente-public-section-head-v2 > div:first-child {
    margin-left: 0;
  }
}

.vmega-shell .cliente-public-section-head-v2 .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vmega-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--vmega-text-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.vmega-shell .cliente-public-section-head-v2 .eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vmega-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vmega-accent) 25%, transparent);
  animation: vmega-eyebrow-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes vmega-eyebrow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vmega-accent) 25%, transparent);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--vmega-accent) 12%, transparent);
    opacity: 0.85;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vmega-shell .cliente-public-section-head-v2 .eyebrow::before {
    animation: none;
  }
}

.vmega-shell .cliente-public-section-head-v2 h2 {
  font-family: var(--vmega-font-sans);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--vmega-text);
  margin: 0;
}

/* Vitrine info bar (Mostrando X de Y + Limpar filtros) */
.vmega-shell .vitrine-info-bar.public-vitrine-info {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 16px 0 8px;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.vmega-shell .vitrine-info-bar-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.vmega-shell .vitrine-info-bar-text strong[data-vitrine-summary] {
  font-family: var(--vmega-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--vmega-text-3);
  letter-spacing: 0;
  text-transform: none;
}
.vmega-shell .vitrine-info-bar-label {
  font-family: var(--vmega-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--vmega-text-3);
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--vmega-border);
  border-radius: 4px;
}

.vmega-shell .public-vitrine-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vmega-shell .public-vitrine-chip {
  font-family: var(--vmega-font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--vmega-text-2);
  background: var(--vmega-surface);
  border: 1px solid var(--vmega-border);
  border-radius: 999px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.vmega-shell .public-vitrine-chip:hover {
  border-color: var(--vmega-border-strong);
  color: var(--vmega-text);
}

/* Botão "Limpar filtros" — outline refinado */
.vmega-shell .vitrine-info-bar-close {
  background: transparent;
  border: 1px solid var(--vmega-border);
  color: var(--vmega-text-2);
  padding: 8px 14px;
  height: 36px;
  border-radius: 8px;
  font-family: var(--vmega-font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
  margin-left: auto;
}
.vmega-shell .vitrine-info-bar-close:hover {
  border-color: var(--vmega-border-strong);
  color: var(--vmega-text);
}
.vmega-shell .vitrine-info-bar-close:focus-visible {
  outline: 2px solid var(--vmega-accent);
  outline-offset: 2px;
}

/* ─── VitrineMega/W6 — ProductCard "Refined" ─────────────────────────────── */

/* Card base */
.vmega-shell .vmega-card {
  background: var(--vmega-surface);
  border: 1px solid var(--vmega-border);
  border-radius: var(--vmega-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  position: relative;
  font-family: var(--vmega-font-sans);
}
.vmega-shell .vmega-card:hover {
  border-color: var(--vmega-border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* Imagem do produto */
.vmega-shell .vmega-card-img-wrap {
  position: relative;
  background: var(--vmega-img-bg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
}
.vmega-shell .vmega-card-img-wrap img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  display: block;
}

/* Rank badge (#01, #02 — só aparece se houver) */
.vmega-shell .vmega-card-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--vmega-font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--vmega-text-3);
  background: var(--vmega-surface);
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--vmega-border);
  letter-spacing: 0.04em;
}

/* Heart button (favorito) */
.vmega-shell .vmega-heart-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: var(--vmega-bg);
  color: var(--vmega-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: color 150ms ease, transform 150ms ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
.vmega-shell .vmega-heart-btn:hover {
  color: #EC4899;
  transform: scale(1.08);
}
.vmega-shell .vmega-heart-btn.is-fav {
  color: #EC4899;
}
.vmega-shell .vmega-heart-btn:focus-visible {
  outline: 2px solid var(--vmega-accent);
  outline-offset: 2px;
}

/* Body do card */
.vmega-shell .vmega-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Meta top: categoria (esquerda em accent) + código SKU (direita em mono) */
.vmega-shell .vmega-card-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.vmega-shell .vmega-card-cat {
  font-family: var(--vmega-font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vmega-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vmega-shell .vmega-card-code {
  font-family: var(--vmega-font-mono);
  font-size: 10px;
  color: var(--vmega-text-3);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Título com line-clamp 2 e altura mínima reservada */
.vmega-shell .vmega-card-title {
  font-family: var(--vmega-font-sans);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--vmega-text);
  letter-spacing: -0.005em;
  margin: 0;
  min-height: 35px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Linha de preço — separada por linha tracejada do design Mega */
.vmega-shell .vmega-card-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px dashed var(--vmega-border);
}
.vmega-shell .vmega-card-price-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vmega-shell .vmega-card-price-label {
  font-family: var(--vmega-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vmega-text-3);
}
/* slot reservado quando produto não tem menorPreco — preserva o eixo Y do CTA */
.vmega-shell .vmega-card-price-label.is-empty,
.vmega-shell .vmega-card-price.is-empty {
  visibility: hidden;
}
.vmega-shell .vmega-card-price {
  font-family: var(--vmega-font-sans);
  font-size: 14px;
  color: var(--vmega-text-2);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.vmega-shell .vmega-card-price strong {
  font-size: 26px;
  font-weight: 800;
  color: var(--vmega-text);
  letter-spacing: -0.025em;
  margin-left: 2px;
}
.vmega-shell .vmega-card-price-box {
  font-family: var(--vmega-font-mono);
  font-size: 10.5px;
  color: var(--vmega-text-3);
  margin-top: 2px;
}

/* CTA "Ver produto" — composição com .botao-card-produto.
   Especificidade extra (.vmega-shell .vmega-card .vmega-card-cta = 0,3,0)
   pra vencer .sx-dark .botao-card-produto (0,2,0) carregada em syntax-cliente-overrides. */
.vmega-shell .vmega-card .vmega-card-cta,
.vmega-shell .vmega-card .vmega-card-cta.botao-card-produto {
  background: transparent;
  border: 1px solid var(--vmega-border-strong);
  color: var(--vmega-text);
  padding: 10px;
  border-radius: 9px;
  font-family: var(--vmega-font-sans);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  margin-top: auto;
  width: 100%;
  display: block;
  letter-spacing: 0;
  min-height: 40px;
  box-shadow: none;
  transform: none;
}
.vmega-shell .vmega-card .vmega-card-cta:hover,
.vmega-shell .vmega-card .vmega-card-cta.botao-card-produto:hover {
  background: var(--vmega-accent);
  border-color: var(--vmega-accent);
  color: var(--vmega-accent-fg);
  box-shadow: 0 6px 14px -8px rgba(232, 181, 71, 0.45);
  transform: none;
}
.vmega-shell .vmega-card .vmega-card-cta:focus-visible {
  outline: 2px solid var(--vmega-accent);
  outline-offset: 2px;
}

/* ProductCard legado (cliente-public-product-card-v2) some quando vmega ativo,
   pra evitar render duplo enquanto o island monta o vmega-card. */
.vmega-shell .cliente-public-product-card-v2 {
  display: none;
}
.vmega-shell [data-vitrine-grid] .cliente-public-product-card-v2 {
  display: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vmega-shell .vmega-card,
  .vmega-shell .vmega-card:hover,
  .vmega-shell .vmega-heart-btn,
  .vmega-shell .vmega-card .vmega-card-cta,
  .vmega-shell .vmega-card .vmega-card-cta:hover {
    transition: none;
    transform: none;
    box-shadow: none;
  }
}

/* ─── VitrineMega/W7 — Grid 4 cols fixo + responsivo ─────────────────────── */

/* Sobrescreve .cliente-public-products-v2 (auto-fill minmax(230,1fr))
   por uma grade fixa de 4 colunas em desktop, com degradação previsível
   nos breakpoints. Decisão aprovada: defaults fixos = 4 cols. */
.vmega-shell .cliente-public-products-v2 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: var(--vmega-max);
  margin: 0 auto;
  padding: 0;
  min-height: clamp(360px, 50vh, 480px);
  transition: opacity 160ms ease;
}

@media (max-width: 1099px) {
  .vmega-shell .cliente-public-products-v2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 799px) {
  .vmega-shell .cliente-public-products-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* mobile pequeno: ainda mantém 2 cols (padrão e-commerce) */
@media (max-width: 480px) {
  .vmega-shell .cliente-public-products-v2 {
    gap: 10px;
  }
}

/* só vai pra 1 col em viewports muito pequenos (Galaxy Fold dobrado etc.) */
@media (max-width: 320px) {
  .vmega-shell .cliente-public-products-v2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

/* ─── VitrineMega/W8 — Footer compacto + aviso 18+ ──────────────────────── */

/* Refina a bottom bar do footer sob .vmega-shell pra usar tipografia
   Plex Mono e tons vmega coerentes. O bloco superior do footer (cards
   CTA, contact, mapa, social) continua intocado — manter a riqueza de
   informacao que o usuario ja construiu. */

.vmega-shell .public-footer-bottom {
  border-top: 1px solid var(--vmega-border);
  padding: 20px var(--vmega-gutter);
}

.vmega-shell .public-footer-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--vmega-font-mono);
  font-size: 11.5px;
  /* O footer tem fundo dark fixo (gradient azul-marinho do partial),
     entao forcamos cor clara independente do data-theme. */
  color: rgba(244, 247, 251, 0.55);
}

.vmega-shell .public-footer-copyright,
.vmega-shell .public-footer-cnpj {
  font-family: var(--vmega-font-mono);
  font-size: 11.5px;
  color: rgba(244, 247, 251, 0.65);
  letter-spacing: 0;
}

/* Aviso 18+: pill compacto + frase em mono */
.vmega-shell .vmega-footer-age {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vmega-font-mono);
  font-size: 11px;
  color: rgba(244, 247, 251, 0.55);
  margin-top: 4px;
}
.vmega-shell .vmega-footer-age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vmega-font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--vmega-accent-fg);
  background: var(--vmega-accent);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Syntax credit + social tones — fundo dark fixo, forca cor clara */
.vmega-shell .public-footer-syntax {
  font-family: var(--vmega-font-sans);
  font-size: 11.5px;
  color: rgba(244, 247, 251, 0.55);
}
.vmega-shell .public-footer-syntax strong {
  color: rgba(244, 247, 251, 0.85);
}
.vmega-shell .public-footer-syntax:hover strong {
  color: var(--vmega-accent);
}

/* ─── VitrineMega/W9 — Polish (skeleton, empty state, focus, a11y) ──────── */

/* Skeleton shimmer pra cards durante loading (aplicado via classe .is-loading
   pelo island quando estiver carregando) */
@keyframes vmega-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.vmega-shell .vmega-card.is-loading .vmega-card-img-wrap,
.vmega-shell .vmega-card.is-loading .vmega-card-title,
.vmega-shell .vmega-card.is-loading .vmega-card-cat,
.vmega-shell .vmega-card.is-loading .vmega-card-code,
.vmega-shell .vmega-card.is-loading .vmega-card-price strong {
  background: linear-gradient(
    90deg,
    var(--vmega-img-bg) 0%,
    color-mix(in srgb, var(--vmega-img-bg) 60%, var(--vmega-text-3) 8%) 50%,
    var(--vmega-img-bg) 100%
  );
  background-size: 200% 100%;
  animation: vmega-shimmer 1.4s ease-in-out infinite;
  color: transparent;
}

/* Empty state refinado (Nenhum produto encontrado) */
.vmega-shell .empty-state {
  padding: 48px 24px;
  text-align: center;
  background: var(--vmega-surface);
  border: 1px dashed var(--vmega-border);
  border-radius: var(--vmega-radius-lg);
  margin: 16px 0;
}
.vmega-shell .empty-state h2 {
  font-family: var(--vmega-font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--vmega-text);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.vmega-shell .empty-state p {
  font-family: var(--vmega-font-sans);
  font-size: 13.5px;
  color: var(--vmega-text-3);
  margin: 0;
  line-height: 1.5;
}
.vmega-shell .empty-state::before {
  content: '∅';
  display: block;
  font-family: var(--vmega-font-mono);
  font-size: 32px;
  color: var(--vmega-text-4);
  margin-bottom: 12px;
}

/* Empty state de favoritos (.public-favorites-empty) — mantém ícone próprio */
.vmega-shell .public-favorites-empty {
  padding: 48px 24px;
  text-align: center;
  background: var(--vmega-surface);
  border: 1px dashed var(--vmega-border);
  border-radius: var(--vmega-radius-lg);
  margin: 16px 0;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--vmega-font-sans);
  color: var(--vmega-text-2);
}
.vmega-shell .public-favorites-empty h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--vmega-text);
  letter-spacing: -0.01em;
  margin: 8px 0;
}
.vmega-shell .public-favorites-empty p {
  font-size: 13px;
  color: var(--vmega-text-3);
  margin: 0 0 16px;
}
.vmega-shell .public-favorites-empty .btn-primary {
  background: var(--vmega-accent);
  color: var(--vmega-accent-fg);
  border: 0;
  border-radius: var(--vmega-radius-md);
  padding: 10px 18px;
  font-family: var(--vmega-font-sans);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: filter 150ms ease;
}
.vmega-shell .public-favorites-empty .btn-primary:hover {
  filter: brightness(1.05);
}

/* Focus-visible global em interativos da vmega — outline accent acessível.
   Não cobre elementos que já têm focus-visible próprio (CTA, search, tabs). */
.vmega-shell a:focus-visible,
.vmega-shell button:focus-visible {
  outline: 2px solid var(--vmega-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion global pra vmega — desativa todas animações/transitions. */
@media (prefers-reduced-motion: reduce) {
  .vmega-shell *,
  .vmega-shell *::before,
  .vmega-shell *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .vmega-shell .vmega-card.is-loading .vmega-card-img-wrap,
  .vmega-shell .vmega-card.is-loading .vmega-card-title,
  .vmega-shell .vmega-card.is-loading .vmega-card-cat,
  .vmega-shell .vmega-card.is-loading .vmega-card-code,
  .vmega-shell .vmega-card.is-loading .vmega-card-price strong {
    background: var(--vmega-img-bg);
    animation: none;
  }
}

/* Acessibilidade: garante que leitores de tela vejam o texto correto
   mesmo quando rótulos visíveis usam ::before ou pseudo-elements */
.vmega-shell .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── VitrineMega/W10 — Mobile (≤760) ─────────────────────────────────────── */

@media (max-width: 760px) {
  /* Em mobile, o partial usa .public-mobile-mainbar; o desktop-primary
     já cai em display:none via cliente.css (regra legada). Aqui só
     refinamos o mobile mainbar pra usar tons vmega. */
  .vmega-shell .public-mobile-mainbar {
    background: var(--vmega-bg);
    border-bottom: 1px solid var(--vmega-border);
    padding: 12px var(--vmega-gutter);
    gap: 10px;
  }

  /* Search mobile (form distinto do desktop) */
  .vmega-shell .cliente-public-search-v2.public-mobile-search {
    background: var(--vmega-surface);
    border: 1px solid var(--vmega-border);
    border-radius: var(--vmega-radius-md);
    height: 44px;
    padding: 4px 4px 4px 14px;
    display: flex;
    align-items: center;
    margin: 8px var(--vmega-gutter);
    width: auto;
    max-width: calc(100% - var(--vmega-gutter) * 2);
    box-sizing: border-box;
    /* Sobrescreve overflow:hidden de cliente.css:4511 que cortava o dropdown
       de sugestoes (position:absolute filho do form). */
    overflow: visible;
    max-height: none;
  }
  /* Evita que o input/botao estoure largura do form (substitui o overflow:hidden) */
  .vmega-shell .cliente-public-search-v2.public-mobile-search > * {
    min-width: 0;
  }
  .vmega-shell .cliente-public-search-v2.public-mobile-search input[type="search"] {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--vmega-text);
    font-size: 13.5px;
    font-family: var(--vmega-font-sans);
    min-width: 0;
  }
  .vmega-shell .cliente-public-search-v2.public-mobile-search input[type="search"]::placeholder {
    color: var(--vmega-text-3);
  }
  .vmega-shell .cliente-public-search-v2.public-mobile-search .public-search-submit {
    background: var(--vmega-accent);
    color: var(--vmega-accent-fg);
    border: 0;
    border-radius: 7px;
    padding: 0 14px;
    height: 36px;
    font-weight: 700;
    font-size: 12px;
    font-family: var(--vmega-font-sans);
    cursor: pointer;
  }

  /* Section head: titulo um pouco menor em mobile */
  .vmega-shell .cliente-public-section-head-v2 {
    flex-wrap: wrap;
    padding: 0 0 16px;
    margin-bottom: 12px;
  }
  .vmega-shell .cliente-public-section-head-v2 h2 {
    font-size: 24px;
  }

  /* Vitrine info bar: empilha em mobile */
  .vmega-shell .vitrine-info-bar.public-vitrine-info {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .vmega-shell .vitrine-info-bar-close {
    margin-left: 0;
    align-self: flex-start;
  }

  /* Footer bottom: empilha colunas em mobile */
  .vmega-shell .public-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px var(--vmega-gutter);
  }
  .vmega-shell .vmega-footer-age {
    flex-wrap: wrap;
  }
}

@media (max-width: 420px) {
  .vmega-shell .cliente-public-section-head-v2 h2 {
    font-size: 22px;
  }
  .vmega-shell .vmega-card-body {
    padding: 12px;
    gap: 8px;
  }
  .vmega-shell .vmega-card-price strong {
    font-size: 22px;
  }
}

/* ─── VitrineMega/P3 — Paginação numerada ───────────────────────────────── */

.vmega-shell .vmega-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 24px auto 8px;
  padding: 0 var(--vmega-gutter);
  font-family: var(--vmega-font-sans);
}

.vmega-shell .vmega-page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--vmega-border);
  background: var(--vmega-surface);
  color: var(--vmega-text-2);
  border-radius: 8px;
  font-family: var(--vmega-font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease, transform 120ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.vmega-shell .vmega-page-btn:hover:not(:disabled) {
  border-color: var(--vmega-border-strong);
  color: var(--vmega-text);
}

.vmega-shell .vmega-page-btn:focus-visible {
  outline: 2px solid var(--vmega-accent);
  outline-offset: 2px;
}

.vmega-shell .vmega-page-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.vmega-shell .vmega-page-btn.is-current {
  background: var(--vmega-accent);
  color: var(--vmega-accent-fg);
  border-color: var(--vmega-accent);
  box-shadow: 0 4px 12px rgba(232, 181, 71, 0.25);
  cursor: default;
}

.vmega-shell .vmega-page-btn:disabled,
.vmega-shell .vmega-page-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.vmega-shell .vmega-page-prev,
.vmega-shell .vmega-page-next {
  font-size: 16px;
  font-weight: 500;
}

.vmega-shell .vmega-page-gap,
.vmega-shell .vmega-page-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--vmega-text-3);
  font-size: 14px;
  user-select: none;
}

.vmega-shell .vmega-page-info {
  padding: 0 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--vmega-text-2);
}

@media (max-width: 480px) {
  .vmega-shell .vmega-pagination {
    gap: 4px;
    margin: 18px auto 4px;
  }
  .vmega-shell .vmega-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }
}

/* ─── VitrineMega/Mobile-menu — contraste em light mode ──────────────────── */

/* O painel .public-mobile-sheet usa fundo dark fixo (azul-marinho) em qualquer
   data-theme. Em light mode, os labels h3 e small caiam pra --text-primary
   (#163042) — escuro sobre dark = sem contraste.
   Aqui forçamos contraste claro nos labels do sheet, independente do tema. */
.public-mobile-sheet h3,
.public-mobile-sheet h2,
.public-mobile-sheet > * h3,
.public-mobile-sheet small,
.public-mobile-sheet .public-mobile-sheet-section > h3 {
  color: rgba(244, 247, 251, 0.92);
}
.public-mobile-sheet section h3 {
  color: rgba(244, 247, 251, 0.7);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 10px;
}
.public-mobile-sheet small,
.public-mobile-sheet .public-mobile-sheet-eyebrow {
  color: rgba(244, 247, 251, 0.55);
}
[data-theme='light'] .public-mobile-sheet h3,
[data-theme='light'] .public-mobile-sheet h2,
[data-theme='light'] .public-mobile-sheet section h3,
[data-theme='light'] .public-mobile-sheet small {
  color: rgba(244, 247, 251, 0.92);
}
[data-theme='light'] .public-mobile-sheet section h3 {
  color: rgba(244, 247, 251, 0.7);
}
[data-theme='light'] .public-mobile-sheet small {
  color: rgba(244, 247, 251, 0.55);
}

/* CTA "Entrar na conta" do menu hambúrguer — usa accent gold do redesign
   pra harmonizar com o restante da vitrine (era azul puro em ambos os temas).
   Aplica em qualquer página que use o sheet (não só vmega), pra coerência. */
.public-mobile-sheet .public-mobile-sheet-cta.is-primary {
  background: #E8B547;
  color: #1A1A1A;
  border: 0;
  box-shadow: 0 4px 14px rgba(232, 181, 71, 0.30);
  transition: filter 150ms ease, transform 120ms ease, box-shadow 150ms ease;
}
.public-mobile-sheet .public-mobile-sheet-cta.is-primary span {
  color: #1A1A1A;
  font-weight: 800;
}
.public-mobile-sheet .public-mobile-sheet-cta.is-primary small {
  color: rgba(26, 26, 26, 0.72);
  font-weight: 600;
}
.public-mobile-sheet .public-mobile-sheet-cta.is-primary:hover,
.public-mobile-sheet .public-mobile-sheet-cta.is-primary:focus-visible {
  background: #E8B547;
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(232, 181, 71, 0.40);
}
.public-mobile-sheet .public-mobile-sheet-cta.is-primary:active {
  background: #D49E2D;
  transform: translateY(1px);
}
.public-mobile-sheet .public-mobile-sheet-cta.is-primary:focus-visible {
  outline: 2px solid #E8B547;
  outline-offset: 3px;
}

/* Ancora #ajuda (footer) — usada pelo botao "Ajuda" da topbar vmega.
 * scroll-margin-top compensa altura da topbar fixa e da uma folga
 * visual ao rolar. O pulse breve sinaliza ao usuario que ele "chegou"
 * no destino. scroll-behavior: smooth ja vem de cliente.css. */
#ajuda {
  scroll-margin-top: 96px;
}

@keyframes vmega-help-pulse {
  0%, 100% { box-shadow: none; }
  35% { box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.18); }
}

.public-footer:target {
  animation: vmega-help-pulse 1200ms ease-out 200ms 1;
}

@media (prefers-reduced-motion: reduce) {
  .public-footer:target { animation: none; }
}

@media (max-width: 720px) {
  #ajuda { scroll-margin-top: 64px; }
}