/* =========================================================================
   PixelaGo — Design System (Periwinkle Slate / Dark)
   Paleta: #9382ff  #B8B8FF  #C5D8FF  #0C0A16  #1A1A2E
   Inspirado no template "creative agency" (escuro) das referências.
   ========================================================================= */

:root, [data-theme="dark"] {
  /* Design system Zheus (dark, glass roxo) — acento #9382ff sobre #030014 */
  --pw-primary: #9382ff;
  --pw-primary-2: #ba9cff;
  --pw-accent: #cfb8ff;
  --pw-accent-text: #b9a6ff;
  --pw-bg: #030014;
  --pw-surface: #0e0c18;
  --pw-surface-2: #14111f;
  --pw-card-grad: linear-gradient(225deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.0) 100%);
  --pw-elev: rgba(255, 255, 255, 0.04);
  --pw-elev-soft: rgba(255, 255, 255, 0.025);
  --pw-elev-2: rgba(255, 255, 255, 0.07);
  --pw-line: rgba(255, 255, 255, 0.08);
  --pw-line-strong: rgba(255, 255, 255, 0.14);
  --pw-text: #ffffff;
  --pw-muted: rgba(255, 255, 255, 0.55);
  --pw-muted-2: rgba(255, 255, 255, 0.3);
  --pw-glow: rgba(147, 130, 255, 0.45);
  --pw-topbar-bg: rgba(6, 4, 16, 0.72);
  --pw-nav-bg: rgba(10, 8, 20, 0.7);
  --pw-scrim: rgba(3, 0, 20, 0.7);
  --pw-grid-line: rgba(255, 255, 255, 0.025);
  --pw-text-grad: linear-gradient(180deg, #fff 0%, #fff 55%, rgba(255, 255, 255, 0.6) 100%);
  --pw-grad-pw: linear-gradient(120deg, #cfb8ff, #ba9cff 55%, #9382ff);
  --pw-hero-grad: radial-gradient(60% 100% at 50% 0%, rgba(147, 130, 255, 0.16), transparent 70%),
    linear-gradient(160deg, #0b0820, #030014);
  --pw-promo-grad: radial-gradient(70% 140% at 100% 0%, rgba(147, 130, 255, 0.12), transparent 60%),
    linear-gradient(160deg, #0c0922, #030014);
  --pw-card-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(186, 156, 255, 0.06);
  --pw-watermark: rgba(186, 156, 255, 0.07);
  --pw-thumb-2: #0c0a18;
  --pw-radius: 16px;
  --header-h: 132px;
}

/* Borda em gradiente sutil (assinatura do design system Zheus) ----------- */
.border-gradient { position: relative; }
.border-gradient::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  background: linear-gradient(225deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

/* ===================== TEMA CLARO ====================== */
[data-theme="light"] {
  --pw-primary: #5b53e6;
  --pw-primary-2: #b8b8ff;
  --pw-accent: #8ea8ff;
  --pw-accent-text: #4a40c9;
  --pw-bg: #ebedf8;
  --pw-surface: #ffffff;
  --pw-surface-2: #f1f3fd;
  --pw-card-grad: #ffffff;
  --pw-elev: #f3f5fd;
  --pw-elev-soft: #ffffff;
  --pw-elev-2: #eaedfa;
  --pw-line: rgba(26, 26, 46, 0.1);
  --pw-line-strong: rgba(26, 26, 46, 0.18);
  --pw-text: #15142b;
  --pw-muted: #5a5a78;
  --pw-muted-2: #8a8aa6;
  --pw-glow: rgba(147, 130, 255, 0.35);
  --pw-topbar-bg: rgba(255, 255, 255, 0.85);
  --pw-nav-bg: rgba(255, 255, 255, 0.93);
  --pw-scrim: rgba(20, 20, 43, 0.42);
  --pw-grid-line: rgba(26, 26, 46, 0.05);
  --pw-text-grad: linear-gradient(180deg, #15142b 0%, #15142b 45%, rgba(21, 20, 43, 0.62) 100%);
  --pw-grad-pw: linear-gradient(120deg, #9382ff, #6f5bf0 55%, #4a40c9);
  --pw-hero-grad: radial-gradient(80% 120% at 0% 0%, rgba(147, 130, 255, 0.16), transparent 55%),
    radial-gradient(70% 110% at 100% 100%, rgba(140, 123, 255, 0.12), transparent 55%),
    linear-gradient(160deg, #ffffff, #e7eaf6);
  --pw-promo-grad: radial-gradient(70% 140% at 100% 0%, rgba(147, 130, 255, 0.14), transparent 60%),
    linear-gradient(160deg, #ffffff, #e7eaf6);
  --pw-card-shadow: 0 18px 40px -24px rgba(70, 70, 150, 0.4);
  --pw-watermark: rgba(70, 70, 150, 0.08);
  --pw-thumb-2: #2a2750;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Evita o "mini zoom" no toque: sem double-tap-zoom (touch-action) e sem o
   auto-zoom do iOS ao focar campos (font-size >= 16px nos inputs). */
html, body { touch-action: manipulation; }
input, textarea, select { font-size: 16px; }
body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  background: var(--pw-bg);
  color: var(--pw-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 80px;
}
.font-manrope {
  font-family: "Manrope", "Inter", sans-serif;
}
.font-mono {
  font-family: "Geist Mono", "Space Mono", ui-monospace, monospace;
}
::selection {
  background: rgba(147, 130, 255, 0.5);
  color: #fff;
}

/* Fundo com brilho ambiente -------------------------------------------- */
.app-aura {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 50% at 50% -5%, rgba(147, 130, 255, 0.1), transparent 70%),
    radial-gradient(40% 40% at 8% 4%, rgba(147, 130, 255, 0.06), transparent 60%),
    radial-gradient(40% 40% at 95% 100%, rgba(186, 156, 255, 0.05), transparent 60%);
}
.app-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
  background-image:
    linear-gradient(var(--pw-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--pw-grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 15%, #000 0%, transparent 80%);
}

/* Scrollbar ------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.12);
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===================== ANIMAÇÕES ====================== */
@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes columnReveal {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  100% {
    clip-path: inset(0 0 0% 0);
    opacity: 1;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulseDot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}
@keyframes shimmer {
  100% {
    background-position: 200% 0;
  }
}
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.94) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes riderMove {
  0% {
    left: -8%;
  }
  100% {
    left: 100%;
  }
}
@keyframes ringPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(147, 130, 255, 0.45);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(147, 130, 255, 0);
  }
}

.fade-in {
  animation: fadeSlideIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.fade-in.d1 { animation-delay: 0.06s; }
.fade-in.d2 { animation-delay: 0.12s; }
.fade-in.d3 { animation-delay: 0.18s; }
.fade-in.d4 { animation-delay: 0.24s; }
.fade-in.d5 { animation-delay: 0.3s; }
.fade-in.d6 { animation-delay: 0.36s; }

/* ===================== LAYOUT ====================== */
.shell {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.section-label {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pw-accent-text);
  font-weight: 700;
}
.h-title {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.text-grad {
  background: var(--pw-text-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-grad-pw {
  background: var(--pw-grad-pw);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===================== TOPO / NAV ====================== */
/* ===== TOPBAR INTEGRADO (estilo app delivery — roxo, conectado ao hero) ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background:
    radial-gradient(120% 140% at 0% 0%, #7b2ff7 0%, transparent 60%),
    radial-gradient(120% 160% at 100% 0%, #c026d3 0%, transparent 55%),
    linear-gradient(180deg, #6a23e0, #7b2ff7);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "user actions" "search search";
  align-items: center;
  gap: 12px;
  padding: 12px 16px 16px;
  max-width: 1280px;
  margin: 0 auto;
}
.tb-user { grid-area: user; display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; overflow: hidden; }
.tb-actions { grid-area: actions; }
.tb-search { grid-area: search; }
/* Desktop: header em linha única (usuário · busca centralizada · ações) */
@media (min-width: 769px) {
  .topbar-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "user search actions";
    gap: 24px;
    padding: 14px 28px;
  }
  .tb-search { justify-self: center; width: 100%; max-width: 600px; }
}
.tb-avatar {
  position: relative; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.18); color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.55);
  overflow: hidden;
}
.tb-avatar .avatar-initials { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 15px; color: #fff; }
.tb-dot {
  position: absolute; top: -1px; right: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #ff3b5c; border: 2px solid #7b2ff7;
}
.tb-name {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: "Manrope", sans-serif; font-weight: 800; font-size: 19px;
  letter-spacing: -0.02em; color: #fff; white-space: nowrap;
}
.tb-name svg { opacity: 0.9; }
.tb-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.tb-icon {
  position: relative;
  width: 42px; height: 42px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, 0.16);
  transition: 0.18s;
}
.tb-icon:hover { background: rgba(255, 255, 255, 0.26); transform: translateY(-1px); }
.tb-icon:active { transform: scale(0.94); }
.tb-icon.tb-discount { background: rgba(74, 222, 128, 0.22); color: #bbf7d0; }
.tb-icon.tb-discount:hover { background: rgba(74, 222, 128, 0.32); }
.tb-icon .tb-dot { top: 4px; right: 4px; }
.tb-icon .tb-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px;
  background: #ff3b5c; color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #7b2ff7;
}
.tb-search { width: 100%; }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.brand-mark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 30px;
  height: 30px;
}
.brand-mark span {
  border-radius: 5px;
}
.brand-mark span:nth-child(1) { background: var(--pw-primary); }
.brand-mark span:nth-child(2) { background: var(--pw-surface-2); }
.brand-mark span:nth-child(3) { background: var(--pw-primary-2); }
.brand-mark span:nth-child(4) {
  background: var(--pw-accent);
  box-shadow: 0 0 12px rgba(186, 156, 255, 0.5);
}
.brand-name {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.03em;
}
.brand-name b {
  color: var(--pw-accent-text);
}

.addr-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--pw-line);
  border-radius: 12px;
  background: var(--pw-elev-soft);
  cursor: pointer;
  transition: 0.2s;
  min-width: 0;
}
.addr-pill:hover {
  border-color: var(--pw-line-strong);
  background: var(--pw-elev-2);
}
.addr-pill .a-label {
  font-size: 10px;
  color: var(--pw-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.addr-pill .a-value {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Busca: pílula glass que acompanha a dinâmica roxa do topbar */
.searchbar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 18px rgba(40, 10, 80, 0.18);
  transition: 0.2s;
}
.searchbar:focus-within {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.42);
}
.searchbar .sb-ic { display: inline-flex; color: rgba(255, 255, 255, 0.85); flex-shrink: 0; }
.searchbar input {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 16px;
  font-family: "Inter", sans-serif;
}
.searchbar input::placeholder { color: rgba(255, 255, 255, 0.72); }

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  border: 1px solid var(--pw-line);
  background: var(--pw-elev);
  backdrop-filter: blur(12px);
  color: var(--pw-text);
  cursor: pointer;
  transition: 0.2s cubic-bezier(.6, .6, 0, 1);
  flex-shrink: 0;
}
.icon-btn:hover {
  color: #fff;
  background: var(--pw-elev-2);
  transform: translateY(-1px);
}
.badge-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--pw-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px var(--pw-glow);
}

/* ===================== BOTÕES ====================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: 0.2s cubic-bezier(.6, .6, 0, 1);
  font-family: "Inter", "Manrope", sans-serif;
  letter-spacing: -0.01em;
  user-select: none;
}
.btn:active {
  transform: translateY(0) scale(0.99);
}
.btn-primary {
  color: #f4f0ff;
  background: linear-gradient(180deg, rgba(147, 130, 255, 0.95), rgba(124, 105, 255, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 24px -10px var(--pw-glow);
}
.btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 12px 30px -8px var(--pw-glow);
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.btn-ghost {
  color: var(--pw-text);
  border-color: var(--pw-line);
  background: var(--pw-elev);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover {
  color: var(--pw-text);
  background: var(--pw-elev-2);
  transform: translateY(-1px);
}
.btn-block {
  width: 100%;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Glow button (estilo referência) */
.btn-glow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 26px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--pw-elev-2);
  border: none;
  font-family: "Manrope", sans-serif;
}
.btn-glow .spin-border {
  position: absolute;
  inset: -150%;
  background: conic-gradient(from 90deg at 50% 50%, transparent 0%, transparent 80%, var(--pw-primary) 100%);
  animation: spin 4s linear infinite;
}
.btn-glow .inner {
  position: absolute;
  inset: 1px;
  border-radius: 11px;
  background: #0d0b1a;
}
.btn-glow .label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

/* ===================== CHIPS / BADGES ====================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--pw-line);
  background: var(--pw-elev);
  backdrop-filter: blur(12px);
  color: var(--pw-muted);
  cursor: pointer;
  transition: 0.2s cubic-bezier(.6, .6, 0, 1);
  white-space: nowrap;
}
.chip:hover {
  color: #fff;
  background: var(--pw-elev-2);
}
.chip.active {
  background: rgba(147, 130, 255, 0.14);
  border-color: rgba(147, 130, 255, 0.3);
  color: #fff;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(147, 130, 255, 0.14);
  color: var(--pw-accent-text);
  border: 1px solid rgba(147, 130, 255, 0.22);
}
.tag.green {
  background: rgba(74, 222, 128, 0.12);
  color: #6ee7a8;
  border-color: rgba(74, 222, 128, 0.22);
}
.tag.amber {
  background: rgba(255, 196, 102, 0.12);
  color: #ffd28a;
  border-color: rgba(255, 196, 102, 0.22);
}
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pw-accent);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), var(--pw-elev-soft));
  border: 1px solid var(--pw-line-strong);
  backdrop-filter: blur(6px);
}
.pill-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--pw-primary);
  box-shadow: 0 0 8px var(--pw-glow);
  animation: pulseDot 1.6s ease-in-out infinite;
}

/* ===================== CARDS ====================== */
.card {
  background: var(--pw-card-grad);
  border: 1px solid var(--pw-line);
  border-radius: var(--pw-radius);
  backdrop-filter: blur(12px);
  transition: 0.25s cubic-bezier(.6, .6, 0, 1);
}
.promo-card {
  background: var(--pw-promo-grad);
}
.card-hover {
  cursor: pointer;
}
.card-hover:hover {
  border-color: rgba(186, 156, 255, 0.18);
  transform: translateY(-3px);
  box-shadow: var(--pw-card-shadow);
}

/* Thumbnail com gradiente + ícone */
.thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.18) 1px, transparent 0);
  background-size: 16px 16px;
  opacity: 0.35;
  mix-blend-mode: overlay;
}
.thumb .glyph {
  color: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
  z-index: 1;
}

