/* cupons.html, busca.html and cashback.html headers are plain: title, text
   and numbers on the page itself — no box, pattern or mascot (heroes.js
   marks .page-hero[data-hx]). Plus light card motion; prefers-reduced-motion
   turns it off. */

.page-hero[data-hx] {
  background: none; color: var(--ink);
  margin: 8px 0 20px; padding: 8px 0; border-radius: 0;
  grid-template-columns: minmax(0, 1fr);
  box-shadow: none; overflow: visible;
}
.page-hero[data-hx]::before { display: none; }
.page-hero[data-hx] picture { display: none; }
.page-hero[data-hx] .page-hero__kicker { color: var(--ink-3); opacity: 1; }
.page-hero[data-hx] .page-hero__sub { color: var(--ink-3); opacity: 1; }
.page-hero[data-hx] .page-hero__stats > div > span { color: var(--ink-3); opacity: 1; }

/* ---------- page motion ---------- */
/* cards rise in as they scroll into view (only ones below the fold start hidden) */
.hx-rv { opacity: 0; transform: translateY(14px); }
.hx-rv.hx-in { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--hxd, 0ms); }

html[data-page="busca"] .product-card, html[data-page="cashback"] .product-card {
  transition: transform 0.22s cubic-bezier(.2, .7, .2, 1), box-shadow 0.22s ease;
}
html[data-page="busca"] .product-card:hover, html[data-page="cashback"] .product-card:hover {
  transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(59, 39, 35, 0.45);
}
.cbrate__mark img { transition: transform 0.25s cubic-bezier(.2, .7, .2, 1); }
.cbrate__link:hover .cbrate__mark img { transform: scale(1.07); }

/* cupons: the "Ver cupom" cover glints now and then */
html[data-page="cupons"] .cpn__cover { overflow: hidden; }
html[data-page="cupons"] .cpn__cover::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg); animation: hxGlint 5.5s ease-in-out infinite; pointer-events: none;
}
@keyframes hxGlint { 0%, 70% { left: -60%; } 100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
  html[data-page="cupons"] .cpn__cover::after { animation: none; }
  .hx-rv { opacity: 1; transform: none; }
}

/* cupons: bigger store icons on the coupon cards and the store filter chips */
html[data-page="cupons"] .cpn__head { gap: 11px; }
html[data-page="cupons"] .cpn__head img, html[data-page="cupons"] .cpn__head .mono {
  width: 36px; height: 36px; border-radius: 10px;
}
/* render.js sets the monogram's letter to 10px inline */
html[data-page="cupons"] .cpn__head .mono { font-size: 17px !important; }
html[data-page="cupons"] .storechip .mono { font-size: 17px !important; }
html[data-page="cupons"] .cpn__store { font-size: 14.5px; }
/* the store filter pills themselves: taller, roomier, larger text */
html[data-page="cupons"] .store-chips { gap: 12px; }
html[data-page="cupons"] .storechip { height: 60px; padding: 0 22px 0 12px; gap: 12px; font-size: 16px; }
html[data-page="cupons"] .storechip img, html[data-page="cupons"] .storechip .mono {
  width: 40px; height: 40px; border-radius: 10px;
}
/* "Todas as lojas" (the first chip, no logo) stands apart from the store
   pills: a rounded rectangle, dark brown, in the display face */
html[data-page="cupons"] .store-chips > .storechip:first-child {
  border-radius: 14px; padding: 0 22px;
  background: transparent; border: 2px solid var(--brown); color: var(--brown);
  font-family: var(--font-display); font-weight: 800; font-size: 16.5px; letter-spacing: -0.01em;
}
html[data-page="cupons"] .store-chips > .storechip--on:first-child { background: var(--brown); color: #fff; }
:root[data-theme="dark"] html[data-page="cupons"] .store-chips > .storechip:first-child,
html[data-theme="dark"][data-page="cupons"] .store-chips > .storechip:first-child { border-color: var(--ink); color: var(--ink); }
html[data-theme="dark"][data-page="cupons"] .store-chips > .storechip--on:first-child { background: var(--ink); color: var(--surface-desk); }