:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-soft: #fff7f3;
  --ink: #101828;
  --muted: #667085;
  --subtle: #98a2b3;
  --line: #e4e7ec;
  --orange: #f04438;
  --orange-dark: #c4322b;
  --orange-soft: #fff1ed;
  --green: #12a66a;
  --green-dark: #087443;
  --green-soft: #e8f8ef;
  --yellow: #fdb022;
  --blue: #175cd3;
  --shadow-sm: 0 6px 18px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 16px 42px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 28px 70px rgba(16, 24, 40, 0.16);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

/* ── Loader de marca (carregamento inicial de cada pagina) ──────────────
   Cor solida explicita (nao var(--surface)/var(--bg)) de proposito — esse
   arquivo tem blocos de tema duplicados que redefinem essas variaveis mais
   abaixo, e aqui precisa de branco garantido, sem depender de qual bloco
   "ganha" a cascata. */
.page-loader {
  align-items: center;
  background: #ffffff;
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  transition: opacity 300ms ease;
  z-index: 99999;
}

.page-loader img {
  height: 120px;
  width: 120px;
}

.page-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-loader {
    transition: none;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(240, 68, 56, 0.08), transparent 34rem),
    linear-gradient(180deg, #ffffff 0, var(--bg) 18rem);
  color: var(--ink);
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(228, 231, 236, 0.88);
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
  backdrop-filter: blur(18px);
}

.site-header.is-scrolled {
  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.10);
}

.header-inner,
.footer-inner,
.site-main {
  width: min(1240px, calc(100% - 28px));
  margin: 0 auto;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px 0;
}

.brand,
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--orange), #fb7b35);
  box-shadow: 0 12px 26px rgba(240, 68, 56, 0.24);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 950;
  letter-spacing: 0;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 1.12rem;
  font-weight: 950;
}

.brand small {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 1px 0 0;
}

.search-form {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 8px;
  min-height: 50px;
  padding: 5px;
}

.search-form:focus-within {
  border-color: rgba(240, 68, 56, 0.45);
  box-shadow: 0 0 0 4px rgba(240, 68, 56, 0.10), var(--shadow-sm);
}

.search-icon {
  color: var(--subtle);
  display: grid;
  flex: 0 0 34px;
  font-size: 1.25rem;
  place-items: center;
}

.search-form input {
  background: transparent;
  border: 0;
  color: var(--ink);
  min-width: 0;
  outline: 0;
  width: 100%;
}

.search-form button,
.whatsapp-link,
.offer-button,
.hero-secondary {
  align-items: center;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}

.search-form button,
.offer-button {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 10px 20px rgba(240, 68, 56, 0.22);
}

.search-form button:hover,
.offer-button:hover {
  background: var(--orange-dark);
  transform: translateY(-1px);
}

.whatsapp-link {
  background: var(--green);
  color: #fff;
  gap: 8px;
  min-height: 50px;
  width: 100%;
  box-shadow: 0 12px 24px rgba(18, 166, 106, 0.22);
}

.whatsapp-link:hover,
.whatsapp-banner a:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

.site-main {
  padding: 22px 0 52px;
}

.hero-band,
.page-head {
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  margin-bottom: 18px;
  overflow: hidden;
}

.hero-band {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 243, 237, 0.96) 48%, rgba(232, 248, 239, 0.96)),
    var(--surface);
  display: grid;
  gap: 22px;
  padding: 26px;
  position: relative;
}