/* Estúdio (store) card */
.store-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.store-thumb {
  height: 132px;
  width: 100%;
}
.store-logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 2px solid var(--pw-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -34px;
  position: relative;
  z-index: 2;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6);
}
.meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--pw-muted);
}
.dot-sep {
  width: 3px;
  height: 3px;
  border-radius: 99px;
  background: var(--pw-muted-2);
}
.star {
  color: #ffd166;
}

/* Categoria card */
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 8px;
  border-radius: 14px;
  border: 1px solid var(--pw-line);
  background: var(--pw-elev-soft);
  cursor: pointer;
  transition: 0.2s;
  text-align: center;
}
.cat-card:hover {
  border-color: rgba(147, 130, 255, 0.45);
  background: rgba(147, 130, 255, 0.07);
  transform: translateY(-3px);
}
.cat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.cat-card .cat-name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pw-text);
}

/* Produto (menu) row */
.prod-row {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--pw-line);
  border-radius: 14px;
  background: var(--pw-elev-soft);
  cursor: pointer;
  transition: 0.18s;
}
.prod-row:hover {
  border-color: rgba(147, 130, 255, 0.4);
  background: rgba(147, 130, 255, 0.05);
}
.prod-thumb {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  flex-shrink: 0;
}
.prod-add {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--pw-bg);
  border: 1px solid var(--pw-primary);
  color: var(--pw-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.18s;
}
.prod-add:hover {
  background: var(--pw-primary);
  color: #fff;
}

/* ===================== HERO ====================== */
.hero {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--pw-line);
  padding: 56px 40px;
  background: var(--pw-hero-grad);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--pw-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--pw-grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 80% 50%, #000, transparent 70%);
  opacity: 0.6;
}

/* ===================== MODAL / DRAWER ====================== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--pw-scrim);
  backdrop-filter: blur(6px);
  display: flex;
  opacity: 0;
  transition: opacity 0.2s;
}
.overlay.show {
  opacity: 1;
}
.modal {
  margin: auto;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--pw-surface);
  border: 1px solid var(--pw-line-strong);
  border-radius: 20px;
  animation: popIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.drawer {
  margin-left: auto;
  width: 100%;
  max-width: 440px;
  height: 100%;
  background: var(--pw-surface);
  border-left: 1px solid var(--pw-line-strong);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.overlay.show .drawer {
  transform: translateX(0);
}

/* Opções de personalização */
.opt-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--pw-line);
  border-radius: 12px;
  cursor: pointer;
  transition: 0.16s;
}
.opt-choice:hover {
  border-color: var(--pw-line-strong);
}
.opt-choice.sel {
  border-color: var(--pw-primary);
  background: rgba(147, 130, 255, 0.1);
}
.opt-radio {
  width: 18px;
  height: 18px;
  border-radius: 99px;
  border: 2px solid var(--pw-muted-2);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.opt-choice.sel .opt-radio {
  border-color: var(--pw-primary);
}
.opt-choice.sel .opt-radio::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--pw-primary);
}

/* Stepper de quantidade */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--pw-line-strong);
  border-radius: 12px;
  overflow: hidden;
}
.qty button {
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  color: var(--pw-text);
  font-size: 18px;
  cursor: pointer;
  transition: 0.15s;
}
.qty button:hover {
  background: rgba(147, 130, 255, 0.15);
  color: var(--pw-accent-text);
}
.qty span {
  min-width: 40px;
  text-align: center;
  font-weight: 700;
}

/* ===================== FORM ====================== */
.field {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--pw-line);
  background: var(--pw-elev);
  color: var(--pw-text);
  font-size: 16px;
  outline: none;
  transition: 0.18s;
  font-family: inherit;
}
.field:focus {
  border-color: var(--pw-primary);
  box-shadow: 0 0 0 3px rgba(147, 130, 255, 0.16);
}
.field-label {
  font-size: 12px;
  color: var(--pw-muted);
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}
.pay-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--pw-line);
  border-radius: 12px;
  cursor: pointer;
  transition: 0.16s;
}
.pay-opt.sel {
  border-color: var(--pw-primary);
  background: rgba(147, 130, 255, 0.08);
}

/* ===================== TIMELINE PEDIDO ====================== */
.track-map {
  position: relative;
  height: 160px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--pw-line);
  background:
    radial-gradient(60% 100% at 20% 100%, rgba(147, 130, 255, 0.25), transparent 60%),
    linear-gradient(160deg, #16142b, #0c0a16);
}
.track-road {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--pw-line-strong) 0 14px, transparent 14px 28px);
}
.track-rider {
  position: absolute;
  top: calc(50% - 22px);
  width: 44px;
  height: 44px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: var(--pw-primary);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(147, 130, 255, 0.2);
  animation: riderMove 6s linear infinite;
}
.tl {
  position: relative;
  padding-left: 30px;
}
.tl-item {
  position: relative;
  padding-bottom: 26px;
}
.tl-item:last-child {
  padding-bottom: 0;
}
.tl-item::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 22px;
  bottom: -4px;
  width: 2px;
  background: var(--pw-line);
}
.tl-item:last-child::before {
  display: none;
}
.tl-dot {
  position: absolute;
  left: -30px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 99px;
  border: 2px solid var(--pw-muted-2);
  background: var(--pw-bg);
}
.tl-item.done .tl-dot {
  border-color: var(--pw-primary);
  background: var(--pw-primary);
}
.tl-item.done::before {
  background: var(--pw-primary);
}
.tl-item.current .tl-dot {
  border-color: var(--pw-primary);
  background: var(--pw-primary);
  animation: ringPulse 1.6s ease-out infinite;
}