.hero-band::after {
  background: linear-gradient(135deg, rgba(240, 68, 56, 0.14), rgba(18, 166, 106, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  content: "";
  height: 130px;
  position: absolute;
  right: -32px;
  top: -44px;
  transform: rotate(12deg);
  width: 220px;
}

.hero-copy,
.hero-cards {
  position: relative;
  z-index: 1;
}

.eyebrow {
  color: var(--orange-dark);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0;
  margin: 0 0 6px;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(2.2rem, 6vw, 4.7rem);
  letter-spacing: 0;
  line-height: 0.98;
  margin-bottom: 14px;
  max-width: 870px;
}

.hero-band p,
.page-head p {
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 710px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.hero-primary,
.hero-secondary {
  min-height: 50px;
  width: 100%;
}

.hero-secondary {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(16, 24, 40, 0.12);
  color: var(--ink);
}

.hero-secondary:hover {
  background: #fff;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.hero-cards {
  display: grid;
  gap: 12px;
}

.hero-stat {
  align-items: center;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 2px;
  grid-template-columns: 42px 1fr;
  padding: 14px;
}

.hero-stat span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--radius);
  background: var(--orange-soft);
}

.hero-stat strong {
  font-size: 1.55rem;
  line-height: 1;
}

.hero-stat small {
  color: var(--muted);
  font-weight: 800;
}

.hero-stat.coupon span {
  background: var(--green-soft);
  color: var(--green-dark);
}

.hero-stat.viral span {
  background: #eef4ff;
  color: var(--blue);
}

.page-head {
  background: var(--surface);
  padding: 24px;
}

.offer-tabs,
.category-strip {
  display: flex;
  gap: 10px;
  margin: 16px 0;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: none;
}

.offer-tabs::-webkit-scrollbar,
.category-strip::-webkit-scrollbar {
  display: none;
}

.offer-tabs a,
.category-chip {
  align-items: center;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 5px 14px rgba(16, 24, 40, 0.04);
  color: var(--ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 900;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.offer-tabs a span,
.category-chip span {
  align-items: center;
  background: var(--orange-soft);
  border-radius: 999px;
  color: var(--orange-dark);
  display: inline-flex;
  font-size: 0.82rem;
  height: 24px;
  justify-content: center;
  min-width: 24px;
  padding: 0 6px;
}

.offer-tabs a:hover,
.category-chip:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.offer-tabs a.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.offer-tabs a.active span {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.category-chip span {
  background: var(--green-soft);
  color: var(--green-dark);
}

.affiliate-note {
  align-items: center;
  background: rgba(255, 248, 223, 0.82);
  border: 1px solid #f4dd91;
  border-radius: var(--radius);
  color: #7a5600;
  display: flex;
  font-size: 0.92rem;
  font-weight: 700;
  gap: 10px;
  margin: 14px 0 22px;
  padding: 12px 14px;
}

.affiliate-note::before {
  content: "%";
  align-items: center;
  background: #fff;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 950;
  height: 26px;
  justify-content: center;
  min-width: 26px;
}

.content-grid {
  display: grid;
  gap: 22px;
}

.feed-stack {
  display: grid;
  gap: 26px;
  min-width: 0;
}

.home-section {
  min-width: 0;
}

.section-heading {
  align-items: end;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.section-heading h2 {
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.15;
  margin: 0;
}

.section-heading span,
.section-heading a {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.92rem;
  font-weight: 900;
}

.section-heading a:hover {
  color: var(--orange-dark);
}

.products-grid,
.coupon-grid,
.coupon-strip {
  display: grid;
  gap: 16px;
}

.product-card,
.coupon-card,
.mini-panel,
.whatsapp-banner {
  border-radius: var(--radius);
}

.product-card,
.coupon-card,
.mini-panel {
  background: var(--surface);
  border: 1px solid rgba(228, 231, 236, 0.92);
  box-shadow: var(--shadow-sm);
}

.product-card {
  display: grid;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.product-card:hover {
  border-color: rgba(240, 68, 56, 0.24);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.product-image {
  aspect-ratio: 4 / 3;
  background: #eef2f6;
  display: block;
  overflow: hidden;
  position: relative;
}

.product-image img {
  height: 100%;
  object-fit: contain;
  transition: transform 220ms ease;
  width: 100%;
}

.detail-image img {
  height: 100%;
  object-fit: contain;
  transition: transform 220ms ease;
  width: 100%;
}

.product-card:hover .product-image img {
  transform: scale(1.035);
}

.badge,
.image-discount {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 950;
  min-height: 28px;
  padding: 0 10px;
  position: absolute;
  top: 12px;
  z-index: 1;
}

.badge {
  background: rgba(16, 24, 40, 0.88);
  color: #fff;
  left: 12px;
}

.badge-quente,
.badge-destaque {
  background: var(--orange);
}

.badge-viral {
  background: var(--blue);
}

.badge-cupom {
  background: var(--green-dark);
}

.image-discount {
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--green-dark);
  right: 12px;
}

.product-body {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
}

.product-meta,
.signal-row {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  font-weight: 850;
  gap: 8px;
  justify-content: space-between;
}

.product-meta span:first-child {
  color: var(--orange-dark);
}

.product-card h3 {
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
  min-height: 2.6em;
}

.product-card h3 a:hover {
  color: var(--orange-dark);
}

.price-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.price-row strong {
  color: #444444;
  font-size: 1.55rem;
  letter-spacing: 0;
  line-height: 1;
}

/* Frase de confianca de preco no card da listagem — mesma ideia da pagina do
   produto, so que compacta pro espaco do card. */
.card-price-confidence {
  align-items: center;
  color: var(--green-dark);
  display: flex;
  font-size: 0.74rem;
  font-weight: 700;
  gap: 4px;
  margin: 2px 0 0;
}

.card-price-confidence .lucide { flex-shrink: 0; height: 12px; width: 12px; }

.price-row del {
  color: var(--subtle);
  font-size: 0.92rem;
}

.discount,
.temperature-pill {
  background: var(--green-soft);
  border-radius: 999px;
  color: var(--green-dark);
  font-size: 0.8rem;
  font-weight: 950;
  padding: 4px 9px;
}

.signal-row {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.temperature-pill {
  align-items: center;
  background: var(--orange-soft);
  color: var(--orange-dark);
  display: inline-flex;
  gap: 5px;
}

.offer-button {
  margin-top: 2px;
  min-height: 46px;
  width: 100%;
}

.whatsapp-banner {
  background:
    linear-gradient(135deg, #063f2b, #09834f 56%, #12a66a);
  box-shadow: 0 18px 44px rgba(8, 116, 67, 0.24);
  color: #fff;
  display: grid;
  gap: 14px;
  height: 334px;
  overflow: hidden;
  padding: 20px;
  position: relative;
}

.whatsapp-banner::after {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  content: "";
  height: 110px;
  position: absolute;
  right: -26px;
  top: -34px;
  transform: rotate(16deg);
  width: 150px;
}

.whatsapp-badge {
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  display: inline-flex;
  font-weight: 950;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.whatsapp-banner strong {
  display: block;
  font-size: 1.22rem;
  line-height: 1.2;
  max-width: 320px;
}

.whatsapp-banner p {
  color: rgba(255, 255, 255, 0.82);
  margin: 8px 0 0;
}

.whatsapp-banner a {
  align-items: center;
  background: #fff;
  border-radius: var(--radius);
  color: var(--green-dark);
  display: inline-flex;
  font-weight: 950;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  transition: transform 160ms ease, background 160ms ease;
}

.whatsapp-banner a:hover {
  background: var(--green-soft);
}

.side-rail {
  display: grid;
  gap: 14px;
}

.side-rail > .whatsapp-banner {
  display: none;
}

.mini-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.panel-title {
  align-items: center;
  display: flex;
  gap: 9px;
}

.panel-title span {
  align-items: center;
  background: var(--orange-soft);
  border-radius: 999px;
  color: var(--orange-dark);
  display: inline-flex;
  font-weight: 950;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.mini-panel p {
  color: var(--muted);
  margin: 0;
}

.top-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-list li {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 3px;
  padding-bottom: 10px;
}

.top-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.top-list a {
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.25;
}

.top-list small {
  color: var(--muted);
  font-weight: 800;
}

.coupon-strip,
.coupon-grid {
  grid-template-columns: 1fr;
}

.coupon-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.coupon-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.coupon-card span {
  color: var(--green-dark);
  font-size: 0.82rem;
  font-weight: 950;
}

.coupon-card h2,
.coupon-card h3 {
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0;
}

.coupon-card p {
  color: var(--muted);
  margin: 0;
}

.coupon-card code {
  background: #f9fafb;
  border: 1px dashed var(--subtle);
  border-radius: var(--radius);
  color: var(--ink);
  display: block;
  font-size: 1.08rem;
  font-weight: 950;
  padding: 10px;
  transition: background 160ms ease, border-color 160ms ease;
}

.coupon-card code.copied {
  background: var(--green-soft);
  border-color: var(--green);
}

.offer-button.big {
  font-size: 1.05rem;
  min-height: 54px;
}

.offer-button.inline {
  margin-top: 10px;
  width: auto;
}

.empty-state {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-weight: 800;
  padding: 18px;
}

.site-footer {
  background: #0b1220;
  color: #fff;
  padding: 34px 0;
}

.footer-inner {
  display: grid;
  gap: 30px;
}

.footer-brand {
  align-items: flex-start;
  flex-direction: column;
  gap: 0;
}

.footer-brand .brand-mark {
  box-shadow: none;
}

.footer-logo {
  display: block;
  height: 34px;
  object-fit: contain;
  width: auto;
}

/* ── Rodapé: descrição + grupos "Institucional"/"Suporte"/"Páginas",
   com a faixa de aviso e o copyright fora da caixa do rodapé (fundo da
   página) tanto no mobile quanto no desktop. ── */

.footer-band-text {
  background: var(--bg);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0;
  padding: 22px 20px 26px;
  text-align: center;
}

.footer-band-text a {
  text-decoration: underline;
}

.footer-band-text a:hover {
  color: var(--orange);
}

.footer-brand-text {
  display: grid;
  gap: 4px;
  margin-top: 18px;
}

.footer-tagline-strong {
  color: #1f2328;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}

.footer-tagline-soft {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}

.footer-nav-group {
  display: grid;
  gap: 11px;
}

.footer-nav-group strong {
  color: #1f2328;
  font-size: 0.92rem;
}

.footer-nav-group a,
.footer-nav-group button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}

@media (max-width: 1039px) {
  /* Rodapé no mobile: tudo centralizado (era esquerda, herdado do layout
     de colunas do desktop, que só ganha grid-template-columns/align:start
     a partir de 1040px — sem override aqui, o mobile ficava com o alinhamento
     padrão do desktop mesmo sendo 1 coluna só). */
  .footer-inner {
    text-align: center;
  }

  .footer-brand {
    align-items: center;
  }

  .footer-brand-text {
    text-align: center;
  }

  .footer-nav-group a,
  .footer-nav-group button {
    text-align: center;
  }
}

.footer-nav-group a:hover,
.footer-nav-group button:hover {
  text-decoration: underline;
}

@media (min-width: 640px) {
  .hero-primary,
  .hero-secondary {
    width: auto;
  }

  .hero-cards,
  .coupon-strip,
  .coupon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .header-inner {
    align-items: center;
    grid-template-columns: 250px minmax(260px, 1fr) 250px;
  }

  .whatsapp-link {
    width: auto;
  }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-columns {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.86fr);
  }
}

@media (min-width: 1040px) {
  .hero-band {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 340px;
    min-height: 390px;
    padding: 44px;
  }

  .content-grid {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .compact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .side-rail {
    position: sticky;
    top: 104px;
  }

  .side-rail > .whatsapp-banner {
    display: grid;
  }

  .feed-stack > .whatsapp-banner {
    display: none;
  }

  .footer-inner {
    align-items: start;
    column-gap: 60px;
    grid-template-columns: 1.5fr 0.8fr 1fr 0.8fr;
  }
}

@media (min-width: 1240px) {
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Neun Import visual alignment */
:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-soft: #fff6f2;
  --ink: #444444;
  --muted: #666666;
  --subtle: #8a8a8a;
  --line: #eeeeee;
  --orange: #ee4c2a;
  --orange-dark: #d83f20;
  --orange-soft: #fff0eb;
  --green: #038114;
  --green-dark: #026b10;
  --green-soft: #eaf8ec;
  --shadow-sm: 0 0 10px rgba(165, 165, 165, 0.24);
  --shadow-md: 0 8px 22px rgba(165, 165, 165, 0.28);
  --shadow-lg: 0 14px 34px rgba(165, 165, 165, 0.32);
  --radius: 9px;
}

body {
  background: var(--bg);
  color: rgba(0, 0, 0, 0.80);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
}

.header-inner,
.footer-inner,
.site-main {
  width: min(1492px, calc(100% - 28px));
}

.site-header {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 2px 12px rgba(165, 165, 165, 0.18);
}

.header-inner {
  padding: 10px 0;
}

.brand-mark {
  background: var(--orange);
  box-shadow: none;
  border-radius: 6px;
}

.brand strong,
h1,
h2,
h3,
.section-heading h2 {
  color: rgba(0, 0, 0, 0.86);
  font-family: "DM Sans", sans-serif;
}

.brand strong {
  font-size: 1.18rem;
}

.brand small {
  color: #7a7a7a;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
}

.search-form {
  border-color: #eeeeee;
  box-shadow: none;
  min-height: 46px;
}

.search-form:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(238, 76, 42, 0.10);
}

.search-form button,
.offer-button,
.whatsapp-link,
.hero-secondary,
.whatsapp-banner a {
  border-radius: 30px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  min-height: 42px;
  text-transform: none;
}

.search-form button,
.offer-button {
  background: var(--green);
  box-shadow: none;
}

.search-form button:hover,
.offer-button:hover,
.whatsapp-link:hover,
.whatsapp-banner a:hover {
  background: var(--green-dark);
}

.whatsapp-link {
  background: var(--orange);
  box-shadow: none;
}

.site-main {
  padding-top: 12px;
}

.hero-band {
  background:
    linear-gradient(90deg, rgba(131, 60, 163, 0.94), rgba(238, 76, 42, 0.78)),
    url("https://neun.com.br/wp-content/uploads/2025/02/Maskote-Shopee-banner.webp");
  background-position: center;
  background-size: cover;
  border: 0;
  color: #fff;
  min-height: 314px;
  padding: 28px;
}

.hero-band::after {
  display: none;
}

.hero-band .eyebrow,
.hero-band h1,
.hero-band p {
  color: #fff;
}

.hero-band h1 {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  max-width: 650px;
}

.hero-band p {
  font-size: 1rem;
  max-width: 560px;
}

.hero-secondary {
  background: #fff;
  border: 0;
  color: var(--orange);
}

.hero-stat {
  border: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.hero-stat strong {
  color: #222;
  font-family: "DM Sans", sans-serif;
}

.offer-tabs a,
.category-chip {
  background: #fff;
  border-color: #eeeeee;
  box-shadow: none;
  color: #444;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
}

.offer-tabs a.active {
  background: var(--orange);
  border-color: var(--orange);
}

.category-chip:hover,
.offer-tabs a:hover {
  box-shadow: var(--shadow-sm);
}

.affiliate-note {
  background: #fff;
  border-color: #f2d2c7;
  color: #7a4b3d;
}

.product-card,
.coupon-card,
.mini-panel {
  border: 0;
  box-shadow: var(--shadow-sm);
}

.product-card {
  background: #fff;
}

.product-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-image {
  aspect-ratio: 1 / 1;
  background: #fafafa;
}

.badge {
  background: var(--orange);
  border-radius: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.70rem;
}

.image-discount {
  background: var(--orange);
  color: #fff;
  box-shadow: none;
  font-family: "DM Sans", sans-serif;
}

.product-body {
  gap: 8px;
  padding: 12px;
}

.product-meta {
  font-family: "DM Sans", sans-serif;
  font-size: 0.78rem;
}

.product-meta span:first-child {
  color: #444;
}

.product-card h3 {
  color: #444;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
}

.price-row strong {
  color: #444444;
  font-family: "DM Sans", sans-serif;
  font-size: 1.45rem;
}

.price-row del {
  color: #999;
  font-size: 0.84rem;
}

.signal-row {
  font-family: "DM Sans", sans-serif;
  font-size: 0.78rem;
}

.temperature-pill {
  background: var(--orange-soft);
  color: var(--orange);
}

.coupon-card {
  background: #fff;
}

.coupon-card span,
.coupon-card h2,
.coupon-card h3 {
  font-family: "DM Sans", sans-serif;
}

.coupon-card code {
  border-radius: 9px;
  font-family: "DM Sans", sans-serif;
}

.whatsapp-banner {
  background: linear-gradient(135deg, #038114, #05a31a);
  box-shadow: var(--shadow-sm);
}

.site-footer {
  background: #fff;
  border-top: 1px solid #eeeeee;
  color: #444;
}

@media (min-width: 1040px) {
  .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .content-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

@media (min-width: 1240px) {
  .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Zoom-like marketplace home */
.top-banner-carousel {
  background: #4b1985;
  border-radius: 9px;
  color: #fff;
  min-height: 222px;
  overflow: hidden;
  position: relative;
}

.banner-slide {
  align-items: center;
  background:
    radial-gradient(circle at 70% 50%, rgba(197, 246, 24, 0.34), transparent 18rem),
    linear-gradient(90deg, #4b1985, #5a2399);
  display: grid;
  gap: 18px;
  inset: 0;
  opacity: 0;
  padding: 24px;
  pointer-events: none;
  position: absolute;
  transform: translateX(16px);
  transition: opacity 360ms ease, transform 360ms ease;
}

.banner-slide.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  transform: translateX(0);
}

.banner-slide h1,
.banner-slide h2,
.banner-slide p,
.banner-slide .eyebrow {
  color: #fff;
}

.banner-slide h1,
.banner-slide h2 {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(1.85rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 10px;
  max-width: 610px;
}

.banner-slide p {
  max-width: 560px;
}

.banner-slide img {
  align-self: end;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
  justify-self: center;
  max-height: 180px;
  object-fit: cover;
  width: min(260px, 70vw);
}

.shelf-controls button {
  align-items: center;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  color: #222;
  cursor: pointer;
  display: inline-flex;
  font-size: 1.4rem;
  height: 30px;
  justify-content: center;
  line-height: 1;
  width: 30px;
}

.zoom-category-grid {
  display: grid;
  gap: 14px;
  grid-auto-columns: 98px;
  grid-auto-flow: column;
  margin: 18px 0;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.zoom-category-grid::-webkit-scrollbar {
  display: none;
}

.zoom-category-card {
  align-items: center;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 9px;
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 112px;
  padding: 10px;
  text-align: center;
}

.zoom-category-card span {
  align-items: center;
  background:
    radial-gradient(circle at 70% 35%, #ffd000 0 34%, transparent 35%),
    linear-gradient(135deg, #5a2399, #2f93ff);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-family: "DM Sans", sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  height: 54px;
  justify-content: center;
  width: 54px;
}

.zoom-category-card strong {
  color: #111;
  font-family: "DM Sans", sans-serif;
  font-size: 0.82rem;
  line-height: 1.1;
}

.zoom-category-card.more-card {
  background: #5a2399;
  color: #fff;
}

.zoom-category-card.more-card span {
  background: rgba(255, 255, 255, 0.18);
}

.zoom-category-card.more-card strong {
  color: #fff;
}

.store-section {
  margin-top: 30px;
}

.store-section-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.store-section-head h2 {
  color: #111;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-weight: 700;
  margin: 0;
}

.store-section-head a {
  color: #111;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
}

.shelf-controls {
  display: none;
  gap: 8px;
}

.shelf-track {
  display: grid;
  gap: 14px;
  grid-auto-columns: minmax(190px, 1fr);
  grid-auto-flow: column;
  overflow-x: auto;
  padding: 2px 1px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.shelf-track .product-card {
  min-width: 0;
  scroll-snap-align: start;
}

.brand-strip,
.thin-banner {
  align-items: center;
  background: linear-gradient(90deg, #4b1985, #5a2399 45%, #3d126e);
  color: #fff;
  display: grid;
  gap: 14px;
  margin: 34px 0 28px;
  min-height: 88px;
  padding: 18px;
}

.brand-strip {
  grid-template-columns: 1fr;
}

.brand-strip div,
.thin-banner {
  border-radius: 0;
}

.brand-strip span {
  align-items: center;
  background: #c9f31d;
  border-radius: 7px;
  color: #4b1985;
  display: inline-flex;
  font-family: "DM Sans", sans-serif;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  margin-right: 8px;
  width: 46px;
}

.brand-strip strong,
.thin-banner strong {
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 1.18rem;
}

.brand-strip small,
.thin-banner span {
  color: rgba(255, 255, 255, 0.82);
  display: block;
}

.brand-strip a,
.thin-banner a {
  background: #c9f31d;
  border-radius: 999px;
  color: #4b1985;
  font-family: "DM Sans", sans-serif;
  font-weight: 800;
  justify-self: start;
  padding: 10px 18px;
}

.thin-banner {
  grid-template-columns: 1fr;
  margin-top: 36px;
}

.ranking-panel {
  background: #fff;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 14px;
  margin-top: 30px;
  padding: 18px;
}

.ranking-list {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.coupon-market .coupon-strip {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

@media (min-width: 760px) {
  .banner-slide {
    grid-template-columns: minmax(0, 1fr) 300px;
    min-height: 222px;
    padding: 28px 64px;
  }

  .zoom-category-grid {
    grid-auto-columns: 100px;
  }

  .brand-strip {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .thin-banner {
    grid-template-columns: 1fr 1.4fr auto;
  }
}

@media (min-width: 1040px) {
  .shelf-controls {
    display: flex;
  }

  .shelf-track {
    grid-auto-columns: calc((100% - 70px) / 6);
    overflow-x: hidden;
  }

  .top-banner-carousel {
    min-height: 222px;
  }
}

/* Promobit-inspired community feed */
.ad-slot {
  align-items: center;
  background: #f8fafc;
  border: 1px dashed #d0d5dd;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.ad-slot-label {
  color: var(--subtle);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ad-slot-top {
  height: 165px;
  margin-bottom: 16px;
  width: 100%;
}

.ad-slot-sidebar {
  height: 600px;
  margin: 0 auto;
  width: 300px;
}

/* Bloco padrao IAB "medium rectangle" — primeiro item da sidebar (ver
   sidebar-promo.ejs), fica alinhado com o topo do carrossel de ofertas em
   destaque. Preenchido com autopromocao ate ter anuncio de terceiro de
   verdade, mesmo padrao do ad-slot-sidebar. */
.ad-slot-mrec {
  height: 250px;
  margin: 0 auto;
  width: 300px;
}


.community-layout {
  align-items: start;
  display: grid;
  gap: 18px;
}

.community-feed {
  min-width: 0;
}

.feed-header {
  align-items: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 22px 22px 16px;
}

.feed-header.compact {
  border-radius: 14px;
  margin-bottom: 12px;
}

.feed-header h2 {
  color: #222;
  font-family: "DM Sans", sans-serif;
  font-size: 1.55rem;
  margin: 0;
}

.feed-header span {
  color: #666;
  display: block;
  margin-top: 3px;
}

.feed-header > a {
  color: var(--orange);
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  white-space: nowrap;
}

.deal-feed {
  display: grid;
  gap: 12px;
  /* minmax(0, 1fr) em vez de deixar a coluna implicita (auto) — sem isso,
     conteudo com filhos de largura fixa que nao cabem (ex: o carrossel
     "Vistos recentes" com cards de 260px lado a lado) estica a coluna
     inteira pra caber tudo sem rolagem, em vez de cortar/rolar dentro dos
     300/100% previstos. */
  grid-template-columns: minmax(0, 1fr);
}

.deal-feed .product-card {
  align-items: stretch;
  display: grid;
  grid-template-columns: 70px 196px minmax(0, 1fr);
  min-width: 0;
  overflow: visible;
  padding: 12px;
}

.deal-feed .product-card:hover {
  transform: none;
}

.product-vote {
  align-items: center;
  background: #f8f8f8;
  border-radius: 12px;
  color: var(--orange);
  display: none;
  justify-content: center;
  padding: 10px 6px;
  text-align: center;
}

.product-vote strong {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 1.15rem;
}

.product-vote span {
  color: #777;
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  line-height: 1.1;
  margin-top: 2px;
}

.deal-feed .product-vote {
  display: grid;
  min-width: 0;
}

.deal-feed .product-image {
  align-self: stretch;
  aspect-ratio: auto;
  border-radius: 12px;
  height: auto;
  min-height: 184px;
  min-width: 0;
  width: 196px;
}

.deal-feed .product-image img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.deal-feed .product-body {
  align-content: center;
  min-width: 0;
  padding: 2px 0 2px 14px;
}

.deal-feed .product-card h3 {
  font-size: 1.02rem;
  min-height: auto;
  overflow-wrap: anywhere;
}

.deal-feed .offer-button {
  justify-self: start;
  min-height: 38px;
  padding: 0 24px;
  width: auto;
}

.community-section {
  margin-top: 20px;
}

.compact-feed {
  margin-top: 0;
}

.community-sidebar {
  align-content: start;
  display: grid;
  gap: 14px;
  /* minmax(0, 1fr) em vez de deixar a coluna implicita (auto) — mesmo
     motivo do .deal-feed acima: sem isso, o carrossel "Vistos recentes"
     (cards de largura fixa lado a lado) estica a coluna inteira alem dos
     300px da sidebar em vez de cortar/rolar dentro dela. */
  grid-template-columns: minmax(0, 1fr);
}

/* 4 banners patrocinados empilhados na lateral (home/categoria/loja/cupons)
   — mesma quantidade de espacos que a pagina do produto ja tem. */
.sidebar-ad-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (max-width: 1039px) {
  /* So nas paginas que ja intercalam os mesmos banners entre os cards
     (ver sidebar-promo.ejs#interleaved) — sem isso, o mobile mostraria os
     banners 2x: intercalados na lista E empilhados aqui embaixo dela. */
  .sidebar-ad-stack-desktop-only {
    display: none;
  }
}

.ranking-list {
  display: grid;
  gap: 12px;
}

@media (max-width: 640px) {
  .deal-feed .product-card {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .deal-feed .product-vote {
    display: none;
  }

  .deal-feed .product-image {
    aspect-ratio: 1 / 1;
    height: 112px;
    min-height: 0;
    width: 112px;
  }

  .deal-feed .product-body {
    padding-left: 12px;
  }

  .deal-feed .offer-button {
    width: 100%;
  }
}

@media (min-width: 1040px) {
  .community-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  /* Mesmas 4 colunas do .products-grid padrao, so que mais estreitas — o espaco
     disponivel aqui e menor por causa da sidebar de 300px ao lado. */
  .community-feed .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Sem isso a aside so ocupa a altura do proprio conteudo (banner + ad + paineis,
     bem menor que o feed) e o anuncio (nested, sticky) so teria essa altura curta
     como limite pra "grudar" — esticando a aside pra altura do feed (a coluna mais
     alta da grid), o anuncio ganha o espaco todo do feed pra continuar fixo durante
     o scroll, em vez de descolar cedo. */
  .community-sidebar {
    align-self: stretch;
  }

  .ad-slot-sidebar {
    position: sticky;
    top: 104px;
  }
}

/* Professional icon system */
.lucide,
[data-lucide] {
  display: block;
  flex: 0 0 auto;
  height: 1em;
  stroke-width: 2.2;
  width: 1em;
}

.search-icon .lucide,
.whatsapp-link .lucide,
.whatsapp-badge .lucide,
.whatsapp-link .bi,
.whatsapp-badge .bi,
.panel-title .lucide,
.category-chip .lucide,
.offer-tabs .lucide,
.affiliate-note.icon-note .lucide {
  height: 18px;
  width: 18px;
}

.whatsapp-link .bi,
.whatsapp-badge .bi {
  align-items: center;
  display: inline-flex;
  font-size: 1.1rem;
  justify-content: center;
  line-height: 1;
}

.whatsapp-badge .bi {
  font-size: 1.25rem;
}

/* ═══════════════════════════════════════════════════
   Icone personalizado do WhatsApp (src/public/img/whatsapp-icon.svg, cor
   #00a94f ja embutida no arquivo) — substitui o icone de fonte (Bootstrap
   Icons "bi bi-whatsapp") em todo lugar que ele aparecia. Cada contexto tem
   seu proprio tamanho abaixo, espelhando o tamanho que o icone de fonte
   tinha ali (ver historico de .bi antigo logo acima/abaixo).
   ═══════════════════════════════════════════════════ */
.wa-icon {
  display: inline-block;
  flex-shrink: 0;
  object-fit: contain;
}

.header-brand-whatsapp .wa-icon { height: 22px; width: 22px; }
.whatsapp-badge .wa-icon { height: 24px; width: 24px; }
.whatsapp-share .wa-icon { height: 21px; width: 21px; }
.pd-icon-btn .wa-icon { height: 21px; width: 21px; }
.share-popover .wa-icon { flex: 0 0 21px; height: 21px; width: 21px; }

/* O fundo verde->branco do circulo (.product-whatsapp-strip > span) foi
   ajustado direto na definicao original mais abaixo no arquivo — aqui so o
   tamanho do icone. */
.product-whatsapp-strip .wa-icon { height: 26px; width: 26px; }

/* Icone grande do card de autopromocao + o icone inline do botao "Entrar no
   grupo" ja tem o proprio font-size variando por contexto/breakpoint (ver
   .self-promo-icon e .self-promo-cta) — 1em acompanha isso automaticamente,
   sem precisar repetir cada breakpoint aqui. */
.self-promo-icon .wa-icon,
.self-promo-cta .wa-icon {
  height: 1em;
  vertical-align: -0.15em;
  width: 1em;
}

.search-icon {
  font-size: 1rem;
}

.search-form button {
  gap: 8px;
}

.whatsapp-link {
  gap: 8px;
}

.offer-tabs a span,
.category-chip span,
.panel-title span,
.whatsapp-badge {
  padding: 0;
}

.offer-tabs a span,
.category-chip span {
  min-width: 28px;
  width: 28px;
}

/* Header menu inspired by the discussion bar reference */
.site-header {
  background: #fff;
  border-bottom: 1px solid #e9edf3;
  box-shadow: none;
  min-height: 68px;
}

.site-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.07);
}

.header-inner {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: center;
  min-height: 68px;
  padding: 8px 0;
  width: min(1492px, calc(100% - 28px));
}

.brand {
  flex: 0 0 auto;
  gap: 8px;
  min-height: 42px;
}

.brand-logo {
  display: block;
  height: 31px;
  object-fit: contain;
  width: auto;
}

.brand-text {
  display: none;
}

.logo-lockup {
  align-items: flex-end;
  display: inline-flex;
}

.brand-domain {
  color: #1f2328;
  font-family: "DM Sans", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* flex-end alinha a CAIXA do texto (que inclui o espaco de descendente da
     fonte) com a base da imagem, o que deixa a base VISIVEL do ".com.br" um
     pouco acima da base do "neun". translateY empurra pra baixo pra as bases
     baterem. */
  margin: 0 0 0 -3px;
  transform: translateY(3px);
  white-space: nowrap;
}

.footer-domain {
  font-size: 0.86rem;
  margin-left: -3px;
}

.brand-mark {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--orange);
  flex-basis: 22px;
  height: 22px;
  width: 22px;
}

.brand-mark .lucide {
  height: 20px;
  width: 20px;
}

.brand strong {
  color: #1f2328;
  font-family: "DM Sans", sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
}

.brand small {
  display: none;
}

.search-form {
  border: 1px solid #e1e6ee;
  border-radius: 999px;
  box-shadow: none;
  flex: 1 1 620px;
  gap: 10px;
  margin: 0;
  max-width: 660px;
  min-height: 40px;
  padding: 0 8px 0 20px;
}

.search-form:focus-within {
  border-color: #d6dce6;
  box-shadow: 0 0 0 3px rgba(238, 76, 42, 0.08);
}

.search-form input {
  color: #111827;
  font-family: "DM Sans", sans-serif;
  font-size: 0.84rem;
  height: 38px;
}

.search-form input::placeholder {
  color: #6b7280;
  opacity: 1;
}

.search-form button {
  background: transparent;
  border-radius: 999px;
  box-shadow: none;
  color: #111827;
  flex: 0 0 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  width: 34px;
}

.search-form button:hover {
  background: #f5f7fa;
  color: var(--orange);
  transform: none;
}

.search-form button .lucide {
  height: 20px;
  width: 20px;
}

.header-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: flex-end;
  min-width: 0;
}

.header-action,
.header-icon-button,
.header-user,
.header-chevron {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  white-space: nowrap;
}

.header-action {
  color: #15171a;
  font-family: "DM Sans", sans-serif;
  font-size: 0.83rem;
  font-weight: 800;
  gap: 7px;
  min-height: 40px;
}

.header-action .lucide {
  color: var(--orange);
  height: 17px;
  width: 17px;
}

/* Icone do WhatsApp (Bootstrap Icons, baseado em fonte) no header — dimensiona
   e usa o verde da marca pra ficar reconhecivel como acesso aos grupos. */
.header-brand-whatsapp .bi {
  color: #25d366;
  font-size: 18px;
  line-height: 1;
}

.header-action:hover,
.header-chevron:hover {
  color: var(--orange);
}

.header-push-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.header-push-btn.is-subscribed { color: var(--orange); }
.header-push-btn.is-subscribed .lucide { color: var(--orange); }

/* ── Heart / Favorite button ──────────────────────────── */
.heart-btn {
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  color: #9ca3af;
  cursor: pointer;
  display: flex;
  height: 30px;
  justify-content: center;
  opacity: 0;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 8px;
  transition: opacity 160ms ease, color 160ms ease, background 160ms ease, transform 140ms ease;
  width: 30px;
  z-index: 2;
}

.heart-btn svg, .heart-btn .lucide {
  fill: none;
  height: 15px;
  pointer-events: none;
  width: 15px;
}

.product-card:hover .heart-btn,
.heart-btn.is-favorite { opacity: 1; }

.heart-btn.is-favorite { background: #fff1f0; color: #f04438; }
.heart-btn.is-favorite svg { fill: #f04438; }
.heart-btn:hover { transform: scale(1.12); }
.heart-btn:active { transform: scale(0.95); }

.heart-btn-detail {
  align-items: center;
  background: #f8fafc;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: #9ca3af;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 46px;
  justify-content: center;
  opacity: 1;
  padding: 0;
  position: static;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 140ms ease;
  width: 46px;
}

.heart-btn-detail svg, .heart-btn-detail .lucide { height: 20px; width: 20px; }
.heart-btn-detail.is-favorite { background: #fff1f0; border-color: #fca5a5; color: #f04438; }
.heart-btn-detail.is-favorite svg { fill: #f04438; }
.heart-btn-detail:hover { transform: scale(1.06); }

/* ── Header user menu ────────────────────────────────── */
.header-user-wrap {
  position: relative;
}

.header-user-btn {
  align-items: center;
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  transition: background 160ms ease;
}

.header-user-btn:hover { background: #f3f4f6; }

.user-initials {
  align-items: center;
  background: var(--orange);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 0.7rem;
  font-weight: 700;
  height: 32px;
  justify-content: center;
  min-width: 32px;
  width: 32px;
}

.user-avatar-img {
  border-radius: 50%;
  height: 32px;
  object-fit: cover;
  width: 32px;
}

.header-user-btn .lucide { color: var(--muted); height: 14px; width: 14px; }

.user-dropdown {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  min-width: 200px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 200;
}

.user-dropdown-name {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  overflow: hidden;
  padding: 6px 10px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-dropdown-item {
  align-items: center;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-size: 0.86rem;
  gap: 8px;
  padding: 9px 10px;
  text-decoration: none;
  transition: background 140ms ease;
  width: 100%;
}

.user-dropdown-item:hover { background: #f3f4f6; }
.user-dropdown-item .lucide { color: var(--muted); height: 15px; width: 15px; }
.user-dropdown-logout { color: #dc2626; }
.user-dropdown-logout .lucide { color: #dc2626; }

/* ── Favorites page ──────────────────────────────────── */
.favorites-hero {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 40px 0 8px;
  text-align: center;
}

.favorites-hero h1 {
  align-items: center;
  display: flex;
  font-size: 1.6rem;
  gap: 10px;
}

.favorites-hero h1 .lucide { color: var(--orange); height: 28px; width: 28px; }
.favorites-sub { color: var(--muted); font-size: 0.9rem; margin: 0; }

.fav-prompt-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 60px auto;
  max-width: 340px;
  text-align: center;
}

.fav-prompt-inner .lucide { color: var(--muted); height: 48px; width: 48px; }
.fav-prompt-inner h2 { font-size: 1.2rem; }
.fav-prompt-inner p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

.favorites-grid { margin-top: 20px; }

.header-icon-button {
  border: 1px solid #e6ebf2;
  border-radius: 50%;
  color: #111827;
  height: 42px;
  width: 42px;
}

.header-icon-button:hover {
  background: #f7f8fa;
  color: var(--orange);
}

.header-icon-button .lucide {
  height: 19px;
  width: 19px;
}

.header-user {
  background: var(--orange);
  border-radius: 50%;
  color: #fff;
  height: 42px;
  width: 42px;
}

.header-user:hover {
  background: var(--orange-dark);
  transform: translateY(-1px);
}

.header-user .lucide {
  height: 21px;
  width: 21px;
}

.header-chevron {
  color: var(--orange);
  height: 34px;
  width: 22px;
}

.header-chevron .lucide {
  height: 18px;
  width: 18px;
}

/* So aparece no layout compacto (≤520px) — no desktop a busca ja fica
   sempre visivel por extenso, sem precisar de um botao pra abrir ela. */
.header-search-toggle {
  display: none;
  flex: 0 0 auto;
}

/* So aparece no layout compacto (≤520px) — o inverso de .header-mobile-hide.
   Usado no sininho de alertas (push) so-icone, que no desktop daria em
   duplicata com o botao "Alertas" com texto. */
.header-mobile-only {
  display: none;
}

@media (max-width: 1180px) {
  .header-inner {
    gap: 12px;
  }

  .header-action span {
    display: none;
  }

  .header-action {
    border: 1px solid #e6ebf2;
    border-radius: 50%;
    height: 40px;
    width: 40px;
  }
}

@media (max-width: 820px) {
  .site-header {
    min-height: 0;
  }

  .header-inner {
    flex-wrap: wrap;
    min-height: 0;
    row-gap: 8px;
  }

  .brand {
    flex: 1 1 auto;
  }

  .header-actions {
    gap: 8px;
  }

  .search-form {
    flex-basis: 100%;
    max-width: none;
    order: 3;
  }
}

@media (max-width: 520px) {
  /* Header compacto: logo + busca (icone que expande) + chat + notificacoes +
     avatar/entrar, tudo numa linha so — modelo tipo Pelando. Comunidades,
     Submeter e o botao de ativar push ficam de fora dessa linha (continuam
     acessiveis pelo rodape e pelo menu do usuario). */
  .header-inner {
    width: min(100% - 20px, 1492px);
  }

  .brand strong {
    font-size: 0.82rem;
  }

  .brand-logo {
    height: 27px;
  }

  .brand-domain {
    font-size: 0.66rem;
  }

  .header-mobile-hide {
    display: none;
  }

  .header-mobile-only {
    display: inline-flex;
  }

  .header-search-toggle {
    display: inline-flex;
  }

  .search-form {
    display: none;
    order: 4;
    flex-basis: 100%;
    margin-top: 8px;
    max-width: none;
  }

  .search-form.is-open {
    display: flex;
  }

  .header-actions {
    gap: 6px;
  }

  .header-icon-button {
    height: 38px;
    width: 38px;
  }

  .header-icon-button .lucide {
    height: 17px;
    width: 17px;
  }

  .header-user {
    height: 38px;
    width: 38px;
  }

  .user-initials,
  .user-avatar-img {
    height: 30px;
    min-width: 30px;
    width: 30px;
  }
}

.affiliate-note.icon-note::before {
  content: none;
}

.affiliate-note.icon-note .lucide {
  color: var(--orange);
}

.store-grid,
.category-index {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.store-card {
  align-items: center;
  background: #fff;
  border: 1px solid #e7e9ee;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(16, 24, 40, 0.05);
  display: grid;
  gap: 7px;
  min-height: 132px;
  padding: 18px;
}

.store-card span {
  align-items: center;
  background: var(--orange-soft);
  border-radius: 50%;
  color: var(--orange);
  display: inline-flex;
  font-family: "DM Sans", sans-serif;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  width: 42px;
}

/* Logo real da loja (quando salva) — mesmo circulo das iniciais, so que com
   fundo branco (a maioria dos logos de marca nao combina com o laranja) e a
   imagem centralizada dentro, sem esticar proporcao. */
.store-card-logo {
  background: #fff !important;
  border: 1px solid #eef0f4;
  overflow: hidden;
  padding: 6px;
}

.store-card-logo img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.store-card strong {
  color: #111827;
  font-family: "DM Sans", sans-serif;
}

.store-card small {
  color: #667085;
  font-weight: 750;
}

.expired-notice {
  align-items: center;
  background: #fff7ed;
  border: 1px solid rgba(238, 76, 42, 0.20);
  border-radius: 10px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 18px;
}

.expired-notice span {
  color: var(--orange-dark);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.expired-notice h1 {
  font-size: clamp(1.35rem, 3vw, 2rem);
  margin: 4px 0;
}

.expired-notice p {
  color: #667085;
  margin: 0;
}

.product-detail.is-expired .detail-image img {
  filter: grayscale(100%);
}

.detail-expired-badge {
  align-items: center;
  background: rgba(17, 24, 39, 0.85);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 6px;
  left: 18px;
  padding: 6px 12px;
  position: absolute;
  top: 18px;
  z-index: 2;
}

.detail-expired-badge i {
  height: 14px;
  width: 14px;
}

.detail-expired-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.detail-expired-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.detail-expired-actions .offer-button.is-disabled {
  background: #e5e7eb;
  box-shadow: none;
  color: #9ca3af;
  cursor: not-allowed;
  pointer-events: none;
}

.detail-expired-actions .detail-cta-similar {
  background: var(--orange);
}

.detail-expired-actions .detail-cta-similar:hover {
  background: var(--orange-dark);
}

.detail-expired-message {
  color: #667085;
  font-size: 0.85rem;
  margin: 8px 0 0;
  width: 100%;
}

.price-expired-label {
  color: #9ca3af;
  font-size: 0.75rem;
  font-style: italic;
  margin: 4px 0 0;
}

/* Frase de confianca de preco (estilo DealNews) — discreta, perto do preco.
   So aparece quando o historico realmente sustenta a afirmacao (ver
   priceHistory.service.js#computeConfidencePhrase). */
.price-confidence {
  align-items: center;
  color: var(--green-dark);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 700;
  gap: 4px;
  margin: 6px 0 0;
}

.price-confidence .lucide { height: 13px; width: 13px; }

.detail-media {
  display: grid;
  gap: 12px;
}

.product-whatsapp-strip {
  align-items: center;
  background: #ffd9b8;
  border: 1px solid rgba(238, 76, 42, 0.16);
  border-radius: 12px;
  color: #111827;
  display: grid;
  gap: 2px 12px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  padding: 16px 18px;
}

.product-whatsapp-strip > span {
  align-items: center;
  /* Era verde solido (#13a538) com icone branco — o icone novo ja vem verde
     (#00a94f embutido no SVG), entao o circulo virou branco pra nao ficar
     verde-sobre-verde. */
  background: #fff;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 1.35rem;
  grid-row: 1 / span 2;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.product-whatsapp-strip strong {
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.15;
}

.product-whatsapp-strip small {
  color: #344054;
  font-size: 0.88rem;
  line-height: 1.25;
}

.product-whatsapp-strip em {
  align-items: center;
  align-self: center;
  background: #ff5a1f;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-family: "DM Sans", sans-serif;
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 850;
  gap: 7px;
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  white-space: nowrap;
}

.product-whatsapp-strip em .lucide {
  height: 16px;
  width: 16px;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.share-button {
  align-items: center;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 999px;
  color: #16a34a;
  display: inline-flex;
  font-family: "DM Sans", sans-serif;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
}

.offer-facts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin: 6px 0 0;
}

.offer-facts div {
  background: #f8fafc;
  border: 1px solid #eef0f4;
  border-radius: 8px;
  padding: 10px;
}

.offer-facts dt {
  color: #667085;
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.offer-facts dd {
  color: #111827;
  font-weight: 850;
  margin: 3px 0 0;
}

.detail-panels {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 18px 0;
}

.detail-coupon {
  margin-top: 2px;
}

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

.sidebar-links a {
  background: #f8fafc;
  border: 1px solid #eef0f4;
  border-radius: 999px;
  color: #475467;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 7px 10px;
}

/* Cleaner deal cards */
.product-card {
  border-color: #e7e9ee;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(16, 24, 40, 0.05);
}

.product-card:hover {
  border-color: #dde2ea;
  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.08);
}

.product-image {
  background: #f7f8fa;
}

.product-card-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
}

.product-tags {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.deal-tag,
.deal-discount {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  min-height: 26px;
  padding: 0 9px;
}

.deal-tag {
  background: #fff3ef;
  color: var(--orange);
}

.deal-tag-quente,
.deal-tag-destaque {
  background: #fff0eb;
  color: var(--orange-dark);
}

.deal-tag-viral {
  background: #eef4ff;
  color: var(--blue);
}

.deal-tag-cupom {
  background: var(--green-soft);
  color: var(--green-dark);
}

.deal-tag-pegando-fogo {
  background: #fff0eb;
  color: var(--orange-dark);
}

.deal-discount {
  background: var(--green-soft);
  color: var(--green-dark);
}

.status-tag {
  align-items: center;
  background: #eef2f6;
  border-radius: 999px;
  color: #475467;
  display: inline-flex;
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  min-height: 26px;
  padding: 0 9px;
}

.status-active {
  background: var(--green-soft);
  color: var(--green-dark);
}

.status-expired,
.status-sold_out,
.status-price_changed,
.status-under_review {
  background: #f2f4f7;
  color: #667085;
}

.product-card.is-expired {
  opacity: 0.72;
}

.product-card.is-expired .product-image img {
  filter: grayscale(0.35);
}

.product-card.is-expired .card-cta.offer-button {
  background: #f8fafc;
  color: #475467;
}

/* ── Selo manual "Escolha da equipe" ──────────────────── */
/* Faixa no topo da imagem, encostada na esquerda, ocupando 75% da largura —
   combina com o desenho do SVG, que e reto na esquerda e arredondado so na
   direita. E um <span> (nao <img> direto) de proposito: varias regras
   espalhadas pelo CSS (".product-image img", ".deal-feed .product-image img"
   etc.) forcam height/width:100% em QUALQUER <img> dentro da imagem do card,
   e ganhavam por especificidade — o selo esticava verticalmente pra cobrir a
   foto toda. Um <span> nao e alcancado por nenhuma dessas regras, entao o
   <img> la dentro fica livre pra manter a proporcao (width:100%/height:auto
   do <img> preenchem o <span>, nao a imagem do produto). */
.staff-pick-badge {
  display: block;
  filter: drop-shadow(0 1px 3px rgba(16, 24, 40, 0.35));
  left: 0;
  position: absolute;
  top: 0;
  width: 75%;
  z-index: 2;
}

.staff-pick-badge img {
  display: block;
  height: auto;
  width: 100%;
}

/* Pagina do produto: mesma faixa no topo, so que mais curta. A imagem la e
   bem maior que a do card, entao os mesmos 75% davam um selo desproporcional
   — 50% mantem o selo num tamanho parecido com o do card. Vem depois da regra
   acima de proposito: mesma especificidade, quem vem por ultimo vence. */
.staff-pick-badge-detail {
  left: 0;
  top: 0;
  width: 50%;
}

/* ── Countdown / expires ─────────────────────────────── */
.expires-badge {
  background: rgba(0, 0, 0, 0.62);
  bottom: 0;
  color: #fff;
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  left: 0;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  position: absolute;
  right: 0;
  text-align: center;
}

.expires-badge[data-expires-level="warning"] { background: rgba(217, 119, 6, 0.88); }

.expires-badge[data-expires-level="urgent"] {
  animation: expires-pulse 1.6s ease-in-out infinite;
  background: rgba(220, 38, 38, 0.88);
}

@keyframes expires-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.expires-countdown { font-weight: 700; }
.expires-countdown[data-expires-level="normal"] { color: var(--ink); }
.expires-countdown[data-expires-level="warning"] { color: #d97706; }
.expires-countdown[data-expires-level="urgent"] { color: #dc2626; }
.expires-countdown[data-expires-level="expired"] { color: var(--muted); }

.expires-urgency {
  align-items: center;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius);
  color: #dc2626;
  display: flex;
  font-size: 0.85rem;
  font-weight: 600;
  gap: 8px;
  margin-bottom: 8px;
  padding: 10px 14px;
}

.expires-urgency svg { flex-shrink: 0; height: 15px; width: 15px; }

.expires-urgency[data-expires-level="warning"] {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

/* Prazo tranquilo (2+ dias, ou data absoluta pra prazos mais distantes) —
   discreto e neutro de proposito, sem o vermelho/animacao reservados pro
   nivel "urgent" (poucas horas). So informativo, nunca alarmista. */
.expires-urgency[data-expires-level="normal"] {
  background: var(--bg);
  border-color: var(--line);
  color: var(--muted);
}

.expires-urgency[data-expires-level="normal"] .lucide { color: var(--subtle); }

.coupon-inline {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Botao unico de cupom: mostra so o codigo + icone de copiar (o texto "Copiar
   cupom" foi unificado aqui). O botao inteiro e a "pilha" tracejada laranja e
   copia o codigo ao clicar (data-copy-coupon, tratado em main.js). */
.coupon-copy {
  align-items: center;
  background: #fff7ed;
  border: 1px dashed rgba(238, 76, 42, 0.35);
  border-radius: 999px;
  color: var(--orange-dark);
  cursor: pointer;
  display: inline-flex;
  gap: 7px;
  padding: 7px 12px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.coupon-copy code {
  background: none;
  border: 0;
  color: inherit;
  font-family: "DM Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  padding: 0;
}

.coupon-copy .lucide {
  height: 14px;
  opacity: 0.85;
  width: 14px;
}

.coupon-copy:hover {
  background: #ffedd5;
}

.coupon-copy.copied {
  border-color: rgba(18, 166, 106, 0.35);
  color: var(--green-dark);
}

.product-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.product-social-actions {
  align-items: center;
  display: flex;
  /* Quebra pra segunda linha quando os 4 pills nao cabem na largura do card
     (ex: grid de 3 colunas na faixa ~760-1039px, card ~236px) — antes a linha
     transbordava e o WhatsApp / badge de tempo ficavam cortados na borda.
     Em cards largos continua tudo numa linha so. */
  flex-wrap: wrap;
  gap: 6px 8px;
  justify-content: flex-start;
  min-width: 0;
}

.stat-pill {
  align-items: center;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 999px;
  color: #111827;
  display: inline-flex;
  font-family: "DM Sans", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
}

.stat-pill .lucide {
  height: 18px;
  width: 18px;
}

.price-drop-alert-btn {
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.price-drop-alert-btn.is-active {
  background: var(--orange-soft);
  border-color: var(--orange);
  color: var(--orange-dark);
}

.price-drop-alert-btn.is-active .lucide {
  color: var(--orange);
  fill: var(--orange-soft);
}

.temperature-stat {
  color: #1f2937;
}

.temperature-stat .lucide {
  color: #0ea5e9;
}

.temperature-stat.is-good .lucide {
  color: var(--green-dark);
}

.temperature-stat.is-hot .lucide,
.temperature-stat.is-fire .lucide,
.temperature-stat.is-hot strong {
  color: var(--orange);
}

.temperature-stat.is-fire strong {
  color: var(--orange-dark);
}

.temperature-stat.is-cold strong {
  color: #0ea5e9;
}

.temperature-stat small {
  color: #667085;
  font-size: 0.72rem;
  font-weight: 750;
}

.whatsapp-share {
  align-items: center;
  color: #16a34a;
  cursor: pointer;
  flex: 0 0 38px;
  font: inherit;
  height: 38px;
  justify-content: center;
  min-width: 38px;
  padding: 0;
  width: 38px;
}

.whatsapp-share .bi {
  display: block;
  font-size: 1.08rem;
  line-height: 1;
}

.share-popover-wrap {
  position: relative;
}

/* Alem do overflow, o card precisa subir de camada enquanto o popover esta
   aberto. Motivo: o :hover do card aplica transform (translateY), e transform
   cria um contexto de empilhamento — o z-index:30 do .share-popover passa a
   valer so DENTRO do card, e nao mais contra o resto da pagina. Como o card
   fica com z-index:auto, os cards seguintes da grade (posicionados e depois
   no DOM) pintavam por cima do popover. O z-index aqui e menor que os 50 do
   .site-header de proposito, pro popover nao cobrir o cabecalho fixo. */
.product-card:has(.share-popover-wrap.is-open),
.product-detail:has(.share-popover-wrap.is-open),
.product-detail:has(.report-popover-wrap.is-open) {
  overflow: visible;
  position: relative;
  z-index: 40;
}

.share-popover {
  background: #fff;
  border: 1px solid #eef0f4;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
  display: none;
  min-width: 148px;
  padding: 8px 0;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
}

.share-popover-wrap.is-open .share-popover {
  display: block;
}

.share-popover a,
.share-popover button {
  align-items: center;
  background: transparent;
  border: 0;
  color: #111827;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 0.92rem;
  gap: 10px;
  padding: 10px 14px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.share-popover a:hover,
.share-popover button:hover,
.share-popover button.copied {
  background: #f8fafc;
}

.share-popover .bi,
.share-popover .lucide {
  color: #16a34a;
  flex: 0 0 18px;
  font-size: 1rem;
  height: 18px;
  width: 18px;
}

.share-popover button .lucide {
  color: var(--orange);
}

.detail-image-share-wrap {
  position: absolute;
  right: 12px;
  top: 54px;
  z-index: 2;
}

.detail-image-share {
  align-items: center;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.detail-image-share .bi { color: #25d366; font-size: 1.05rem; }
.detail-image-share .lucide { height: 16px; width: 16px; }

.detail-image-report.is-active,
.detail-image-report:disabled {
  background: #fef2f2;
  border-color: #f87171;
  color: #b91c1c;
  cursor: default;
}

.card-cta.offer-button {
  background: #fff;
  border: 1px solid #e3e7ee;
  box-shadow: none;
  color: #111827;
  gap: 8px;
  justify-content: center;
  margin-top: 0;
  min-height: 40px;
  padding: 0 18px;
  white-space: nowrap;
  width: 100%;
}

.card-cta.offer-button:hover {
  background: #fff7f3;
  border-color: rgba(238, 76, 42, 0.28);
  color: var(--orange);
  transform: none;
}

.card-cta .lucide {
  color: var(--orange);
  height: 17px;
  width: 17px;
}

/* Cards em grid (Recentes, Quentes, Cupons, Categoria, Busca, etc.) — NAO afeta
   o card em lista da aba Destaques (.deal-feed) nem o shelf de relacionados
   (.shelf-track), que tem sua propria largura de coluna. */
/* .product-card em si nao tinha grid-template-columns proprio — o width:244px
   fixo da imagem virava a contribuicao de max-content da coluna implicita e
   forcava o card inteiro (e o .product-body, base do centro do botao) a ficar
   mais largo que o espaco real em telas de notebook, mesmo com overflow:hidden
   escondendo a sobra visualmente. minmax(0,1fr) libera a coluna pra encolher. */
.products-grid .product-card {
  grid-template-columns: minmax(0, 1fr);
}

.products-grid .product-image {
  border-radius: 10px;
  margin: 18px auto 0;
  max-width: 100%;
  overflow: hidden;
  width: 196px;
}

/* -webkit-line-clamp sozinho nao corta limpo aqui (o h3 e item de um grid,
   e a altura acaba variando 40-46px em vez de travar em 2 linhas, deixando
   um pedaco da 3a linha vazar) — max-height força o corte exato, valendo
   como rede de seguranca mesmo quando o line-clamp funciona certo. */
.products-grid .product-card h3 {
  display: -webkit-box;
  /* Fonte um pouco menor que o resto dos cards pra caber mais texto nas 2
     linhas antes do corte — titulos longos (ex: "Cadeira Gamer... Apoio Pe
     Preto") estavam sendo truncados cedo demais. max-height segue em em, entao
     continua travado em exatamente 2 linhas. */
  font-size: 0.86rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-height: 2.6em;
  overflow: hidden;
}

/* Especificidade alta de proposito: essa folha de estilo tem varios resets de
   .card-cta.offer-button em breakpoints diferentes (herdados de temas
   importados) que, com a mesma especificidade, ganhariam por ordem de
   declaracao e apagariam a cor laranja em telas estreitas. :not(.is-expired)
   preserva o botao cinza ja usado em ofertas expiradas. */
.products-grid .product-card:not(.is-expired) .card-cta.offer-button.card-cta-inline {
  background: var(--orange);
  border: 0;
  color: #fff;
}

.products-grid .product-card:not(.is-expired) .card-cta.offer-button.card-cta-inline:hover {
  background: var(--orange-dark);
  color: #fff;
}

.products-grid .product-card:not(.is-expired) .card-cta.offer-button.card-cta-inline .lucide {
  color: #fff;
}

@media (max-width: 1039px) {
  /* Pedido explicito: no mobile, os cards de Recentes/Quentes/Categoria/
     Busca/etc. (.products-grid) passam a usar o mesmo botão "Ver mais" da
     home (.deal-feed) — outline branco, não mais preenchido laranja.
     Mesma especificidade das 3 regras acima (só dentro do media query),
     pra vencer por ordem de declaração sem precisar de !important; no
     desktop nada muda. */
  .products-grid .product-card:not(.is-expired) .card-cta.offer-button.card-cta-inline {
    background: #fff;
    border: 1px solid #e3e7ee;
    color: #111827;
  }

  .products-grid .product-card:not(.is-expired) .card-cta.offer-button.card-cta-inline:hover {
    background: #fff7f3;
    border-color: rgba(238, 76, 42, 0.28);
    color: var(--orange);
  }

  .products-grid .product-card:not(.is-expired) .card-cta.offer-button.card-cta-inline .lucide {
    color: var(--orange);
  }
}

/* So em telas com mouse de verdade o botao fica escondido ate o hover — em
   touch (sem hover confiavel) ele continua sempre visivel, ja que e o link
   de afiliado e nao pode depender de um "hover fantasma" no toque. */
@media (hover: hover) {
  .products-grid .product-body {
    position: relative;
  }

  /* .coupon-inline e .product-social-actions ficam de fora do blur de proposito:
     tem botao de copiar cupom e os icones de alerta/comentario/whatsapp, que
     precisam continuar clicaveis e legiveis mesmo com o card em hover. */
  .products-grid .product-card-top,
  .products-grid .product-card h3,
  .products-grid .price-row {
    transition: filter 200ms ease;
  }

  .products-grid .product-card:hover .product-card-top,
  .products-grid .product-card:hover h3,
  .products-grid .product-card:hover .price-row {
    filter: blur(4px);
  }

  .products-grid .card-cta-inline {
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 200ms ease;
    /* Em telas de notebook comuns (1280-1366px) o card fica mais estreito que
       196px — sem esse limite o botao estourava pros dois lados do card. */
    width: min(196px, calc(100% - 24px));
    z-index: 2;
  }

  .products-grid .product-card:hover .card-cta-inline {
    opacity: 1;
    pointer-events: auto;
  }

  /* .card-cta.offer-button:hover (regra antiga, la em cima) zera o transform
     no hover do PROPRIO botao — sem essa reafirmacao aqui, no instante em que
     o cursor entra no botao (nao so no card) a centralizacao some e ele
     "pula" pro lado, cortando a metade. Especificidade alta de proposito pra
     vencer aquela regra. */
  .products-grid .product-card .card-cta.offer-button.card-cta-inline:hover {
    transform: translate(-50%, -50%);
  }
}

.cta-label-mobile {
  display: none;
}

.deal-feed .product-card {
  grid-template-columns: 212px minmax(0, 1fr);
  padding: 14px;
}

.deal-feed .product-vote {
  display: none;
}

.deal-feed .product-image {
  min-height: 176px;
  width: 212px;
}

.deal-feed .product-body {
  align-content: stretch;
  gap: 10px;
  padding: 4px 0 4px 16px;
}

.deal-feed .product-card h3 {
  font-size: 1.03rem;
  line-height: 1.3;
}

.deal-feed .price-row {
  border-bottom: 1px solid #eef0f4;
  padding-bottom: 10px;
}

@media (max-width: 760px) {
  .product-card-actions,
  .product-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .deal-feed .product-card {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .deal-feed .product-image {
    aspect-ratio: 1 / 1;
    height: 112px;
    min-height: 0;
    width: 112px;
  }

  .deal-feed .product-body {
    padding-left: 12px;
  }

  .product-tags {
    justify-content: flex-start;
  }

  .card-cta.offer-button {
    width: 100%;
  }
}

/* Wider centered desktop layout */
@media (min-width: 1040px) {
  .site-main {
    width: min(1492px, calc(100% - 28px));
  }

  .ad-slot-top,
  .offer-tabs,
  .affiliate-note,
  .community-layout {
    width: 100%;
  }

  .community-layout {
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .ad-slot-sidebar {
    top: 92px;
  }
}

@media (min-width: 1320px) {
  .community-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .deal-feed .product-card {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .deal-feed .product-image {
    min-height: 204px;
    width: 220px;
  }
}

/* Mobile deal card polish */
@media (max-width: 640px) {
  .deal-feed {
    gap: 10px;
  }

  .deal-feed .product-card {
    align-items: start;
    border-radius: 14px;
    column-gap: 10px;
    grid-template-columns: 86px minmax(0, 1fr);
    row-gap: 0;
    padding: 12px;
  }

  .deal-feed .product-image {
    align-self: start;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    grid-column: 1;
    grid-row: 1 / span 3;
    height: 86px;
    min-height: 0;
    width: 86px;
  }

  .product-meta {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-meta span:first-child {
    color: #8a8f9b;
  }

  .product-meta span + span::before {
    content: " · ";
  }

  .product-tags {
    display: none;
  }

  .deal-feed .product-card h3 {
    color: #111827;
    display: -webkit-box;
    font-family: "DM Sans", sans-serif;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.22;
    margin: 4px 0 0;
    max-height: 3.66em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .deal-feed .price-row {
    border-bottom: 0;
    gap: 5px;
    margin-top: 4px;
    padding-bottom: 0;
  }

  .deal-feed .price-row strong {
    font-size: 1.12rem;
  }

  .deal-feed .price-row del {
    font-size: 0.76rem;
  }

  .product-card-actions {
    align-items: center;
    flex-direction: row;
    gap: 8px;
    margin-top: 10px;
  }

  .product-social-actions {
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 3px;
    row-gap: 6px;
  }

  .stat-pill {
    font-size: 0.72rem;
    gap: 3px;
    min-height: 32px;
    padding: 0 6px;
  }

  .stat-pill .lucide {
    height: 15px;
    width: 15px;
  }

  .temperature-stat small {
    display: none;
  }

  .whatsapp-share {
    flex-basis: 30px;
    height: 30px;
    min-width: 30px;
    width: 30px;
  }

  .card-cta.offer-button {
    flex: 0 0 auto;
    font-size: 0.82rem;
    min-height: 36px;
    padding: 0 13px;
    width: auto;
  }

  .cta-label-desktop {
    display: none;
  }

  .cta-label-mobile {
    display: inline;
  }

  .card-cta .lucide {
    height: 16px;
    width: 16px;
  }
}

@media (max-width: 380px) {
  .deal-feed .product-card {
    grid-template-columns: 78px minmax(0, 1fr);
    padding: 10px;
  }

  .deal-feed .product-image {
    height: 78px;
    width: 78px;
  }

  .stat-pill {
    padding: 0 7px;
  }

  .card-cta.offer-button {
    padding: 0 9px;
  }
}

/* Conversion pass: calmer feed hierarchy */
.deal-feed .product-card {
  border-color: #e9edf2;
}

.deal-feed .product-card h3 a {
  color: #151923;
}

.deal-feed .product-card h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.deal-feed .price-row strong {
  color: #444444;
  font-size: clamp(1.15rem, 1.1vw, 1.38rem);
  letter-spacing: 0;
}

.deal-feed .product-meta {
  color: #7b8494;
}

.deal-feed .product-meta span:last-child {
  color: #475467;
  font-weight: 850;
}

.deal-feed .deal-tag,
.deal-feed .deal-discount,
.deal-feed .status-tag {
  min-height: 24px;
  padding-inline: 8px;
}

.deal-feed .card-cta.offer-button {
  font-weight: 900;
}

@media (min-width: 761px) {
  .deal-feed .product-card {
    grid-template-columns: 188px minmax(0, 1fr);
  }

  .deal-feed .product-image {
    min-height: 168px;
    width: 188px;
  }
}

@media (max-width: 640px) {
  .deal-feed .product-card {
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(16, 24, 40, 0.05);
  }

  .deal-feed .product-card h3 {
    -webkit-line-clamp: 3;
  }

  .deal-feed .price-row strong {
    font-size: 1.2rem;
  }

  .deal-feed .product-meta span:first-child {
    display: none;
  }

  .deal-feed .product-meta span + span::before {
    content: "";
  }
}

/* Stage 4: feed conversion polish */
.feed-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

.feed-summary article {
  align-items: center;
  background: #fff;
  border: 1px solid #e9edf2;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(16, 24, 40, 0.04);
  display: grid;
  gap: 2px 9px;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 12px;
}

.feed-summary span {
  align-items: center;
  background: #fff3ef;
  border-radius: 999px;
  color: var(--orange);
  display: inline-flex;
  grid-row: span 2;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.feed-summary .lucide {
  height: 17px;
  width: 17px;
}

.feed-summary strong {
  color: #151923;
  font-family: "DM Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
}

.feed-summary small {
  color: #667085;
  font-size: 0.78rem;
  font-weight: 800;
}

.deal-feed .product-card {
  background: #fff;
  gap: 0;
}

.deal-feed .product-image {
  background: #f6f7f9;
  overflow: hidden;
}

.deal-feed .product-image img {
  object-fit: contain;
  padding: 4px;
}

.deal-feed .product-body {
  min-height: 100%;
}

.product-micro-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -2px;
}

.product-micro-flags span {
  background: #f8fafc;
  border: 1px solid #e9edf2;
  border-radius: 999px;
  color: #475467;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1;
  padding: 6px 8px;
}

@media (min-width: 761px) {
  .deal-feed .product-card {
    grid-template-columns: 176px minmax(0, 1fr);
    padding: 12px;
  }

  .deal-feed .product-image {
    min-height: 156px;
    width: 176px;
  }

  .deal-feed .product-card h3 {
    font-size: 1rem;
    line-height: 1.24;
    -webkit-line-clamp: 2;
  }

  .deal-feed .product-body {
    gap: 8px;
    padding-left: 14px;
  }

  .deal-feed .price-row {
    padding-bottom: 8px;
  }

}

@media (max-width: 640px) {
  .feed-summary {
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    margin: 8px 0 10px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .feed-summary article {
    min-width: 92px;
    padding: 10px;
  }

  .deal-feed .product-card {
    grid-template-columns: 96px minmax(0, 1fr);
    padding: 11px;
  }

  .deal-feed .product-image {
    height: 96px;
    width: 96px;
  }

  .deal-feed .product-image img {
    padding: 3px;
  }

  .deal-feed .product-card h3 {
    font-size: 0.88rem;
    line-height: 1.2;
  }

  .deal-feed .price-row strong {
    font-size: 1.22rem;
  }

  .product-micro-flags {
    display: none;
  }

  .product-card-actions {
    margin-top: 9px;
  }

  .stat-pill {
    border-color: #dfe5ee;
  }

  .card-cta.offer-button {
    background: #fff;
    border-color: #dfe5ee;
    color: #151923;
    font-weight: 900;
  }
}

/* ═══════════════════════════════════════════════════
   DEAL FEED CARD REDESIGN — horizontal list style
   ═══════════════════════════════════════════════════ */

/* CTA variants: aside = deal-feed right column; inline = elsewhere */
.card-cta-aside { display: none; }
.card-cta-aside-wrap { display: none; }

/* Top row: badges left + time right */
.product-card-top {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: space-between;
  min-width: 0;
}

.product-card-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.card-time-ago {
  align-items: center;
  color: #9ca3af;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  gap: 3px;
  white-space: nowrap;
}

.card-time-ago [data-lucide] {
  height: 11px;
  width: 11px;
}

/* Store name inline with price — "Vendido por" fica cinza, so o nome da
   loja (.price-store-name) usa a mesma cor do titulo do produto */
.price-store {
  align-items: center;
  color: #9ca3af;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 500;
  gap: 4px;
}

.price-store-sep { color: #d1d5db; }

.price-store-name {
  color: #151923;
  font-weight: 800;
}

.price-store [data-lucide] {
  color: var(--orange);
  height: 12px;
  width: 12px;
}

.price-store-logo {
  border-radius: 50%;
  height: 24px;
  object-fit: contain;
  width: 24px;
}

.price-store-fallback {
  align-items: center;
  background: var(--orange-soft);
  border-radius: 50%;
  color: var(--orange-dark);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 800;
  height: 24px;
  justify-content: center;
  width: 24px;
}

/* Horizontal card grid: image | body | cta */
.deal-feed .product-card {
  border-radius: 14px;
  column-gap: 0;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  row-gap: 0;
}

.deal-feed .product-image {
  align-self: stretch;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border-radius: 0;
  height: auto;
  min-height: 0;
  width: 96px;
}

.deal-feed .product-image img {
  border-radius: var(--radius);
  padding: 6px;
}

.deal-feed .product-body {
  align-content: start;
  display: grid;
  gap: 5px;
  min-height: auto;
  padding: 10px 12px;
}

/* Time-ago flutua fixo no canto superior direito do card (ancorado no card inteiro,
   nao na coluna do meio), independente dos badges e da coluna do botao */
.deal-feed .card-time-ago {
  position: absolute;
  right: 12px;
  top: 12px;
}

.deal-feed .product-card h3 {
  font-size: 0.88rem;
  line-height: 1.25;
  margin: 0;
  -webkit-line-clamp: 2;
}

.deal-feed .price-row {
  align-items: baseline;
  border-bottom: 0;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding-bottom: 0;
}

.deal-feed .price-row strong {
  font-size: 1.08rem;
}

.deal-feed .card-cta-inline { display: none; }

/* Right CTA: wrapper alinha o pill com a linha de stats */
.deal-feed .card-cta-aside-wrap {
  align-items: center;
  align-self: flex-end;
  display: flex;
  margin-bottom: 10px;
  margin-right: 12px;
}

/* Right CTA: pill button, tamanho do conteudo */
.deal-feed .card-cta-aside {
  align-items: center;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 999px;
  color: #151923;
  display: inline-flex;
  flex-direction: row;
  font-family: "DM Sans", sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  gap: 6px;
  justify-content: center;
  padding: 9px 14px;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.deal-feed .card-cta-aside:hover {
  background: #f8fafc;
  border-color: #d0d5dd;
  color: #151923;
}

.deal-feed .card-cta-aside span {
  line-height: 1.2;
  white-space: nowrap;
}

.deal-feed .card-cta-aside [data-lucide] {
  color: var(--orange);
  height: 15px;
  width: 15px;
}

@media (min-width: 761px) {
  .deal-feed .product-card {
    grid-template-columns: 124px minmax(0, 1fr) auto;
    padding: 0;
  }

  .deal-feed .product-image {
    min-height: 0;
    width: 124px;
  }

  .deal-feed .product-body {
    gap: 6px;
    padding: 12px 14px;
  }

  .deal-feed .product-card h3 {
    font-size: 0.95rem;
  }

  .deal-feed .price-row strong {
    font-size: 1.15rem;
  }

  .deal-feed .card-cta-aside-wrap {
    margin-bottom: 12px;
  }

  .deal-feed .card-cta-aside {
    font-size: 0.78rem;
    padding: 10px 16px;
  }
}

@media (min-width: 1040px) {
  .deal-feed .product-card {
    grid-template-columns: 148px minmax(0, 1fr) auto;
  }

  .deal-feed .product-image {
    width: 148px;
  }

  .deal-feed .product-body {
    padding: 14px 16px;
  }

  .deal-feed .product-card h3 {
    font-size: 1rem;
    -webkit-line-clamp: 3;
  }

  .deal-feed .price-row strong {
    font-size: clamp(1.12rem, 1.1vw, 1.32rem);
  }

  .deal-feed .card-cta-aside-wrap {
    margin-bottom: 14px;
  }
}

@media (max-width: 640px) {
  .deal-feed .product-card {
    column-gap: 0;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    padding: 0;
    row-gap: 0;
  }

  .deal-feed .product-image {
    height: 84px;
    min-height: 0;
    width: 84px;
  }

  .deal-feed .product-body {
    gap: 4px;
    padding: 8px 10px;
  }

  .deal-feed .product-card h3 {
    font-size: 0.82rem;
    -webkit-line-clamp: 2;
  }

  .deal-feed .price-row strong {
    font-size: 1rem;
  }

  .deal-feed .card-cta-aside-wrap {
    margin-bottom: 8px;
    margin-right: 8px;
  }

  .deal-feed .card-cta-aside {
    font-size: 0.7rem;
    padding: 7px 10px;
  }

  .deal-feed .card-cta-aside [data-lucide] {
    height: 13px;
    width: 13px;
  }
}

@media (max-width: 380px) {
  .deal-feed .product-card {
    grid-template-columns: 72px minmax(0, 1fr) auto;
  }

  .deal-feed .product-image {
    height: 72px;
    width: 72px;
  }

  .deal-feed .card-cta-aside-wrap {
    margin-right: 6px;
  }

  .deal-feed .card-cta-aside {
    padding: 6px 8px;
  }
}

/* ═══════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
   ═══════════════════════════════════════════════════ */

.product-detail,
.product-related-wrap {
  margin-inline: auto;
  max-width: 1390px;
}

/* ── Hero: imagem+info (esquerda) + comentários (direita) ──────── */

.product-detail {
  display: block;
}

/* ═══════════════════════════════════════════════════
   Pagina do produto — layout "pd-*" (cards empilhados,
   cada um com coluna de patrocinado opcional ao lado).
   Reaproveita os componentes/CSS ja existentes (vote-icon-btn,
   report-popover, share-popover, price-alert-*, heart-btn,
   user-note-*, mini-panel/comments) — so a moldura/posicionamento
   e novo aqui.
   ═══════════════════════════════════════════════════ */

.pd-row {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-bottom: 16px;
}

.pd-body-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

/* Rail de banners patrocinados independente do fluxo dos cards — so
   aparece no desktop (ver media query). No mobile, os slots continuam
   aparecendo dentro de cada .pd-row (versao duplicada, logo abaixo do
   card correspondente), entao esse aqui fica escondido de proposito pra
   nao mostrar os mesmos banners 2x na mesma tela. */
.pd-ad-rail {
  display: none;
}

.pd-card {
  background: var(--surface);
  border: 1px solid rgba(228, 231, 236, 0.92);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  padding: 18px;
}

.pd-card-title {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 14px;
}

.pd-sponsored-slot {
  align-items: center;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  min-height: 90px;
}

.pd-sponsored-slot span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Espaco preenchido com banner real (Amazon Associates) — borda solida em
   vez de tracejada (a tracejada e so do placeholder vazio), rotulo
   "Publicidade" pequeno acima da imagem, empilhados em coluna. */
.pd-sponsored-slot-filled {
  background: #fff;
  border-style: solid;
  flex-direction: column;
  gap: 8px;
  padding: 6px 14px 14px;
}

/* .pd-sponsored-slot-filled prefixado de proposito: ".pd-sponsored-slot
   span" (acima) tem mais especificidade (classe+elemento) que só
   ".pd-sponsored-label" (classe) e venceria mesmo definido antes. */
.pd-sponsored-slot-filled .pd-sponsored-label {
  color: var(--muted);
  font-size: 0.52rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pd-sponsored-slot-filled a {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 0;
  width: 100%;
}

.pd-sponsored-slot-filled img {
  /* Sem max-height fixo baixo (era 280px, apertava demais um banner
     300x600) — 620px acomoda tanto 300x250 (retangulo) quanto 300x600
     (meia-pagina), os 2 formatos padrao que cabem numa coluna de 300px,
     sem esticar nenhum dos dois (object-fit:contain preserva a proporcao
     real de qualquer imagem menor que isso). */
  border-radius: 6px;
  max-height: 620px;
  max-width: 100%;
  object-fit: contain;
}

/* Banner intercalado entre cards de produto (home/categoria/loja), a cada
   8 cards — so aparece no mobile (no desktop os mesmos 4 slots ja
   aparecem na coluna lateral, ver .sidebar-ad-stack); aqui, formato fixo
   300x250 e 70% da largura da tela, centralizado, pra nao quebrar o ritmo
   visual da lista de cards como um banner de largura total faria. */
.pd-sponsored-slot-feed {
  display: none;
}

@media (max-width: 1039px) {
  .pd-sponsored-slot-feed {
    display: flex;
    margin: 0 auto;
    max-width: 300px;
    width: 70vw;
  }

  .pd-sponsored-slot-feed.pd-sponsored-slot-filled img {
    max-height: 250px;
  }
}

/* ── Card principal ────────────────────────────────── */

.pd-main-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

.pd-image-col .detail-image {
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  max-width: 320px;
}

.pd-content-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pd-context-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.pd-context-badge {
  background: var(--orange-soft);
  border-radius: 999px;
  color: var(--orange-dark);
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 10px;
}

.pd-context-text {
  color: var(--muted);
  font-size: 10px;
}

.pd-context-text strong { color: var(--ink); }

.pd-menu-wrap { margin-left: auto; }

.pd-menu-btn {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.pd-menu-btn:hover { background: var(--orange-soft); color: var(--orange-dark); }
.pd-menu-btn .lucide { height: 17px; width: 17px; }

.pd-menu-btn.is-active,
.pd-menu-btn:disabled {
  background: #fef2f2;
  border-color: #f87171;
  color: #b91c1c;
}

.pd-title {
  color: var(--ink);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.28;
  margin: 2px 0 0;
  /* ch = largura media de 1 caractere nesse font-size — title curto fica
     numa linha so, a partir de ~35 caracteres quebra pra segunda linha (no
     espaco antes da palavra, nao no meio dela). Em telas estreitas, a
     coluna em si ja e mais estreita que 35ch, entao isso nao muda nada la. */
  max-width: 35ch;
}

.pd-price-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 0;
}

.pd-price {
  color: var(--ink);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.pd-price-currency { font-size: 1.05rem; margin-right: 1px; }

.pd-price-old {
  color: var(--muted);
  font-size: 1rem;
  text-decoration: line-through;
}

.pd-discount-badge {
  color: var(--green-dark);
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
}

.pd-social-line {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  gap: 6px 16px;
  margin: 2px 0 12px;
}

.pd-social-item {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.pd-social-item .lucide { flex-shrink: 0; height: 14px; width: 14px; }
.pd-social-item:first-child .lucide { color: var(--orange); }
.pd-social-item:not(:first-child) .lucide { color: var(--green); }

.pd-stats-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
}

.pd-stat-vote {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
}

.pd-stat-vote .vote-icon-btn { height: 27px; width: 27px; }
.pd-stat-vote .vote-icon-btn .lucide { height: 13px; width: 13px; }
.pd-stat-vote .price-insight-vote-total { font-size: 0.72rem; padding: 2px 7px; }

/* So icone+texto, sem pilula/fundo — a unica com essa "moldura" no card
   principal e o widget de voto (.pd-stat-vote), de proposito. */
.pd-stat-pill {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 6px;
}

.pd-stat-pill .lucide { height: 16px; width: 16px; }
a.pd-stat-pill:hover { color: var(--orange-dark); }

.pd-cta-row {
  /* flex-end (era center) — o QR code (90px) e bem mais alto que o
     botao/icones (~44-48px); center deixava sobrando espaco em cima E
     embaixo do QR, flex-end alinha tudo pela base. */
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -11px 0 0;
}

.pd-cta-btn {
  align-items: center;
  background: var(--orange);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  /* flex-grow 0 (era 1) — sem isso o botao esticava pra preencher todo o
     espaco sobrando na linha; agora fica so do tamanho do conteudo. */
  flex: 0 1 auto;
  font-size: 0.92rem;
  font-weight: 800;
  gap: 10px;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
}

.pd-cta-btn:hover { background: var(--orange-dark); color: #fff; }
.pd-cta-btn .lucide { height: 18px; width: 18px; }

/* Mesmo link do botao "Ver oferta" — empurrado pro fim da linha (mesma
   fileira do CTA/icones, nao sobreposto/absoluto) pra nao arriscar colidir
   com titulo/preco em produtos com texto mais longo. */
.pd-qr-code {
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-shrink: 0;
  height: 90px;
  margin-left: auto;
  width: 90px;
  /* So desktop (ver @media min-width:1040px abaixo) — no celular quem esta
     vendo a pagina ja esta no proprio celular, escanear nao faz sentido. */
  display: none;
}

.pd-icon-wrap { position: relative; }

.pd-icon-btn {
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.pd-icon-btn:hover { border-color: var(--orange); color: var(--orange-dark); }
.pd-icon-btn .lucide { height: 18px; width: 18px; }
.pd-icon-btn .bi { color: #25d366; font-size: 1.05rem; }

/* Alerta ativo mostra bell + X de remover lado a lado — precisa de mais
   espaco que um circulo perfeito, vira uma pilula (mesma altura). */
.pd-icon-wrap .price-alert-active.pd-icon-btn {
  border-color: var(--green);
  border-radius: 999px;
  color: var(--green-dark);
  gap: 2px;
  padding: 0 10px;
  width: auto;
}

/* ═══════════════════════════════════════════════════
   Card principal — layout MOBILE especifico (referencia visual a parte do
   desktop). So existe dentro de @media (max-width:1039px) — o desktop
   (≥1040px, ver bloco @media min-width:1040px mais abaixo) nao e tocado por
   nenhuma regra daqui. Reaproveita 100% os componentes/JS existentes (voto,
   favorito, compartilhar, denuncia, alerta de preco) — nenhum deles e
   duplicado, so reagrupados numa ordem/linha diferente via "order" (technica
   flexbox: .pd-content-col vira row+wrap, os blocos que precisam ocupar a
   linha inteira ganham flex-basis:100%, e só o grupo de icones fica lado a
   lado). Elementos novos (badge na imagem, avatar, loja, rotulos dos
   icones) sao só decorativos/informativos — escondidos por padrao (ver
   regras logo abaixo, fora do media query) e mostrados so aqui dentro. */
.pd-mobile-badge,
.pd-mobile-views,
.pd-mobile-store,
.pd-icon-label {
  display: none;
}

/* .detail-image prefixado de proposito: .report-popover-wrap (mais abaixo
   no arquivo) define display:inline-flex com a mesma especificidade de um
   seletor de 1 classe — sem esse prefixo, a ordem no arquivo desempataria a
   favor da regra errada e isso apareceria tambem no desktop. */
.detail-image .pd-image-menu-wrap {
  display: none;
}

/* Avatar de quem postou — desktop e mobile (nao e mais so-mobile). Mesmo
   tamanho nos dois, sem precisar de override dentro do media query. */
.pd-avatar {
  align-items: center;
  background: var(--bg);
  border-radius: 50%;
  color: var(--muted);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  overflow: hidden;
  width: 28px;
}

.pd-avatar img { height: 100%; object-fit: cover; width: 100%; }
.pd-avatar .lucide { height: 14px; width: 14px; }

.pd-context-time {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  gap: 3px;
}

.pd-context-time .lucide { height: 12px; width: 12px; }

@media (max-width: 1039px) {
  .pd-card-main {
    overflow: hidden;
    padding: 0 0 18px;
  }

  .pd-main-grid { gap: 0; }

  .pd-image-col .detail-image {
    /* Area cinza ocupa a largura toda do card (igual antes, sem a reducao
       de max-width) — a imagem em si fica menor por causa do padding, que
       revela o cinza em volta dela, nao por uma caixa mais estreita. */
    aspect-ratio: 4 / 3;
    background: #f0f0f0;
    margin: 14px;
    max-width: none;
    padding: 18px;
    /* width:auto sobrescreve o width:100% da regra base (.detail-image,
       mais abaixo no arquivo) — sem isso o box ficava 100% da coluna MAIS
       a margem, estourando pra fora do card do lado direito. */
    width: auto;
  }

  .pd-content-col {
    align-items: flex-start;
    /* column-gap 10px = espaco horizontal entre os 5 icones lado a lado
       (intacto); row-gap 4px (era 10px nos dois) = espaco vertical entre
       cada "linha cheia" (contexto/titulo/preco/loja/cta/icones), mais
       enxuto. */
    column-gap: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 14px 18px 0;
    row-gap: 4px;
  }

  /* Badge de contexto sai do texto (fica só na imagem, ver .pd-mobile-badge
     abaixo) — canto oposto ao expirado/staff-pick pra nunca colidir. */
  .pd-context-badge { display: none; }

  .pd-avatar {
    font-size: 0.52rem;
    height: 18px;
    width: 18px;
  }

  .pd-avatar .lucide { height: 10px; width: 10px; }

  .pd-context-text { font-size: 11.5px; }

  .pd-mobile-badge {
    background: rgba(17, 24, 39, 0.72);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.66rem;
    font-weight: 800;
    left: 12px;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    position: absolute;
    top: 12px;
    z-index: 2;
  }

  /* Botao "Avisar sobre esta oferta" duplicado sobre a imagem — igual o
     desktop, que ja mostra ele no topo do card (la, o "..." fica no topo
     por causa do layout lado a lado; aqui, como a imagem ocupa a largura
     toda, o jeito de ficar "no topo" e sobrepor a propria imagem). O
     original em .pd-context-row (ver regra logo abaixo) some no mobile pra
     nao duplicar visualmente. */
  /* .detail-image prefixado de proposito: .report-popover-wrap (mais abaixo
     no arquivo) tambem define position:relative com a mesma especificidade
     de um seletor de 1 classe — sem esse prefixo, a ordem no arquivo
     desempataria a favor da regra errada (mesmo problema ja visto com
     .vote-icon-btn). */
  .detail-image .pd-image-menu-wrap {
    display: block;
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 2;
  }

  /* Fundo solido + sombra (nao so translucido) — o botao original conta com
     o fundo claro do card por baixo, mas aqui e sobre a imagem, que pode ter
     qualquer cor; mesmo padrao ja usado em .detail-image-share pra icones
     sobre imagem. */
  .pd-image-menu-wrap .pd-menu-btn {
    background: #fff;
    border-color: #eef0f4;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
  }

  .pd-context-row .pd-menu-wrap:not(.pd-image-menu-wrap) { display: none; }

  .pd-mobile-views {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 11.5px;
    gap: 3px;
    margin-left: auto;
  }

  .pd-mobile-views .lucide { height: 12px; width: 12px; }

  .pd-mobile-store {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: 0.82rem;
    gap: 6px;
  }

  .pd-mobile-store img { border-radius: 4px; height: 18px; object-fit: contain; width: 18px; }

  .pd-mobile-store-fallback {
    align-items: center;
    background: var(--orange-soft);
    border-radius: 4px;
    color: var(--orange-dark);
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 800;
    height: 18px;
    justify-content: center;
    width: 18px;
  }

  /* "Linhas cheias" (flex-basis:100% forca quebra antes do proximo item, na
     ordem definida por "order" — nao pela posicao no DOM, que continua a
     mesma de sempre pro desktop). */
  .pd-context-row,
  .pd-title,
  .pd-price-row,
  .payment-condition,
  .price-expired-label,
  .pd-mobile-store,
  .expires-urgency,
  .pd-cta-btn,
  .offer-button.big,
  .detail-expired-message,
  .detail-badges {
    flex-basis: 100%;
    width: 100%;
  }

  .pd-context-row { order: 1; }

  .pd-title {
    /* line-clamp: no lugar do truque de max-width:35ch (que só quebrava
       linha, sem limitar quantas) — trava em 2 linhas e corta com "..." se
       passar disso, em vez de deixar o titulo crescer a vontade. */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    font-size: 18px;
    font-weight: 500;
    max-width: none;
    order: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pd-price-row { margin: 0; order: 3; }
  .pd-price { font-size: 1.5rem; }
  .payment-condition, .price-expired-label { order: 4; }
  .pd-mobile-store { order: 5; }
  .expires-urgency { order: 6; }

  /* .pd-cta-row/.pd-stats-row viram "display:contents" — os filhos deles
     (botao CTA, voto, favoritar, compartilhar, alerta) entram direto no
     flex do .pd-content-col, ordenaveis individualmente. .pd-stat-vote NAO
     entra nessa lista (ver abaixo) — fica inteiro, como pilula unica
     like/contador/dislike, igual o desktop. Nenhum componente e duplicado,
     so reagrupado. */
  .pd-cta-row,
  .pd-stats-row {
    display: contents;
  }

  .pd-cta-btn, .offer-button.big { order: 7; }
  .pd-cta-btn { font-size: 16px; padding: 14px 24px; }
  .detail-expired-message { order: 7; }

  /* Pills de comentarios/visualizacoes somem dessa linha (visualizacoes ja
     duplicada la em cima, no .pd-mobile-views) — só a pilula de voto e os
     icones grandes ficam. */
  .pd-stat-pill {
    display: none;
  }

  /* align-self:center porque a pilula (35px) e mais baixa que os circulos
     de 44px ao lado — sem isso ela fica "colada" no topo da linha em vez de
     centralizada com eles (container usa align-items:flex-start). */
  .pd-stat-vote { align-self: center; gap: 8px; order: 8; }
  /* margin-left:auto no primeiro do grupo (salvar/compartilhar/alerta)
     empurra os 3 pro canto direito da linha, deixando a pilula de voto
     sozinha na esquerda. */
  .heart-btn-detail { margin-left: auto; order: 10; }
  .share-popover-wrap.pd-icon-wrap { order: 11; }
  .price-alert-widget.pd-icon-wrap { order: 12; }
  .detail-badges { order: 13; }

  /* Grupo de icones (voto/favoritar/compartilhar/alerta): lado a lado,
     dividindo a linha em partes iguais — nao ganham flex-basis:100% de
     proposito (só os itens acima, que precisam da linha inteira, ganham). */
  /* .pd-content-col antes do seletor de proposito: .pd-stat-vote
     .vote-icon-btn (regra do widget compacto do desktop, ver mais acima)
     tem a mesma especificidade — sem esse prefixo extra, a ordem no arquivo
     desempataria a favor da regra errada. */
  /* So icone, sem rotulo de texto embaixo (ver .pd-icon-label, continua
     escondido) — circulo perfeito (raio 999px), tamanho fixo pra nao virar
     oval ao dividir o espaco da linha. */
  .pd-content-col .vote-icon-btn,
  .pd-content-col .pd-icon-btn {
    border-radius: 999px;
    flex: 0 0 44px;
    height: 44px;
    padding: 0;
    width: 44px;
  }

  .pd-content-col .vote-icon-btn .lucide,
  .pd-content-col .pd-icon-btn .lucide,
  .pd-content-col .pd-icon-btn .wa-icon {
    height: 19px;
    width: 19px;
  }

  /* Like/dislike dentro da pilula (.pd-stat-vote) escapam do circulo de
     44px acima — precisam de mais especificidade (3 classes) pra vencer a
     regra generica .pd-content-col .vote-icon-btn. Mesmo tamanho compacto
     do desktop, sem fundo proprio (herda var(--bg) do .vote-icon-btn base,
     igual a pilula por fora — por isso nao aparece como "circulo cinza"
     dentro da pilula). */
  .pd-content-col .pd-stat-vote .vote-icon-btn {
    border-radius: 999px;
    flex: 0 0 27px;
    height: 27px;
    width: 27px;
  }

  .pd-content-col .pd-stat-vote .vote-icon-btn .lucide {
    height: 18px;
    width: 18px;
  }

  .pd-content-col .pd-stat-vote .price-insight-vote-total {
    display: inline-flex;
    font-size: 0.72rem;
    padding: 2px 7px;
  }

  /* Estado "alerta ativado" foge do circulo de proposito (icone + botao de
     remover juntos precisam de mais espaco) — vira pilula, mesmo raio
     999px. */
  .pd-icon-wrap .price-alert-active.pd-icon-btn {
    flex: 0 0 auto;
    padding: 0 12px;
    width: auto;
  }
}

/* ── Card "Detalhes da oferta" ────────────────────────── */

.pd-features-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.pd-features-inline li {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-size: 0.85rem;
  gap: 6px;
}

.pd-features-inline li .lucide { color: var(--green); flex-shrink: 0; height: 15px; width: 15px; }

.pd-coupon-hint {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 16px 0 8px;
}

.pd-coupon-row {
  align-items: center;
  display: flex;
  gap: 10px;
}

.pd-coupon-btn {
  align-items: center;
  background: var(--orange-soft);
  border: 1.5px dashed var(--orange);
  border-radius: 999px;
  color: var(--orange-dark);
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  gap: 10px;
  padding: 10px 18px;
}

.pd-coupon-btn:hover { background: #ffe4d2; }
.pd-coupon-btn code { background: none; color: inherit; font-weight: 900; padding: 0; }
.pd-coupon-btn .lucide { height: 16px; width: 16px; }

/* ── "Nota do editor" (dentro do card "Detalhes da oferta") ───────── */

.pd-editor-note {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 16px;
}

/* ── Card "Inteligência de Preços" ─────────────────────── */

.pd-price-intel-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

/* min-width:0 no filho flex — sem isso, o texto nowrap do subtitulo (abaixo)
   forca esse item a ficar tao largo quanto o conteudo, estourando a largura
   do card inteiro (bug real: causava overflow horizontal no mobile). */
.pd-price-intel-head > div:first-child { min-width: 0; }

.pd-price-intel-sub {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-current-price-highlight {
  align-items: center;
  background: var(--bg);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 16px 0;
  padding: 14px 16px;
}

.pd-current-price-store {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 700;
  gap: 8px;
}

.pd-current-price-store img { border-radius: 50%; height: 22px; object-fit: contain; width: 22px; }
.pd-current-price-store .detail-store-fallback { height: 22px; width: 22px; }

.pd-current-price-value {
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 900;
  margin-left: auto;
}

.pd-current-price-date {
  color: var(--muted);
  flex-basis: 100%;
  font-size: 0.78rem;
}

.pd-history-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.pd-history-head h3 {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0;
}

.pd-history-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pd-view-toggle {
  background: var(--bg);
  border-radius: 999px;
  display: inline-flex;
  padding: 3px;
}

.pd-view-toggle button {
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 15px;
}

.pd-view-toggle button.is-active { background: #fff; box-shadow: var(--shadow-sm); color: var(--ink); }

.pd-period-select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 14px;
}

.pd-chart-view { padding: 6px 0 0; }

.pd-step-chart {
  height: 220px;
  width: 100%;
}

.pd-step-area { fill: rgba(240, 68, 56, 0.08); }
.pd-step-line { fill: none; stroke: var(--orange); stroke-linejoin: round; stroke-width: 2; }
.pd-step-dot { fill: var(--orange); }
.pd-chart-axis-label { fill: var(--muted); font-size: 10px; }
.pd-chart-grid-line { stroke: var(--line); stroke-width: 1; }

.pd-list-view { margin-top: 4px; }

.pd-price-table {
  border-collapse: collapse;
  font-size: 0.85rem;
  width: 100%;
}

.pd-price-table th,
.pd-price-table td {
  border-bottom: 1px solid var(--line);
  padding: 9px 6px;
  text-align: left;
}

.pd-price-table th {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pd-price-table td { color: var(--ink); font-weight: 600; }
.pd-price-table tr:last-child td { border-bottom: none; }

.pd-history-empty {
  color: var(--muted);
  font-size: 0.85rem;
  padding: 24px 0;
  text-align: center;
}

@media (min-width: 1040px) {
  /* .pd-body-main (cards) e .pd-ad-rail (banners) viram as 2 colunas reais
     — cada uma cresce só com o próprio conteúdo (align-items:start), sem
     nenhuma esticar/deixar vão vazio por causa da altura da outra. Antes
     isso era por .pd-row (card + 1 slot cada), o que ainda acoplava a
     altura do card à do slot vizinho sempre que o banner era mais alto que
     o card (ex: card curto + banner real de ~300px) — daí o vão vazio. */
  .pd-body-grid { align-items: start; grid-template-columns: minmax(0, 1fr) 300px; }
  .pd-ad-rail { display: flex; flex-direction: column; gap: 16px; }

  /* Copia do slot dentro de cada .pd-row (versão mobile) some no desktop —
     os mesmos banners já aparecem, so 1x, no .pd-ad-rail acima. */
  .pd-row .pd-sponsored-slot { display: none; }

  .pd-sponsored-slot { min-height: 260px; }
  .pd-main-grid { grid-template-columns: 320px minmax(0, 1fr); }
  .pd-qr-code { display: block; }
  .pd-image-col .detail-image { max-width: none; }
}

.product-detail-card {
  background: var(--surface);
  border: 1px solid #e7e9ee;
  border-radius: 10px;
  padding: 20px;
}

.detail-columns {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

.detail-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.detail-media {
  display: block;
  position: relative;
}

.detail-image {
  aspect-ratio: 2 / 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
  position: relative;
  width: 100%;
}

.detail-image img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.product-detail.is-expired .detail-image img {
  filter: grayscale(100%);
}

/* Barra "em alta" sobre a imagem */
.temperature-bar {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

.temperature-track {
  background: rgba(255, 255, 255, 0.3);
  height: 4px;
  position: relative;
}

.temperature-track-fill {
  background: linear-gradient(90deg, #fbbf24, var(--orange));
  border-radius: 0 4px 4px 0;
  inset: 0 auto 0 0;
  position: absolute;
  transition: width 0.4s ease;
}

.temperature-label {
  align-items: center;
  background: rgba(17, 24, 39, 0.86);
  color: #fff;
  display: flex;
  font-size: 0.74rem;
  font-weight: 700;
  gap: 6px;
  padding: 7px 12px;
}

.temperature-label .lucide { color: #fbbf24; flex-shrink: 0; height: 13px; width: 13px; }
.temperature-label small { font-weight: 500; margin-left: auto; opacity: 0.78; white-space: nowrap; }

.detail-info {
  display: grid;
  gap: 12px;
  padding: 20px;
}

/* Loja + tempo de publicação */
.detail-store-row {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.detail-store-id {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.detail-store-logo,
.detail-store-fallback {
  border-radius: 6px;
  flex-shrink: 0;
  height: 26px;
  object-fit: contain;
  width: 26px;
}

.detail-store-fallback {
  align-items: center;
  background: var(--orange-soft);
  color: var(--orange-dark);
  display: flex;
  font-size: 0.8rem;
  font-weight: 800;
  justify-content: center;
}

.detail-store-id span {
  color: var(--muted);
  display: flex;
  flex-direction: column;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-transform: uppercase;
}

.detail-store-id strong {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.detail-store-verified { color: #1d4ed8; flex-shrink: 0; height: 14px; width: 14px; }

.detail-time-ago {
  align-items: center;
  color: var(--subtle);
  display: flex;
  flex-shrink: 0;
  font-size: 0.76rem;
  font-weight: 600;
  gap: 4px;
  white-space: nowrap;
}

.detail-time-ago .lucide { height: 12px; width: 12px; }

.detail-submitted-by {
  align-items: center;
  color: var(--subtle);
  display: flex;
  font-size: 0.78rem;
  gap: 5px;
  margin: 6px 0 0;
}

.detail-submitted-by strong { color: var(--ink); font-weight: 700; }

.detail-submitted-by .lucide { height: 13px; width: 13px; }

.detail-product-title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-clamp: 2;
  line-height: 1.2;
  margin: 0 0 16px;
  max-height: 2.4em;
  overflow: hidden;
  padding: 0;
}

.product-description {
  border-bottom: 1px solid #eef0f4;
  color: #475467;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  padding-bottom: 12px;
}

/* Lista de caracteristicas geradas por IA (products.ai_features) — bullets
   curtos, complemento da descricao acima, nunca substitui ela. Grid de 2
   colunas em telas largas pra ficar compacta; some se o array vier vazio
   (produto sem specs claras o suficiente pra extrair). */
.product-features {
  border-bottom: 1px solid #eef0f4;
  display: grid;
  gap: 7px 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  list-style: none;
  margin: 0 0 12px;
  padding: 0 0 12px;
}

.product-features li {
  align-items: flex-start;
  color: #344054;
  display: flex;
  font-size: 0.86rem;
  gap: 6px;
  line-height: 1.4;
}

.product-features li .lucide {
  color: var(--green);
  flex-shrink: 0;
  height: 15px;
  margin-top: 2px;
  width: 15px;
}

/* Linha de ação: votos (esq) + botão CTA (dir) */
.detail-action-row {
  align-items: stretch;
  border-bottom: 1px solid #eef0f4;
  display: flex;
  /* Empilhado: cupom (quando existe) em cima, "Ir para loja" logo abaixo,
     ambos na largura cheia da coluna. */
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
  padding-bottom: 12px;
}

.detail-action-row .offer-button.big { flex-shrink: 0; }

/* Cupom em bloco (largura cheia) logo acima do "Ir para loja" */
.detail-coupon-block {
  height: 44px;
  justify-content: center;
  width: 100%;
}

/* Preço + cupom */
.price-cta-row {
  align-items: center;
  border-bottom: 1px solid #eef0f4;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
}

.price-cta-row .price-block { flex: 1 1 auto; min-width: 140px; }
.price-cta-row .detail-coupon { flex: 0 1 auto; }

.offer-button.detail-cta {
  background: var(--orange);
  border-radius: 8px;
  font-size: 0.95rem;
  gap: 8px;
  height: 44px;
  min-height: 44px;
  padding-inline: 18px;
  width: 100%;
}

.offer-button.detail-cta:hover {
  background: var(--orange-dark);
}

.detail-price {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.detail-price strong {
  font-weight: 900;
}

.detail-price-value {
  align-items: baseline;
  color: var(--orange);
  display: inline-flex;
  gap: 3px;
}

.detail-price-currency {
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 900;
  line-height: 1;
}

.detail-price-number {
  font-size: clamp(32px, 8vw, 40px);
  font-weight: 900;
  line-height: 1;
}

.detail-price del {
  color: var(--muted);
  font-size: 0.92rem;
}

.detail-price .discount {
  background: #dcfce7;
  border-radius: 6px;
  color: #15803d;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 8px;
}

.payment-condition {
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 700;
  margin: 6px 0 0;
}

/* ── Medidor de raridade + radar da galera ──────────────── */
.price-insight-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
}

.price-insight-badge {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 6px;
  padding: 6px 12px;
  width: fit-content;
}

.price-insight-badge .lucide { height: 15px; width: 15px; }

.price-insight-lowest   { background: var(--green-soft); color: var(--green-dark); }
.price-insight-repeated { background: #eff6ff; color: #1d4ed8; }
.price-insight-good     { background: #f0fdf4; color: #15803d; }
.price-insight-high     { background: #fff7ed; color: #c2410c; }
.price-insight-new      { background: var(--bg); color: var(--muted); }

.price-insight-interest {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.82rem;
  gap: 6px;
}

.price-insight-interest .lucide { color: var(--orange); flex-shrink: 0; height: 15px; width: 15px; }

/* ── Inteligência de preço (v2): sparkline + menor/médio/vs média ── */
.price-intel {
  background: var(--surface-soft, #fff6f2);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px;
}

.price-intel-chart {
  display: flex;
  flex: 1 1 130px;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-width: 120px;
}

.price-spark {
  height: 42px;
  overflow: visible;
  width: 100%;
}

.price-spark-line {
  fill: none;
  stroke: var(--orange);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.price-spark-area { fill: rgba(238, 76, 42, 0.1); stroke: none; }

.price-spark-dot { fill: var(--orange); stroke: #fff; stroke-width: 1.5; }

.price-intel-chart.is-low .price-spark-line { stroke: var(--green); }
.price-intel-chart.is-low .price-spark-area { fill: rgba(18, 166, 106, 0.12); }
.price-intel-chart.is-low .price-spark-dot  { fill: var(--green); }

.price-intel-span {
  align-items: center;
  color: var(--subtle);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 600;
  gap: 4px;
}
.price-intel-span .lucide { height: 11px; width: 11px; }

.price-intel-stats {
  display: flex;
  flex: 1 1 150px;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  list-style: none;
  margin: 0;
  min-width: 150px;
  padding: 0;
}

.price-intel-stats li {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.pi-k { color: var(--muted); font-size: 0.76rem; white-space: nowrap; }
.pi-v { color: var(--ink); font-size: 0.82rem; font-weight: 800; text-align: right; }
.pi-v small { color: var(--subtle); font-size: 0.72rem; font-weight: 600; }

.price-intel-stats li.pi-best .pi-v { color: var(--green-dark); }
.price-intel-stats li.pi-highlight .pi-v { color: var(--orange-dark); }

.price-insight-social {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  gap: 6px 16px;
}

.price-insight-sentiment {
  align-items: center;
  color: var(--green-dark);
  display: inline-flex;
  font-weight: 700;
  gap: 5px;
}
.price-insight-sentiment .lucide { color: var(--green); flex-shrink: 0; height: 15px; width: 15px; }

.price-insight-vote {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 2px;
}

.price-insight-vote-label { color: var(--muted); font-size: 0.82rem; }

.price-insight-vote-buttons { display: flex; gap: 6px; }

.vote-icon-btn {
  align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.1s;
  width: 30px;
}

.vote-icon-btn .lucide { height: 14px; width: 14px; }

.vote-icon-btn:hover { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-dark); }
.vote-icon-btn:active { transform: scale(0.96); }

.vote-icon-btn.vote-hot.is-active { background: #fff4ed; border-color: #f76b1c; color: #b84010; }
.vote-icon-btn.vote-cold.is-active { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; }

.price-insight-vote-total {
  background: rgba(0, 0, 0, 0.07);
  border-radius: 99px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 20px;
  padding: 3px 8px;
  text-align: center;
}

/* Popup "Essa oferta e boa?" ao voltar da aba da loja (ver main.js,
   visibilitychange). <dialog> nativo, mesmo padrao do modal de alerta de
   preco ja existente (.price-alert-dialog) — centralizacao e o overlay
   (::backdrop) vem de graca do proprio <dialog>/showModal(), sem CSS de
   posicionamento manual. Fecha no X, clicando no backdrop ou Esc (nativo do
   dialog). Reaproveita .vote-icon-btn e .price-insight-vote-total (mesmos
   botoes/contador do widget inline) — só a "moldura" do modal e nova aqui. */
.vote-popup {
  border: none;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.18);
  color: var(--ink);
  max-width: min(360px, calc(100vw - 32px));
  padding: 0;
  width: 100%;
}

.vote-popup::backdrop {
  background: rgba(16, 18, 24, 0.42);
}

.vote-popup[open] {
  animation: vote-popup-in 200ms ease;
}

@keyframes vote-popup-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.vote-popup-inner {
  padding: 1.75rem 1.5rem 1.5rem;
  position: relative;
  text-align: center;
}

.vote-popup-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  position: absolute;
  right: 12px;
  top: 12px;
}

.vote-popup-close:hover { color: var(--ink); }
.vote-popup-close .lucide { height: 18px; width: 18px; }

.vote-popup-title {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
}

.vote-popup-sub {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0 0 1.1rem;
}

.vote-popup-buttons {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 1rem;
}

.vote-popup-buttons .vote-icon-btn { height: 42px; width: 42px; }
.vote-popup-buttons .vote-icon-btn .lucide { height: 19px; width: 19px; }

.vote-popup-report-link {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: block;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px;
  text-align: center;
  text-decoration: underline;
  width: 100%;
}

.vote-popup-report-link:hover { color: var(--ink); }

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-badges .badge {
  left: auto;
  position: static;
  top: auto;
}

.badge {
  align-items: center;
  background: #f2f4f7;
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: 0.77rem;
  font-weight: 700;
  gap: 4px;
  padding: 5px 10px;
}

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

.badge.status-active    { background: #f0fdf4; color: var(--green-dark); }
.badge.status-expired   { background: #fef2f2; color: #b91c1c; }
.badge.status-sold_out  { background: #fef9ee; color: #b45309; }
.badge-verified         { background: #eff6ff; color: #1d4ed8; }
.badge-shipping         { background: #f0fdf4; color: var(--green-dark); }

.detail-coupon {
  align-items: center;
  background: #fff7ed;
  border: 1.5px dashed rgba(238, 76, 42, 0.5);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  transition: background 0.15s, border-color 0.15s;
}

.detail-coupon:hover {
  background: #ffedd5;
  border-color: var(--orange);
}

.detail-coupon-label {
  color: var(--orange-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.detail-coupon code {
  background: none;
  border: none;
  border-radius: 0;
  color: var(--orange-dark);
  font-family: "DM Sans", sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  padding: 0;
}

.detail-coupon .lucide {
  color: var(--orange);
  flex-shrink: 0;
  height: 15px;
  width: 15px;
}

.affiliate-note {
  color: var(--subtle);
  font-size: 0.76rem;
  line-height: 1.4;
  margin: 0;
}

.detail-meta {
  color: var(--subtle);
  font-size: 0.78rem;
  margin: 0;
}

/* ── Barra de reações: voto, comentários, compartilhar, alerta, favorito ── */

.reaction-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reaction-btn {
  align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 6px;
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.1s;
  white-space: nowrap;
}

.reaction-btn .lucide { flex-shrink: 0; height: 15px; width: 15px; }

.reaction-btn strong {
  background: rgba(0, 0, 0, 0.07);
  border-radius: 99px;
  font-size: 0.74rem;
  min-width: 18px;
  padding: 1px 6px;
  text-align: center;
}

.reaction-btn:hover {
  background: var(--orange-soft);
  border-color: var(--orange);
  color: var(--orange-dark);
}

.reaction-btn:active { transform: scale(0.96); }

.reaction-btn-muted {
  color: var(--subtle);
  font-size: 0.78rem;
}

.reaction-btn-muted.is-active,
.reaction-btn-muted:disabled {
  background: #fef2f2;
  border-color: #f87171;
  color: #b91c1c;
  cursor: default;
  opacity: 0.9;
}

.reaction-btn-muted.is-active strong { background: #f87171; color: #fff; }

.report-popover-wrap { display: inline-flex; position: relative; }

.detail-image-report-wrap {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
}

.report-popover {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
  display: none;
  min-width: 240px;
  overflow: hidden;
  padding: 6px 0 10px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
}

.report-popover-wrap.is-open .report-popover { display: block; }

.report-popover-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  font-size: 0.95rem;
  justify-content: space-between;
  margin-bottom: 4px;
  padding: 10px 14px 12px;
}

.report-popover-close {
  align-items: center;
  background: var(--bg);
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.report-popover-close .lucide { height: 14px; width: 14px; }

.report-option {
  align-items: center;
  background: transparent;
  border: 0;
  color: #111827;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  gap: 12px;
  padding: 10px 14px;
  text-align: left;
  width: 100%;
}

.report-option:hover { background: #f8fafc; }

.report-option .lucide { color: var(--muted); flex: 0 0 18px; height: 18px; width: 18px; }

.reaction-bar .price-alert-widget { display: inline-flex; position: relative; }
.reaction-bar .price-alert-toggle { border-radius: 999px; }
.reaction-bar .price-alert-active {
  box-shadow: var(--shadow-md);
  left: 0;
  position: absolute;
  top: calc(100% + 6px);
  z-index: 60;
}

/* ── WhatsApp strip ──────────────────────────────── */

.product-whatsapp-strip {
  align-items: center;
  background: #ffd9b8;
  border: 1px solid rgba(238, 76, 42, 0.16);
  border-radius: 12px;
  color: #111827;
  display: grid;
  gap: 2px 12px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  margin-inline: auto;
  margin-top: 14px;
  max-width: 1390px;
  padding: 16px 18px;
}

.product-whatsapp-strip > span {
  align-items: center;
  /* Era verde solido (#13a538) com icone branco — o icone novo ja vem verde
     (#00a94f embutido no SVG), entao o circulo virou branco pra nao ficar
     verde-sobre-verde. */
  background: #fff;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 1.35rem;
  grid-row: 1 / span 2;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.product-whatsapp-strip strong {
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.15;
}

.product-whatsapp-strip small {
  color: #344054;
  font-size: 0.88rem;
  line-height: 1.25;
}

.product-whatsapp-strip em {
  align-items: center;
  align-self: center;
  background: #ff5a1f;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-family: "DM Sans", sans-serif;
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 850;
  gap: 7px;
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  white-space: nowrap;
}

.product-whatsapp-strip em .lucide { height: 16px; width: 16px; }

/* ── Coluna lateral do hero: comentários + histórico de preço ──── */

.product-side-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ── Ofertas relacionadas: full width, abaixo do banner do WhatsApp ────
   2 colunas — esquerda com mini-cards, direita com o grid padrão (mesmas
   colunas responsivas do .products-grid usado na home) ── */

.related-columns-section {
  margin-top: 30px;
}

.related-columns {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 1040px) {
  .related-columns {
    align-items: start;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
  }
}

.mini-related-title {
  align-items: center;
  color: rgba(0, 0, 0, 0.86);
  display: flex;
  font-family: "DM Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  gap: 8px;
  margin: 0 0 12px;
}

.mini-related-title .lucide { color: var(--orange); height: 16px; width: 16px; }

.mini-related-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.mini-related-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  color: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.mini-related-card:hover {
  border-color: #dde2ea;
  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.08);
}

.mini-related-media {
  aspect-ratio: 1 / 1;
  background: #f7f8fa;
  position: relative;
}

.mini-related-media img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.mini-related-badge {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  color: #0ea5e9;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 3px;
  left: 6px;
  padding: 3px 7px;
  position: absolute;
  top: 6px;
}

.mini-related-badge .lucide { height: 12px; width: 12px; }

.mini-related-badge.is-good { color: var(--green-dark); }
.mini-related-badge.is-hot,
.mini-related-badge.is-fire { color: var(--orange); }

.mini-related-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 9px 10px;
}

.mini-related-name {
  color: #1f2937;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.78rem;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
}

.mini-related-price {
  color: var(--orange-dark);
  font-size: 0.92rem;
  font-weight: 800;
}

/* ── Categorias: full width, abaixo do hero ──────── */

.product-related-wrap {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 26px;
}

.related-subtitle { color: var(--muted); font-size: 0.88rem; margin: -6px 0 12px; }

.category-pills-section h2 {
  align-items: center;
  color: rgba(0, 0, 0, 0.86);
  display: flex;
  font-family: "DM Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  gap: 8px;
  margin: 0 0 12px;
}

.category-pills-section h2 .lucide { color: var(--orange); height: 16px; width: 16px; }

.category-pills-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 1px 8px;
  scrollbar-width: thin;
}

.category-pills-track .category-chip { flex-shrink: 0; }

.side-affiliate-note { color: var(--subtle); font-size: 0.76rem; line-height: 1.4; margin: 0; }

.product-price-disclaimer {
  margin: 18px 0;
  text-align: center;
}

/* ── Comments ──────────────────────────────────────── */

/* ── Comments panel redesign ───────────────────────── */

.comments-panel {
  /* background/border/box-shadow SEM override aqui de proposito agora —
     antes zerava pra nao duplicar o card branco de um wrapper .mini-panel
     ancestral (layout antigo); no layout novo (.pd-card) o proprio
     comments-panel É o card, entao precisa do fundo branco dele mesmo. */
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.comments-header {
  align-items: center;
  border-bottom: 1px solid #eef0f4;
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
}

.comments-header strong { font-size: 0.95rem; font-weight: 700; }

.comments-sort-btn {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 600;
  gap: 5px;
  padding: 5px 10px;
  transition: background 0.13s;
}

.comments-sort-btn:hover { background: #f2f4f7; }
.comments-sort-btn .lucide { height: 13px; width: 13px; }

.comments-list {
  display: flex;
  flex-direction: column;
  min-height: 56px;
  padding: 4px 18px;
}

.comments-empty-state {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 30px 16px;
  text-align: center;
}

.comments-empty-icon {
  align-items: center;
  background: var(--orange);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(16, 24, 40, 0.18);
  color: #fff;
  display: flex;
  height: 56px;
  justify-content: center;
  margin-bottom: 8px;
  width: 56px;
}

.comments-empty-icon .lucide { height: 26px; width: 26px; }

.comments-empty-state strong {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 800;
}

.comments-empty-state p {
  color: var(--muted);
  font-size: 0.86rem;
  margin: 0;
}

/* Avatar circle */
.comment-av-circle {
  align-items: center;
  border-radius: 999px;
  display: flex;
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  width: 34px;
}

.comment-av-self {
  background: #f2f4f7 !important;
  color: var(--muted) !important;
}

.comment-av-self .lucide { height: 16px; width: 16px; }

.comment-avatar-img {
  border-radius: 999px;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Complemento pessoal de quem submeteu a oferta (comunidade) — depoimento
   discreto na coluna direita, acima dos comentarios. Reaproveita a linguagem
   visual dos comentarios (avatar circular, nome), mas com moldura sutil pra
   se ler como "nota de quem postou". */
.user-note-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 16px;
}

.user-note-head {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.user-note-avatar {
  align-items: center;
  background: #f2f4f7;
  border-radius: 999px;
  color: var(--muted);
  display: flex;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 800;
  height: 38px;
  justify-content: center;
  overflow: hidden;
  text-transform: uppercase;
  width: 38px;
}

.user-note-avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.user-note-avatar-icon { height: 18px; width: 18px; }

.user-note-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-note-author {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.user-note-badge {
  align-items: center;
  color: var(--orange);
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 700;
  gap: 4px;
}

.user-note-badge .lucide { height: 13px; width: 13px; }

.user-note-body {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Comment card */
.comment-card {
  border-bottom: 1px solid #f4f5f7;
  display: flex;
  gap: 11px;
  padding: 14px 0;
}

.comment-card:last-child { border-bottom: 0; }

@keyframes comment-slide-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.comment-card-new { animation: comment-slide-in 0.3s ease; }

.comment-content { flex: 1; min-width: 0; }

.comment-head {
  align-items: baseline;
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.comment-author { color: var(--ink); font-size: 0.87rem; font-weight: 700; }
.comment-time   { color: #9ca3af; font-size: 0.77rem; margin-left: auto; }

.comment-body {
  color: var(--ink);
  font-size: 0.91rem;
  line-height: 1.55;
  margin: 0 0 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.comment-actions { display: flex; gap: 14px; }

.comment-react-btn,
.comment-reply-btn {
  align-items: center;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 600;
  gap: 4px;
  padding: 0;
  transition: color 0.13s;
}

.comment-react-btn:hover,
.comment-reply-btn:hover  { color: var(--ink); }
.comment-react-btn.is-active { color: var(--orange); }
.comment-react-btn .lucide,
.comment-reply-btn .lucide { height: 13px; width: 13px; }

/* Comment input bar */
.comment-input-bar {
  align-items: flex-start;
  background: var(--bg);
  border-top: 1px solid #eef0f4;
  display: flex;
  gap: 10px;
  padding: 11px 14px;
}

/* Editor box (toolbar + contenteditable) */
.comment-editor-box {
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  transition: border-color 0.15s;
}
.comment-editor-box:focus-within { border-color: var(--orange); }

/* Toolbar */
.comment-toolbar {
  align-items: center;
  background: #f9fafb;
  border-bottom: 1px solid transparent;
  display: flex;
  /* Linha unica: quando os botoes nao cabem (mobile) a barra corre na
     horizontal em vez de quebrar em duas linhas. */
  flex-wrap: nowrap;
  gap: 2px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 8px;
  scrollbar-width: thin;
  transition: max-height 0.18s ease, opacity 0.15s ease, padding 0.18s ease, visibility 0s linear 0.18s;
  visibility: hidden;
}

.comment-toolbar::-webkit-scrollbar { height: 4px; }
.comment-toolbar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }

.comment-editor-box.is-toolbar-visible .comment-toolbar {
  border-bottom-color: #eef0f4;
  max-height: 90px;
  opacity: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 8px;
  transition: max-height 0.18s ease, opacity 0.15s ease, padding 0.18s ease;
  visibility: visible;
}

.ctb {
  align-items: center;
  background: none;
  border: none;
  border-radius: 7px;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: 0.95rem;
  height: 34px;
  justify-content: center;
  line-height: 1;
  min-width: 34px;
  padding: 0 7px;
  transition: background 0.12s, color 0.12s;
}
.ctb:hover { background: #e9ecf0; color: #111; }
.ctb.is-active { background: #fff0e6; color: var(--orange); }
.ctb .lucide { height: 17px; width: 17px; }
.ctb strong { font-size: 1rem; font-weight: 800; }
.ctb em { font-size: 1rem; font-style: italic; }
.ctb s { font-size: 1rem; }
.ctb-tx { font-size: 0.92rem; font-weight: 600; line-height: 1; }
.ctb-tx sub { font-size: 0.6em; }

.ctb-sep {
  align-self: stretch;
  background: #e5e7eb;
  flex-shrink: 0;
  margin: 4px 3px;
  width: 1px;
}

/* Emoji button + panel */
.ctb-emoji { position: relative; }
.emoji-panel {
  background: var(--bg);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  display: grid;
  font-size: 1.15rem;
  gap: 2px;
  grid-template-columns: repeat(10, 1fr);
  left: 0;
  line-height: 1;
  padding: 8px;
  position: absolute;
  top: calc(100% + 6px);
  width: 260px;
  z-index: 120;
}
.emoji-panel[hidden] { display: none; }
.emoji-btn {
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 4px;
  text-align: center;
  transition: background 0.1s;
}
.emoji-btn:hover { background: #f0f1f4; }

/* Contenteditable area */
.comment-editable {
  color: var(--ink);
  font-size: 0.91rem;
  line-height: 1.55;
  max-height: 180px;
  min-height: 42px;
  outline: none;
  overflow-y: auto;
  padding: 10px 12px;
  word-break: break-word;
}
.comment-editable:empty::before {
  color: #9ca3af;
  content: attr(data-placeholder);
  pointer-events: none;
}
/* Estilos de formatação dentro do editor */
.comment-editable ul { list-style: disc; margin: 4px 0; padding-left: 20px; }
.comment-editable ol { list-style: decimal; margin: 4px 0; padding-left: 20px; }
.comment-editable li { margin: 2px 0; }
.comment-editable a { color: var(--orange); text-decoration: underline; }
/* Estilos em comentários exibidos */
.comment-body ul { list-style: disc; margin: 4px 0; padding-left: 18px; }
.comment-body ol { list-style: decimal; margin: 4px 0; padding-left: 18px; }
.comment-body li { margin: 2px 0; }
.comment-body a { color: var(--orange); text-decoration: underline; word-break: break-all; }
.comment-body img { border-radius: 6px; display: block; margin: 6px 0; max-width: 100%; }

.comment-send-btn {
  align-items: center;
  background: var(--orange);
  border: none;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 36px;
  justify-content: center;
  margin-top: 2px;
  transition: background 0.13s, transform 0.1s;
  width: 36px;
}

.comment-send-btn:hover  { background: var(--orange-dark); }
.comment-send-btn:active { transform: scale(0.94); }
.comment-send-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.comment-send-btn .lucide { height: 14px; width: 14px; }

/* ── Toast ─────────────────────────────────────────── */

.vote-toast {
  background: var(--ink);
  border-radius: 10px;
  bottom: 24px;
  box-shadow: var(--shadow-md);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  left: 50%;
  max-width: min(360px, calc(100vw - 32px));
  opacity: 0;
  padding: 12px 20px;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 10px);
  transition: opacity 0.25s, transform 0.25s;
  z-index: 999;
}

.vote-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.vote-toast-success    { background: var(--green-dark); }
.vote-toast-error      { background: #b91c1c; }
.vote-toast-info       { background: #1a56db; }

/* ── Responsive ─────────────────────────────────────── */

@media (min-width: 1040px) {
  .detail-columns {
    grid-template-columns: minmax(320px, 0.85fr) minmax(380px, 1.15fr);
  }

  .detail-image {
    max-height: 300px;
  }

  .product-side-col {
    position: sticky;
    top: 86px;
  }
}

@media (max-width: 759px) {
  .product-detail-card { padding: 14px; }
  .detail-info { padding: 14px; }
  .detail-price-currency { font-size: 24px; }
  .detail-price-number { font-size: 36px; }

  .price-cta-row .offer-button.big {
    flex: 1 1 100%;
    order: 3;
  }

  .reaction-btn { padding: 7px 11px; }

  .product-whatsapp-strip {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 14px;
  }

  .product-whatsapp-strip > span { height: 38px; width: 38px; }

  .product-whatsapp-strip em {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 8px;
    width: 100%;
  }
}

/* ── Price Alert Widget ─────────────────────────────────────────────────────── */

.price-alert-widget {
  display: flex;
  align-items: center;
}

.price-alert-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}

.price-alert-toggle:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-soft);
}

.price-alert-toggle svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Active state */
.price-alert-active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid var(--green);
  border-radius: var(--radius);
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 0.84rem;
  font-weight: 500;
}

.price-alert-active svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--green);
}

.price-alert-active strong { font-weight: 700; }

.price-alert-remove-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: none;
  background: transparent;
  color: var(--green-dark);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
  line-height: 1;
}

.price-alert-remove-btn:hover { opacity: 1; }
.price-alert-remove-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.price-alert-remove-btn svg { width: 14px; height: 14px; }

/* ── Submit Page ─────────────────────────────────────────────────────────────── */

.submit-page { padding-bottom: 4rem; }

.submit-hero {
  background: linear-gradient(135deg, var(--orange-soft) 0%, #fff 100%);
  border-bottom: 1px solid var(--line);
  padding: 3rem 0 2rem;
  text-align: center;
}

.submit-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.75rem;
}

.submit-eyebrow svg { width: 14px; height: 14px; }

.submit-hero h1 {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 0.6rem;
  color: var(--ink);
}

.submit-sub {
  max-width: 520px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 0.97rem;
}

.submit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 2rem;
  margin-top: 1.5rem;
  align-items: start;
}

/* Abas "Sugerir oferta" / "Sugerir cupom" */
.submit-tabs {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line);
  margin-top: 1.5rem;
}

.submit-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.9rem 0.2rem;
  transition: color 0.15s, border-color 0.15s;
}

.submit-tab:hover { color: var(--ink); }

.submit-tab.is-active {
  border-bottom-color: var(--orange);
  color: var(--orange);
}

/* Painel escondido (aba nao ativa) — recebe o atributo "hidden" via JS. */
.submit-panel[hidden] { display: none; }

/* Checklist "Siga o passo a passo" — atualiza em tempo real conforme os
   campos vao sendo preenchidos (ver updateChecklist() no script). */
.submit-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.83rem;
}

.submit-checklist li {
  align-items: center;
  color: var(--muted);
  display: flex;
  gap: 8px;
  transition: color 0.15s;
}

.submit-checklist li.is-done { color: var(--ink); font-weight: 600; }

.submit-checklist-icon {
  align-items: center;
  color: var(--line);
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
}

.submit-checklist-icon svg { width: 18px; height: 18px; }

.submit-checklist li.is-done .submit-checklist-icon { color: var(--green); }

/* Accordion "Dicas para compartilhar uma boa oferta" — <details> nativo,
   sem JS nenhum pra abrir/fechar. */
.submit-accordion details {
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0;
}

.submit-accordion details:last-child { border-bottom: 0; padding-bottom: 0; }
.submit-accordion details:first-child { padding-top: 0; }

.submit-accordion summary {
  color: var(--ink);
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 700;
  list-style: none;
}

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

.submit-accordion summary::before {
  content: '+';
  color: var(--orange);
  display: inline-block;
  font-weight: 900;
  margin-right: 8px;
  width: 10px;
}

.submit-accordion details[open] summary::before { content: '−'; }

.submit-accordion p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
  margin: 0.6rem 0 0;
}

.submit-accordion p a { color: var(--orange); text-decoration: underline; }

/* Card */
.submit-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.submit-form-section { margin-bottom: 1.25rem; }

.submit-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.submit-label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.submit-required { color: var(--orange); }
.submit-optional { font-weight: 400; color: var(--muted); font-size: 0.78rem; }

.submit-input,
.submit-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  font-family: inherit;
}

.submit-input:focus,
.submit-textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.12);
}

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

.submit-textarea { resize: vertical; min-height: 80px; }

.submit-price-field {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  color: var(--muted);
  font-size: 0.9rem;
}

.submit-price-field:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.12);
}

.submit-price-field input {
  border: none;
  outline: none;
  background: transparent;
  padding: 10px 0;
  flex: 1;
  font-size: 0.9rem;
  color: var(--ink);
  font-family: inherit;
}

.submit-hint {
  font-size: 0.75rem;
  color: var(--subtle);
  margin-top: 5px;
  margin-bottom: 0;
}

.submit-field-error,
.submit-global-error {
  font-size: 0.8rem;
  color: var(--orange);
  margin-top: 5px;
  font-weight: 500;
}

.submit-global-error { margin-top: 1rem; text-align: center; }

.submit-form-section.image-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.image-source-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 2px;
}

.image-source-toggle .radio-inline {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 600;
  gap: 6px;
}

.submit-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.submit-terms {
  font-size: 0.73rem;
  color: var(--subtle);
  margin: 0;
  max-width: 300px;
  line-height: 1.4;
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.submit-btn svg { width: 15px; height: 15px; }

.submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* Success */
.submit-success {
  text-align: center;
  padding: 1rem 0;
}

.submit-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  margin-bottom: 1.25rem;
}

.submit-success-icon svg { width: 36px; height: 36px; }

.submit-success h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
}

.submit-success p {
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.submit-success-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.submit-another-btn {
  padding: 10px 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  font-family: inherit;
}

.submit-another-btn:hover { border-color: var(--ink); color: var(--ink); }

/* Sidebar */
.submit-tips { display: flex; flex-direction: column; gap: 1rem; }

.submit-tips-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem;
}

.submit-tips-card h3 {
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}

.submit-tips-card h3 svg { width: 15px; height: 15px; color: var(--orange); }

.submit-tips-card ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.7;
}

.submit-tips-card p {
  font-size: 0.83rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

.submit-tips-card-info { border-color: var(--orange); background: var(--orange-soft); }
.submit-tips-card-info h3 { color: var(--orange-dark); }
.submit-tips-card-info h3 svg { color: var(--orange-dark); }
.submit-tips-card-info p { color: var(--orange-dark); }

/* ── Submit Page: fluxo progressivo (etapas) ────────────────────────────────── */

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

.submit-step-indicator {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 1.1rem;
}

/* Etapa 1: link + status */
.submit-link-input-wrap { position: relative; }

.submit-link-input-wrap .submit-input { padding-right: 40px; }

.submit-link-status {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--subtle);
}

.submit-link-status svg { width: 20px; height: 20px; }

.submit-link-status.is-loading svg {
  color: var(--muted);
  animation: submit-spin 0.8s linear infinite;
}

.submit-link-status.is-ok svg { color: var(--green); }
.submit-link-status.is-error svg { color: var(--orange); }

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

/* Campos bloqueados ate o link ser validado */
.submit-locked-fields {
  border: 0;
  margin: 0;
  padding: 0;
  transition: opacity 0.2s;
}

.submit-locked-fields[disabled] {
  opacity: 0.45;
}

.submit-locked-fields[disabled] .submit-input,
.submit-locked-fields[disabled] .submit-textarea {
  cursor: not-allowed;
  background: #f8f9fb;
}

/* Barra de qualidade da descricao */
.submit-quality-bar {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.submit-quality-seg {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.2s;
}

.submit-quality-bar[data-level="1"] .submit-quality-seg.is-filled { background: var(--orange); }
.submit-quality-bar[data-level="2"] .submit-quality-seg.is-filled { background: var(--orange); }
.submit-quality-bar[data-level="3"] .submit-quality-seg.is-filled { background: var(--green); }

/* Etapa 2: preview de imagem */
.submit-preview-image-wrap {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 1.25rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: #f4f5f1;
  border: 1px solid var(--line);
}

.submit-preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.submit-change-image-link {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(22, 24, 29, 0.72);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}

.submit-review-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

.submit-review-price { font-weight: 800; color: var(--ink); }

.submit-review-coupon {
  background: var(--orange-soft);
  color: var(--orange-dark);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 700;
}

.submit-credit-details {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  margin-bottom: 1.25rem;
}

.submit-credit-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

.submit-credit-details .submit-form-row { margin-top: 1rem; }

.submit-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0.6rem 0.4rem;
}

.submit-back-btn:hover { color: var(--ink); }
.submit-back-btn svg { width: 16px; height: 16px; }

/* Etapa 3: enviando */
.submit-sending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--muted);
  font-weight: 600;
}

.submit-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--line);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: submit-spin 0.7s linear infinite;
}

/* Header submit button highlight */
.header-action-submit {
  background: var(--orange-soft);
  color: var(--orange) !important;
  border-radius: var(--radius);
  padding: 6px 12px;
}

.header-action-submit:hover {
  background: var(--orange);
  color: #fff !important;
}

/* Responsive */
@media (max-width: 900px) {
  .submit-layout {
    grid-template-columns: 1fr;
  }
  .submit-tips { flex-direction: row; flex-wrap: wrap; }
  .submit-tips-card { flex: 1; min-width: 240px; }
}

@media (max-width: 540px) {
  .submit-hero { padding: 2rem 0 1.5rem; }
  .submit-hero h1 { font-size: 1.5rem; }
  .submit-card { padding: 1.25rem; }
  .submit-form-row { grid-template-columns: 1fr; }
  .submit-form-footer { flex-direction: column; align-items: stretch; }
  .submit-btn { justify-content: center; }
}

/* ── Alerta de preco: dialog unificado (preco-alvo ou qualquer queda) ────────── */

.price-alert-dialog {
  border: none;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.18);
  color: var(--ink);
  max-width: min(360px, calc(100vw - 32px));
  padding: 0;
  width: 100%;
}

.price-alert-dialog::backdrop {
  background: rgba(16, 18, 24, 0.42);
}

.price-alert-dialog-inner {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  position: relative;
  text-align: center;
}

.price-alert-dialog-close {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: 4px;
  position: absolute;
  right: 12px;
  top: 12px;
}

.price-alert-dialog-close:hover { color: var(--ink); }

.price-alert-icon {
  color: var(--orange);
  margin: 0 auto 8px;
}

.price-alert-icon .lucide { height: 30px; width: 30px; }

.price-alert-dialog-inner h2 {
  font-size: 1.15rem;
  margin: 0 0 4px;
}

.price-alert-product-name {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 1.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-alert-stepper {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-bottom: 1rem;
}

.price-alert-step-btn {
  align-items: center;
  background: #f4f5f1;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.3rem;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.price-alert-step-btn:hover { background: var(--orange-soft); color: var(--orange-dark); }

.price-alert-stepper-value {
  font-size: 1.6rem;
  font-weight: 800;
  min-width: 100px;
}

.price-alert-hint {
  align-items: flex-start;
  background: var(--orange-soft);
  border-radius: 10px;
  color: var(--orange-dark);
  display: flex;
  font-size: 0.8rem;
  gap: 8px;
  margin: 0 0 1.25rem;
  padding: 10px 12px;
  text-align: left;
}

.price-alert-hint .lucide { flex-shrink: 0; height: 16px; margin-top: 1px; width: 16px; }

.price-alert-btn-primary,
.price-alert-btn-secondary {
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 12px;
  width: 100%;
}

.price-alert-btn-primary {
  background: var(--orange);
  border: 0;
  color: #fff;
}

.price-alert-btn-primary:hover { background: var(--orange-dark); }
.price-alert-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.price-alert-divider {
  align-items: center;
  color: var(--subtle);
  display: flex;
  font-size: 0.78rem;
  gap: 10px;
  margin: 12px 0;
}

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

.price-alert-anon-email { margin-bottom: 10px; }

.price-alert-anon-email input {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9rem;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.price-alert-anon-email input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.12);
  outline: none;
}

.price-alert-btn-secondary {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--ink);
}

.price-alert-btn-secondary:hover { border-color: var(--orange); color: var(--orange-dark); }
.price-alert-btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }

.price-alert-error {
  color: var(--orange);
  font-size: 0.8rem;
  margin: 10px 0 0;
}

/* Sino de notificacoes */
.header-notif-wrap { position: relative; }

.header-notif-badge {
  align-items: center;
  background: var(--orange);
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.62rem;
  font-weight: 800;
  height: 17px;
  justify-content: center;
  min-width: 17px;
  padding: 0 3px;
  position: absolute;
  right: -2px;
  top: -2px;
}

.header-notif-dropdown {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.16);
  max-height: 420px;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(340px, calc(100vw - 32px));
  z-index: 40;
}

.header-notif-head {
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
}

.header-notif-head strong { font-size: 0.92rem; }

.header-notif-list { padding: 6px; }

.header-notif-empty {
  color: var(--muted);
  font-size: 0.85rem;
  padding: 18px 12px;
  text-align: center;
}

.header-notif-item {
  border-radius: 8px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 10px;
}

.header-notif-item:hover { background: #f7f8fa; }

.header-notif-item.is-unread { background: var(--orange-soft); }
.header-notif-item.is-unread:hover { background: #ffe6df; }

.header-notif-item-title {
  font-size: 0.86rem;
  font-weight: 700;
}

.header-notif-item-body {
  color: var(--muted);
  font-size: 0.8rem;
}


/* ═══════════════════════════════════════════════════
   FEED (Recentes, Quentes, Mais clicadas, Virais, Verificadas, Frete
   grátis, Expiradas) — quebras próprias de responsividade. Destaques e
   Cupons compartilham .community-layout/.community-sidebar mas NÃO
   devem mudar — por isso a classe extra .community-layout-feed, só
   presente em pages/feed.ejs, escopando essas regras só a essas 7 abas.
   ═══════════════════════════════════════════════════ */

/* 1480px: some a sidebar/patrocinado, o feed ocupa a largura toda.
   A regra generica (.community-layout, @media min-width:1040px) ainda
   reserva a coluna da sidebar a partir de 1040px pras outras paginas —
   aqui devolvemos 1 coluna so nesse intervalo (1040-1479px) e escondemos
   a aside; ela só volta a aparecer a partir de 1480px. */
.community-layout-feed .community-sidebar {
  display: none;
}

@media (min-width: 1040px) {
  .community-layout-feed {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1480px) {
  .community-layout-feed {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .community-layout-feed .community-sidebar {
    align-self: stretch;
    display: grid;
  }
}

/* 884px: mantem 4 colunas ate aqui (sem a sidebar ja sobra mais espaco
   que os 1040px originais) — só cai pra 3 abaixo disso. */
@media (min-width: 884px) {
  .community-feed .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 884px: 3 colunas */
@media (max-width: 883px) {
  .community-feed .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 586px: 2 colunas */
@media (max-width: 585px) {
  .community-feed .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.header-notif-item-time {
  color: var(--subtle);
  font-size: 0.72rem;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════
   Páginas institucionais (privacidade, termos, sobre, contato)
   ═══════════════════════════════════════════════════ */

.preview-banner {
  align-items: center;
  background: #fbbf24;
  color: #1f2328;
  display: flex;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  padding: 10px 16px;
  text-align: center;
}

.preview-banner .lucide {
  flex-shrink: 0;
  height: 16px;
  width: 16px;
}

.info-hero {
  background: linear-gradient(135deg, var(--orange-soft) 0%, #fff 100%);
  border-bottom: 1px solid var(--line);
  padding: 3rem 0 2rem;
  text-align: center;
}

.info-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}

.info-eyebrow svg { width: 14px; height: 14px; }

.info-hero h1 {
  font-size: 2rem;
  font-weight: 800;
  /* h1 global (usado no hero da home) tem max-width:870px sem margin:auto —
     la faz sentido pq o hero e alinhado a esquerda, mas aqui .info-hero
     centraliza tudo, entao precisa desse margin explicito pra a CAIXA do
     titulo ficar centralizada, nao so o texto dentro dela. */
  margin: 0.6rem auto;
  color: var(--ink);
}

.info-sub {
  max-width: 560px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 0.97rem;
}

.info-layout {
  padding: 2.5rem 0 4rem;
  max-width: 780px;
  margin: 0 auto;
}

/* ── Hub de guias e comparativos (/guias-e-comparativos) — listagem mais
   larga que .info-layout de proposito (grid de cards, nao texto corrido) ── */
.seo-hub-wrap {
  margin: 0 auto;
  max-width: 1200px;
  padding: 2.5rem 20px 4rem;
}

/* Banners patrocinados horizontais — paginas de guias/comparativos nao tem
   coluna lateral, entao o mesmo slot/partial usado no resto do site aparece
   aqui como uma faixa centralizada entre secoes de conteudo (2 empilhados
   por faixa). */
.seo-hub-banner-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 2rem auto;
  max-width: 600px;
  padding: 0 20px;
}

.seo-hub-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.seo-hub-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.seo-hub-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Miniatura de capa no card — sangra pras bordas do card (cancela o padding
   de 22px) e mantem so os cantos superiores arredondados. */
.seo-hub-thumb {
  border-radius: var(--radius) var(--radius) 0 0;
  display: block;
  margin: -22px -22px 2px;
  overflow: hidden;
}

.seo-hub-thumb img {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.seo-hub-badge {
  align-items: center;
  background: var(--orange-soft);
  border-radius: 999px;
  color: var(--orange-dark);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 5px;
  padding: 4px 10px;
  text-transform: uppercase;
  width: fit-content;
}

.seo-hub-badge .lucide { height: 12px; width: 12px; }

.seo-hub-badge.is-guia {
  background: var(--green-soft);
  color: var(--green-dark);
}

.seo-hub-card h2 {
  color: var(--ink);
  font-size: 1.1rem;
  margin: 0;
}

.seo-hub-card p {
  color: var(--muted);
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.seo-hub-date {
  color: var(--subtle);
  font-size: 0.78rem;
}

/* Banner de capa 16:9 no topo do artigo (comparativo/guia) — a mesma imagem
   usada em og:image/schema, agora visivel pro leitor humano. */
.seo-cover-banner {
  margin-bottom: 1.75rem;
}

.seo-cover-banner img {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2.25rem;
  box-shadow: var(--shadow-sm);
}

/* Grade de produtos embutida em páginas de conteúdo (comparativo/guia) — o
   .products-grid padrão usa breakpoints de VIEWPORT (pensado pro .site-main
   de largura cheia), o que força colunas estreitas demais aqui dentro do
   .info-card (bem mais estreito). auto-fill baseado no espaço real
   disponível evita o conteúdo do card cortar. */
.info-card .products-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.info-updated {
  color: var(--subtle);
  font-size: 0.85rem;
  margin: 0 0 1.75rem;
}

.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 2rem;
  padding: 1rem;
  background: var(--bg);
  border-radius: 10px;
}

.legal-toc a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  text-decoration: none;
}

.legal-toc a:hover { color: var(--orange); border-color: var(--orange); }

.legal-content h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  margin: 2rem 0 0.75rem;
  scroll-margin-top: 90px;
}

.legal-content h2:first-child { margin-top: 0; }

.legal-content h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  margin: 1.25rem 0 0.5rem;
}

.legal-content p {
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}

.legal-content ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.7;
}

.legal-content li { margin-bottom: 0.4rem; }

.legal-content strong { color: var(--ink); }

.legal-content a {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-color: rgba(240, 68, 56, 0.35);
}

.legal-content a:hover { text-decoration-color: var(--orange); }

/* Imagens de produto inseridas pela IA no meio do texto (comparativo/guia) —
   ver seoContent.service.js#insertProductImages. Tamanho fixo moderado (nao
   full-width) pra nao virar um bloco gigante entre paragrafos de texto. */
.seo-content-image {
  background: #f7f8fa;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: block;
  height: auto;
  margin: 0.75rem auto 1.25rem;
  max-width: 260px;
  width: 100%;
}

@media (max-width: 640px) {
  .seo-content-image {
    max-width: 200px;
  }
}

/* Sobre */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.about-stat {
  text-align: center;
  padding: 1.5rem 0.75rem;
  background: var(--bg);
  border-radius: 10px;
}

.about-stat i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  margin-bottom: 0.6rem;
}

.about-stat i[data-lucide] { width: 20px; height: 20px; }
.about-stat span { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); }

/* Contato */
.contact-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.contact-info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.contact-info-card h3 { margin: 0 0 1rem; font-size: 1rem; }

.contact-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 0.85rem;
}

.contact-info-row a { color: var(--ink); font-weight: 600; }

.contact-success {
  text-align: center;
  padding: 2.5rem 1rem;
}

.contact-success-icon {
  color: var(--green);
  margin-bottom: 0.75rem;
}

.contact-success-icon svg { width: 40px; height: 40px; }

@media (max-width: 720px) {
  .info-hero { padding: 2rem 0 1.5rem; }
  .info-hero h1 { font-size: 1.5rem; }
  .info-card { padding: 1.25rem; }
  .contact-layout { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   Banner de consentimento de cookies (LGPD)
   ═══════════════════════════════════════════════════ */

.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding: 12px;
  pointer-events: none;
}

.cookie-consent[hidden] { display: none; }

.cookie-consent-card {
  pointer-events: auto;
  width: min(720px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.25rem;
}

.cookie-consent-text {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.cookie-consent-text a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: underline;
}

.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Botoes com o MESMO tamanho/peso — nenhum dos dois pode parecer secundario
   (exigencia da LGPD: aceitar e rejeitar precisam ter destaque equivalente). */
.cookie-btn {
  flex: 1 1 180px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.cookie-btn-solid {
  background: var(--orange);
  border: 1px solid var(--orange);
  color: #fff;
}

.cookie-btn-solid:hover { background: var(--orange-dark); border-color: var(--orange-dark); }

.cookie-btn-outline {
  background: var(--surface);
  border: 1px solid var(--ink);
  color: var(--ink);
}

.cookie-btn-outline:hover { background: var(--bg); }

.cookie-consent-customize-link {
  display: block;
  margin: 0.65rem auto 0;
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

.cookie-consent-customize-link:hover { color: var(--ink); }

.cookie-consent-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.cookie-consent-panel-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}

.cookie-panel-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.cookie-panel-close:hover { color: var(--ink); }

.cookie-consent-category {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}

.cookie-consent-category:first-of-type { border-top: none; }

.cookie-consent-category strong {
  display: block;
  color: var(--ink);
  font-size: 0.88rem;
  margin-bottom: 2px;
}

.cookie-consent-category p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.cookie-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 24px;
  margin-top: 2px;
}

.cookie-toggle input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.cookie-toggle span {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 999px;
  transition: background 160ms ease;
}

.cookie-toggle span::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform 160ms ease;
}

.cookie-toggle input:checked + span { background: var(--orange); }
.cookie-toggle input:checked + span::before { transform: translateX(16px); }

.cookie-toggle-locked input { cursor: not-allowed; }
.cookie-toggle-locked input:checked + span { background: var(--subtle); opacity: 0.6; }

.cookie-consent-actions-panel { margin-top: 0.5rem; }
.cookie-consent-actions-panel .cookie-btn { flex: 1 1 auto; }

@media (max-width: 560px) {
  .cookie-consent { padding: 0; }
  .cookie-consent-card { width: 100%; border-radius: 14px 14px 0 0; }
  .cookie-btn { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════════════
   Página 404
   ═══════════════════════════════════════════════════ */

.error-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 2.5rem 0 3rem;
  text-align: center;
}

.error-hero {
  background: linear-gradient(135deg, var(--orange-soft) 0%, #fff 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2.5rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.error-code {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin: 0 0 0.5rem;
}

.error-hero h1 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 0.6rem;
}

.error-message {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto 1.5rem;
}

.error-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 0 26px;
  min-height: 46px;
}

.error-quicklinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 1.5rem 0 0;
}

.error-quicklinks a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  transition: border-color 160ms ease, color 160ms ease;
}

.error-quicklinks a:hover { border-color: var(--orange); color: var(--orange); }
.error-quicklinks .lucide { width: 15px; height: 15px; color: var(--orange); }

.error-suggestions {
  margin-top: 2.5rem;
  text-align: left;
}

.error-suggestions-title {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
  margin: 0 0 1rem;
}

@media (max-width: 560px) {
  .error-hero { padding: 2rem 1.25rem; }
  .error-hero h1 { font-size: 1.35rem; }
}

/* ═══════════════════════════════════════════════════
   Autopromoção Neun (ocupa os espaços de ad-slot)
   ═══════════════════════════════════════════════════ */

.self-promo-rotator {
  position: relative;
  width: 100%;
  height: 100%;
}

.self-promo-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 20px;
  text-align: center;
  background: linear-gradient(135deg, var(--orange-soft) 0%, #fff 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}

/* Crossfade: os dois slides ficam sobrepostos (position:absolute) durante a
   transicao, so a opacidade muda — troquei o antigo corte seco via atributo
   "hidden" (display:none nao anima) por isso. pointer-events:none no slide
   inativo evita que ele intercepte clique mesmo semi-visivel em transicao
   (mesmo bug que ja tinha acontecido aqui antes com o "hidden"). */
.self-promo-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.self-promo-badge {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
}

/* Icone solto, sem fundo/circulo, cor escura — pulsa bem devagar pra dar
   vida sem chamar atencao demais. Preto explicito (nao var(--ink)) porque
   esse token varia entre #101828 e #444 dependendo do "tema" ativo no
   style.css (varios blocos :root se sobrepondo) — aqui o pedido foi preto
   mesmo, sem depender de qual camada ganha. */
.self-promo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  font-size: 30px;
  color: #111;
  animation: selfPromoPulse 2.6s ease-in-out infinite;
}

.self-promo-icon-whatsapp,
.self-promo-icon-alert {
  background: none;
  color: #111;
}

@keyframes selfPromoPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.self-promo-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.self-promo-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #111;
  max-width: 320px;
}

.self-promo-text {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 400;
  color: #111;
  max-width: 300px;
  line-height: 1.4;
}

/* CTA com estilo proprio (nao depende de .offer-button, que muda de
   laranja/verde conforme o tema ativo em outras partes do site) — preto
   solido, cantos discretos, texto claro. */
.self-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 0 18px;
  min-height: 36px;
  font-size: 0.82rem;
  width: auto;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  white-space: nowrap;
  background: #111;
  color: #fff;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.self-promo-cta:hover {
  background: #000;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(16, 24, 40, 0.28);
}

.ad-slot-sidebar .self-promo-icon {
  font-size: 42px;
}

.ad-slot-sidebar .self-promo-title {
  font-size: 1.15rem;
  max-width: 240px;
}

.ad-slot-sidebar .self-promo-text {
  font-size: 0.88rem;
  max-width: 240px;
}

.ad-slot-sidebar .self-promo-slide {
  gap: 10px;
  padding: 24px;
}

.ad-slot-sidebar .self-promo-cta {
  min-height: 42px;
  padding: 0 22px;
  font-size: 0.88rem;
}

@media (max-width: 480px) {
  .self-promo-slide { padding: 12px 16px; }
  .self-promo-title { font-size: 0.85rem; }
  .self-promo-text { font-size: 0.74rem; }
}

/* ── Desktop (≥768px — mesmo breakpoint "md" do Bootstrap, embora o projeto
   nao carregue o framework, so bootstrap-icons; a media query abaixo reproduz
   o mesmo comportamento usando o CSS proprio do site). So no banner do topo
   (728px de largura) — a sidebar (300px) e estreita demais pra layout em
   linha e continua empilhada em qualquer largura. Icone/texto/botao pretos
   continuam os mesmos de cima — só muda o layout (linha) e o fundo (cor
   solida no lugar do gradiente claro). ─────────────────────────────────── */
@media (min-width: 768px) {
  .ad-slot-top .self-promo-slide {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 24px;
    padding: 0 40px;
  }

  .ad-slot-top .self-promo-slide-whatsapp {
    background: var(--green);
  }

  .ad-slot-top .self-promo-slide-alert {
    background: var(--orange);
  }

  .ad-slot-top .self-promo-badge {
    top: 14px;
    left: 20px;
    color: rgba(0, 0, 0, 0.45);
  }

  .ad-slot-top .self-promo-icon {
    font-size: 56px;
  }

  .ad-slot-top .self-promo-content {
    align-items: flex-start;
    gap: 6px;
  }

  .ad-slot-top .self-promo-title {
    font-size: 1.2rem;
    max-width: 420px;
  }

  .ad-slot-top .self-promo-text {
    font-size: 0.92rem;
    max-width: 400px;
  }

  .ad-slot-top .self-promo-cta {
    margin-top: 10px;
    min-height: 44px;
    padding: 0 24px;
    font-size: 0.9rem;
  }
}

/* ═══════════════════════════════════════════════════
   Carrossel de ofertas em destaque (topo da pagina) — produtos reais e atuais
   do banco, renderizado no servidor a cada carregamento. Ocupa o mesmo lugar
   onde antes ficava a autopromocao (self-promo-rotator, que continua so na
   sidebar). Estilo DealNews: fundo neutro, cards compactos, seta de
   navegacao no desktop, scroll por toque no mobile.
   ═══════════════════════════════════════════════════ */

.hot-deals-section {
  background: transparent;
  border: 0px solid var(--line);
  border-radius: 16px;
  margin-bottom: 16px;
  padding: 1px 11px 11px 11px;
}

.hot-deals-intro {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

/* Setas do carrossel, agrupadas no canto superior direito do bloco de
   intro (antes ficavam uma em cada lateral do carrossel) — margin-left:auto
   empurra o grupo pro fim da linha. */
.hot-deals-nav-group {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  margin-left: auto;
}

.hot-deals-mark {
  flex-shrink: 0;
  height: 22px;
  margin-top: 2px;
  width: 22px;
}

.hot-deals-intro h2 {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 4px;
}

/* Texto explicativo da finalidade do app (ver comentario no .ejs) — pequeno
   e discreto de proposito, e um subtitulo de apoio, nao o foco visual. */
.hot-deals-intro p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0;
  max-width: 640px;
}

.hot-deals-carousel-wrap {
  align-items: center;
  display: flex;
  gap: 6px;
}

.hot-deals-nav {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  display: none;
  flex-shrink: 0;
  height: 34px;
  justify-content: center;
  transition: background 150ms ease, opacity 150ms ease;
  width: 34px;
}

.hot-deals-nav:hover { background: var(--bg); }
.hot-deals-nav:disabled { cursor: default; opacity: 0.3; }
.hot-deals-nav .lucide { height: 17px; width: 17px; }

/* "Vistos recentes" — variante sem moldura no titulo (só o carrossel vira
   caixa) e com as setas sobrepostas nas bordas do proprio carrossel (em
   vez de ficarem do lado do titulo, como em "Oportunidades imperdíveis").
   Aparecem em qualquer largura (nao só desktop), diferente do padrao. */
.hot-deals-section-recent {
  background: none;
  border: none;
  padding: 0;
}

.hot-deals-carousel-wrap-recent {
  background: transparent;
  border: 0px solid var(--line);
  border-radius: 16px;
  padding: 0px 0px;
  position: relative;
}

.hot-deals-carousel-wrap-recent .hot-deals-track {
  padding: 0 34px;
}

.hot-deals-nav-overlay {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.hot-deals-nav-overlay.hot-deals-nav-prev { left: 6px; }
.hot-deals-nav-overlay.hot-deals-nav-next { right: 6px; }

/* "Vistos recentes" na home: fixo no topo da sidebar no desktop, e
   intercalado entre os cards (depois do 2º) so no mobile — igual ja e
   feito pros banners patrocinados, pra nunca aparecer 2x na mesma tela. */
.hot-deals-section-sidebar-only {
  display: none;
}

@media (min-width: 1040px) {
  .hot-deals-section-sidebar-only {
    display: block;
  }

  .hot-deals-section-mobile-only {
    display: none;
  }
}

.hot-deals-track {
  display: flex;
  flex: 1;
  gap: 12px;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.hot-deals-track::-webkit-scrollbar { display: none; }

.hot-deal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex: 0 0 132px;
  flex-direction: column;
  gap: 3px;
  padding: 12px 10px;
  position: relative;
  scroll-snap-align: start;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.hot-deal-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.hot-deal-discount {
  background: #111;
  border-radius: 6px;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 2px 6px;
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 1;
}

.hot-deal-image {
  height: 84px;
  margin-bottom: 4px;
  object-fit: contain;
  width: 100%;
}

/* "Loja · há X tempo" acima do titulo — discreto, uma linha so, corta com
   reticencias em vez de quebrar (o nome da loja + tempo cabe raramente numa
   linha de 132-160px, entao trunca em vez de espremer o card). */
.hot-deal-meta {
  color: var(--subtle);
  font-size: 0.6rem;
  font-weight: 300;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Nome da loja com a primeira letra maiuscula (independente de como veio no
   banco); o "há X tempo" ao lado fica sempre minusculo. */
.hot-deal-store { text-transform: capitalize; }
.hot-deal-time { text-transform: lowercase; }

.hot-deal-name {
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.3;
  min-height: 2.5em;
  overflow: hidden;
}

.hot-deal-prices {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.hot-deal-old-price {
  color: var(--subtle);
  font-size: 0.68rem;
}

.hot-deal-price {
  color: #444444;
  font-size: 0.98rem;
  font-weight: 900;
}

.hot-deal-link {
  align-items: center;
  color: var(--orange-dark);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 3px;
  margin-top: auto;
  padding-top: 6px;
}

.hot-deal-link .lucide { height: 12px; width: 12px; }

/* Card horizontal (imagem a esquerda, texto a direita) — carrossel "Vistos
   recentemente", mesma estrutura no mobile e desktop (nao alterna pra
   vertical em nenhum breakpoint, diferente do .hot-deal-card padrao). */
.hot-deal-card-h {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex: 0 0 260px;
  gap: 12px;
  padding: 10px;
  scroll-snap-align: start;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.hot-deal-card-h:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.hot-deal-h-image {
  background: #f7f7f7;
  border-radius: 8px;
  flex-shrink: 0;
  height: 64px;
  object-fit: contain;
  width: 64px;
}

.hot-deal-h-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hot-deal-h-name {
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
}

.hot-deal-h-old-price {
  color: var(--subtle);
  font-size: 0.7rem;
  text-decoration: line-through;
}

.hot-deal-h-price {
  color: #444444;
  font-size: 1rem;
  font-weight: 900;
}

@media (min-width: 768px) {
  .hot-deals-nav { display: flex; }

  .hot-deal-card { flex-basis: 160px; }

  .hot-deals-intro h2 { font-size: 1.1rem; }
  .hot-deals-intro p { font-size: 0.85rem; }
}

/* ═══════════════════════════════════════════════════
   Sem margem lateral no mobile — pedido explicito de deixar os cards
   ocupando a tela toda em telas pequenas (site inteiro, nao so a pagina do
   produto). De proposito no fim do arquivo: existem varias definicoes
   antigas de .site-main mais acima (temas sobrepostos historicos), essa
   aqui vence todas por ordem de declaracao (mesma especificidade). So
   largura/margem horizontal — o padding vertical (topo/rodape) de
   .site-main continua intacto, nao mexe nisso. Acima de 1040px
   (desktop) nada muda. ═══════════════════════════════════════════════════ */
@media (max-width: 1039px) {
  .site-main {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CARD VERTICAL — DESKTOP E TABLET (>= 761px)
   Redesenho do card de oferta seguindo o mockup card-desktop-novo.svg
   (228x451, DM Sans). Vale pro feed da home (.deal-feed, que aqui deixa de
   ser lista horizontal e vira grid) e pras paginas de grid (.products-grid:
   Recentes, Quentes, Categoria, Busca).

   Corta em 761px, e nao mais embaixo, porque o bloco @media (max-width:760px)
   do card horizontal flutua loja/horario/whatsapp com position:absolute e poe
   .product-card-actions em coluna. Deixar as duas versoes se sobrepondo entre
   641 e 760px embaralhava o empilhamento (testado). De 760 pra baixo fica o
   card horizontal do mobile, intacto; iPad retrato (768px) ja pega o novo.

   Por isso alguns dados aparecem duas vezes no HTML (frase de confianca de
   preco, loja, coracao) — cada copia e exibida em um breakpoint. So o coracao
   e interativo, e ele e sincronizado por product-id pelo auth.js, entao
   duplicar nao desencontra estado.

   Declarado no fim do arquivo porque existem varios blocos historicos de
   ".deal-feed .product-card" espalhados acima; com a mesma especificidade,
   quem vem por ultimo vence.
   ═══════════════════════════════════════════════════════════════════════ */

/* Exclusivos do card vertical do desktop: o mobile nao mostra autoria nem
   loja (ver "CARD MOBILE" no fim do arquivo). Ja .card-tag-row,
   .card-vote-display e .card-price-confidence-inline aparecem nos dois
   breakpoints — cada bloco define o proprio layout. */
.card-author,
.card-store-row {
  display: none;
}

@media (min-width: 761px) {
  /* Home: de 1 card por linha (horizontal) pra grid de cards verticais.
     auto-fill em vez de um numero fixo de colunas porque o feed divide a
     largura com a sidebar de 300px — com 4 colunas fixas o card caia pra
     ~165px em telas de 1040px e o rodape de icones quebrava em duas linhas.

     O max() dentro do minmax faz o teto de 5 colunas: (100% - 32px) / 5 e a
     largura que uma coluna teria numa linha de 5 (32px = os 4 gaps de 8px).
     Quando a caixa e larga esse valor passa de 210px e vira o minimo, entao
     nao cabe uma 6a coluna; quando e estreita, os 210px prevalecem e a
     quantidade cai sozinha pra 4, 3... Sem isso, em tela cheia sem sidebar
     dava 6 colunas.

     Gap de 8px (e nao os 16px do resto do site) pra fechar a conta do mockup:
     no feed de 1174px do desktop sao 5 x 228px + 4 x 8px = 1172px. Com 16px
     de gap o card caia pra 222px. */
  .deal-feed {
    align-items: stretch;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(max(210px, (100% - 32px) / 5), 1fr));
  }

  .deal-feed .product-social-actions {
    flex-wrap: nowrap;
  }

  /* Mesma medida de card em toda listagem. Antes cada contexto fixava a
     quantidade de colunas (4 no .products-grid, 4 no .community-feed
     .products-grid), o que fazia o card variar de tamanho conforme a pagina
     tinha ou nao sidebar. Aqui quem manda e a largura minima da coluna e a
     quantidade se ajusta — sem isso, com o container em 1492px os cards das
     paginas sem sidebar esticariam pra ~360px, bem acima dos 228px do mockup.
     .community-feed .products-grid precisa vir junto (e nao so .products-grid)
     pra empatar a especificidade da regra de 4 colunas la de cima. */
  .products-grid,
  .community-feed .products-grid {
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(max(210px, (100% - 32px) / 5), 1fr));
  }

  .deal-feed .product-card,
  .products-grid .product-card {
    background: #fff;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    column-gap: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 12px;
    row-gap: 0;
    transition: box-shadow 180ms ease, transform 180ms ease;
  }

  .deal-feed .product-card:hover,
  .products-grid .product-card:hover {
    box-shadow: 0 8px 22px rgba(16, 24, 40, 0.09);
    transform: translateY(-2px);
  }

  /* ── Cabecalho de autoria ───────────────────────────── */
  .card-author {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 9px;
    min-width: 0;
  }

  .card-author-avatar {
    align-items: center;
    background: #eceef0;
    border-radius: 50%;
    color: #9fa19f;
    display: flex;
    flex: 0 0 24px;
    height: 24px;
    justify-content: center;
    overflow: hidden;
    width: 24px;
  }

  .card-author-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .card-author-avatar .lucide {
    height: 14px;
    width: 14px;
  }

  .card-author-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .card-author-name,
  .card-author-date {
    color: #9fa19f;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-author-name {
    font-size: 0.645rem;
  }

  .card-author-date {
    font-size: 0.5625rem;
  }

  /* Coracao migra pro cabecalho (no mobile continua sobre a imagem).
     opacity:1 explicito: o .heart-btn base nasce com opacity:0 e so aparece
     no hover do card (faz sentido sobreposto a imagem), mas no cabecalho o
     mockup mostra ele sempre visivel. */
  .card-author .heart-btn-head {
    background: none;
    border: 0;
    box-shadow: none;
    color: #9fa19f;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 18px;
    margin-left: auto;
    opacity: 1;
    padding: 0;
    position: static;
    width: 18px;
  }

  .card-author .heart-btn-head .lucide {
    height: 17px;
    width: 17px;
  }

  .card-author .heart-btn-head.is-favorite {
    color: #e94e31;
  }

  .card-author .heart-btn-head.is-favorite .lucide {
    fill: currentColor;
  }

  /* Sem o ".product-image" no meio de proposito: o coracao do mobile saiu de
     dentro do link da imagem e virou filho direto do card, entao um seletor
     ancorado no pai antigo deixaria os dois corações visiveis aqui. */
  .deal-feed .heart-btn-media,
  .products-grid .heart-btn-media {
    display: none;
  }

  /* ── Imagem ─────────────────────────────────────────── */
  .deal-feed .product-image,
  .products-grid .product-image {
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 4px;
    height: auto;
    min-height: 0;
    width: 100%;
  }

  .deal-feed .product-image img,
  .products-grid .product-image img {
    height: 100%;
    object-fit: contain;
    padding: 0;
    width: 100%;
  }

  /* ── Corpo ──────────────────────────────────────────── */
  .deal-feed .product-body,
  .products-grid .product-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: 0;
  }

  /* Some no desktop: o badge de temperatura e o "há Xd" migraram pra
     .card-tag-row e pro cabecalho de autoria, respectivamente. */
  .deal-feed .product-card-top,
  .products-grid .product-card-top,
  .deal-feed .card-price-confidence,
  .products-grid .card-price-confidence,
  .deal-feed .price-store,
  .products-grid .price-store {
    display: none;
  }

  .deal-feed .product-card h3,
  .products-grid .product-card h3 {
    display: -webkit-box;
    margin: 12px 0 0;
    min-height: 54px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .deal-feed .product-card h3 a,
  .products-grid .product-card h3 a {
    color: #2c344b;
    font-size: 0.845rem;
    font-weight: 400;
    line-height: 18px;
  }

  /* ── Preco ──────────────────────────────────────────── */
  .deal-feed .price-row,
  .products-grid .price-row {
    align-items: baseline;
    border-bottom: 0;
    column-gap: 8px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-bottom: 0;
    row-gap: 2px;
  }

  .deal-feed .price-row strong,
  .products-grid .price-row strong {
    color: #25213d;
    font-size: 1.146rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
  }

  .deal-feed .price-row del,
  .products-grid .price-row del {
    color: #e94e31;
    font-size: 0.807rem;
    font-weight: 400;
    text-decoration-thickness: 1px;
  }

  /* No mockup o desconto e texto verde puro, sem pilula de fundo */
  .deal-feed .deal-discount,
  .products-grid .deal-discount {
    background: none;
    border-radius: 0;
    color: #0c6c30;
    font-size: 0.654rem;
    font-weight: 500;
    min-height: 0;
    padding: 0;
  }

  /* ── Tag + frase de confianca de preco ──────────────── */
  .card-tag-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    min-width: 0;
  }

  .card-tag-row .deal-tag {
    background: #fef0ec;
    border: 0;
    border-radius: 4px;
    color: #d84020;
    font-size: 0.635rem;
    font-weight: 500;
    line-height: 1;
    min-height: 0;
    padding: 4px 8px;
  }

  .card-price-confidence-inline {
    align-items: center;
    color: #0c6c30;
    display: inline-flex;
    font-size: 0.635rem;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-price-confidence-inline .lucide {
    flex: 0 0 auto;
    height: 12px;
    width: 12px;
  }

  /* ── Loja ───────────────────────────────────────────── */
  .card-store-row {
    align-items: center;
    color: #9fa19f;
    display: flex;
    gap: 6px;
    margin-top: 12px;
    min-width: 0;
  }

  .card-store-logo,
  .card-store-fallback {
    border-radius: 50%;
    flex: 0 0 12px;
    height: 12px;
    object-fit: contain;
    width: 12px;
  }

  .card-store-fallback {
    align-items: center;
    background: #eceef0;
    display: flex;
    font-size: 0.5rem;
    justify-content: center;
  }

  .card-store-name {
    font-size: 0.675rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-store-row .lucide {
    color: #2f80ed;
    flex: 0 0 auto;
    height: 12px;
    width: 12px;
  }

  /* ── Rodape de acoes ────────────────────────────────── */
  /* flex-direction explicito so por seguranca: o bloco que poe
     .product-card-actions em coluna e @media (max-width:760px), que hoje nao
     se sobrepoe a este. Fica explicito pra nao voltar a empilhar caso esse
     limite mude. */
  .deal-feed .product-card-actions,
  .products-grid .product-card-actions {
    align-items: center;
    border-top: 1px solid #e6e7e9;
    display: flex;
    flex-direction: row;
    margin-top: auto;
    padding-top: 12px;
  }

  .deal-feed .product-social-actions,
  .products-grid .product-social-actions {
    align-items: center;
    display: flex;
    gap: 14px;
    width: 100%;
  }

  .card-vote-display {
    align-items: center;
    color: #9fa19f;
    display: inline-flex;
    gap: 6px;
  }

  .card-vote-btn {
    align-items: center;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    padding: 0;
    transition: color 140ms ease, transform 140ms ease;
  }

  .card-vote-btn .lucide {
    fill: currentColor;
    height: 16px;
    pointer-events: none;
    stroke-width: 1.5;
    width: 16px;
  }

  .card-vote-btn:hover {
    transform: scale(1.12);
  }

  .card-vote-btn[data-card-vote="hot"]:hover,
  .card-vote-btn[data-card-vote="hot"].is-active {
    color: #0c6c30;
  }

  .card-vote-btn[data-card-vote="cold"]:hover,
  .card-vote-btn[data-card-vote="cold"].is-active {
    color: #e94e31;
  }

  .card-vote-display strong {
    font-size: 0.785rem;
    font-weight: 400;
  }

  .card-vote-display strong[hidden] {
    display: none;
  }

  .deal-feed .product-social-actions .stat-pill,
  .products-grid .product-social-actions .stat-pill {
    background: none;
    border: 0;
    color: #9fa19f;
    gap: 6px;
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .deal-feed .product-social-actions .stat-pill .lucide,
  .products-grid .product-social-actions .stat-pill .lucide {
    height: 16px;
    width: 16px;
  }

  .deal-feed .product-social-actions .stat-pill strong,
  .products-grid .product-social-actions .stat-pill strong {
    font-size: 0.785rem;
    font-weight: 400;
  }

  /* WhatsApp encostado na direita, como no mockup */
  .deal-feed .product-social-actions .share-popover-wrap,
  .products-grid .product-social-actions .share-popover-wrap {
    margin-left: auto;
  }

  .deal-feed .product-social-actions .wa-icon,
  .products-grid .product-social-actions .wa-icon {
    height: 20px;
    width: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CARD MOBILE (<= 760px)
   Redesenho seguindo o mockup card-para-mobile-novo.svg (390px, DM Sans).
   Card horizontal: base cinza com a foto a esquerda, conteudo a direita.
   Vale pro feed da home (.deal-feed) e pras paginas de grid (.products-grid:
   Recentes, Quentes, Categoria, Busca...), que aqui passam a 1 card por
   linha — as contagens de coluna do desktop nao valem pro card horizontal.

   O ponto central do desenho e a base cinza crescer junto com o titulo:
   o card e um grid de 2 colunas com align-items:stretch, entao a coluna da
   imagem acompanha sozinha a altura da coluna de texto — sem JS e sem
   altura fixa. Como so o titulo muda de altura (1 a 3 linhas), a base cresce
   exatamente uma entrelinha por linha, que e o que o mockup mostra
   (89,47 / 107,74 / 126,07 = +18,3 por linha). A foto fica 77x77 fixa e
   centrada na base via flex, e o min-height garante que ela caiba mesmo se
   a coluna de texto encolher.

   Substitui dois blocos antigos que montavam esse card em 3 faixas, com
   loja/horario/whatsapp flutuando em position:absolute e varios !important:
   "DEAL FEED — layout mobile/tablet" (home) e o de 474px (paginas de grid).
   Loja e "ha Xd" sairam do card, entao aquele andaime todo (padding-top
   reservado, margens negativas pra linha de icones) deixou de ser necessario.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  .deal-feed,
  .products-grid {
    gap: 8px;
  }

  /* 1 card por linha nas paginas de grid tambem: o card mobile e horizontal,
     entao as contagens de coluna que valem no desktop (4/3/2) nao se aplicam
     aqui. .community-feed .products-grid vem junto pra empatar a
     especificidade das regras de 3 e 2 colunas declaradas mais acima. */
  .products-grid,
  .community-feed .products-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .deal-feed .product-card,
  .products-grid .product-card {
    align-items: stretch;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 6px rgba(29, 29, 27, 0.23);
    column-gap: 9px;
    display: grid;
    grid-template-columns: 91px minmax(0, 1fr);
    padding: 12px;
    position: relative;
    row-gap: 0;
    transform: none;
  }
  /* ── Base cinza + foto ──────────────────────────────── */
  .deal-feed .product-image,
  .products-grid .product-image {
    align-items: center;
    /* align-self explicito: e ele que faz a base acompanhar a altura da coluna
       de texto. O .deal-feed ganhava isso de uma regra antiga propria; o
       .products-grid nao tem equivalente e ficava em "auto", entao a base
       parava no min-height e nao crescia com o titulo. */
    align-self: stretch;
    aspect-ratio: auto;
    background: #f8f7f7;
    border-radius: 0;
    display: flex;
    height: auto;
    justify-content: center;
    /* margin:0 anula o "margin: 18px auto 0" que o .products-grid usa pra
       afastar a foto no card vertical. A base ate esticava, mas os 18px de
       topo eram descontados da altura — ela fechava sempre 18px menor que a
       coluna de texto. */
    margin: 0;
    min-height: 89px;
    overflow: hidden;
    position: relative;
    width: 91px;
  }
  .deal-feed .product-image img,
  .products-grid .product-image img {
    height: 77px;
    object-fit: contain;
    padding: 0;
    width: 77px;
  }
  /* 91px de base / 7,41 de proporcao do SVG = 12,3px de altura, igual ao
     mockup. No desktop o selo ocupa 75%; aqui, a largura toda da base. */
  .deal-feed .staff-pick-badge,
  .products-grid .staff-pick-badge {
    width: 100%;
  }
  /* ── Coracao ────────────────────────────────────────── */
  /* opacity:1 porque o .heart-btn base nasce invisivel e so aparece no hover
     do card — que no celular nao existe. */
  .deal-feed .heart-btn-media,
  .products-grid .heart-btn-media {
    background: none;
    border: 0;
    box-shadow: none;
    color: #a0a2a0;
    display: inline-flex;
    height: 18px;
    opacity: 1;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 18px;
  }
  .deal-feed .heart-btn-media .lucide,
  .products-grid .heart-btn-media .lucide {
    height: 17px;
    width: 17px;
  }
  .deal-feed .heart-btn-media.is-favorite,
  .products-grid .heart-btn-media.is-favorite {
    background: none;
    color: #e94f31;
  }
  .deal-feed .heart-btn-media.is-favorite .lucide,
  .products-grid .heart-btn-media.is-favorite .lucide {
    fill: currentColor;
  }
  /* ── Coluna de conteudo ─────────────────────────────── */
  .deal-feed .product-body,
  .products-grid .product-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: 0;
  }
  /* Some no mobile: o badge de temperatura migrou pra .card-tag-row, e loja
     e "ha Xd" sairam do card. */
  .deal-feed .product-card-top,
  .products-grid .product-card-top,
  .deal-feed .price-store,
  .products-grid .price-store {
    display: none;
  }
  /* font-size/line-height precisam ficar no proprio h3, nao so no <a>: e o h3
     que forma a caixa de recorte, entao e a metrica dele que define a altura
     das linhas. Sem isso vinham de uma regra antiga (0,82rem / 1,25) junto de
     um max-height em em calculado sobre ela — o titulo travava em 2,6 linhas
     em vez de 3, e a base cinza crescia menos que uma entrelinha.
     max-height redeclarado em em pra bater exatamente 3 linhas (3 x 1,33) e
     servir de trava mesmo onde o -webkit-line-clamp nao pegar.
     padding-right abre espaco pro coracao, que flutua no topo direito. */
  .deal-feed .product-card h3,
  .products-grid .product-card h3 {
    display: -webkit-box;
    font-size: 0.86rem;
    line-height: 1.33;
    margin: 0;
    max-height: 3.99em;
    /* min-height:0 desliga a reserva de 2 linhas que o .products-grid usa pra
       alinhar titulos entre colunas — aqui e 1 card por linha, e a reserva
       inflava a base cinza mesmo com titulo de 1 linha. */
    min-height: 0;
    overflow: hidden;
    padding-right: 24px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .deal-feed .product-card h3 a,
  .products-grid .product-card h3 a {
    color: #2c354b;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
  }
  /* ── Preco ──────────────────────────────────────────── */
  .deal-feed .price-row,
  .products-grid .price-row {
    align-items: baseline;
    border-bottom: 0;
    column-gap: 8px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 7px;
    padding-bottom: 0;
    row-gap: 2px;
  }
  .deal-feed .price-row strong,
  .products-grid .price-row strong {
    color: #25223e;
    font-size: 1.146rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
  }
  /* line-height:1 nos secundarios pra linha do preco fechar na altura do
     valor principal (18,3px) em vez de esticar com a entrelinha deles */
  .deal-feed .price-row del,
  .products-grid .price-row del {
    color: #e94f31;
    font-size: 0.807rem;
    font-weight: 400;
    line-height: 1;
    text-decoration-thickness: 1px;
  }
  .deal-feed .deal-discount,
  .products-grid .deal-discount {
    background: none;
    border-radius: 0;
    color: #0c6c30;
    font-size: 0.654rem;
    font-weight: 500;
    line-height: 1;
    min-height: 0;
    padding: 0;
  }
  /* ── Tag + frase de confianca de preco ──────────────── */
  .deal-feed .card-tag-row,
  .products-grid .card-tag-row {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 7px;
    min-width: 0;
  }
  /* height fixo (e nao padding vertical) pra bater os 12,5px do mockup sem
     depender da metrica da fonte */
  .deal-feed .card-tag-row .deal-tag,
  .products-grid .card-tag-row .deal-tag {
    align-items: center;
    background: #fef0ec;
    border: 0;
    border-radius: 4px;
    color: #d84020;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.635rem;
    font-weight: 500;
    height: 13px;
    line-height: 1;
    min-height: 0;
    padding: 0 8px;
  }
  .deal-feed .card-price-confidence-inline,
  .products-grid .card-price-confidence-inline {
    align-items: center;
    color: #0c6c30;
    display: inline-flex;
    font-size: 0.578rem;
    gap: 3px;
    line-height: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .deal-feed .card-price-confidence-inline .lucide,
  .products-grid .card-price-confidence-inline .lucide {
    flex: 0 0 auto;
    height: 11px;
    width: 11px;
  }
  /* ── Linha de acoes ─────────────────────────────────── */
  .deal-feed .product-card-actions,
  .products-grid .product-card-actions {
    align-items: center;
    border-top: 0;
    display: flex;
    flex-direction: row;
    margin-left: 0;
    margin-top: 7px;
    padding-top: 0;
    width: auto;
  }
  /* line-height:1 + height:auto nos botoes pra linha fechar na altura do maior
     icone (o whatsapp, 19px). Sem isso o .stat-pill trazia altura minima
     propria e a faixa ia pra 26px, empurrando a base cinza junto. */
  .deal-feed .product-social-actions,
  .products-grid .product-social-actions {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    line-height: 1;
    width: 100%;
  }
  .deal-feed .product-social-actions .stat-pill,
  .products-grid .product-social-actions .stat-pill,
  .deal-feed .product-social-actions .share-popover-wrap,
  .products-grid .product-social-actions .share-popover-wrap,
  .deal-feed .card-vote-display,
  .products-grid .card-vote-display {
    line-height: 1;
  }
  /* display:flex no wrap (e nao so no botao): como inline-flex o botao se
     apoiava na linha de texto do wrap e herdava o espaco do descendente,
     deixando a faixa em 22px em vez dos 19px do icone. */
  .deal-feed .product-social-actions .share-popover-wrap,
  .products-grid .product-social-actions .share-popover-wrap {
    display: flex;
  }
  .deal-feed .product-social-actions .whatsapp-share,
  .products-grid .product-social-actions .whatsapp-share {
    align-items: center;
    display: inline-flex;
    height: 19px;
    padding: 0;
    width: 19px;
  }
  .deal-feed .card-vote-display,
  .products-grid .card-vote-display {
    align-items: center;
    color: #a0a2a0;
    display: inline-flex;
    gap: 6px;
  }
  .deal-feed .card-vote-btn,
  .products-grid .card-vote-btn {
    align-items: center;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    padding: 0;
  }
  .deal-feed .card-vote-btn .lucide,
  .products-grid .card-vote-btn .lucide {
    fill: currentColor;
    height: 16px;
    pointer-events: none;
    stroke-width: 1.5;
    width: 16px;
  }
  .deal-feed .card-vote-btn[data-card-vote="hot"].is-active,
  .products-grid .card-vote-btn[data-card-vote="hot"].is-active {
    color: #0c6c30;
  }
  .deal-feed .card-vote-btn[data-card-vote="cold"].is-active,
  .products-grid .card-vote-btn[data-card-vote="cold"].is-active {
    color: #e94f31;
  }
  .deal-feed .card-vote-display strong,
  .products-grid .card-vote-display strong {
    font-size: 0.785rem;
    font-weight: 400;
  }
  .deal-feed .card-vote-display strong[hidden],
  .products-grid .card-vote-display strong[hidden] {
    display: none;
  }
  .deal-feed .product-social-actions .stat-pill,
  .products-grid .product-social-actions .stat-pill {
    background: none;
    border: 0;
    color: #a0a2a0;
    gap: 6px;
    height: auto;
    min-height: 0;
    padding: 0;
  }
  .deal-feed .product-social-actions .stat-pill .lucide,
  .products-grid .product-social-actions .stat-pill .lucide {
    height: 16px;
    width: 16px;
  }
  .deal-feed .product-social-actions .stat-pill strong,
  .products-grid .product-social-actions .stat-pill strong {
    font-size: 0.785rem;
    font-weight: 400;
  }
  .deal-feed .product-social-actions .share-popover-wrap,
  .products-grid .product-social-actions .share-popover-wrap {
    margin-left: auto;
  }
  .deal-feed .product-social-actions .wa-icon,
  .products-grid .product-social-actions .wa-icon {
    height: 19px;
    width: 19px;
  }
}