/* ============ BOTTOM NAV — pílula flutuante glass (estilo Zheus) ========= */
/* Dock flutuante — componente copiado do sistema Zheus (mobile-dock):
   pílula glass, borda em gradiente roxo (transparente→roxo→transparente),
   itens circulares icon-only e botão "Início" com fundo destacado. */
.bottom-nav {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(20, 16, 36, 0.8);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
/* Borda em gradiente: transparente → roxo → transparente (assinatura Zheus) */
.bottom-nav::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 5%, rgba(147, 130, 255, 0.4) 35%, rgba(186, 156, 255, 0.6) 50%, rgba(147, 130, 255, 0.4) 65%, transparent 95%);
  z-index: -1;
  padding: 1.5px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.bn-item {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
}
.bn-item:active { transform: scale(0.9); }
.bn-item.active { color: var(--pw-primary-2); }
.bn-item svg { width: 20px; height: 20px; }
/* Botão "Início" — círculo com fundo, como o dock-item-home do Zheus */
.bn-item.bn-home {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.06);
}
.bn-item.bn-home.active {
  background: rgba(147, 130, 255, 0.25);
  color: var(--pw-primary-2);
  box-shadow: 0 0 12px rgba(147, 130, 255, 0.15);
}
.bn-item .bn-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--pw-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(20, 16, 36, 0.95);
}

/* ===================== TOAST ====================== */
.toast-wrap {
  position: fixed;
  z-index: 80;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: max-content;
  max-width: 92vw;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--pw-surface-2);
  border: 1px solid var(--pw-line-strong);
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: 600;
  animation: popIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.toast .ic {
  color: var(--pw-accent-text);
}

/* ===================== UTIL ====================== */
.skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 37%, rgba(255, 255, 255, 0.04) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 8px;
}
.divider {
  height: 1px;
  background: var(--pw-line);
  border: none;
  margin: 0;
}
.muted {
  color: var(--pw-muted);
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 60px 20px;
  color: var(--pw-muted);
}
.empty-state .ei {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(147, 130, 255, 0.1);
  border: 1px solid var(--pw-line);
  color: var(--pw-accent-text);
}

/* Marquee de selos */
.marquee {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: marq 28s linear infinite;
}
@keyframes marq {
  to {
    transform: translateX(-50%);
  }
}
.marquee span {
  font-family: "Geist Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pw-muted);
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Grids */
.grid-stores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.grid-cats {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}

/* ===================== RESPONSIVO ====================== */
@media (max-width: 900px) {
  .grid-cats {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Grid do checkout — mobile-first: 1 coluna por padrão (nunca estoura a tela),
   2 colunas só no desktop. minmax(0,..) impede o conteúdo de forçar overflow. */
.co-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.co-grid > * { min-width: 0; }
.co-summary { position: static; }
@media (min-width: 961px) {
  .co-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .co-summary { position: sticky; top: 90px; }
}
@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: 1fr !important; }
}
/* Checkout é um fluxo focado: esconde o dock e dá folga no fim p/ caber tudo */
body[data-route="/checkout"] .bottom-nav { display: none !important; }
.checkout-shell { padding-bottom: 40px; }
/* Com overlay/sacola aberto, o dock some (o botão fica só no drawer) */
body.overlay-open .bottom-nav { display: none !important; }
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
  .bottom-nav {
    display: flex;
  }
  .topbar-inner {
    gap: 12px;
    padding: 10px 14px 14px;
  }
  .tb-name { font-size: 17px; }
  .tb-avatar { width: 36px; height: 36px; }
  .tb-actions { gap: 8px; }
  .tb-icon { width: 38px; height: 38px; border-radius: 12px; }
  .searchbar { padding: 13px 16px; }
  .hero {
    padding: 36px 22px;
  }
  .modal {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    margin: auto 0 0 0;
    max-height: 94vh;
  }
  .drawer {
    max-width: 100%;
  }
  .grid-stores {
    grid-template-columns: 1fr;
  }
  .prod-thumb {
    width: 76px;
    height: 76px;
  }
}
@media (max-width: 460px) {
  .grid-cats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===================== TRANSIÇÃO SUAVE DE TEMA ====================== */
body,
.topbar,
.bottom-nav,
.card,
.searchbar,
.icon-btn,
.chip,
.btn-ghost,
.field,
.prod-row,
.cat-card,
.opt-choice,
.pay-opt,
.addr-pill,
.qty,
.tag,
.pill-badge,
.store-logo {
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease,
    box-shadow 0.28s ease;
}

/* ===================== AJUSTES FINOS — TEMA CLARO ====================== */
/* Cartões ganham leve sombra para destacar do fundo claro */
[data-theme="light"] .card {
  box-shadow: 0 1px 2px rgba(20, 20, 60, 0.04), 0 8px 24px -18px rgba(40, 40, 90, 0.25);
}
[data-theme="light"] .card-hover:hover {
  border-color: rgba(147, 130, 255, 0.5);
  box-shadow: 0 14px 34px -18px rgba(70, 70, 150, 0.4);
}
[data-theme="light"] .icon-btn,
[data-theme="light"] .searchbar,
[data-theme="light"] .addr-pill,
[data-theme="light"] .btn-ghost {
  box-shadow: 0 1px 2px rgba(20, 20, 60, 0.04);
}

/* Tags / selos legíveis no claro */
[data-theme="light"] .tag {
  background: rgba(147, 130, 255, 0.12);
  border-color: rgba(147, 130, 255, 0.3);
}
[data-theme="light"] .tag.green {
  background: rgba(22, 163, 110, 0.13);
  color: #137a52;
  border-color: rgba(22, 163, 110, 0.3);
}
[data-theme="light"] .tag.amber {
  background: rgba(186, 120, 15, 0.13);
  color: #9a6710;
  border-color: rgba(186, 120, 15, 0.32);
}
[data-theme="light"] .pill-badge {
  background: rgba(147, 130, 255, 0.1);
  border-color: rgba(147, 130, 255, 0.24);
  color: var(--pw-accent-text);
}

/* Busca neon do header no tema claro */
[data-theme="light"] .searchbar-neon .sb-fill { background: rgba(255, 255, 255, 0.94); }
@media (prefers-reduced-motion: reduce) {
  .searchbar-neon .sb-spin { animation: none; background: conic-gradient(from 225deg, rgba(147, 130, 255, 0.4), rgba(147, 130, 255, 0.1)); }
}

/* Estrela e watermark */
[data-theme="light"] .star {
  color: #e0a200;
}

/* Scrollbar no claro */
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(26, 26, 46, 0.16);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 26, 46, 0.3);
}

/* Mapa de acompanhamento: versão clara */
[data-theme="light"] .track-map {
  background: radial-gradient(60% 100% at 20% 100%, rgba(147, 130, 255, 0.16), transparent 60%),
    linear-gradient(160deg, #ffffff, #e7eaf6);
}
[data-theme="light"] .track-rider {
  box-shadow: 0 0 0 6px rgba(147, 130, 255, 0.16);
}

/* Aura de fundo um pouco mais sutil no claro */
[data-theme="light"] .app-aura {
  opacity: 0.55;
}

/* Bloco decorativo do logo no claro */
[data-theme="light"] .brand-mark span:nth-child(2) {
  background: #e6e8f5;
}

/* Botão glow mantém estética escura (pílula de acento) em ambos os temas */
[data-theme="light"] .btn-glow .inner {
  background: #16142b;
}

/* ===================== V2 — CATÁLOGO / PRODUTO / ADMIN / CHAT ============ */
.grid-prods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 18px;
}
.prod-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.prod-card-thumb {
  height: 150px;
  position: relative;
}
.thumb-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(12, 10, 22, 0.6);
  color: #fff;
  backdrop-filter: blur(4px);
}
/* botão + do card (sobrescreve o .prod-add absoluto antigo) */
.prod-add {
  position: static;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pw-elev);
  border: 1px solid var(--pw-primary);
  color: var(--pw-accent-text);
  flex-shrink: 0;
  transition: 0.18s;
}
.prod-card:hover .prod-add {
  background: var(--pw-primary);
  color: #fff;
}

.prod-detail {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 28px;
  align-items: start;
}

/* Preview / mockups */
.mock {
  border-radius: 16px;
  overflow: hidden;
}
.mock-generic {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  color: #fff;
  text-align: center;
  position: relative;
}
.mock-generic::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.18) 1px, transparent 0);
  background-size: 16px 16px;
  opacity: 0.3;
}
.mock-logo {
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
  border-radius: 10px;
  z-index: 1;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.mock-logo.placeholder {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px dashed rgba(255, 255, 255, 0.4);
  color: #fff;
}
.mock-name {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 22px;
  z-index: 1;
}
.mock-tagline {
  font-size: 12px;
  opacity: 0.85;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
/* Placa PIX — sempre clara (representa o produto físico branco) */
.mock-plate {
  background: #ffffff;
  color: #13131f;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.mock-plate-head {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}
.mock-plate .mock-logo {
  max-width: 46px;
  max-height: 46px;
}
.mock-plate .mock-logo.placeholder {
  width: 46px;
  height: 46px;
  background: #eef0fb;
  border-color: #c9cdf0;
  color: #9382ff;
}
.mock-pixtitle {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #9382ff;
}
.mock-plate .mock-name {
  font-size: 15px;
  color: #13131f;
}
.mock-plate .mock-name.muted {
  color: #8a8aa6;
}
.mock-plate-foot {
  font-size: 11px;
  color: #6b6b85;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* QR */
.qr-box {
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
}
.qr-img {
  display: block;
  border-radius: 4px;
}
.qr-fallback {
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  color: #6b6b85;
  font-size: 11px;
  padding: 22px;
  width: 168px;
}
.copia-cola {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--pw-elev);
  border: 1px solid var(--pw-line);
  border-radius: 10px;
  padding: 8px 8px 8px 12px;
}
.copia-cola code {
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  font-family: "Space Mono", monospace;
  color: var(--pw-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Upload */
.upload {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1.5px dashed var(--pw-line-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: 0.18s;
  font-size: 13.5px;
  color: var(--pw-muted);
}
.upload:hover {
  border-color: var(--pw-primary);
  background: rgba(147, 130, 255, 0.06);
  color: var(--pw-text);
}

/* Admin */
.admin-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

/* Chat */
.bubble-row {
  display: flex;
}
.bubble-row.me {
  justify-content: flex-end;
}
.bubble {
  max-width: 78%;
  padding: 10px 13px 17px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
  position: relative;
  background: var(--pw-elev-2);
  border: 1px solid var(--pw-line);
  word-break: break-word;
}
.bubble.me {
  background: linear-gradient(135deg, var(--pw-primary), #7c69ff);
  color: #fff;
  border-color: transparent;
}
.bubble-time {
  position: absolute;
  right: 10px;
  bottom: 4px;
  font-size: 9px;
  opacity: 0.65;
}
.chat-note {
  font-size: 11.5px;
  color: var(--pw-muted);
  background: var(--pw-elev);
  border: 1px solid var(--pw-line);
  border-radius: 10px;
  padding: 9px 12px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
}

@media (max-width: 840px) {
  .prod-detail {
    grid-template-columns: 1fr;
  }
  .prod-detail > div:first-child .card {
    position: static !important;
  }
}
@media (max-width: 760px) {
  .admin-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Adições: autenticação, conta, spinner (integração com backend) ──────── */
.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--pw-line-strong);
  border-top-color: var(--pw-primary);
  animation: pw-spin 0.7s linear infinite;
}
.spinner-sm {
  width: 15px;
  height: 15px;
  border-width: 2px;
  display: inline-block;
  vertical-align: -2px;
}
@keyframes pw-spin {
  to { transform: rotate(360deg); }
}
.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9382ff, #7c69ff);
  color: #fff;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.3px;
}
.form-error {
  background: rgba(255, 80, 80, 0.1);
  border: 1px solid rgba(255, 80, 80, 0.35);
  color: #ff8585;
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.4;
}

/* ── Imagens de produto, galeria e nota de atacado ───────────────────────── */
.prod-card-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pw-elev); }
.prod-card-thumb img, .prod-media, .prod-media img { width: 100%; height: 100%; object-fit: cover; }
.prod-gallery-main {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden;
  background: var(--pw-elev); display: flex; align-items: center; justify-content: center;
}
.prod-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-strip {
  display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px;
}
.gallery-strip::-webkit-scrollbar { height: 0; }
.gallery-thumb {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; object-fit: cover;
  cursor: pointer; border: 2px solid transparent; opacity: 0.7; transition: opacity .15s, border-color .15s;
}
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.active { border-color: var(--pw-primary); opacity: 1; }
.tier-note {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.4;
  color: var(--pw-accent-text); background: var(--pw-elev-soft);
  border: 1px solid var(--pw-line); border-radius: 12px; padding: 10px 13px; margin-bottom: 16px;
}

/* ── Home estilo 99food: hero banner + categorias em scroll horizontal ────── */
@keyframes heroSpin { 0% { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* HERO conectado ao topbar: banner full-width, curva embaixo, card de entrega
   sobreposto (o "retrair" do print). A arte é gerada por IA (texto embutido). */
.home-hero {
  position: relative;
  width: 100%;
  /* puxa o banner para encostar no topbar (sem respiro) */
  margin-top: -1px;
  background: #7b2ff7;
  border-radius: 0 0 28px 28px;
}
.hero-banner {
  display: block; position: relative; width: 100%; line-height: 0;
  cursor: pointer; overflow: hidden;
  border-radius: 0 0 28px 28px;
}
.hero-banner img { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.hero-banner:hover img { transform: scale(1.02); }
@media (min-width: 769px) {
  /* Desktop: hero vira um card contido e arredondado (não colado no topbar) */
  .home-hero { max-width: 1080px; margin: 20px auto 0; border-radius: 24px; overflow: hidden; }
  .hero-banner { border-radius: 24px; }
}
.hero-banner-tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(12, 10, 22, 0.66); backdrop-filter: blur(8px);
  border: 1px solid var(--pw-line-strong); color: var(--pw-text);
  font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 99px;
}
.hero-banner-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.home-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px; padding: 0 4px; }
@media (max-width: 720px) {
  .home-stats { gap: 18px; justify-content: space-between; }
}

/* Carrossel full-bleed: respiro inicial à esquerda, rola até a borda da tela */
.cat-banners {
  display: flex; gap: 14px; overflow-x: auto;
  margin: 0 -20px; padding: 4px 20px 14px;
  scroll-snap-type: x mandatory; scroll-padding-left: 20px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.cat-banners::-webkit-scrollbar { display: none; }

/* ---- Banner promocional: imagem única (arte + texto embutidos por IA) ---- */
.promo-banner {
  position: relative; flex: 0 0 auto; width: 360px; max-width: 84vw; aspect-ratio: 16 / 9;
  border-radius: 18px; overflow: hidden; cursor: pointer; scroll-snap-align: start;
  border: 1px solid var(--pw-line); box-shadow: var(--pw-card-shadow);
  background: linear-gradient(118deg, #1A1A2E, #9382ff 130%);
  transition: transform .18s ease, box-shadow .18s ease;
}
.promo-banner:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.32); }
.pb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.promo-banner:hover .pb-bg { transform: scale(1.04); }
/* fallback (só aparece se a imagem falhar) */
.pb-fallback { position: absolute; inset: 0; display: none; align-items: center; padding: 20px; color: #fff; }
.promo-banner.pb-nobg .pb-fallback { display: flex; }
.pb-title { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 23px; line-height: 1.05; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
@media (max-width: 720px) { .promo-banner { width: 300px; } .pb-title { font-size: 21px; } }

/* ---- Tela de produto: hierarquia premium -------------------------------- */
.pd-info { display: flex; flex-direction: column; }
.pd-cat { display: inline-flex; align-items: center; gap: 3px; align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--pw-accent-text); cursor: pointer; margin-bottom: 8px; }
.pd-cat:hover { filter: brightness(1.12); }
.pd-title { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 27px; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 9px; }
.pd-rating { display: flex; align-items: center; gap: 7px; font-size: 14px; margin-bottom: 12px; }
.pd-rating .fc-star { color: var(--pw-text); display: inline-flex; }
.pd-rating b { font-weight: 800; }
.pd-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.pd-price-block { padding: 15px 16px; border: 1px solid var(--pw-line); border-radius: 14px; background: var(--pw-elev-soft); margin-bottom: 16px; }
.pd-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pd-eta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--pw-text); background: var(--pw-elev-2); border: 1px solid var(--pw-line); padding: 5px 10px; border-radius: 99px; }
.pd-ship { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #3ccb8c; margin-top: 10px; font-weight: 600; }
[data-theme="light"] .pd-ship { color: #12895c; }
.pd-desc { margin-bottom: 18px; }
.pd-desc-text { font-size: 13.5px; line-height: 1.62; color: var(--pw-muted); white-space: pre-line; margin: 0; }
.pd-desc-text.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pd-desc-toggle { margin-top: 8px; background: none; border: none; padding: 0; cursor: pointer; color: var(--pw-accent-text); font-size: 13px; font-weight: 700; font-family: inherit; display: inline-flex; align-items: center; gap: 3px; }
.pd-desc-toggle:hover { filter: brightness(1.12); }
.pd-buy { display: flex; gap: 12px; align-items: center; margin-top: 22px; }
.pd-trust { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.pd-trust span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--pw-muted); }
.pd-trust span svg { color: var(--pw-accent-text); }
@media (max-width: 760px) { .pd-title { font-size: 23px; } }

/* ---- Gerador de mockup com IA (página do produto) ----------------------- */
.mockup-gen { background: var(--pw-promo-grad); }
.mockup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.mockup-result {
  position: relative; border: 1px solid var(--pw-line); border-radius: 16px;
  background: var(--pw-elev-soft); min-height: 240px; padding: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.mk-placeholder { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--pw-accent-text); }
.mk-img { width: 100%; max-width: 360px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; box-shadow: var(--pw-card-shadow); animation: popIn .3s cubic-bezier(.16,1,.3,1) both; }
@media (max-width: 760px) { .mockup-grid { grid-template-columns: 1fr; } .mockup-result { min-height: 200px; } }

/* botão "gerar com IA" — leve destaque roxo */
.ai-btn { border-color: var(--pw-line-strong) !important; }
.ai-btn:hover { color: var(--pw-accent-text); border-color: var(--pw-primary) !important; }

/* logo Doutor7 (substitui a marca antiga PixelaGo) */
.brand-logo { height: 30px; width: auto; display: block; }
@media (max-width: 720px) { .brand-logo { height: 26px; } }

/* =========================================================================
   SISTEMA DE CARDS / CONTAINERS / CARROSSÉIS — fiel ao layout 99Food
   (anatomia idêntica; skin com a identidade Doutor7 / Periwinkle)
   ========================================================================= */

/* ---- Cabeçalho de seção com "Ver mais ›" -------------------------------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sec-head .sec-title { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; line-height: 1.15; }
.sec-head .sec-sub { display: block; font-size: 13px; color: var(--pw-muted); margin-top: 3px; font-weight: 500; }
.sec-more { display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; font-weight: 700; color: var(--pw-accent-text); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.sec-more:hover { filter: brightness(1.12); }

/* ---- Trilho horizontal de carrossel ------------------------------------- */
.h-scroll {
  display: flex; gap: 14px; overflow-x: auto;
  margin: 0 -20px; padding: 2px 20px 14px;
  scroll-snap-type: x proximity; scroll-padding-left: 20px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: start; }

/* ---- Tabs rápidas (estilo "Entrega grátis · No Horário") ---------------- */
.quick-tabs { display: flex; gap: 22px; overflow-x: auto; padding: 4px 2px 2px; }
.qtab { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--pw-muted); cursor: pointer; white-space: nowrap; padding-bottom: 8px; border-bottom: 2px solid transparent; transition: 0.18s; }
.qtab .qt-ic { display: inline-flex; }
.qtab.active { color: var(--pw-text); border-bottom-color: var(--pw-primary); }

/* ---- Categorias em círculo ---------------------------------------------- */
.cat-circle { flex: 0 0 auto; width: 88px; display: flex; flex-direction: column; align-items: center; gap: 9px; cursor: pointer; text-align: center; }
.cc-img { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: none; background: var(--pw-thumb-2); display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.cat-circle:hover .cc-img { transform: translateY(-3px); box-shadow: var(--pw-card-shadow); }
.cc-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-circle span { font-size: 12px; font-weight: 600; line-height: 1.18; color: var(--pw-text); }

/* ---- Destaques em quadrado arredondado (estilo "Marcas famosas") -------- */
.brand-sq { flex: 0 0 auto; width: 94px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; text-align: center; }
.bs-img { width: 76px; height: 76px; border-radius: 20px; overflow: hidden; border: 1px solid var(--pw-line); background: var(--pw-thumb-2); display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.brand-sq:hover .bs-img { border-color: var(--pw-primary); transform: translateY(-3px); box-shadow: var(--pw-card-shadow); }
.bs-img img { width: 100%; height: 100%; object-fit: cover; }
.bs-name { font-size: 12px; font-weight: 700; color: var(--pw-text); line-height: 1.18; max-width: 94px; }
.bs-eta { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--pw-muted); }

/* ---- Selo de raio (lightning) amarelo — assinatura da entrega ----------- */
.bolt-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, #ffd02e, #ffae00); color: #1a1400; flex-shrink: 0; box-shadow: 0 2px 6px -1px rgba(255, 174, 0, 0.5); }

/* ---- Chips de oferta (verde "OFF/Grátis" + roxo) ------------------------ */
.deal-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 9999px; font-size: 12px; font-weight: 600; background: rgba(74, 222, 128, 0.12); color: #6ee7a8; border: 1px solid rgba(74, 222, 128, 0.2); white-space: nowrap; }
.deal-chip.purple { background: rgba(147, 130, 255, 0.15); color: var(--pw-accent-text); border-color: rgba(147, 130, 255, 0.26); }
[data-theme="light"] .deal-chip { background: rgba(22, 163, 110, 0.1); color: #12895c; border-color: rgba(22, 163, 110, 0.22); }
[data-theme="light"] .deal-chip.purple { background: rgba(147, 130, 255, 0.1); color: var(--pw-accent-text); border-color: rgba(147, 130, 255, 0.22); }

/* ---- CARD HORIZONTAL (lista de lojas/produtos — card principal) --------- */
.food-list { display: grid; grid-template-columns: 1fr; gap: 0 28px; }
@media (min-width: 760px) { .food-list { grid-template-columns: 1fr 1fr; } }
.food-card { display: flex; gap: 14px; padding: 16px 2px; border-bottom: 1px solid var(--pw-line); cursor: pointer; transition: background-color 0.18s; }
.food-card:hover { background: rgba(147, 130, 255, 0.04); }
.fc-thumb { position: relative; width: 108px; height: 108px; border-radius: 16px; overflow: hidden; flex-shrink: 0; background: var(--pw-thumb-2); }
.fc-thumb img, .fc-thumb .thumb, .fc-thumb .prod-media { width: 100%; height: 100%; object-fit: cover; }
.fc-flag { position: absolute; top: 7px; left: 7px; z-index: 2; background: rgba(12, 10, 22, 0.62); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 7px; backdrop-filter: blur(4px); display: inline-flex; align-items: center; gap: 4px; }
.fc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fc-name { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; line-height: 1.22; margin: 0; }
.fc-fav { border: none; background: transparent; color: var(--pw-muted-2); cursor: pointer; padding: 2px; flex-shrink: 0; line-height: 0; transition: 0.15s; }
.fc-fav:hover { color: #ff5b7f; }
.fc-fav.on { color: #ff5b7f; }
.fc-fav.on svg { fill: #ff5b7f; }
.fc-rating { display: flex; align-items: center; gap: 6px; font-size: 14px; min-width: 0; }
.fc-rating b { font-weight: 800; }
.fc-rating .fc-star { color: var(--pw-text); display: inline-flex; }
.fc-rating .fc-cat { color: var(--pw-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-meta { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--pw-muted); flex-wrap: wrap; }
.fc-meta .fc-price { color: var(--pw-text); font-weight: 800; }
.fc-meta .fc-price.free { color: #3ccb8c; }
.fc-meta s { color: var(--pw-muted-2); font-weight: 500; }
.fc-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 3px; }
.fc-dot { width: 3px; height: 3px; border-radius: 99px; background: var(--pw-muted-2); }

/* ---- MINI CARD VERTICAL (carrossel de ofertas) -------------------------- */
.mini-card { flex: 0 0 auto; width: 160px; cursor: pointer; }
.mc-thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--pw-thumb-2); }
.mc-thumb img, .mc-thumb .thumb, .mc-thumb .prod-media { width: 100%; height: 100%; object-fit: cover; }
.mc-disc { position: absolute; top: 8px; left: 8px; z-index: 2; background: #25b566; color: #fff; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 8px; box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.4); }
.mc-add { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 12px; border: none; background: linear-gradient(135deg, var(--pw-primary), #7c69ff); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 16px -5px var(--pw-glow); transition: 0.15s; }
.mc-add:hover { filter: brightness(1.1); transform: scale(1.07); }
.mc-price { margin-top: 10px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mc-price b { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 16px; color: var(--pw-accent-text); }
.mc-price .mc-pre { font-size: 10.5px; font-weight: 600; color: var(--pw-muted); }
.mc-name { font-size: 13.5px; font-weight: 600; margin: 4px 0 4px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pw-muted); }

/* ---- Barra de filtros (estilo "Ordenar por · Entrega grátis") ----------- */
.filter-bar { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 4px; }
.fb-icon { flex: 0 0 auto; width: 42px; height: 40px; border-radius: 9999px; border: 1px solid var(--pw-line); background: var(--pw-elev); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; color: var(--pw-text); cursor: pointer; transition: 0.2s cubic-bezier(.6,.6,0,1); }
.fb-icon:hover { background: var(--pw-elev-2); transform: translateY(-1px); }
.fb-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 17px; border-radius: 9999px; border: 1px solid var(--pw-line); background: var(--pw-elev); backdrop-filter: blur(12px); font-size: 13.5px; font-weight: 500; color: var(--pw-muted); cursor: pointer; white-space: nowrap; transition: 0.2s cubic-bezier(.6,.6,0,1); }
.fb-chip:hover { color: #fff; background: var(--pw-elev-2); }
.fb-chip.active { background: rgba(147, 130, 255, 0.14); border-color: rgba(147, 130, 255, 0.3); color: #fff; }

/* ---- Transições suaves de tema p/ novos componentes --------------------- */
.cc-img, .bs-img, .fb-chip, .fb-icon, .food-card, .deal-chip, .qtab {
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, transform 0.18s ease;
}

@media (max-width: 760px) {
  .food-card { padding: 14px 2px; }
  .fc-thumb { width: 96px; height: 96px; }
  .fc-name { font-size: 16px; }
  .sec-head .sec-title { font-size: 19px; }
}

/* =========================================================================
   FEATURES DO DOC — contador, medida, análise, avaliações, relâmpago, indicação
   ========================================================================= */
/* Contador de urgência "peça até 14:30 e receba hoje" */
.urgency {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 2px; padding: 9px 14px; border-radius: 12px;
  font-size: 13px; font-weight: 600; color: #b06a00;
  background: linear-gradient(90deg, rgba(255, 196, 0, 0.14), rgba(255, 196, 0, 0.05));
  border: 1px solid rgba(255, 196, 0, 0.28);
}
.urgency svg { color: #e0a200; flex-shrink: 0; }
.urgency b { color: #7a4a00; }

/* Add-on: análise do arquivo por profissional */
.addon-opt {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 13px 15px; border-radius: 14px; margin-top: 4px;
  border: 1px solid var(--pw-line); background: var(--pw-elev-soft); transition: 0.15s;
}
.addon-opt:hover { border-color: var(--pw-line-strong); }
.addon-check {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px;
  border: 2px solid var(--pw-line-strong); display: flex; align-items: center; justify-content: center;
  color: #fff; transition: 0.15s;
}
.addon-check.on { background: var(--pw-primary); border-color: var(--pw-primary); }

/* Avaliações dos clientes */
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.reviews-score { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.reviews-score b { font-family: "Manrope", sans-serif; font-size: 26px; font-weight: 800; line-height: 1; }
.reviews-score .fc-star { color: #e0a200; }
.reviews-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.review-card { border: 1px solid var(--pw-line); border-radius: 16px; padding: 16px; background: var(--pw-card-grad); }
.review-top { display: flex; align-items: center; gap: 10px; }
.review-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, #6666ff, #8c7bff);
}
.review-stars { display: flex; gap: 1px; color: #d8d8e0; margin-top: 2px; }
.review-stars .on { color: #e0a200; }

/* Oferta relâmpago (home) — card ROXO destacado (item 14) */
.flash-wrap {
  border-radius: 20px; padding: 16px 16px 6px;
  background: linear-gradient(135deg, #7c69ff 0%, #9382ff 45%, #b9a6ff 100%);
  box-shadow: 0 16px 40px -14px rgba(147, 130, 255, 0.6);
  position: relative; overflow: hidden;
}
.flash-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 100% 0%, rgba(255,255,255,0.18), transparent 60%);
}
.flash-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; }
.flash-title { display: inline-flex; align-items: center; gap: 7px; font-family: "Manrope", sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; color: #fff; }
.flash-title svg { color: #fff; }
.flash-count { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.9); display: inline-flex; align-items: center; gap: 6px; }
.flash-count b {
  font-family: "Geist Mono", monospace; color: #4a2fd6; background: #fff;
  padding: 3px 9px; border-radius: 8px; letter-spacing: 0.5px; box-shadow: 0 2px 8px -2px rgba(0,0,0,.3);
}
.flash-card {
  flex: 0 0 auto; width: 152px; cursor: pointer; scroll-snap-align: start;
  border: none; border-radius: 14px; overflow: hidden; position: relative;
  background: #fff; color: #14111f; transition: 0.25s cubic-bezier(.6, .6, 0, 1);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.35);
}
.flash-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(0,0,0,.5); }
.flash-img { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #f1f0f6; position: relative; }
.flash-img img, .flash-img .thumb, .flash-img .prod-media { width: 100%; height: 100%; object-fit: cover; }
.flash-off { position: absolute; top: 8px; left: 8px; background: #ff3b6b; color: #fff; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 8px; box-shadow: 0 3px 8px -2px rgba(0,0,0,.35); }
.flash-body { padding: 10px 12px 12px; }
.flash-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; min-height: 32px; color: #14111f; }
.flash-price { margin-top: 6px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.flash-price s { font-size: 11.5px; color: #9a98a8; }
.flash-price b { font-family: "Manrope", sans-serif; font-size: 17px; font-weight: 800; color: #16a34a; }
.flash-eta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #6b6980; margin-top: 5px; }

/* Vídeos (item 11.1 / 19) — carrossel vertical estilo reels/ML */
.video-card { flex: 0 0 auto; width: 148px; cursor: pointer; scroll-snap-align: start; }
.video-thumb { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--pw-line); }
.video-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45)); pointer-events: none; }
.video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.9); color: #14111f; display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 4px 12px rgba(0,0,0,.4); z-index: 2; }
.video-play svg { display: none; }
.video-card:hover .video-thumb { box-shadow: var(--pw-card-shadow); transform: translateY(-3px); transition: .2s; }
.video-body { padding: 8px 2px 0; }
.video-name { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.video-price { margin-top: 3px; font-size: 13px; }
.video-price b { font-family: "Manrope", sans-serif; font-weight: 800; color: var(--pw-accent-text); }

/* item 20: círculos de categoria um pouco maiores/mais espaçados (estilo 99) */
.cat-circle { width: 92px; }
.cc-img { width: 84px; height: 84px; }
.cat-circle span { font-size: 12.5px; }

/* Indique e ganhe */
.ref-card {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 16px 18px; border-radius: 18px;
  background: radial-gradient(120% 160% at 0% 0%, rgba(147, 130, 255, 0.16), transparent 60%), var(--pw-card-grad);
  border: 1px solid var(--pw-line); transition: 0.2s;
}
.ref-card:hover { border-color: rgba(186, 156, 255, 0.3); transform: translateY(-2px); box-shadow: var(--pw-card-shadow); }
.ref-emoji { font-size: 30px; flex-shrink: 0; }
.ref-cta { display: inline-flex; align-items: center; gap: 3px; font-size: 13.5px; font-weight: 700; color: var(--pw-accent-text); white-space: nowrap; flex-shrink: 0; }

/* Vídeo na galeria (item 7) */
.prod-gallery-main video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-video { position: relative; border: none; cursor: pointer; background: #12101f; display: flex; align-items: center; justify-content: center; }
.gallery-video .gv-play { color: #fff; font-size: 18px; }