/* OFFERA — public website (desktop-capable storefront).
   Layout cues: Americanas. Asset/icon style: eBay. Coupon reveal: Méliuz.
   Palette/type are NOT reinvented here — the :root block below is copied
   verbatim from web/css/app.css (source of truth for OFFERA's brand
   tokens), the same "tokens copied verbatim so the two stay in step"
   convention already used by admin/static/admin.css. Change a token in one
   place, mirror it in the other two on purpose. */

:root {
  /* brand */
  --red: #EA1D2C;
  --red-dark: #C4121F;
  --red-soft: #FFE9EB;
  --red-tint: #FFF5F6;
  --red-ink: var(--red-dark);
  --white: #FFFFFF;
  --page: var(--white);
  --dot-rgb: 59, 39, 35;
  --scrim: rgba(59, 39, 35, 0.4);
  --gray-25: #FBF9F8;
  --gray-50: #F8F3F2;
  --gray-100: #F0E7E4;
  --gray-200: #E3D5D1;
  --gray-300: #CDBAB5;
  --gray-500: #7C6A64;
  --gray-700: #453832;
  --brown: #3B2723;
  --brown-soft: #6D4B43;
  --brown-tint: #F4ECE7;
  --brown-tint-2: #E9DCD4;
  --green: #1E8E4E;
  --green-soft: #E4F5EA;
  --amber-soft: #FFF3C4;
  --amber-ink: #7A5A00;
  --amber-line: #F2DB85;

  --ink: var(--brown);
  --ink-2: var(--gray-700);
  --ink-3: var(--gray-500);
  --line: var(--gray-200);
  --surface-desk: #F2EDEB;

  --font-display: "Google Sans Flex", "Google Sans", "Roboto Flex", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Google Sans", "Google Sans Flex", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-xl: 22px;
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-pill: 999px;

  --edge: 0 3px 0 var(--gray-200);
  --shadow-float: 0 18px 44px rgba(59, 39, 35, 0.18);

  --ease-out: cubic-bezier(.22, .9, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .44, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 400ms;

  --gutter: 20px;
  --tap: 44px;

  /* site-only: shared page container width, header height */
  --wrap: 1240px;
  --header-h: 68px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --red-soft: #45191E;
  --red-tint: #261416;
  --red-ink: #FF7C85;
  --page: #120D0C;
  --white: #1E1714;
  --gray-25: #1E1714;
  --gray-50: #28201C;
  --gray-100: #2F2522;
  --gray-200: #3A2E2A;
  --gray-300: #5A4A45;
  --gray-500: #AD9C95;
  --gray-700: #DCCDC7;
  --brown-soft: #DDC3B7;
  --brown-tint: #2C211D;
  --brown-tint-2: #372A24;
  --green: #52C987;
  --green-soft: #15311F;
  --amber-soft: #3A3010;
  --amber-ink: #F2CF5B;
  --amber-line: #5E4C14;

  --ink: #F7EFEB;
  --surface-desk: #0A0707;
  --dot-rgb: 255, 236, 226;
  --scrim: rgba(0, 0, 0, 0.62);

  --edge: 0 3px 0 rgba(0, 0, 0, 0.55);
  --shadow-float: 0 18px 44px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

:root[data-theme="dark"] img[src^="http"] { filter: brightness(0.88) saturate(0.95); }

/* ---------- 1 · base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--surface-desk);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:disabled { cursor: default; }

input, select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 8px;
}

.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;
}

[hidden] { display: none !important; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 960px) { .wrap { padding-inline: 32px; } }

.ico { display: inline-flex; line-height: 0; flex: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--r-lg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
}
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 4px 0 var(--red-dark); }
@media (hover: hover), (min-width: 640px) { .btn--primary:hover { background: #F02B39; } }
.btn--primary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--red-dark); }
.btn--secondary { background: var(--white); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); color: var(--ink); }
@media (hover: hover), (min-width: 640px) { .btn--secondary:hover { border-color: var(--gray-300); } }
.btn--secondary:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: none; text-transform: none; letter-spacing: normal; font-family: var(--font-ui); font-weight: 700; }
@media (hover: hover), (min-width: 640px) { .btn--ghost:hover { background: var(--gray-50); } }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 12.5px; }
.btn--block { width: 100%; }

.iconbtn {
  width: var(--tap); height: var(--tap);
  display: inline-grid; place-items: center;
  border-radius: 50%;
  color: var(--ink);
  transition: background var(--t-fast), transform var(--t-fast) var(--ease-spring);
}
@media (hover: hover), (min-width: 640px) { .iconbtn:hover { background: var(--gray-50); } }
.iconbtn:active { background: var(--gray-100); transform: scale(0.92); }

/* ---------- 2 · header / nav ----------
   Mercado Livre's header, in OFFERA red: logo · search · actions on row 1,
   the live coupon pill (ML's CEP slot) + section links on row 2. The red
   stays red in dark mode: it's the brand, not a surface. */

.site-header {
  position: relative;
  z-index: 50;
  background: var(--red);
  color: #fff;
}
.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding-top: 10px;
  padding-bottom: 6px;
}
.site-header__logo { flex: none; display: inline-flex; line-height: 0; }
.site-header__logo img { height: 34px; width: auto; filter: brightness(0) invert(1); }
@media (min-width: 960px) { .site-header__logo img { height: 42px; } }

.site-search {
  order: 3;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  height: 44px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.site-search__select {
  flex: none;
  max-width: 104px;
  height: 100%;
  padding: 0 24px 0 12px;
  border: 0;
  background: transparent;
  color: #6b6b6b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.site-search__select.is-set { color: var(--red-dark); font-weight: 700; }
.site-search__select--cat { border-right: 1px solid #e6e6e6; }
.site-search__select:not(.site-search__select--cat) { border-left: 1px solid #e6e6e6; }
.site-search__select:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.site-search__input {
  flex: 1 1 40%;
  min-width: 120px;
  height: 100%;
  padding: 0 14px;
  border: 0;
  background: none;
  font-size: 15px;
  color: #2b2b2b;
  outline: none;
}
.site-search__input::placeholder { color: #9a9a9a; }
.site-search__btn {
  flex: none;
  width: 48px; height: 100%;
  display: grid; place-items: center;
  color: #6b6b6b;
  border-left: 1px solid #e6e6e6;
}
@media (hover: hover), (min-width: 640px) { .site-search__btn:hover { color: var(--red); } }
.site-search:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45); }

.site-header__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-header__actions .iconbtn { color: #fff; }
@media (hover: hover), (min-width: 640px) { .site-header__actions .iconbtn:hover { background: rgba(255, 255, 255, 0.14); } }
.site-header__ask {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
@media (hover: hover), (min-width: 640px) { .site-header__ask:hover { background: rgba(255, 255, 255, 0.24); } }
.site-header__burger { display: inline-grid; }

.site-header__sub {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 8px;
  min-height: 36px;
  /* a safety net, not the fix: if the nav row's content ever outgrows its
     breakpoint again (a longer rotator label, one more nav link), this
     keeps the overflow contained to a scrollable row instead of pushing
     the whole page wider than the viewport. */
  overflow-x: auto;
  scrollbar-width: none;
}
.site-header__sub::-webkit-scrollbar { display: none; }
.site-header__pill {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.92);
}
.site-header__pill strong { color: #fff; font-weight: 800; }
@media (hover: hover), (min-width: 640px) { .site-header__pill:hover span { text-decoration: underline; } }
.spark {
  flex: none;
  width: 16px; height: 16px;
  background: #F2B91D;
  -webkit-mask: url("/assets/offera-claw-spark-motif.svg") center / contain no-repeat;
  mask: url("/assets/offera-claw-spark-motif.svg") center / contain no-repeat;
}

.site-nav { display: none; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; }
.site-nav > * { flex: none; }
.site-nav__drop { position: relative; }
.site-nav__link {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.site-nav__link:hover, .site-nav__link[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.14); }
/* Premium: a solid bright-yellow pill with a filled crown. Deliberately loud and
   flat, unlike the muted-gold outline crown on sponsored coupon logos (.crown). */
.site-nav__link--premium { padding: 5px 12px 5px 10px; border-radius: 999px; background: #FFD43B; color: #2B1D00; font-weight: 800;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
@media (hover: hover), (min-width: 640px) { .site-nav__link--premium:hover { background: #FFE066; color: #2B1D00; } }
.site-nav__crown { flex: none; display: block; }
.site-drawer__link--premium { color: #7A5600; }
.site-drawer__link--premium .site-nav__crown { color: #E3A900; }
[data-plan="premium"] .site-nav__link--premium { box-shadow: 0 0 0 2px rgba(255, 212, 59, 0.45); }
.site-nav__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  padding: 8px;
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  display: grid;
  gap: 2px;
}
.site-nav__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
@media (hover: hover), (min-width: 640px) { .site-nav__item:hover { background: var(--gray-50); color: var(--ink); } }
.site-nav__item .ico { color: var(--red-ink); }

@media (min-width: 1180px) {
  .site-search { order: 0; flex: 1 1 auto; max-width: none; }
  .site-nav, .site-header__ask { display: inline-flex; }
  .site-header__burger { display: none; }
  .site-header__sub { gap: 28px; }
}

.site-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}
.site-drawer[data-open="true"] { display: block; }
.site-drawer__scrim { position: absolute; inset: 0; background: var(--scrim); }
.site-drawer__panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: min(84vw, 340px);
  background: var(--white);
  padding: 18px;
  overflow-y: auto;
  box-shadow: var(--shadow-float);
}
.site-drawer__close { margin-left: auto; display: block; }
.site-drawer__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 4px;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.site-drawer__link .ico { color: var(--red-ink); }

/* theme toggle (shared switch look with the app) */
.switch {
  position: relative;
  display: inline-block;
  width: 40px; height: 22px;
  border-radius: var(--r-pill);
  background: var(--gray-300);
  transition: background var(--t-fast);
}
.switch__knob {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--t-fast) var(--ease-spring);
}
[aria-checked="true"] .switch { background: var(--red); }
[aria-checked="true"] .switch__knob { transform: translateX(18px); }

/* ---------- 3 · footer ---------- */

.site-footer {
  margin-top: 56px;
  background: var(--brown);
  color: rgba(255, 255, 255, 0.72);
}
/* padding-block only: the element is also a .wrap, whose padding-inline
   keeps the footer on the same gutters as the page */
.site-footer__top {
  padding-block: 40px 28px;
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .site-footer__top { grid-template-columns: 1.2fr repeat(3, 1fr); } }
.site-footer__brand { grid-column: 1 / -1; }
@media (min-width: 640px) { .site-footer__brand { grid-column: auto; } }
.site-footer__logo { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.site-footer__tagline { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; max-width: 30ch; opacity: 0.85; }
.site-footer__col h3 { margin: 0 0 12px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer__col a { font-size: 13.5px; opacity: 0.85; }
@media (hover: hover), (min-width: 640px) { .site-footer__col a:hover { opacity: 1; text-decoration: underline; } }
.site-footer__bottom {
  padding-block: 16px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
.site-footer__bottom > span, .site-footer__bottom > a:not(.site-footer__powered) { opacity: 0.85; }

/* ---------- 4 · hero: see section 17 (home) ---------- */

/* ---------- 5 · sections / headings ---------- */

.section { margin: 40px 0; }
.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}
.section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
}
.section__link { font-weight: 700; font-size: 13.5px; color: var(--red-ink); }
@media (hover: hover), (min-width: 640px) { .section__link:hover { text-decoration: underline; } }

/* ---------- 6 · category grid ---------- */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) { .cat-grid { grid-template-columns: repeat(7, 1fr); } }
.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  text-align: center;
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
@media (hover: hover), (min-width: 640px) { .cat-tile:hover { border-color: var(--gray-300); transform: translateY(-2px); } }
.cat-tile img { width: 56px; height: 56px; object-fit: contain; }
.cat-tile span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.cat-tile__n { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.cat-tile__glyph { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--red-tint); color: var(--red); }
/* the full catalog has dozens of categories: a flowing grid, not a fixed 7 columns */
#catAllGrid.cat-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
#catAllGrid .cat-tile { justify-content: flex-start; }

/* ---------- 7 · product / offer card (Mercado Livre anatomy) ----------
   Photo on white → 2-line title → green "% OFF" pill + old price under the
   brand's hand-drawn red strike → big price, superscript cents → the one
   real benefit (coupon / cashback) in green → store · freshness in gray. */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .product-grid { grid-template-columns: repeat(5, 1fr); } }

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
  transition: box-shadow var(--t-base);
}
.product-grid .product-card { border: 1px solid var(--line); }
@media (hover: hover), (min-width: 640px) { .product-card:hover { box-shadow: 0 8px 22px rgba(59, 39, 35, 0.14); } }

/* ---------- share button: "Compartilhar" that expands into network icons.
   Two placements: floating over a product card's photo (.share--card) or
   inline in a coupon card's header row (.share--inline); both are plain
   flex/absolute contexts, so the panel and its animation are shared. ---------- */
/* .share is a flex row (reversed, so DOM order trigger→panel keeps tab
   order sane while the panel visually opens to the left of the trigger)
   that CONTAINS both the trigger and the panel — the panel expands via
   max-width, not position:absolute. It used to be absolutely positioned
   off to the side, outside .share's own hoverable box, so moving the
   mouse from the trigger toward the panel crossed a dead gap and dropped
   :hover before ever reaching the icons. Keeping the panel structurally
   inside .share's box means there's no gap to cross. */
.share { position: relative; z-index: 3; display: flex; flex-direction: row-reverse; align-items: center; gap: 6px; }
.share--card { position: absolute; top: 8px; right: 8px; }
.share--inline { flex: none; }
.share__trigger {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  color: var(--ink-2);
  box-shadow: 0 2px 6px rgba(59, 39, 35, 0.16);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.share--inline .share__trigger { background: transparent; border-color: transparent; box-shadow: none; }
.share__trigger:hover, .share.is-open .share__trigger { color: var(--red-ink); border-color: var(--red-tint); }
.share__panel {
  display: flex; align-items: center; gap: 6px;
  max-width: 0;
  overflow: hidden;
  transition: max-width var(--t-fast) var(--ease-out);
}
.share:focus-within .share__panel, .share.is-open .share__panel {
  max-width: 200px;
}
@media (hover: hover), (min-width: 640px) { .share:hover .share__panel { max-width: 200px; } }
.share__link {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(59, 39, 35, 0.16);
  transition: transform var(--t-fast) var(--ease-out);
}
@media (hover: hover), (min-width: 640px) { .share__link:hover { transform: translateY(-2px); } }
.share__link svg { width: 15px; height: 15px; }
.share__link--done { background: var(--green-soft); }
@media (prefers-reduced-motion: reduce) {
  .share__panel, .share__link { transition: none; }
}
.product-card__media {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 12px;
  background: #fff;
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: hidden;
}
:root[data-theme="dark"] .product-card__media { background: #f4efed; }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; }
/* a photo too small for its tile (imgfit.js): its real size, centred, on a tinted tile */
.is-tinted { background: var(--frame-bg, #FFE9EB) !important; }
.is-tinted > img {
  width: var(--tint-scale); height: var(--tint-scale); box-sizing: border-box; padding: 4%; object-fit: contain;
  background: #fff; border-radius: 10px; mix-blend-mode: normal !important;
  box-shadow: 0 8px 16px -10px rgba(59, 39, 35, 0.4);
}
/* a logo too small for its slot: shrunk inside a clean tile */
.is-lowres-logo { box-sizing: border-box; background: #fff; box-shadow: inset 0 0 0 1px var(--line); border-radius: 8px; }
.product-card__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 16px; border-top: 1px solid var(--gray-100); flex: 1; }
.product-card__name {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.product-card__deal { display: flex; align-items: center; gap: 6px; }
.pill-off {
  display: inline-flex; align-items: center;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  color: var(--amber-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
/* the coupon: the card's one red element. The price it makes turns red, the store's own price
   sits under it, and a notched ticket chip carries the code and the saving. */
.price-tag.price-tag--cpn { color: var(--red-ink); }
.product-card__flow { margin: -2px 0 0; font-size: 12px; color: var(--ink-3); }
.product-card__flow s { margin-right: 3px; }
.product-card__cpn { display: flex; }
.tk {
  --notch: 5px; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0;
  padding: 3px 12px; border-radius: 9px; box-sizing: border-box;
  background: var(--red-soft); color: var(--red-ink);
  border: 1.5px dashed color-mix(in srgb, var(--red) 50%, transparent);
  font-size: 12px; font-weight: 800; line-height: 1.2;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
/* corner badges (product cards only): what kind of saving the offer carries, bottom-right. Same
   rounded-square tile, soft tint and solid underside as the site's buttons: yellow for the store's
   own discount, red for a coupon. */
.kinds { position: absolute; right: 12px; bottom: 14px; display: flex; gap: 6px; pointer-events: none; }
/* on a product card they live in the photo's bottom-right corner (above the Ferinha frame), clear of all text */
.product-card__media { position: relative; }
.product-card__media > .kinds { right: 8px; bottom: 8px; z-index: 3; }
.kind {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  box-shadow: 0 2px 0 var(--kind-edge); background: var(--kind-bg); color: var(--kind-ink); pointer-events: auto;
}
.kind .ico { display: inline-flex; }
.kind--disc { --kind-bg: var(--amber-soft); --kind-ink: var(--amber-ink); --kind-edge: var(--amber-line); }
.kind--cpn { --kind-bg: var(--red-soft); --kind-ink: var(--red-ink); --kind-edge: color-mix(in srgb, var(--red) 28%, transparent); }
.tk__code { font-family: "Barlow Condensed", var(--font-display); font-size: 14px; letter-spacing: .04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk i { font-style: normal; font-weight: 700; opacity: .85; white-space: nowrap; flex: none; }
.product-card__benefit {
  margin: 0; font-size: 13px; font-weight: 700; color: var(--green);
  /* a free-text coupon note can run long; two lines keeps shelf rows even */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.product-card__meta { display: flex; align-items: center; gap: 6px; margin: auto 0 0; padding-top: 6px; font-size: 12px; color: var(--ink-3); min-width: 0; }
.product-card__meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card__meta img, .product-card__meta .mono { width: 16px; height: 16px; border-radius: 5px; object-fit: contain; flex: none; }

/* Subtle source attribution (which aggregator supplied this offer's data,
   distinct from the store it sells at) — always present, never loud: a
   size below the meta line, low-contrast, quoted rather than badged. */
.offer-source { margin: 2px 0 0; font-size: 10.5px; font-style: italic; color: var(--ink-3); opacity: .8; }
/* Cosmetic 1–5 rating, on the attribution line: a small neutral chip —
   identical on every card so a grid of them stays calm — holding one
   claw+sparkle per rating point; its colour tells the tier: 5★ brand red,
   4★ orange, 3★ neutral ink, 2★/1★ grey. Every item gets a chip. */
/* Fixed placement: the attribution line is a flex row with a constant
   height, source name on the left and the chip always pinned to the right
   edge — so it never shifts with the name's length, and cards without a
   chip keep the same line height as the ones with it. */
.offer-source { opacity: 1; display: flex; align-items: center; gap: 8px; min-height: 26px; }
.offer-source > span:first-child:not(.expiry) { opacity: .8; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stars {
  display: inline-flex; align-items: center; gap: 0; margin-left: auto; padding: 1px 6px; flex: none;
  border-radius: 999px; font-style: normal; cursor: help;
  background: var(--gray-50); border: 1px solid var(--gray-100); color: var(--ink-2);
  --spark: var(--ink-3);
}
/* The brand's claw+sparkle motif (same asset and mask technique as the
   webapp's texture), tinted by the tier colour. */
.stars__mark {
  width: 22px; height: 22px; background: var(--spark);
  -webkit-mask: url("/assets/offera-claw-spark-motif.svg") center / contain no-repeat;
  mask: url("/assets/offera-claw-spark-motif.svg") center / contain no-repeat;
}
.stars--5 { --spark: var(--red); }
.stars--4 { --spark: #F08A24; }
.stars--2, .stars--1 { --spark: var(--gray-500); }

/* Hover: a soft, staggered pop along the row of sparks — whenever the card
   (or the chip itself) is hovered. Reduced-motion is handled globally. */
@keyframes spark-pop {
  0%, 100% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.28) rotate(14deg); }
}
@media (hover: hover), (min-width: 640px) { .product-card:hover .stars__mark,
.feature-card:hover .stars__mark,
.cpn__card:hover .stars__mark,
.offer-table tr:hover .stars__mark,
.stars:hover .stars__mark { animation: spark-pop 560ms var(--ease-out) var(--d, 0ms) both; } }
.stars__mark:nth-child(2) { --d: 70ms; }
.stars__mark:nth-child(3) { --d: 140ms; }
.stars__mark:nth-child(4) { --d: 210ms; }
.stars__mark:nth-child(5) { --d: 280ms; }
/* coupon cards are a full-height flex column: pin the line to the bottom */
.cpn__card > .offer-source { margin-top: auto; }

.price-was { position: relative; display: inline-block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); padding: 0 1px; line-height: 1.3; }
.price-was svg { position: absolute; left: -3%; top: 10%; width: 106%; height: 80%; overflow: visible; pointer-events: none; }
.price-was svg path { fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; }

.price-tag { display: inline-flex; align-items: flex-start; gap: 3px; font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1; color: var(--ink); letter-spacing: -0.01em; }
.price-tag__cur { font-size: 0.62em; margin-top: 0.22em; }
.price-tag sup { font-size: 0.5em; margin-top: 0.1em; font-weight: 600; }
.price-tag--lg { font-size: 36px; }

.product-card--lg .product-card__name { font-size: 17px; }
.product-card--lg .price-was { font-size: 14px; }
.product-card--lg .pill-off { font-size: 13px; }

/* the stamp on the deal of the day: the brand's claw-spark + a real claim */
.spark-stamp {
  position: absolute;
  z-index: 1;
  top: 10px; left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  box-shadow: 0 3px 0 var(--red-dark);
}
.spark-stamp::before {
  content: "";
  width: 14px; height: 14px;
  background: #F2B91D;
  -webkit-mask: url("/assets/offera-claw-spark-motif.svg") center / contain no-repeat;
  mask: url("/assets/offera-claw-spark-motif.svg") center / contain no-repeat;
}

/* ---------- 8 · coupon card grid (Méliuz peel reveal) ---------- */

.coupon-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.cpn { animation: rise 320ms var(--ease-out) both; }
.cpn__card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--gray-25);
  border: 2px solid var(--line);
  transition: border-color var(--t-fast), background var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .cpn__card:hover { border-color: var(--gray-300); background: var(--white); } }
/* a coupon about to end marks the whole card: a red edge with the site's solid underside, and a
   light sheen that sweeps across it (slower with a few days left, quicker on the last day) */
.cpn__card--soon, .cpn__card--today {
  --sheen-every: 4.2s; position: relative; border-color: var(--red);
  background: linear-gradient(180deg, var(--red-tint), var(--gray-25) 60%);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--red) 28%, transparent);
}
@media (hover: hover), (min-width: 640px) { .cpn__card--soon:hover, .cpn__card--today:hover { border-color: var(--red); background: linear-gradient(180deg, var(--red-tint), var(--white) 60%); } }
.cpn__card--today { --sheen-every: 2.6s; }
.cpn__card--soon::after, .cpn__card--today::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, #fff 32%, transparent) 50%, transparent 62%);
  background-size: 300% 100%; background-position: 160% 0;
  animation: cpn-sheen var(--sheen-every) ease-in-out infinite;
}
@keyframes cpn-sheen { 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .cpn__card--soon::after, .cpn__card--today::after { animation: none; opacity: 0; } }
.cpn__head { display: flex; align-items: center; gap: 9px; }
.cpn__store { flex: 1; min-width: 0; font-weight: 800; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* flex: 1 pushes the code strip and footer down, so cards side by side
   line their "Ver cupom" strips up whatever the title length */
.cpn__title { flex: 1; margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ink-2); }
.cpn__code {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 10px 0 14px;
  border-radius: var(--r-sm);
  border: 2px dashed var(--gray-300);
  background: var(--brown-tint);
  overflow: hidden;
}
.cpn__code-text { flex: 1; min-width: 0; font-family: var(--font-ui); font-weight: 800; font-size: 15px; letter-spacing: 0.08em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpn__copy { flex: none; padding: 6px 12px; border-radius: var(--r-sm); background: var(--white); border: 2px solid var(--line); color: var(--ink-2); font-weight: 800; font-size: 12px; }
.cpn__copy--done { color: var(--green); border-color: var(--green-soft); background: var(--green-soft); }
.cpn__cover {
  position: absolute;
  inset: 0 0 0 46px;
  display: grid;
  place-items: center;
  background: linear-gradient(120deg, var(--red-tint) 0%, var(--red-soft) 100%);
  color: var(--red-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  clip-path: inset(0 0 0 var(--peel, 0%));
  transition: filter var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .cpn__cover:hover { filter: brightness(0.98); } }
.cpn__cover::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: var(--peel, 0%);
  width: 10px;
  background: linear-gradient(to right, var(--red-dark) 0%, #ff8189 45%, #ffd9dc 62%, var(--red) 100%);
  box-shadow: -3px 0 7px rgba(59, 39, 35, 0.22);
  transition: width var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .cpn__cover:hover::before { width: 14px; } }
.cpn__cover-label { position: relative; transition: opacity 180ms linear; }
.cpn--revealed .cpn__cover { animation: cpn-peel 620ms cubic-bezier(.55, .06, .3, 1) both; pointer-events: none; }
.cpn--revealed .cpn__cover-label { opacity: 0; }
.cpn--revealed .cpn__code { border-color: var(--red); border-style: solid; background: var(--red-tint); }
.cpn--revealed .cpn__code-text { animation: cpn-code-in 420ms 180ms var(--ease-spring) both; }
@property --peel { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes cpn-peel { 0% { --peel: 0%; } 70% { --peel: 86%; } 100% { --peel: 100%; opacity: 0.9; } }
@keyframes cpn-code-in { 0% { transform: scale(0.88); filter: blur(2px); opacity: 0.4; } 100% { transform: scale(1); filter: blur(0); opacity: 1; } }
.cpn__spark {
  position: absolute; width: 16px; height: 16px; opacity: 0; pointer-events: none;
  background: var(--red);
  -webkit-mask: url("/assets/offera-claw-spark-motif.svg") center / contain no-repeat;
  mask: url("/assets/offera-claw-spark-motif.svg") center / contain no-repeat;
}
.cpn__spark--1 { left: 34%; top: 2px; }
.cpn__spark--2 { left: 58%; bottom: 3px; width: 12px; height: 12px; }
.cpn__spark--3 { left: 78%; top: 6px; width: 13px; height: 13px; background: #F2B91D; }
.cpn--revealed .cpn__spark--1 { animation: cpn-spark 620ms 200ms var(--ease-out) both; }
.cpn--revealed .cpn__spark--2 { animation: cpn-spark 620ms 300ms var(--ease-out) both; }
.cpn--revealed .cpn__spark--3 { animation: cpn-spark 620ms 380ms var(--ease-out) both; }
@keyframes cpn-spark { 0% { opacity: 0; transform: scale(0.2) rotate(-25deg); } 45% { opacity: 1; transform: scale(1.15) rotate(8deg); } 100% { opacity: 0; transform: scale(0.85) rotate(0) translateY(-8px); } }
.cpn__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
/* "Ir para a loja": a plain solid button in the ink colour (the red is the expiry badge's),
   with the same solid-edge press as the site's primary buttons */
.cpn__go, .ctk__go {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 30px; padding: 0 14px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--white); font-size: 13px; font-weight: 800;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 45%, transparent);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .cpn__go:hover, .ctk__go:hover { background: color-mix(in srgb, var(--ink) 82%, var(--red)); } }
.cpn__go:active, .ctk__go:active { transform: translateY(3px); box-shadow: 0 0 0 transparent; }
.cpn__go:focus-visible, .ctk__go:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
/* coupon expiry: a red alarm-clock pill in a condensed display face. The clock hand
   spins faster as the deadline nears (8s later, 3s soon, 1.2s today); soon and today
   also ring the bell and tap down like the site's chunky buttons (.btn--primary: a
   solid shadow underneath that the pill presses into). Same 26px height as the
   rating pill and the like/dislike row it sits level with. */
.expiry {
  --expiry-spin: 8s;
  --expiry-edge: color-mix(in srgb, var(--red) 24%, transparent);
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 12px 0 8px; border-radius: 999px; box-sizing: border-box;
  background: var(--red-soft); color: var(--red-ink); box-shadow: 0 3px 0 var(--expiry-edge);
  font-family: "Barlow Condensed", var(--font-display); font-weight: 800;
  font-size: 17px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; font-style: normal;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.expiry .ico { display: inline-flex; }
.expiry__hand { transform-origin: 12px 13px; animation: expiry-spin var(--expiry-spin) linear infinite; }
.expiry--soon, .expiry--today { background: var(--red); color: #fff; --expiry-edge: var(--red-dark); }
.expiry--soon { --expiry-spin: 3s; animation: expiry-tap 2.4s var(--ease-out) infinite; }
.expiry--today { --expiry-spin: 1.2s; animation: expiry-tap 1.5s var(--ease-out) infinite; }
.expiry--soon .ico, .expiry--today .ico { animation: expiry-ring 2.6s ease-in-out infinite; transform-origin: 50% 20%; }
@keyframes expiry-spin { to { transform: rotate(360deg); } }
/* two quick presses, then rest */
@keyframes expiry-tap {
  0%, 40%, 100% { transform: translateY(0); box-shadow: 0 3px 0 var(--expiry-edge); }
  10%, 30% { transform: translateY(3px); box-shadow: 0 0 0 var(--expiry-edge); }
  20% { transform: translateY(0); box-shadow: 0 3px 0 var(--expiry-edge); }
}
@keyframes expiry-ring { 0%, 55%, 100% { transform: rotate(0); } 60%, 70%, 80% { transform: rotate(-14deg); } 65%, 75%, 85% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) {
  .expiry, .expiry .ico, .expiry__hand { animation: none; }
}
/* the compact ticket: one word in the head, a slimmer pill that leaves the store name its room */
.expiry--compact { height: 21px; padding: 0 9px 0 6px; gap: 3px; font-size: 14px; box-shadow: 0 2px 0 var(--expiry-edge); }
@keyframes expiry-tap-sm {
  0%, 40%, 100% { transform: translateY(0); box-shadow: 0 2px 0 var(--expiry-edge); }
  10%, 30% { transform: translateY(2px); box-shadow: 0 0 0 var(--expiry-edge); }
  20% { transform: translateY(0); box-shadow: 0 2px 0 var(--expiry-edge); }
}
.expiry--compact.expiry--soon { animation-name: expiry-tap-sm; }
.expiry--compact.expiry--today { animation-name: expiry-tap-sm; }
@media (prefers-reduced-motion: reduce) { .expiry--compact { animation: none; } }
.cpn__foot:empty { display: none; }
.cpn__foot .cpn__go { padding: 0 9px; font-size: 11.5px; }
/* one row: expiry badge, rating chip, store button, all inside a ~250px card */
.cpn__foot { flex-wrap: nowrap; gap: 6px; }
/* the big card's pill is two lines: a small lead-in over a large value, so it can be tall
   and prominent without taking more of the row's width */
.expiry--stack { height: 40px; padding: 0 10px 0 8px; gap: 5px; border-radius: 13px; box-shadow: 0 3px 0 var(--expiry-edge); }
.expiry__stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.expiry__lead { font-size: 10.5px; line-height: 1; letter-spacing: .12em; opacity: .85; }
.expiry--stack .expiry__text { font-size: 20px; line-height: .9; letter-spacing: .02em; }
.cpn__foot { gap: 6px; }
.cpn__foot .stars { margin-left: auto; }
.stars--compact { gap: 1px; padding: 1px 7px 1px 3px; }
.stars--compact .stars__mark { width: 18px; height: 18px; }
.stars__num { font-size: 12px; font-weight: 800; line-height: 1; color: var(--spark); }
.cpn__card--link { cursor: pointer; }
/* like / dislike: a strip of their own, edge to edge, hairlines above and between,
   like on the left and dislike on the right; tinted at rest, solid when chosen */
.cpn__votes {
  margin: auto -14px -14px; min-height: 0; gap: 0; align-items: stretch; opacity: 1;
  border-top: 1px solid var(--line); overflow: hidden;
  border-radius: 0 0 calc(var(--r-md) - 2px) calc(var(--r-md) - 2px);
}
.cpn__votes .vote { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0; gap: 0; }
.cpn__votes .vote__btn { width: 100%; height: 30px; border-radius: 0; background: transparent; }
.cpn__votes .vote__btn svg { width: 17px; height: 17px; }
.cpn__votes .vote__btn--dislike { border-left: 1px solid var(--line); }
@media (hover: hover), (min-width: 640px) { .cpn__votes .vote__btn:hover { transform: none; } }
.cpn__votes .vote__btn:active { transform: none; filter: brightness(.96); }
.cpn__votes .vote__btn:focus-visible { outline-offset: -3px; }
@media (hover: hover), (min-width: 640px) { .cpn__votes .vote__btn--like:hover { background: var(--green-soft); } }
@media (hover: hover), (min-width: 640px) { .cpn__votes .vote__btn--dislike:hover { background: var(--red-soft); } }
.cpn__votes .vote__btn--like[aria-pressed="true"] { background: var(--green); color: #fff; }
.cpn__votes .vote__btn--dislike[aria-pressed="true"] { background: var(--red); color: #fff; }
.ctk__foot .offer-source { flex: 1; }
/* the big coupon card gives the store mark room to be recognised */
.cpn__head { gap: 11px; }
.cpn__head img, .cpn__head .mono { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; flex: none; }
.cpn__head .mono { font-size: 17px !important; }
.cpn__store { font-size: 14.5px; }
/* a coupon switched on at the store's page (Amazon): the button replaces the code slot */
.cpn__activate {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px;
  border-radius: var(--r-sm); background: var(--red); color: #fff;
  font-weight: 800; font-size: 13.5px; text-decoration: none;
  transition: background var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .cpn__activate:hover { background: var(--red-dark); } }
.cpn__hint { margin: 2px 0 0; font-size: 11.5px; line-height: 1.35; }
.cpn--skeleton { height: 150px; border-radius: var(--r-md); background: var(--gray-50); border: 2px solid var(--gray-100); animation: pulse 1.3s ease-in-out infinite; }

/* store filter chip row */
.store-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 14px; scrollbar-width: none; }
/* the row scrolls sideways: fade its right edge so a cut chip reads as "more" */
.store-chips { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.store-chips::-webkit-scrollbar { display: none; }

/* wraps a .store-chips row (layout.js's enhanceStoreChips): click-to-scroll
   arrows, since the row alone gave no visible clue — or way, for a plain
   mouse — that there was anything past the first screenful of chips. */
.hscroll { position: relative; }
.hscroll__arrow {
  position: absolute;
  top: 18px;
  z-index: 2;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(59, 39, 35, 0.18);
  transition: transform var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .hscroll__arrow:hover { transform: scale(1.06); } }
.hscroll__arrow--prev { left: -4px; }
.hscroll__arrow--next { right: -4px; }
.storechip {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1.5px solid var(--line);
  font-weight: 700; font-size: 12.5px; color: var(--ink-2);
}
.storechip--on { background: var(--red); border-color: var(--red); color: #fff; }
.storechip__count { opacity: 0.7; font-weight: 600; }
.storechip img, .storechip .mono {
  width: 18px; height: 18px; border-radius: 6px; object-fit: contain; flex: none;
}
.storechip--on img { background: #fff; }

/* ---------- 9 · facet filter sidebar ---------- */

.listing {
  display: grid;
  gap: 24px;
  margin-top: 20px;
}
@media (min-width: 860px) { .listing { grid-template-columns: 240px 1fr; align-items: start; } }

.facets {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  display: grid;
  gap: 18px;
}
.facet-group h3 { margin: 0 0 10px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-3); }
.facet-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.facet-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.facet-row input { accent-color: var(--red); width: 16px; height: 16px; }
.facet-row__count { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.facet-clear { font-size: 12.5px; font-weight: 700; color: var(--red-ink); }

.listing__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.listing__count { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.sort-select {
  height: 38px;
  padding: 0 30px 0 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  background: var(--white);
  font-size: 13px;
  font-weight: 700;
}

/* mobile filter sheet trigger */
.filters-trigger { display: inline-flex; }
@media (min-width: 860px) { .filters-trigger { display: none; } }
@media (max-width: 859.98px) {
  .facets { display: none; }
  .facets[data-open="true"] {
    display: grid;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    box-shadow: var(--shadow-float);
  }
}

/* ---------- 11 · breadcrumb ---------- */

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0; font-size: 12.5px; color: var(--ink-3); }
.breadcrumb a { font-weight: 600; }
@media (hover: hover), (min-width: 640px) { .breadcrumb a:hover { text-decoration: underline; color: var(--ink); } }
.breadcrumb span[aria-hidden] { opacity: 0.6; }
.breadcrumb__current { color: var(--ink-2); font-weight: 700; }

/* ---------- 12 · empty state ---------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 56px 20px;
  color: var(--ink-2);
}
.empty-state__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin: 0; color: var(--ink); }
.empty-state__text { margin: 0; max-width: 42ch; font-size: 13.5px; color: var(--ink-3); }
.empty-state .btn { margin-top: 10px; }

/* ---------- 13 · product detail ---------- */

.product-detail { display: grid; gap: 28px; margin: 12px 0 40px; }
@media (min-width: 860px) { .product-detail { grid-template-columns: 380px 1fr; align-items: start; } }
/* Amazon's anatomy, nothing on the bare page: a white top panel (breadcrumb,
   then photo | title, price, "Sobre este preço" | a bordered buy box), then
   one white panel per section — history, stores, shelves, the SEO copy */
/* auth.css's .panel is a start-aligned grid: stretch these so the chart and
   tables take the panel's width */
.panel.pd-top, .panel.pd-panel { justify-items: stretch; gap: 0; margin-bottom: 0; }
.pd-top { margin-top: 16px; }
.pd-top > .breadcrumb { margin: 0 0 18px; }
.pd-top__grid { display: grid; gap: 24px; grid-template-areas: "media" "info" "buy"; align-items: start; }
.pd-top__grid > .product-detail__media { grid-area: media; border: 0; width: 100%; max-width: 100%; justify-self: center; }
/* sized to the photo (produto.js sizePhoto): drawn at its real resolution,
   centred in a frame of its shape, never stretched */
.pd-top .product-detail__media.is-sized img { width: auto; height: auto; padding: 0; object-fit: contain; }
.pd-top .product-detail__media.is-sized { padding: 16px; box-sizing: border-box; }
.pd-info { grid-area: info; min-width: 0; }
.pd-buy { grid-area: buy; min-width: 0; }
@media (min-width: 860px) {
  .pd-top__grid { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "media info" "media buy"; gap: 24px 32px; }
  .pd-top__grid > .product-detail__media { width: 340px; max-width: 340px; }
}
@media (min-width: 1100px) {
  .pd-top__grid { grid-template-columns: auto minmax(0, 1fr) 300px; grid-template-areas: "media info buy"; }
  .pd-top__grid > .product-detail__media { max-width: 440px; }
}
.pd-info .product-detail__specs { margin-bottom: 14px; }
.pd-info__price { display: grid; gap: 4px; justify-items: start; padding: 14px 0; margin-bottom: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pd-info__price-label { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.pd-info__price-row { display: flex; align-items: baseline; gap: 10px; }
.pd-info__price-value { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.1; }
.pd-info__price-row s { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.pd-facts { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: 13.5px; }
.pd-facts th { width: 34%; padding: 5px 12px 5px 0; text-align: left; vertical-align: top; font-weight: 700; color: var(--ink-2); }
.pd-facts td { padding: 5px 0; color: var(--ink-2); }
.pd-facts a { color: var(--red-ink); font-weight: 600; }
.pd-facts a:hover { text-decoration: underline; }
.pd-about { padding-top: 14px; border-top: 1px solid var(--line); }
.pd-about__title { margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.pd-about__list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.pd-about__list li::marker { color: var(--red-ink); }
/* the buy box: a white card with a hairline, like Amazon's */
.pd-buy { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
.pd-buy .product-detail__best { margin: 0; padding: 0; border: 0; background: none; }
.pd-buy .product-detail__best > .btn { width: 100%; justify-content: center; }
.pd-buy .pd-total { margin: 12px 0 0; font-size: 13px; }
.pd-buy .pd-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pd-buy .pd-actions__row { flex-direction: column; }
.pd-buy .pd-action { width: 100%; justify-content: center; }
.pd-panel__title, .pd-panel .price-chart h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); }
.pd-panel .price-chart { margin: 0; padding: 0; border: 0; background: none; }
.pd-panel .pd-others { margin: 16px 0 0; }
.pd-panel__text { margin: 12px 0 0; max-width: 80ch; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.offer-table tr[hidden] { display: none; }
.offer-table__extra td { background: var(--page); }
.offer-table__more { display: block; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--red-ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.offer-table__more:hover { text-decoration: underline; }
.pd-more:empty { display: none; }
/* shelf cards here pack their content: no reserved second title line and no
   store line pushed to the bottom to match the tallest card (one card with a
   cashback line left a big hole under every other price) */
.pd-more .shelf__track { align-items: start; }
.pd-more .product-card__name { min-height: 0; }
.pd-more .product-card__meta { margin-top: 4px; }
.pd-more .carousel__dots { padding-top: 8px; }
/* the main column is narrower than the home's: fewer, wider cards per page */
@media (min-width: 960px) { .pd-more .shelf__track { grid-auto-columns: calc((100% - 48px) / 4); } }
@media (min-width: 1200px) { .pd-more .shelf__track { grid-auto-columns: calc((100% - 64px) / 5); } }

/* below the product: main column + a suggestions column on the right */
.pd-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
.pd-main, .pd-side { min-width: 0; }
@media (min-width: 1024px) { .pd-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.pd-layout.pd-layout--solo { grid-template-columns: minmax(0, 1fr); }
.pd-layout--solo > .pd-side { display: none; }

/* panel headings: a coloured icon badge, the title and a line saying why */
.pd-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.pd-badge { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; }
.pd-badge--red { background: var(--red-soft); color: var(--red); }
.pd-badge--green { background: var(--green-soft); color: var(--green); }
.pd-badge--amber { background: var(--amber-soft); color: var(--amber-ink); }
.pd-head__text { min-width: 0; }
.pd-head__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); }
.pd-head__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
.pd-history .price-chart h3 { display: none; }

/* "Parecidos com este": two rows, however many columns fit */
.pd-grid { display: grid; gap: 18px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.pd-grid > :nth-child(n+5) { display: none; }
@media (min-width: 600px) { .pd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pd-grid > :nth-child(-n+6) { display: flex; } }
@media (min-width: 800px) { .pd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pd-grid > :nth-child(-n+8) { display: flex; } }
@media (min-width: 1200px) { .pd-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pd-grid > :nth-child(-n+10) { display: flex; } }
.pd-grid .product-card__body { border-top: 0; padding-left: 2px; padding-right: 2px; }
.pd-grid .product-card__name { min-height: 0; }
.pd-grid .product-card__meta { margin-top: 4px; }
.pd-grid .product-card:hover { box-shadow: none; }
.pd-grid .product-card:hover .product-card__name { color: var(--red-ink); }

/* the suggestions column: each list under a coloured band */
.pd-side__panel { margin-top: 24px; overflow: hidden; border-radius: var(--r-md); background: var(--white); box-shadow: 0 1px 2px rgba(59, 39, 35, 0.08); }
.pd-side__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 14px 16px; }
.pd-side__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; }
.pd-side__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: inherit; }
.pd-side__sub { font-size: 12.5px; font-weight: 600; opacity: 0.8; }
.pd-side__panel--brown .pd-side__head { background: var(--brown); color: #fff; }
.pd-side__panel--brown .pd-side__icon { background: rgba(255, 255, 255, 0.14); }
.pd-side__panel--amber .pd-side__head { background: var(--amber-soft); color: var(--amber-ink); border-bottom: 1px solid var(--amber-line); }
.pd-side__panel--amber .pd-side__icon { background: var(--white); }
.pd-side__panel--red .pd-side__head { background: var(--red); color: #fff; }
.pd-side__panel--red .pd-side__icon { background: rgba(255, 255, 255, 0.18); }
.pd-side__list { list-style: none; margin: 0; padding: 0; }
.pd-side__list li + li { border-top: 1px solid var(--line); }
.pd-mini { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 16px; color: inherit; transition: background var(--t-fast); }
.pd-mini:hover { background: var(--gray-25); }
.pd-mini:hover .pd-mini__name { color: var(--red-ink); }
.pd-mini__photo { display: grid; place-items: center; width: 72px; height: 72px; overflow: hidden; border-radius: var(--r-sm); background: #fff; }
.pd-mini__photo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pd-mini__body { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.pd-mini__name { font-size: 13.5px; line-height: 1.3; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd-mini__price { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink); }
.pd-mini__less { padding: 1px 8px; border-radius: var(--r-pill); background: var(--green-soft); color: var(--green); font-size: 11.5px; font-weight: 700; }
.pd-mini__store { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.pd-mini__store img, .pd-mini__store .mono { width: 16px; height: 16px; border-radius: 5px; object-fit: contain; flex: none; }

/* a touch of colour on the top panel: the buy box's red rim and tint,
   "Sobre este preço" on a warm card, the facts table striped */
.pd-buy { border-top: 4px solid var(--red); background: linear-gradient(var(--red-tint), var(--white) 140px); }
.pd-about { padding: 14px 16px; border-top: 0; border-radius: var(--r-md); background: var(--brown-tint); }
.pd-about__list { color: var(--ink); }
.pd-facts tr:nth-child(odd) { background: var(--gray-25); }
.pd-facts th { padding-left: 10px; }
/* the server's persistent copy (summary, history, FAQ, links) as panels too */
.pd-page .seo-after { padding-bottom: 40px; }
.pd-page .seo-after > .seo-copy, .pd-page .seo-after > .faq, .pd-page .seo-after > .seo-block {
  max-width: none; margin: 24px 0 0; padding: 20px 22px 22px;
  border-radius: var(--r-md); background: var(--white); box-shadow: 0 1px 2px rgba(59, 39, 35, 0.08);
}
.pd-page .seo-after h2, .pd-page .seo-after .section__title { margin-top: 0; font-size: 18px; }
.pd-page .seo-after .prose h2 ~ h2, .pd-page .seo-copy h2 ~ h2 { margin-top: 24px; }
.pd-page .seo-after .section__head { margin-bottom: 12px; }
.pd-page .seo-after .faq details:last-child { padding-bottom: 0; }
.product-detail__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.product-detail__media img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.product-detail__brand { font-size: 12.5px; font-weight: 800; color: var(--red-ink); text-transform: uppercase; letter-spacing: 0.04em; }
.product-detail__name { margin: 4px 0 8px; font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.2; }
.product-detail__specs { margin: 0 0 18px; color: var(--ink-3); font-size: 13.5px; }
.product-detail__best {
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--red-tint);
  border: 1.5px solid var(--red-soft);
  margin-bottom: 22px;
}
.product-detail__best-label { font-size: 11.5px; font-weight: 800; color: var(--red-ink); text-transform: uppercase; letter-spacing: 0.04em; }
.product-detail__best-price { font-family: var(--font-display); font-weight: 800; font-size: 30px; margin: 4px 0 2px; }
.product-detail__best-price s { font-size: 15px; font-weight: 600; color: var(--ink-3); margin-right: 8px; }

.product-detail__best-note { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
/* the best offer's coupon: a white card inside the pink box, same peel slot as the coupon cards */
.pd-coupon { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--white); border: 1.5px dashed var(--red-soft); animation: none; }
.pd-coupon__head { display: flex; align-items: center; gap: 8px; }
.pd-coupon__kicker { font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.pd-coupon__value { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--red-ink); }
.pd-coupon__head .offer-source { margin: 0 0 0 auto; min-height: 0; }
.pd-coupon__title { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink-2); }
.pd-coupon .cpn__code { max-width: 360px; height: 42px; }
.pd-coupon__warn { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.offer-table__store-price { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.offer-table__coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.offer-table__code { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-sm); border: 1.5px dashed var(--gray-300); background: var(--brown-tint); color: var(--ink); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; transition: border-color var(--t-fast); }
@media (hover: hover), (min-width: 640px) { .offer-table__code:hover { border-color: var(--red); } }
.offer-table__code code { font-family: var(--font-ui); }
.offer-table__code--done { border-style: solid; border-color: var(--green); background: var(--green-soft); color: var(--green); }
.pd-others { margin: -8px 0 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); }
.pd-others__title { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.pd-others__sub { margin: 2px 0 8px; font-size: 12px; color: var(--ink-3); }
.pd-others__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pd-others__item { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.pd-others__item:first-child { border-top: 0; }
.pd-others__value { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; color: var(--red-ink); }
.pd-others__text { display: flex; flex-direction: column; min-width: 0; }
.pd-others__name { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-others__cond { font-size: 11.5px; color: var(--ink-3); }
.offer-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.offer-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-3); padding: 0 10px 8px; font-weight: 800; }
.offer-table td { padding: 12px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
.offer-table tr:first-child td { border-top: none; }
.offer-table__store { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.offer-table__store img, .offer-table__store .mono { width: 20px; height: 20px; border-radius: 6px; object-fit: contain; flex: none; }
.offer-table__price { font-family: var(--font-display); font-weight: 800; font-size: 16px; white-space: nowrap; }
.offer-table__price s { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-3); font-family: var(--font-ui); }

.price-chart { margin: 24px 0; padding: 16px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); }
.price-chart h3 { margin: 0 0 12px; font-size: 13.5px; font-weight: 800; color: var(--ink-2); }
.price-chart svg { width: 100%; height: 96px; display: block; }
.price-chart__meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }

/* ---------- 14 · static / prose pages ---------- */

.prose { max-width: 74ch; margin: 12px 0 60px; }
.prose h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 18px; }
.prose h2 { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin: 32px 0 10px; }
.prose p { margin: 0 0 14px; color: var(--ink-2); line-height: 1.7; }
.prose ul { color: var(--ink-2); line-height: 1.7; padding-left: 20px; }
.prose .callout {
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--brown-tint);
  border: 1px solid var(--brown-tint-2);
  font-size: 13.5px;
  color: var(--ink-2);
}
.contact-card { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); margin: 18px 0; }
.contact-card .ico { color: var(--red-ink); }

/* ---------- 15 · keyframes ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- 16 · shared fx kept from the previous pass ---------- */

.fx-ticker { font-variant-numeric: tabular-nums; }

/* border-beam: a bright segment orbiting a card's border (offset-path) */
.fx-border-beam {
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  /* classic gradient-border mask: keep only the 2px ring outside content-box */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.fx-border-beam::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 90px;
  aspect-ratio: 1;
  background: linear-gradient(to left, var(--red), #F2B91D, transparent);
  offset-path: rect(0 auto auto 0 round 18px);
  offset-anchor: 100% 50%;
  animation: fx-border-beam 5s linear infinite;
}
@keyframes fx-border-beam { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* ---------- inner-page hero band (categoria / cupons / busca) ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  margin: 8px 0 24px;
  padding: 28px 24px;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--red) 0%, var(--red-dark) 100%);
  color: #fff;
  display: grid;
  align-items: center;
  gap: 12px;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1.1px, transparent 1.3px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(to left, #000 10%, transparent 70%);
  mask-image: linear-gradient(to left, #000 10%, transparent 70%);
}
@media (min-width: 760px) { .page-hero { grid-template-columns: 1fr auto; padding: 32px 40px; } }
.page-hero > * { position: relative; }
.page-hero__kicker { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.page-hero__title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 4vw, 42px); line-height: 1.05; letter-spacing: -0.02em; }
.page-hero__sub { margin: 8px 0 0; font-size: 14.5px; opacity: 0.9; max-width: 52ch; }
.page-hero__art { width: 150px; height: auto; justify-self: end; filter: drop-shadow(0 16px 24px rgba(60, 0, 8, 0.35)); }
@media (max-width: 759.98px) { .page-hero__art { display: none; } }
.page-hero__stats { display: flex; gap: 24px; margin-top: 14px; }
.page-hero__stats strong { display: block; font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 1; }
.page-hero__stats > div > span { font-size: 12px; opacity: 0.85; font-weight: 600; }
.page-hero--brown { background: linear-gradient(160deg, #56382F 0%, var(--brown) 100%); }

/* ---------- product detail: best-offer card gets the border beam ---------- */

.product-detail__best { position: relative; border-radius: var(--r-lg); }
.photo-letter { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-display); font-weight: 900; font-size: 26px; color: var(--gray-300); }

/* ======================================================================
   17 · home — Mercado Livre's home anatomy in OFFERA's system: gray page,
   white panels, the header red bleeding into the page behind the hero.
   ====================================================================== */

.muted { color: var(--ink-3); }

/* the red band behind the hero, fading into the page like ML's yellow */
.home-top {
  background: linear-gradient(180deg, var(--red) 0%, var(--red) 58%, var(--surface-desk) 100%);
  padding: 4px 0 64px;
}
.home { position: relative; }

/* ---------- carousel (hero, ofertas, shelves) ---------- */

.carousel { position: relative; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px; height: 44px;
  margin-top: -22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(59, 39, 35, 0.22);
  opacity: 0;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.carousel:hover .carousel__arrow, .carousel__arrow:focus-visible { opacity: 1; }
.carousel__arrow--prev { left: -18px; }
.carousel__arrow--next { right: -18px; }
@media (hover: hover), (min-width: 640px) { .carousel__arrow:hover { transform: scale(1.06); } }
@media (hover: none) and (max-width: 639.98px) { .carousel__arrow { display: none; } }
.carousel__dots { display: flex; justify-content: center; gap: 6px; padding-top: 12px; }
.carousel__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-300); transition: width var(--t-base), background var(--t-base); }
.carousel__dot[aria-current="true"] { width: 18px; border-radius: 4px; background: var(--red); }

/* ---------- hero slides ---------- */

.hero-track { grid-auto-columns: 100%; border-radius: var(--r-lg); }
.hero-slot .carousel__arrow--prev { left: 12px; }
.hero-slot .carousel__arrow--next { right: 12px; }
.hero-slot .carousel__dots { position: absolute; left: 0; right: 0; bottom: 42px; padding: 0; }
.hero-slot .carousel__dot { background: rgba(255, 255, 255, 0.5); }
.hero-slot .carousel__dot[aria-current="true"] { background: #fff; }
.hero-slot[aria-busy="true"] { height: 280px; border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.12); }
.hero-slide {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(300px, 500px) auto;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 5vw, 88px);
  min-height: 280px;
  padding: 28px 56px;
  border-radius: var(--r-lg);
}
.hero-slide--red { background: linear-gradient(120deg, #B80F1C 0%, var(--red-dark) 45%, #D6162A 100%); color: #fff; }
.hero-slide--cream { background: #FFF1D6; color: var(--brown); }
.hero-slide--brown {
  background:
    radial-gradient(70% 90% at 76% 30%, rgba(234, 29, 44, 0.42), transparent 62%),
    radial-gradient(50% 70% at 92% 96%, rgba(242, 185, 29, 0.22), transparent 70%),
    linear-gradient(120deg, #2E1D1A 0%, #4A2F29 100%);
  color: #fff;
}
.hero-slide__kicker { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.hero-slide__title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.015em; }
.hero-slide__title em { font-style: normal; color: var(--red); }
.hero-slide__text { margin: 0 0 18px; font-size: 14.5px; opacity: 0.88; max-width: 42ch; }
.hero-slide__cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--red-dark);
  font-weight: 800;
  font-size: 13.5px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}
.hero-slide--cream .hero-slide__cta { background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-dark); }
.hero-slide__art { display: grid; place-items: center; height: 100%; }
.hero-product { width: 220px; height: 220px; border-radius: 50%; background: #fff; overflow: hidden; border: 6px solid #fff; box-shadow: 0 14px 30px rgba(59, 39, 35, 0.18); }
.hero-product img { width: 100%; height: 100%; object-fit: cover; }
.hero-mascot img { height: 240px; width: auto; margin-bottom: -40px; }

/* the coupon ticket, drawn in CSS (no image) */
.ticket-art {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  align-items: end;
  column-gap: 6px;
  padding: 22px 30px;
  border-radius: 16px;
  background: #FFF6DA;
  color: var(--brown);
  transform: rotate(-5deg);
  box-shadow: 0 16px 34px rgba(60, 0, 8, 0.35);
  -webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.ticket-art__off { font-family: var(--font-display); font-weight: 900; font-size: 64px; line-height: 0.9; color: var(--red); }
.ticket-art__label { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--red); padding-bottom: 6px; }
.ticket-art__store { grid-column: 1 / -1; margin-top: 8px; font-weight: 800; font-size: 14px; }
.ticket-art__code { grid-column: 1 / -1; justify-self: start; margin-top: 6px; padding: 3px 10px; border: 1.5px dashed var(--gray-300); border-radius: 6px; font-weight: 800; letter-spacing: 0.16em; font-size: 13px; color: var(--brown-soft); }

@media (max-width: 759.98px) {
  .hero-slide { grid-template-columns: 1fr; padding: 24px 22px 40px; min-height: 0; }
  .hero-slide__art { display: none; }
}

/* ---------- shortcut cards (overlapping the hero) ---------- */

.shortcuts {
  position: relative;
  z-index: 2;
  margin-top: -86px;
  /* inset from the hero's own edges, so the row never lines up with it */
  margin-inline: clamp(14px, 3.2vw, 44px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(184px, 1fr);
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.shortcuts::-webkit-scrollbar { display: none; }
.shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 214px;
  padding: 14px 16px 14px;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(59, 39, 35, 0.1), var(--edge);
  text-align: center;
  color: var(--ink);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base);
}
@media (hover: hover), (min-width: 640px) { .shortcut:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(59, 39, 35, 0.14); } }
.shortcut__title { align-self: flex-start; font-weight: 700; font-size: 15px; text-align: left; }
.shortcut__icon {
  display: grid; place-items: center;
  width: 84px; height: 84px;
  margin: 0;
  border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
  background: var(--red-tint);
  color: var(--red);
}
.shortcut__text { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.shortcut__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: auto;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--red-tint);
  color: var(--red-ink);
  font-weight: 700;
  font-size: 12.5px;
}
.shortcut--dark {
  position: relative;
  overflow: hidden;
  justify-content: space-between;
  min-height: 214px;
  background: linear-gradient(180deg, #56382F 0%, var(--brown) 100%);
  color: #fff;
}
.shortcut--dark .shortcut__title { color: #fff; }
.shortcut__image { position: absolute; left: 50%; bottom: 32px; width: 138px; transform: translateX(-50%); }
.shortcut__image img { width: 100%; height: auto; }
.shortcut__btn--solid { position: relative; background: var(--red); color: #fff; }

/* ---------- panels ---------- */

.panel {
  margin-top: 24px;
  padding: 20px 22px 22px;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(59, 39, 35, 0.08);
}
/* on narrow screens a long title pushes the link onto its own line, whole,
   instead of both squeezing into ragged two-line columns */
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 16px; }
.panel__title { margin: 0; font-size: 20px; font-weight: 600; color: var(--ink); text-wrap: balance; }
.panel__link { font-size: 13.5px; font-weight: 600; color: var(--red-ink); white-space: nowrap; }
@media (hover: hover), (min-width: 640px) { .panel__link:hover { text-decoration: underline; } }

/* ---------- oferta do dia + ofertas ---------- */

.deal-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.panel, .deal-split > * { min-width: 0; }
/* auth.css (loaded everywhere) makes .panel a grid with an auto-sized column, which
   grows to its widest child and widens the whole page (home at 1024px, cashback at
   320px). Pin the column to the panel's own width and let children shrink. */
.panel { grid-template-columns: minmax(0, 1fr); }
.panel > * { min-width: 0; max-width: 100%; }
.deal-split > .panel { margin-top: 0; }
/* side by side, the Ofertas panel is stretched to the deal of the day's
   height; centre its carousel in that space instead of leaving a gap below */
.deal-split > .panel:not(.deal-day) { display: flex; flex-direction: column; }
#offersCarousel { flex: 1; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 960px) { .deal-split { grid-template-columns: minmax(300px, 1fr) minmax(0, 2.2fr); } }
.deal-day .product-card__media { border-radius: var(--r-md); border: 0; }
.deal-day .product-card__body { border-top: 0; padding: 12px 2px 0; }
.offers-track, .shelf__track { gap: 16px; grid-auto-columns: calc((100% - 48px) / 4); }
.shelf__track { grid-auto-columns: calc((100% - 80px) / 6); }
@media (max-width: 959.98px) {
  .offers-track, .shelf__track { grid-auto-columns: calc((100% - 16px) / 2.3); }
}
.offers-track .product-card__body, .shelf__track .product-card__body { border-top: 0; padding-left: 2px; padding-right: 2px; }
@media (hover: hover), (min-width: 640px) { .offers-track .product-card:hover, .shelf__track .product-card:hover { box-shadow: none; } }
@media (hover: hover), (min-width: 640px) { .offers-track .product-card:hover .product-card__name, .shelf__track .product-card:hover .product-card__name { color: var(--red-ink); } }

/* ---------- promo pair ---------- */

.promo-pair { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 760px) { .promo-pair { grid-template-columns: 1fr 1fr; } }
.promo {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 132px;
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .promo:hover { transform: translateY(-2px); } }
.promo__copy { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px 28px; }
.promo__kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.promo__title { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance; }
.promo__link { font-size: 12.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.promo__art { display: grid; place-items: center; padding: 12px; }
.promo__art img { max-height: 110px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 759.98px) {
  /* half a phone's width: tighter copy so each <br>-split line fits whole */
  .promo__copy { padding: 16px 18px; }
  .promo__title { font-size: 17px; }
}
.promo--brown { background: var(--brown); color: #fff; }
.promo--brown .promo__art { background: var(--red); }
.promo--cream { background: #FFF1D6; color: var(--brown); }
.promo--cream .promo__art { background: #fff; }
.ticket-mini {
  display: flex; align-items: baseline; gap: 4px;
  padding: 12px 18px;
  border-radius: 10px;
  background: #FFF6DA;
  color: var(--red);
  font-family: var(--font-display); font-weight: 900; font-size: 16px;
  transform: rotate(-4deg);
  box-shadow: 0 8px 18px rgba(60, 0, 8, 0.35);
}
.ticket-mini b { font-size: 38px; line-height: 1; }

/* ---------- branded band (ML's Meli+ strip) ---------- */

.brand-band { margin-top: 24px; border-radius: var(--r-md); overflow: hidden; background: var(--white); box-shadow: 0 1px 2px rgba(59, 39, 35, 0.08); }
.brand-band__strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 14px 24px;
  background: var(--red);
  color: #fff;
}
.brand-band__logo { height: 22px; width: auto; filter: brightness(0) invert(1); }
.brand-band__strip picture { display: contents; }
.brand-band__strip h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: 0.03em; }
.brand-band__cta { margin-left: auto; padding: 7px 14px; border-radius: 6px; background: #fff; color: var(--red-dark); font-weight: 700; font-size: 13px; }
.brand-band__list { list-style: none; margin: 0; padding: 26px 20px; display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 960px) { .brand-band__list { grid-template-columns: repeat(4, 1fr); } }
.brand-band__list li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 0 12px; }
@media (min-width: 960px) { .brand-band__list li + li { border-left: 1px solid var(--line); } }
.brand-band__icon {
  display: grid; place-items: center;
  width: 76px; height: 76px;
  margin-bottom: 6px;
  border-radius: 52% 48% 46% 54% / 48% 54% 46% 52%;
  background: var(--brown-tint);
  color: var(--brown-soft);
}
.brand-band__list strong { font-size: 14px; color: var(--ink); }
.brand-band__list li > span:not(.brand-band__icon) { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; max-width: 26ch; }

/* ---------- cupons em destaque ---------- */

.coupons-panel .coupon-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.coupons-panel .store-chips { padding-bottom: 16px; }

/* ---------- cupons do dia: a row of coupon tickets ---------- */

/* auth.css makes .panel a grid that doesn't stretch its items: take the full row */
.ticket-row > * { justify-self: stretch; width: 100%; min-width: 0; }
/* no frame: just the tickets, straight on the page */
.ticket-row { margin-top: 24px; min-width: 0; }
.ticket-track { list-style: none; margin: 0; padding: 0; gap: 14px; grid-auto-columns: calc((100% - 28px) / 3); }
@media (max-width: 1099px) { .ticket-track { grid-auto-columns: calc((100% - 14px) / 2); } }
@media (max-width: 719px) { .ticket-track { gap: 12px; grid-auto-columns: calc((100% - 12px) / 1.12); } }

/* the li holds the outline: drop-shadows follow the masked shape, notches
   included, where a border or box-shadow would be cut away by the mask.
   Its 1px/3px padding keeps that outline inside the scrolling track. */
.ctk {
  --ctk-line: var(--line);
  padding: 1px 1px 3px;
  filter: drop-shadow(1px 0 0 var(--ctk-line)) drop-shadow(-1px 0 0 var(--ctk-line))
          drop-shadow(0 1px 0 var(--ctk-line)) drop-shadow(0 -1px 0 var(--ctk-line))
          drop-shadow(0 2px 0 var(--ctk-line));
}
@media (hover: hover), (min-width: 640px) { .ctk:hover { --ctk-line: var(--gray-300); } }
.ctk__card {
  --stub: 92px;
  --notch: 7px;
  display: grid;
  grid-template-columns: var(--stub) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  border-radius: var(--r-md);
  background: var(--white);
  /* two half-height layers, each with its notch bitten out at the fold */
  -webkit-mask:
    radial-gradient(circle var(--notch) at var(--stub) 0, #0000 96%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at var(--stub) 0, #0000 96%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
}

/* stub: the discount, tinted by kind — red for %, warm brown for R$ */
.ctk__stub {
  --tint: var(--red-tint);
  --tone: var(--red-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 8px 10px;
  color: var(--tone);
  /* perforation: a column of small dots along the fold */
  background:
    radial-gradient(circle, color-mix(in srgb, var(--tone) 32%, transparent) 1.4px, transparent 1.9px) right -2px top 4px / 5px 9px repeat-y,
    var(--tint);
}
.ctk--fixed .ctk__stub { --tint: var(--brown-tint); --tone: var(--brown-soft); }
.ctk--plain .ctk__stub { --tint: var(--gray-50); --tone: var(--ink-3); }
/* the store's logo sits on the stub, on a small white tile above the value */
/* pinned to the stub's top; the value then centres in the space below it */
.ctk__logo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 11px; background: var(--white); box-shadow: 0 1px 2px rgba(59, 39, 35, .12); overflow: hidden; }
.ctk__logo img { width: 34px; height: 34px; border-radius: 7px; object-fit: contain; }
.ctk__logo { background: #fff; }
.ctk__logo .mono { width: 100%; height: 100%; font-size: 17px !important; background: var(--white) !important; color: var(--tone) !important; }
.ctk__logo + .ctk__value { margin-top: auto; }
.ctk__off { margin-bottom: auto; }
.ctk__value { display: flex; align-items: flex-start; font-family: var(--font-display); line-height: 0.9; letter-spacing: -0.03em; }
.ctk__value b { font-size: 30px; font-weight: 850; }
.ctk__value i { font-style: normal; font-size: 15px; font-weight: 800; margin: 3px 1px 0; letter-spacing: 0; }
.ctk__value--md b { font-size: 25px; }
.ctk__value--sm b { font-size: 20px; }
.ctk__value--word b { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.ctk__off { font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; }

.ctk__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 14px 9px 16px; }
.ctk__head { display: flex; align-items: center; gap: 8px; }
.ctk__store { flex: 1; min-width: 0; font-weight: 800; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctk__when { flex: none; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.ctk__when--soon { color: var(--red-ink); font-weight: 700; }
.ctk__title {
  margin: 0 0 auto;
  font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.ctk .cpn__code { height: 34px; }
.ctk .cpn__code-text { font-size: 14px; }
.ctk__activate {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px;
  border-radius: var(--r-sm); border: 2px solid var(--line);
  color: var(--ink-2); font-weight: 800; font-size: 13px; text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .ctk__activate:hover { border-color: var(--gray-300); color: var(--red-ink); } }
.ctk__foot { display: flex; align-items: center; gap: 10px; min-height: 0; }
.ctk__foot .offer-source { min-width: 0; min-height: 0; margin: 0; }
/* a ticket's footer is narrow: the source stays, its star pill doesn't */
.ctk__foot .stars { display: none; }
.ctk__go { margin-left: auto; height: 26px; padding: 0 11px; font-size: 12px; }
@media (max-width: 719px) {
  .ctk__card { --stub: 82px; }
  .ctk__value b { font-size: 28px; }
  .ctk__value--md b { font-size: 23px; }
  .ctk__value--sm b { font-size: 19px; }
  .ctk__body { padding: 10px 12px 9px 14px; }
}

/* ---------- categorias (ML's horizontal tiles) ---------- */

.cat-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.cat-tile2 {
  display: flex;
  align-items: stretch;
  min-height: 92px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-base);
}
@media (hover: hover), (min-width: 640px) { .cat-tile2:hover { border-color: var(--gray-300); box-shadow: 0 6px 16px rgba(59, 39, 35, 0.1); } }
.cat-tile2__art {
  flex: none;
  align-self: center;
  width: 64px;
  height: 64px;
  margin-left: 16px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--gray-50);
  color: var(--red);
  overflow: hidden;
}
.cat-tile2__art img { width: 40px; height: 40px; object-fit: contain; }
.cat-tile2__label { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 16px; }
.cat-tile2__label strong { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.cat-tile2__label span { font-size: 12px; color: var(--ink-3); }
.cat-tile2--all .cat-tile2__label strong { color: var(--red-ink); }

/* ---------- trust strip ---------- */

.trust { margin-top: 48px; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust__inner { display: grid; gap: 28px; padding-top: 36px; padding-bottom: 36px; text-align: center; }
@media (min-width: 760px) { .trust__inner { grid-template-columns: repeat(3, 1fr); } .trust__inner > div + div { border-left: 1px solid var(--line); } }
.trust__inner > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 20px; }
.trust svg { color: var(--red); margin-bottom: 6px; }
.trust h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.trust p { margin: 0; font-size: 13px; color: var(--ink-3); max-width: 34ch; }
.trust a { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--red-ink); }

/* ---------- termos mais procurados + lojas A–Z ---------- */

.terms { padding-top: 32px; padding-bottom: 8px; }
.terms h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.terms p { margin: 0 0 24px; font-size: 13px; line-height: 1.9; color: var(--ink-3); }
.terms a { color: var(--ink-3); }
@media (hover: hover), (min-width: 640px) { .terms a:hover { color: var(--red-ink); text-decoration: underline; } }
.terms__az .muted { opacity: 0.45; }

.page-home .site-footer { margin-top: 24px; }

/* ======================================================================
   18 · nav rotator, fuller hero art, and the page's subtle motion
   ====================================================================== */

/* ---------- nav: rotating category trio ---------- */

.site-nav__ico { flex: none; opacity: 0.9; }
.site-nav__sep { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.35); margin: 0 6px; }
/* the rotating categories are shortcuts into the catalog, not sections of
   the site — they read as chips so the two never blur together */
.site-nav__chip {
  display: inline-flex;
  align-items: center;
  /* one line, always: a long label shrinks (layout.js fitNavChips) rather
     than wrapping and making the whole top bar taller */
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  transition: background var(--t-fast), transform var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .site-nav__chip:hover { background: #fff; color: var(--red-dark); border-color: #fff; transform: translateY(-1px); } }
/* takes whatever room the top bar has left; layout.js fitNavChips makes the chips fit it */
.site-nav > .site-nav__rotator { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); flex: 1 1 0; min-width: 0; max-width: 460px; }
.site-nav__set { grid-area: 1 / 1; min-width: 0; display: flex; gap: 6px; animation: nav-set-in 320ms var(--ease-out) both; }
.site-nav__set--out { animation: nav-set-out 320ms var(--ease-out) both; pointer-events: none; }
@keyframes nav-set-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes nav-set-out { to { opacity: 0; transform: translateY(-6px); } }

/* the header's spark catches the light every few seconds */
.spark { animation: spark-twinkle 6s ease-in-out infinite; transform-origin: center; }
@keyframes spark-twinkle {
  0%, 82%, 100% { transform: scale(1) rotate(0); opacity: 0.95; }
  88% { transform: scale(1.25) rotate(12deg); opacity: 1; }
  94% { transform: scale(0.95) rotate(-6deg); }
}

/* ---------- hero: fuller art ---------- */

.hero-slide { min-height: 320px; }
.hero-slide--white {
  background:
    radial-gradient(60% 80% at 82% 30%, rgba(242, 185, 29, 0.20), transparent 62%),
    linear-gradient(115deg, #FFF3DE 0%, #FFFDF8 52%, #FFF6E6 100%);
  color: var(--brown);
}
.hero-slide--white .hero-slide__cta, .hero-slide--white .hero-slide__title em { color: var(--red); }
.hero-slide--white .hero-slide__cta { background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-dark); }
.hero-slide__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.hero-slide__chips a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 12px; font-weight: 700;
}
@media (hover: hover), (min-width: 640px) { .hero-slide__chips a:hover { background: rgba(255, 255, 255, 0.16); } }
.hero-slide__chips small { opacity: 0.7; font-weight: 600; }
.hero-slide__chips img, .hero-slide__chips .mono {
  width: 16px; height: 16px; border-radius: 4px; object-fit: contain; flex: none;
  background: #fff;
}
.hero-slide--cream .hero-slide__chips a, .hero-slide--white .hero-slide__chips a { border-color: var(--gray-300); }

/* three coupons fanned out */
.ticket-fan { position: relative; width: 300px; height: 210px; }
.ticket-fan .ticket-art { position: absolute; inset: 0; margin: auto; padding: 18px 26px; transform-origin: 50% 90%; }
.ticket-art--0 { z-index: 3; transform: rotate(-3deg) translateY(16px); }
.ticket-art--1 { z-index: 2; transform: rotate(4deg) translateY(-18px) scale(0.95); opacity: 0.9; }
.ticket-art--2 { z-index: 1; transform: rotate(-8deg) translateY(-48px) scale(0.9); opacity: 0.75; }
.ticket-fan .ticket-art__off { font-size: 46px; }
.ticket-fan .ticket-art__label { font-size: 17px; }

/* product bubbles (category slide) */
.hero-bubbles { position: relative; width: 320px; height: 250px; }
.hero-bubble { position: absolute; display: grid; justify-items: center; gap: 6px; text-decoration: none; color: inherit; }
.hero-bubble__img { display: grid; place-items: center; border-radius: 50%; background: #fff; border: 5px solid #fff; overflow: hidden; box-shadow: 0 12px 26px rgba(59, 39, 35, 0.18); }
.hero-bubble__img img { width: 100%; height: 100%; object-fit: cover; }
.hero-bubble__price { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); background: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 4px 10px rgba(59, 39, 35, 0.16); }
.hero-bubble__price b { color: var(--green); }
.hero-bubble--0 { right: 56px; top: 0; z-index: 3; }
.hero-bubble--0 .hero-bubble__img { width: 150px; height: 150px; }
.hero-bubble--1 { left: -6px; top: 88px; z-index: 2; }
.hero-bubble--1 .hero-bubble__img { width: 96px; height: 96px; }
.hero-bubble--2 { right: -4px; bottom: -6px; z-index: 1; }
.hero-bubble--2 .hero-bubble__img { width: 84px; height: 84px; }

/* mini cards (under R$100 slide) */
.hero-minis { display: flex; gap: 14px; align-items: flex-end; padding: 14px 0 0; margin-bottom: 18px; }
.hero-mini {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 12px 14px;
  border-radius: 18px;
  background: #fff;
  border: 0;
  color: inherit;
  box-shadow: 0 16px 30px rgba(59, 39, 35, 0.18);
  transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base);
}
.hero-mini:nth-child(1) { transform: rotate(-2.5deg); }
.hero-mini:nth-child(3) { transform: rotate(2.5deg); }
@media (hover: hover), (min-width: 640px) { .hero-mini:hover { transform: translateY(-6px) rotate(0); box-shadow: 0 22px 40px rgba(59, 39, 35, 0.26); z-index: 1; } }
.hero-mini:nth-child(2) { margin-bottom: 20px; transform: scale(1.06); z-index: 1; }
.hero-mini__img { width: 94px; height: 94px; display: grid; place-items: center; background: var(--gray-25); border-radius: 12px; overflow: hidden; }
.hero-mini__img img { width: 100%; height: 100%; object-fit: contain; }
.hero-mini__price { font-family: var(--font-display); font-weight: 900; font-size: 19px; letter-spacing: -0.01em; }
.hero-mini .pill-off { font-size: 12px; padding: 3px 8px; }

@media (max-width: 1099.98px) {
  .hero-slide__chips, .hero-chat { display: none; }
}

/* ---------- motion: slide entrance, idle float, scroll reveal ---------- */

.hero-slide.is-active .hero-slide__copy > * { animation: hero-in 520ms var(--ease-out) both; }
.hero-slide.is-active .hero-slide__copy > *:nth-child(2) { animation-delay: 70ms; }
.hero-slide.is-active .hero-slide__copy > *:nth-child(3) { animation-delay: 130ms; }
.hero-slide.is-active .hero-slide__copy > *:nth-child(4) { animation-delay: 190ms; }
.hero-slide.is-active .hero-slide__copy > *:nth-child(5) { animation-delay: 240ms; }
@keyframes hero-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hero-slide.is-active .hero-slide__art { animation: hero-art-in 620ms var(--ease-spring) both; }
@keyframes hero-art-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
.ticket-fan, .hero-bubbles, .hero-mascot, .hero-minis { animation: idle-float 6s ease-in-out infinite; }
.hero-bubble--1 { animation: idle-float 7s ease-in-out -2s infinite; }
.hero-bubble--2 { animation: idle-float 8s ease-in-out -4s infinite; }
@keyframes idle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hero-bubble--1 { animation-name: idle-float-1; }
.hero-bubble--2 { animation-name: idle-float-2; }
@keyframes idle-float-1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes idle-float-2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 55ms);
}

/* ---------- micro-interactions ---------- */

.shortcut__icon { transition: transform var(--t-base) var(--ease-spring), background var(--t-base); }
@media (hover: hover), (min-width: 640px) { .shortcut:hover .shortcut__icon { transform: rotate(-6deg) scale(1.06); background: var(--red-soft); } }
.shortcut__btn { transition: background var(--t-fast), color var(--t-fast); }
@media (hover: hover), (min-width: 640px) { .shortcut:hover .shortcut__btn { background: var(--red); color: #fff; } }
@media (hover: hover), (min-width: 640px) { .shortcut--dark:hover .shortcut__image { transform: translateX(-50%) scale(1.04) rotate(-2deg); } }
.shortcut__image { transition: transform var(--t-base) var(--ease-spring); }

.brand-band__icon { transition: transform var(--t-base) var(--ease-spring); }
@media (hover: hover), (min-width: 640px) { .brand-band__list li:hover .brand-band__icon { transform: translateY(-4px) rotate(4deg); } }

.cat-tile2__art img { transition: transform var(--t-base) var(--ease-out); }
@media (hover: hover), (min-width: 640px) { .cat-tile2:hover .cat-tile2__art img { transform: scale(1.08) rotate(-3deg); } }

.product-card__media img { transition: transform var(--t-slow) var(--ease-out); }
@media (hover: hover), (min-width: 640px) { .product-card:hover .product-card__media img { transform: scale(1.04); } }
.pill-off { transition: transform var(--t-fast) var(--ease-spring); }
@media (hover: hover), (min-width: 640px) { .product-card:hover .pill-off { transform: scale(1.06); } }

.promo__art img { transition: transform var(--t-base) var(--ease-out); }
@media (hover: hover), (min-width: 640px) { .promo:hover .promo__art img { transform: scale(1.05) rotate(-2deg); } }
.trust__inner svg { transition: transform var(--t-base) var(--ease-spring); }
@media (hover: hover), (min-width: 640px) { .trust__inner > div:hover svg { transform: translateY(-3px) scale(1.05); } }
.panel__link, .section__link { transition: color var(--t-fast); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .ticket-fan, .hero-bubbles, .hero-mascot, .hero-minis, .hero-bubble--1, .hero-bubble--2, .spark { animation: none; }
}

/* the search bar's mobile rows live at the end: they override the base
   .site-search__* rules defined above */
@media (max-width: 639.98px) {
  /* query + button on the first row, the three filters on the second */
  .site-search { flex-wrap: wrap; height: auto; }
  .site-search__input { order: 1; flex: 1 1 calc(100% - 48px); height: 44px; font-size: 16px; }
  .site-search__btn { order: 2; height: 44px; }
  .site-search__select { order: 3; flex: 1 1 0; min-width: 0; max-width: none; height: 38px; border: 0 !important; border-top: 1px solid #e6e6e6 !important; padding-left: 10px; font-size: 16px; }
  .site-search__select + .site-search__select { border-left: 1px solid #e6e6e6 !important; }
}

/* ---------- cashback section ---------- */

.cashback__empty { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 8px 4px 4px; }
.cashback__icon {
  flex: none;
  display: grid; place-items: center;
  width: 72px; height: 72px;
  border-radius: 50% 48% 52% 50% / 48% 52% 48% 52%;
  background: var(--green-soft);
  color: var(--green);
}
.cashback__title { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.cashback__text { margin: 0; font-size: 13.5px; color: var(--ink-3); max-width: 62ch; line-height: 1.5; }
.cashback__actions { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.cashback__actions .shortcut__btn { padding: 9px 14px; }
@media (hover: hover), (min-width: 640px) { .cashback__actions .shortcut__btn:hover { background: var(--red); color: #fff; } }

/* ======================================================================
   19 · layout variety: feature card, grid shelf + side banner, back to top
   ====================================================================== */

/* ---------- oferta do dia: one card that fills its panel ---------- */

.deal-day { display: flex; flex-direction: column; }
.feature-card { position: relative; display: flex; flex-direction: column; flex: 1; color: var(--ink); }
.feature-card__media {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  padding: 10px;
  background: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
}
:root[data-theme="dark"] .feature-card__media { background: #f4efed; }
.feature-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--t-slow) var(--ease-out); }
@media (hover: hover), (min-width: 640px) { .feature-card:hover .feature-card__media img { transform: scale(1.04); } }
.feature-card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 2px 0; flex: 1; }
.feature-card__name { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.feature-card__save { margin: 0; font-size: 13px; font-weight: 700; color: var(--green); }
.feature-card .product-card__meta { margin-top: 4px; padding-top: 0; }
.feature-card__cta {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  border-radius: var(--r-sm);
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 3px 0 var(--red-dark);
  transition: background var(--t-fast), transform var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .feature-card:hover .feature-card__cta { background: #F02B39; } }
.feature-card:active .feature-card__cta { transform: translateY(3px); box-shadow: none; }

/* ---------- shelf variant: 3×2 grid + tall banner ---------- */

.shelf-grid__body { display: grid; gap: 16px; align-items: start; }
@media (min-width: 960px) { .shelf-grid__body { grid-template-columns: 1fr 260px; } }
.shelf-grid__items { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .shelf-grid__items { grid-template-columns: repeat(3, 1fr); } }
.shelf-grid__items .product-card__body { border-top: 0; padding-left: 2px; padding-right: 2px; }
@media (hover: hover), (min-width: 640px) { .shelf-grid__items .product-card:hover { box-shadow: none; } }
@media (hover: hover), (min-width: 640px) { .shelf-grid__items .product-card:hover .product-card__name { color: var(--red-ink); } }

.side-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 240px;
  padding: 22px 20px;
  border-radius: var(--r-md);
  color: #fff;
  transition: transform var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .side-banner:hover { transform: translateY(-2px); } }
/* shorter than the 3×2 grid beside it: ride along while the grid scrolls
   past, rather than parking at the top over an empty column */
@media (min-width: 960px) { .shelf-grid__body > .side-banner { position: sticky; top: 16px; } }
.side-banner--red { background: linear-gradient(170deg, var(--red) 0%, var(--red-dark) 100%); }
.side-banner__kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.side-banner__title { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.05; }
.side-banner__text { font-size: 13px; opacity: 0.9; }
.side-banner__art { margin: auto -20px 66px; display: grid; place-items: center; }
.side-banner__art img { width: 100%; max-height: 172px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(60, 0, 8, 0.35)); }
.side-banner__cta {
  position: absolute; left: 20px; bottom: 18px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--red-dark);
  font-size: 12.5px;
  font-weight: 800;
}

/* ---------- back to top ---------- */

.back-to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 60;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(59, 39, 35, 0.22);
  animation: rise 240ms var(--ease-out) both;
}
@media (hover: hover), (min-width: 640px) { .back-to-top:hover { color: var(--red); border-color: var(--red-soft); } }

/* ---------- mobile: all five shortcuts visible, no sideways scrolling ---------- */

@media (max-width: 759.98px) {
  .shortcuts {
    /* dense: the full-width Modo Fera card must not leave a hole beside
       the card before it */
    grid-auto-flow: row dense;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
  }
  .shortcut { min-height: 0; padding: 12px; }
  .shortcut__icon { width: 64px; height: 64px; }
  .shortcut--dark { grid-column: span 2; min-height: 150px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; }
  .shortcut--dark .shortcut__title { align-self: center; font-size: 16px; }
  .shortcut--dark .shortcut__image { position: static; transform: none; width: 96px; margin-left: auto; }
  .shortcut--dark .shortcut__btn--solid { flex: none; align-self: center; height: 34px; padding: 0 16px; }
}

/* a promo whose photo failed to load gives its space back to the copy */
.promo:not(:has(.promo__art)) { grid-template-columns: 1fr; }
.promo:not(:has(.promo__art)) .promo__copy { padding-right: 32px; }

/* ======================================================================
   20 · hero cast — one Ferinha drawing per slide, each at its own size
   and anchor so the carousel never repeats the same composition
   ====================================================================== */

.hero-slide--wine { background: linear-gradient(120deg, #7C0A13 0%, #A50E1B 55%, #C4121F 100%); color: #fff; }

.hero-art { position: relative; display: grid; place-items: center; }
.ferinha { display: block; }
.ferinha img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 26px rgba(60, 0, 8, 0.28)); }

/* (a) cupons: Ferinha pushes the cart toward the tickets she's looking at */
.hero-art--cupons { grid-template-columns: auto auto; align-items: end; gap: 6px; margin-right: 34px; }
.hero-art--cupons .ferinha { width: 252px; margin-bottom: -28px; }
.hero-art--cupons .ticket-fan { width: 200px; height: 176px; margin: 0 0 18px; }
.hero-art--cupons .ticket-art { padding: 16px 22px; }
.hero-art--cupons .ticket-art__off { font-size: 40px; }
.hero-art--cupons .ticket-art__label { font-size: 15px; }
.hero-art--cupons .ticket-art__store, .hero-art--cupons .ticket-art__code { font-size: 12px; }

/* (b) quedas de preço: shopping Ferinha, bubbles tucked to her left */
.hero-art--quedas { grid-template-columns: auto auto; align-items: end; gap: 0; }
.hero-art--quedas .ferinha { width: 290px; margin: 0 -10px -26px 0; order: 2; }
.hero-art--quedas .hero-bubbles { width: 150px; height: 210px; order: 1; }
.hero-art--quedas .hero-bubble { position: absolute; }
.hero-art--quedas .hero-bubble--0 { right: auto; left: 0; top: 6px; }
.hero-art--quedas .hero-bubble--0 .hero-bubble__img { width: 116px; height: 116px; }
.hero-art--quedas .hero-bubble--1 { left: 26px; top: auto; bottom: 0; }
.hero-art--quedas .hero-bubble--1 .hero-bubble__img { width: 84px; height: 84px; }

/* (c) nossa missão: she drops in from the top of the slide, on her rope */
.hero-art--missao { align-items: start; }
.hero-art--missao .ferinha { width: 300px; margin: -32px 0 0 10px; animation: missao-swing 6s ease-in-out infinite; transform-origin: 62% 0; }
@keyframes missao-swing { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

/* (d) busca por IA: the confused pose, with what you can ask her beside it */
.hero-art--ia { grid-template-columns: auto auto; align-items: end; gap: 2px; }
.hero-art--ia .hero-chat { margin-bottom: 26px; }
.hero-art--ia .ferinha { width: 224px; margin-bottom: -24px; }

@media (prefers-reduced-motion: reduce) { .hero-art--missao .ferinha { animation: none; } }

@media (max-width: 1099.98px) {
  .hero-art--cupons .ticket-fan, .hero-art--quedas .hero-bubbles { display: none; }
  .hero-art--cupons, .hero-art--quedas, .hero-art--ia { grid-template-columns: auto; }
}

/* Ferinha is half red, so on the red and wine slides her red side melts
   into the background. A cream sticker outline (stacked zero-offset drop
   shadows, which follow the drawing's alpha) plus a soft glow behind her
   cuts her out of it. The cream/white/brown slides don't need either. */
.hero-slide--red .ferinha, .hero-slide--wine .ferinha, .hero-slide--brown .ferinha { position: relative; }
.hero-slide--red .ferinha::before, .hero-slide--wine .ferinha::before, .hero-slide--brown .ferinha::before {
  content: "";
  position: absolute;
  inset: 6% 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 218, 0.28), rgba(255, 246, 218, 0) 68%);
  z-index: -1;
}
.hero-slide--red .ferinha img, .hero-slide--wine .ferinha img, .hero-slide--brown .ferinha img {
  --edge: #FFF6DA;
  filter:
    drop-shadow(2px 0 0 var(--edge)) drop-shadow(-2px 0 0 var(--edge))
    drop-shadow(0 2px 0 var(--edge)) drop-shadow(0 -2px 0 var(--edge))
    drop-shadow(1.4px 1.4px 0 var(--edge)) drop-shadow(-1.4px 1.4px 0 var(--edge))
    drop-shadow(1.4px -1.4px 0 var(--edge)) drop-shadow(-1.4px -1.4px 0 var(--edge))
    drop-shadow(0 16px 22px rgba(60, 0, 8, 0.35));
}

/* ---------- hero: the Busca por IA chat card ----------
   A solid white card, tilted like the coupon stickers, so the slide has a
   bright object of its own instead of a translucent panel on brown. The
   count and the cheapest price inside it come from a real /api/search
   call, so the reply is never a mockup. */
.hero-chat {
  width: 272px;
  display: grid;
  gap: 9px;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  color: var(--brown);
  transform: rotate(-2.5deg);
  box-shadow: 0 22px 44px rgba(30, 8, 6, 0.45);
}
.hero-chat__ask {
  justify-self: end;
  max-width: 90%;
  margin: 0;
  padding: 9px 13px;
  border-radius: 14px 14px 4px 14px;
  background: var(--red);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  animation: hero-chat-in 460ms var(--ease-out) 200ms both;
}
.hero-chat__reply {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  animation: hero-chat-in 460ms var(--ease-out) 520ms both;
}
.hero-chat__reply p {
  margin: 0;
  padding: 10px 13px;
  border-radius: 14px 14px 14px 4px;
  background: var(--gray-50);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
}
:root[data-theme="dark"] .hero-chat__reply p { background: #F3EDEB; }
.hero-chat__reply b { color: var(--red-dark); font-weight: 800; }
.hero-chat__avatar {
  position: relative;
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--red);
}
.hero-chat__avatar::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: #fff;
  -webkit-mask: url("/assets/offera-claw-spark-motif.svg") center / contain no-repeat;
  mask: url("/assets/offera-claw-spark-motif.svg") center / contain no-repeat;
}
.hero-chat__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; animation: hero-chat-in 460ms var(--ease-out) 760ms both; }
.hero-chat__chips span {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1.5px dashed var(--gray-300);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
}
@keyframes hero-chat-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- shortcut: MODO FERA ----------
   The one card that breaks the shortcut rhythm: Ferinha's fierce bust
   centred over hand-drawn flames. The label is set in Bowlby One SC — the
   only second face on the site — rounded and heavy, so it reads as a
   mode you switch on rather than another section. */
.shortcut--fera {
  position: relative;
  overflow: hidden;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-height: 214px;
  padding: 14px;
  background: linear-gradient(180deg, #1B1210 0%, #120B0A 55%, #0F0908 100%);
  color: #fff;
  text-align: center;
}
.shortcut--fera .shortcut__title {
  position: absolute;
  z-index: 3;
  top: 12px; left: 10px; right: 10px;
  text-align: center;
  font-family: "Bowlby One SC", var(--font-display), sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fff;
  text-shadow: 0 2px 0 var(--red-dark), 0 4px 10px rgba(0, 0, 0, 0.5);
}
.shortcut--fera .shortcut__image {
  position: absolute;
  z-index: 2;
  left: 50%; bottom: 34px;
  width: 140px;
  transform: translateX(-50%);
  transition: transform var(--t-base) var(--ease-spring);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
}
@media (hover: hover), (min-width: 640px) { .shortcut--fera:hover .shortcut__image { transform: translateX(-50%) scale(1.05); } }
.shortcut--fera .shortcut__btn--solid {
  position: relative;
  z-index: 3;
  align-self: center;
  width: auto;
  margin-top: 0;
  height: 34px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FF5A1F 0%, var(--red) 55%, var(--red-dark) 100%);
  color: #fff;
  font-family: "Bowlby One SC", var(--font-display), sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 var(--red-dark), 0 0 0 rgba(255, 122, 26, 0);
  animation: fera-btn-glow 1.8s ease-in-out infinite;
}
@media (hover: hover), (min-width: 640px) { .shortcut--fera:hover .shortcut__btn--solid { transform: translateY(-1px); } }
@keyframes fera-btn-glow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 var(--red-dark), 0 0 0 rgba(255, 122, 26, 0); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 var(--red-dark), 0 0 14px 3px rgba(255, 122, 26, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .shortcut--fera .shortcut__btn--solid { animation: none; }
}

/* the flames: three drawn frames swapped on a steps() loop, flat fills,
   hard edges — a cel loop, no blur and no gradients */
.fera-flames {
  position: absolute;
  z-index: 1;
  left: -12%; right: -12%; bottom: 0;
  height: 196px;
}
.fera-flames svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  animation: fera-cel 0.9s steps(1, end) infinite;
}
.fera-flames svg:nth-child(2) { animation-delay: 0.075s; }
.fera-flames svg:nth-child(3) { animation-delay: 0.150s; }
.fera-flames svg:nth-child(4) { animation-delay: 0.225s; }
.fera-flames svg:nth-child(5) { animation-delay: 0.300s; }
.fera-flames svg:nth-child(6) { animation-delay: 0.375s; }
.fera-flames svg:nth-child(7) { animation-delay: 0.450s; }
.fera-flames svg:nth-child(8) { animation-delay: 0.525s; }
.fera-flames svg:nth-child(9) { animation-delay: 0.600s; }
.fera-flames svg:nth-child(10) { animation-delay: 0.675s; }
.fera-flames svg:nth-child(11) { animation-delay: 0.750s; }
.fera-flames svg:nth-child(12) { animation-delay: 0.825s; }
@keyframes fera-cel { 0%, 8.33% { opacity: 1; } 8.34%, 100% { opacity: 0; } }
/* a deeper vermilion than the mascot's --red, so her red side stays
   readable against the fire behind her */
.flame--outer { fill: #B3120B; }
.flame--mid { fill: #F4600A; }
.flame--core { fill: #FFC531; }

@media (prefers-reduced-motion: reduce) {
  .fera-flames svg { animation: none; }
  .fera-flames svg:nth-child(1) { opacity: 1; }
}

@media (max-width: 759.98px) {
  .shortcut--fera { grid-column: span 2; min-height: 156px; flex-direction: row; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; }
  .shortcut--fera .shortcut__title { position: static; align-self: center; font-size: 22px; }
  .shortcut--fera .shortcut__image { position: static; transform: none; width: 118px; margin-left: auto; }
  .shortcut--fera:hover .shortcut__image { transform: scale(1.05); }
  .shortcut--fera .shortcut__btn--solid { margin-top: 0; width: auto; align-self: center; height: 34px; padding: 0 18px; }
  .fera-flames { left: 96px; right: auto; bottom: 0; width: 140px; height: 104px; }
}

/* ======================================================================
   21 · home polish — same layout, more finish: product photos sit on one
   shared tile (sources ship white, blue and photographic backgrounds),
   panel titles carry the display face, panels get real depth, prices
   firm up, and shelf cards answer the pointer.
   ====================================================================== */

.page-home .panel,
.page-home .brand-band {
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(59, 39, 35, 0.06), 0 10px 28px -16px rgba(59, 39, 35, 0.22);
}
.page-home .panel__head { align-items: center; }
.page-home .panel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.015em;
}
.page-home .panel__link {
  display: inline-flex; align-items: center;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--red-tint);
  font-size: 12.5px;
  font-weight: 700;
  transition: background var(--t-fast), color var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .page-home .panel__link:hover { background: var(--red); color: #fff; text-decoration: none; } }

/* one tile for every photo; multiply melts white product backgrounds into it */
.page-home .product-card__media,
.page-home .feature-card__media {
  background: #F6F2F1;
  border-radius: var(--r-md);
}
:root[data-theme="dark"] .page-home .product-card__media,
:root[data-theme="dark"] .page-home .feature-card__media { background: #F4EFED; }
.page-home .product-card__media img,
.page-home .feature-card__media img { mix-blend-mode: multiply; }

/* shelf cards: the photo lifts toward the pointer */
.page-home .product-card__media { transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base); }
@media (hover: hover), (min-width: 640px) { .page-home .product-card:hover .product-card__media {
  transform: translateY(-3px);
  box-shadow: 0 12px 22px -12px rgba(59, 39, 35, 0.4);
} }

.page-home .price-tag { font-weight: 700; }
.page-home .pill-off { padding: 2px 6px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .page-home .product-card:hover .product-card__media { transform: none; }
}

/* ---------- store logos: never upscale a small raster ---------- */
/* many logos are the store's own favicon, some only 16–32px: scale-down
   shows those at their real size inside the tile instead of blurring them
   up; anything larger still shrinks to fit, like contain */
img[src^="/assets/brands/"][src$=".png"], img[src^="/assets/brands/"][src$=".jpg"] { object-fit: scale-down; }
/* logos are drawn for a white ground (adidas/ASUS are black) */
:root[data-theme="dark"] img[src^="/assets/brands/"] { background: #fff; }

/* ---------- 99 · phones: nothing wider than the screen ---------- */

/* Grid and flex items default to min-width:auto, so one long row (the store
   chips, the price table) stretched its whole column past the screen and the
   page scrolled sideways. Let those columns shrink; scrollers scroll inside
   their own box. Desktop (>= 860px) is untouched. */
@media (max-width: 859.98px) {
  .coupons-panel { grid-template-columns: minmax(0, 1fr); }
  .coupons-panel > *, .hscroll { min-width: 0; max-width: 100%; }
  .product-detail { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .product-detail > * { min-width: 0; }
}

@media (max-width: 599.98px) {
  /* product photo: shorter, so the price and "Ir para a loja" show sooner */
  .product-detail__media { aspect-ratio: 4 / 3; }
  .product-detail__media img { box-sizing: border-box; padding: 14px; }
  .product-detail__best-price { font-size: 28px; }
  .product-detail__best .btn, .product-detail__best > a.btn { width: 100%; justify-content: center; }

  /* store comparison: one card per store instead of a four-column table */
  .offer-table, .offer-table tbody, .offer-table tr, .offer-table td { display: block; }
  .offer-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .offer-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
  .offer-table tr:first-child { border-top: 0; padding-top: 4px; }
  .offer-table td { padding: 0; border: 0; min-width: 0; }
  .offer-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .offer-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .offer-table td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; font-size: 12.5px; }
  .offer-table td:nth-child(4) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .offer-table td:nth-child(4) .btn { min-width: 64px; height: 44px; }
  /* other coupons of the store: the code drops under its text, which can then wrap */
  .pd-others__item { grid-template-columns: 64px minmax(0, 1fr); align-items: start; row-gap: 6px; }
  .pd-others__item > :nth-child(3) { grid-column: 2; justify-self: start; }
  .pd-others__name { white-space: normal; overflow: visible; text-overflow: clip; }
  .offer-table__code { max-width: 100%; overflow-wrap: anywhere; }
  .offer-table__coupon { min-width: 0; }
}

/* touch targets: bigger tap areas, drawn with padding that negative margin
   cancels, so nothing moves */
@media (max-width: 859.98px) {
  .site-header__pill { padding-block: 10px; margin-block: -10px; }
  .site-header__logo { padding-block: 8px; margin-block: -8px; }
  .ctk__go, .store-go { padding-block: 9px; margin-block: -9px; }
  .carousel__dot { position: relative; }
  .carousel__dot::after { content: ""; position: absolute; inset: -12px -4px; }
  /* a very long list (all cashback stores): skip laying out rows off screen */
  .cbrate { content-visibility: auto; contain-intrinsic-size: auto 96px; }
}

/* home: the four featured coupons sit 2×2 beside "Oferta do dia" */
@media (min-width: 600px) { .deal-split .coupons-panel .coupon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* home, bottom: "Cupons em destaque" in real columns (4 / 3 / 2 / 1) */
.coupons-wide .coupon-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .coupons-wide .coupon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .coupons-wide .coupon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .coupons-wide .coupon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* home: all categories, in real columns (2 / 3 / 4 / 5), compact tiles */
.cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .cat-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cat-tiles .cat-tile2 { min-height: 68px; min-width: 0; }
.cat-tiles .cat-tile2__art { width: 44px; height: 44px; margin-left: 12px; }
.cat-tiles .cat-tile2__art img { width: 30px; height: 30px; }
.cat-tiles .cat-tile2__art svg { width: 24px; height: 24px; }
.cat-tiles .cat-tile2__label { padding: 8px 12px; min-width: 0; }
.cat-tiles .cat-tile2__label strong { font-size: 13.5px; overflow-wrap: anywhere; }

/* cupons: store finder (search box, A–Z bar, wrapping store chips) */
.store-finder { margin: 0 0 18px; display: grid; gap: 12px; }
.store-finder__search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1.5px solid var(--gray-200); border-radius: var(--r-md); background: var(--white); color: var(--ink-3); }
.store-finder__search:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(237, 28, 47, 0.12); }
.store-finder__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
@media (max-width: 639.98px) { .store-finder__search input, #cbFilter { font-size: 16px; } }
.store-finder__letters { display: flex; flex-wrap: wrap; gap: 4px; }
.store-finder__letter { min-width: 34px; height: 34px; padding: 0 6px; border: 1px solid var(--gray-200); border-radius: var(--r-sm); background: var(--white); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
@media (hover: hover), (min-width: 640px) { .store-finder__letter:hover:not(:disabled) { border-color: var(--red); color: var(--red-ink); } }
.store-finder__letter.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.store-finder__letter:disabled { opacity: 0.35; cursor: default; }
.store-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.store-pick .muted { margin: 4px 0; }
.store-pick__more { border: 1.5px dashed var(--gray-300); border-radius: 999px; background: transparent; padding: 0 14px; height: 40px; font: inherit; font-size: 13px; font-weight: 700; color: var(--red-ink); cursor: pointer; }
@media (max-width: 599.98px) { .store-finder__letter { min-width: 38px; height: 38px; } }

/* ---------- cookie consent banner (analytics) ---------- */
.consent {
  position: fixed; left: 50%; bottom: 16px; translate: -50% 0; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  width: min(720px, calc(100% - 24px)); padding: 14px 16px;
  border-radius: var(--r-lg); background: var(--brown); color: #fff;
  box-shadow: var(--shadow-float); font-size: 13.5px; line-height: 1.45;
  animation: consent-in var(--t-slow) var(--ease-out) both;
}
.consent p { flex: 1 1 280px; margin: 0; }
.consent a { color: #fff; text-decoration: underline; }
.consent__actions { display: flex; gap: 8px; margin-left: auto; }
.consent__btn {
  min-height: 40px; padding: 0 18px; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: var(--r-pill);
  background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
@media (hover: hover), (min-width: 640px) { .consent__btn:hover { border-color: #fff; } }
.consent__btn--yes { background: var(--red); border-color: var(--red); }
@media (hover: hover), (min-width: 640px) { .consent__btn--yes:hover { background: var(--red-dark); border-color: var(--red-dark); } }
@keyframes consent-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
.consent__short { display: none; }
@media (max-width: 639.98px) {
  .consent {
    bottom: calc(8px + env(safe-area-inset-bottom)); width: calc(100% - 16px); flex-wrap: nowrap;
    gap: 8px; padding: 6px 8px 6px 12px; border-radius: var(--r-md); font-size: 13px; line-height: 1.3;
  }
  .consent p { flex: 1 1 auto; min-width: 0; }
  .consent__long { display: none; }
  .consent__short { display: inline; }
  .consent__actions { gap: 6px; }
  .consent__btn { min-height: 36px; padding: 0 12px; border-width: 1.5px; font-size: 13px; }
}

/* ---------- footer contacts + atendimento page ---------- */
.site-footer__contact { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 32px; }
.site-footer__contact li { display: grid; gap: 8px; }
.site-footer__contact span { font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; opacity: 0.95; }
.site-footer__icons { display: flex; gap: 10px; }
/* the contact is only icons: a 48px target each (email, WhatsApp) with the brand glyph straight on the footer, no frame */
.footer-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; transition: transform .15s ease; }
.footer-ico:hover, .footer-ico:focus-visible { transform: translateY(-2px); }
.footer-ico .brand-ico { width: 30px; height: 30px; }
.site-footer__apps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.site-footer__apps a { display: block; line-height: 0; border-radius: 8px; transition: transform .15s ease; }
.site-footer__apps a:hover, .site-footer__apps a:focus-visible { transform: translateY(-2px); }
.site-footer__apps img { display: block; height: 44px; width: auto; }

.channels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 24px 0 8px; }
@media (min-width: 720px) { .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.channel { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: 0 1px 2px rgba(59, 39, 35, 0.08); }
.channel__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-md); background: var(--red-soft); color: var(--red-ink); }
.channel h2 { margin: 4px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.channel p { margin: 0; font-size: 14px; color: var(--ink-3); }
.channel__links { display: grid; gap: 8px; margin-top: 6px; }
.channel__link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 15px; font-weight: 700; overflow-wrap: anywhere; transition: color var(--t-fast); }
.channel__link svg { flex: none; color: var(--red-ink); }
@media (hover: hover), (min-width: 640px) { .channel__link:hover { color: var(--red-ink); text-decoration: underline; } }
.channels__note { margin: 20px 0 40px; font-size: 12.5px; color: var(--ink-3); max-width: 70ch; }
@media (prefers-reduced-motion: reduce) { .channel__link { transition: none; } }

/* ---------- responsive polish ---------- */
/* The header's rotating category chips slide in from beyond the right edge; that briefly widened
   the whole page (up to 1443px at a 1280px viewport) and flashed a horizontal scrollbar.
   `clip` (unlike `hidden`) leaves the vertical axis alone, so the Categorias dropdown still hangs below. */
.site-header { overflow-x: clip; }
@media (max-width: 639.98px) { .site-header { padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); } }
/* bigger touch areas without moving anything: breadcrumb links and carousel dots */
.breadcrumb a { position: relative; }
.breadcrumb a::after { content: ''; position: absolute; inset: -12px -6px; }
.carousel__dot { position: relative; }
.carousel__dot::after { content: ''; position: absolute; inset: -10px -6px; }
/* the cookie-preferences link (shown only when analytics is on) gets a phone-sized touch target */
#cookiePrefs { display: inline-flex; align-items: center; margin-left: auto; font-size: 12.5px; color: inherit; opacity: 0.85; text-decoration: underline; }
#cookiePrefs[hidden] { display: none; }
@media (max-width: 639.98px) { #cookiePrefs { min-height: 44px; margin-left: 0; } }

/* brand icons next to the contact links */
.site-footer__contact .brand-ico { flex: none; }
.channel__link .brand-ico { flex: none; }
.channel__link small { margin-left: auto; padding-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.channel__link span { min-width: 0; }
@media (max-width: 380px) { .channel__link small { display: none; } }
/* contact cards: link blocks line up at the bottom whatever the description length */
.channel { display: flex; flex-direction: column; }
.channel__links { margin-top: auto; padding-top: 6px; }

/* ---------- hero: "Compare benefícios" (Ferinha thinking, one idea at a time in the bubble) ---------- */
/* the art is out of the layout flow, so it can never make the carousel taller */
.hero-slide__art:has(> .hero-art--beneficios) { position: relative; align-self: stretch; width: clamp(210px, 19vw, 250px); }
.hero-art--beneficios { position: absolute; right: 0; top: 50%; translate: 0 -50%; display: block; width: 100%; margin: 0; }
.hero-art--beneficios .ferinha { width: 100%; }
.hero-art--beneficios .ferinha img { filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.35)); animation: thought-bob 5s ease-in-out infinite; transform-origin: 50% 90%; }
.thought { position: absolute; inset: 0; pointer-events: none; }
.thought__dots { position: absolute; left: 76.1%; top: 19.1%; display: flex; gap: 6px; translate: -50% -50%; opacity: 0; transition: opacity 0.25s ease; }
.thought__dots i { width: 9px; height: 9px; border-radius: 50%; background: #9AA3B5; animation: thought-dot 1.1s ease-in-out infinite; }
.thought__dots i:nth-child(2) { animation-delay: 0.15s; } .thought__dots i:nth-child(3) { animation-delay: 0.3s; }
.thought.is-dots .thought__dots { opacity: 1; }
.thought__tile, .thought__plus { position: absolute; top: 11.44%; opacity: 0; transform: scale(0.4); transition: opacity 0.25s ease, transform 0.45s var(--ease-spring); }
.thought__tile { display: grid; place-items: center; box-sizing: border-box; width: 15.7%; aspect-ratio: 1; border-radius: 24%; background: #fff; box-shadow: 0 1px 3px rgba(59, 39, 35, 0.25), inset 0 0 0 1px rgba(59, 39, 35, 0.08); }
.thought__tile--a { left: 55.67%; } .thought__tile--b { left: 81.11%; transition-delay: 0.12s; }
.thought__tile img { width: 72%; height: 72%; object-fit: contain; }
.thought__plus { left: 76.24%; top: 19.02%; translate: -50% -50%; font-weight: 800; font-size: clamp(16px, 1.7vw, 22px); line-height: 1; color: var(--red); transition-delay: 0.06s; }
.thought.is-idea .thought__tile, .thought.is-idea .thought__plus { opacity: 1; transform: scale(1); }
@keyframes thought-dot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-35%); opacity: 1; } }
@keyframes thought-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-0.6deg); } }
@media (prefers-reduced-motion: reduce) {
  .hero-art--beneficios .ferinha img, .thought__dots i { animation: none; }
  .thought__tile, .thought__plus { transition: none; }
}
/* plain dark card: no gradients, no glow behind the mascot */
.hero-slide:has(.hero-art--beneficios) { background: #2E1D1A; }
.hero-art--beneficios .ferinha::before { display: none; }

/* ---------- suggestions: small bulb in the bottom-right corner + its panel ---------- */
.suggest-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 61;
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 0; background: var(--red); color: #fff;
  box-shadow: 0 6px 16px rgba(234, 29, 44, 0.38); cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-spring);
}
.suggest-btn:hover, .suggest-btn[aria-expanded="true"] { background: var(--red-dark); transform: scale(1.06); }
.back-to-top { bottom: 74px; } /* stacks above the suggestion bulb */
.suggest {
  position: fixed; right: 22px; bottom: 72px; z-index: 62; width: min(320px, calc(100vw - 32px));
  padding: 14px; border-radius: var(--r-lg); background: var(--white); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-float); animation: rise 240ms var(--ease-out) both;
}
.suggest[hidden] { display: none; }
.suggest__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 14.5px; }
.suggest__close { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
@media (hover: hover), (min-width: 640px) { .suggest__close:hover { color: var(--red); } }
.suggest__form { display: grid; gap: 8px; }
.suggest__field { box-sizing: border-box; width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--white); color: inherit; font: inherit; font-size: 14px; resize: vertical; }
.suggest__field:focus { outline: 2px solid var(--red-soft); outline-offset: 1px; border-color: var(--red); }
.suggest__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.suggest__send { padding: 10px 14px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.suggest__send:disabled { opacity: 0.6; cursor: default; }
.suggest__status { min-height: 1.2em; margin: 0; font-size: 13px; }
.suggest__status.is-ok { color: #1E7B3A; } .suggest__status.is-err { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .suggest { animation: none; } }

/* cupons: sort + deadline controls. A panel of its own, two labelled rows of big display-font pills.
   Sorting is the dark pill (ink) on white; the deadline chips are the urgent ones, red-tinted at rest and
   solid red when on, each with its count. */
.cpn-tools {
  display: grid; gap: 14px; margin: 0 0 20px; padding: 16px 18px;
  border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--white);
  box-shadow: 0 3px 0 var(--line);
}
.cpn-tools__group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cpn-tools__label {
  flex: none; min-width: 104px; font-family: var(--font-display); font-size: 13px; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.cpn-tools__sep { display: none; }
.cpn-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px;
  border: 2px solid var(--gray-200); border-radius: 999px; background: var(--white);
  font-family: var(--font-display); font-size: 15.5px; font-weight: 800; letter-spacing: -0.005em; color: var(--ink); cursor: pointer;
  box-shadow: 0 3px 0 var(--gray-200);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .cpn-pill:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--ink); } }
.cpn-pill:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--gray-200); }
.cpn-pill.is-on { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 35%, transparent); }
/* the deadline chips: urgency colour */
#cuponsExpiring .cpn-pill { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red-ink); box-shadow: 0 3px 0 color-mix(in srgb, var(--red) 28%, transparent); }
@media (hover: hover), (min-width: 640px) { #cuponsExpiring .cpn-pill:hover:not(:disabled) { border-color: var(--red); } }
#cuponsExpiring .cpn-pill.is-on { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-dark); }
.cpn-pill em {
  display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: var(--white); color: var(--red-ink); font-style: normal; font-size: 13px; font-weight: 900;
}
.cpn-pill.is-on em { background: rgba(255, 255, 255, 0.95); color: var(--red-ink); }
.cpn-pill em.is-loading { background: transparent; }
.cpn-pill:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.cpn-pill:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
@media (max-width: 639.98px) {
  .cpn-tools { padding: 14px; }
  .cpn-tools__group { gap: 8px; }
  .cpn-tools__label { flex: 0 0 100%; }
  .cpn-pill { height: 46px; padding: 0 16px; font-size: 15px; }
}

/* loading spinner (SVG ring + turning arc), used in skeleton tiles, buttons and chips */
.spin { display: inline-flex; color: var(--red); }
.spin svg { animation: spin-turn 0.9s linear infinite; transform-origin: 50% 50%; }
.spin__track { opacity: 0.2; }
@keyframes spin-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin svg { animation: none; } }
.product-card.skel, .cpn--skeleton { display: grid; place-items: center; }
.btn.is-busy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: progress; }
.btn.is-busy .spin { color: currentColor; }
.cpn-pill .spin { color: var(--red); }
.cpn-pill.is-on .spin { color: #fff; }

/* offera coupons */
/* OFFERA's own offers (badge 'offera'): a brown frame and mark set them apart from the ordinary
   cards and from the red expiry edge; nothing else in the layout moves. */
.cpn__offera {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 5px;
  border-radius: 6px; background: var(--brown); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.cpn__offera img { display: block; flex: none; }
.cpn__card--offera {
  border-color: var(--brown-soft); background: linear-gradient(180deg, var(--brown-tint), var(--gray-25) 60%);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--brown) 22%, transparent);
}
@media (hover: hover), (min-width: 640px) { .cpn__card--offera:hover { border-color: var(--brown); background: linear-gradient(180deg, var(--brown-tint), var(--white) 60%); } }
.ctk__card--offera { border-color: var(--brown-soft); }
.ctk__card--offera .cpn__offera { height: 20px; font-size: 10.5px; }

/* sponsored coupons: a gold crown on the store logo and an "Oferta patrocinada" chip
   (condensed caps in the ticket/stamp label face, gold ink on a soft gold chip). Gold is
   used for nothing else on a card, so it reads as "paid for" at a glance; the card's
   rank and layout do not change. The "Por que vejo isso?" link sits above the list. */
.cpn__sponsored {
  flex: none; display: inline-flex; align-items: center; align-self: flex-start; max-width: 100%; height: 20px; padding: 0 9px; margin-bottom: 6px;
  border-radius: 5px; border: 1px solid var(--amber-line); background: var(--amber-soft); color: var(--amber-ink);
  font-family: "Barlow Condensed", var(--font-display); font-size: 12.5px; font-weight: 800; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctk__head .cpn__sponsored { margin-bottom: 0; height: 18px; padding: 0 7px; font-size: 11.5px; }
.cpn__card--sponsored, .ctk__card--sponsored { border-color: var(--amber-line); }
.crowned { position: relative; display: inline-grid; place-items: center; flex: none; }
.crown { position: absolute; left: 50%; top: -7px; width: 20px; height: 14px; margin-left: -10px; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 1px 1px rgba(70, 48, 0, .18)); line-height: 0; }
.crown svg { display: block; width: 100%; height: 100%; }
.ctk__logo:has(.crowned) { overflow: visible; }
.ctk__logo .crowned { width: 100%; height: 100%; }
.ctk__logo .crown { top: -6px; }
.spon { margin: 22px 0 10px; }
.spon__head, .spon__bar { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.spon__why { position: relative; font-size: 12.5px; color: var(--ink-3); }
.spon__why summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.spon__why summary::-webkit-details-marker { display: none; }
.spon__why p {
  position: absolute; right: 0; top: 24px; z-index: 5; width: min(320px, 80vw); margin: 0; padding: 10px 12px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-float);
  color: var(--ink-2); line-height: 1.45;
}

/* "Popular" mark on a coupon card: a small flame tag above the title */
.cpn__pop {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px;
  border-radius: 6px; background: var(--amber-soft); border: 1px solid var(--amber-line); color: var(--amber-ink);
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
}
.cpn__pop .ico { display: inline-flex; }

/* ---------- OFFERA Premium (template): hero cards + the Premium page ---------- */
.hero-slide--premium {
  background:
    radial-gradient(55% 80% at 80% 30%, rgba(255, 244, 196, 0.85), transparent 66%),
    linear-gradient(115deg, #F7DE8A 0%, #E9B93A 34%, #C99220 62%, #F2CB5B 100%);
  color: #2A1A00;
}
.hero-slide--premium .hero-slide__kicker { color: #6B4A00; opacity: 1; letter-spacing: 0.22em; font-weight: 800; }
.hero-slide--premium .hero-slide__title { letter-spacing: -0.015em; text-shadow: 0 1px 0 rgba(255, 244, 196, 0.6); }
.hero-slide--premium .hero-slide__title em { font-style: normal; color: #7A1019; }
.hero-slide--premium .hero-slide__text { opacity: 1; color: #4A3200; }
.hero-slide--premium .hero-slide__cta { background: linear-gradient(180deg, #2B1B0E, #1A0F06); color: #F8DE86; box-shadow: 0 3px 0 #000, inset 0 0 0 1px rgba(248, 222, 134, 0.45); }
.hero-art--prem { width: 400px; height: 230px; }
.hero-art--prem .ferinha { position: absolute; right: -6px; bottom: -34px; width: 250px; filter: drop-shadow(0 14px 18px rgba(70, 40, 0, 0.35)); }
.hero-art--prem .ferinha img { display: block; width: 100%; height: auto; }
.prem-card {
  position: relative; z-index: 1; width: 228px; justify-self: start; margin-left: -30px; display: grid; gap: 9px; padding: 15px 16px; border-radius: 18px;
  background: linear-gradient(180deg, #FFFDF4, #FBF0CC); color: #2A1A00; transform: rotate(-2.5deg);
  border: 1px solid rgba(184, 144, 26, 0.55); box-shadow: 0 22px 40px rgba(80, 45, 0, 0.38), inset 0 1px 0 #fff;
}
.prem-card--list { gap: 7px; }
.prem-card__head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.prem-card__head i { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.prem-card__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--amber-soft); color: var(--amber-ink); box-shadow: 0 2px 0 var(--amber-line); }
.prem-card__line { margin: 0; font-size: 14px; line-height: 1.35; }
.prem-card__line b { font-family: var(--font-display); font-weight: 900; font-size: 17px; color: var(--red-ink); }
.prem-card__chip { justify-self: start; padding: 2px 9px; border-radius: 999px; background: var(--green-soft, #E4F5EA); color: #1E7B3A; font-size: 12px; font-weight: 800; }
.prem-card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 7px 10px; border-radius: 10px; background: var(--gray-25); font-size: 13px; font-weight: 700; }
.prem-card__row em { flex: none; font-style: normal; padding: 1px 8px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 800; }
@media (max-width: 1099.98px) { .hero-art--prem { display: none; } }
@media (prefers-reduced-motion: reduce) { .prem-card { transform: none; } }

/* Premium page: hero with price switch, perk tiles, comparison table, closing band */
:root[data-theme="dark"] .site-drawer__link--premium { color: #FFD43B; }
[data-billing="month"] [data-show="year"], [data-billing="year"] [data-show="month"] { display: none !important; }
.prem-hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: center; margin: 8px 0 22px; padding: 42px 46px; border-radius: var(--r-xl); color: #fff; overflow: hidden;
  background: radial-gradient(50% 85% at 84% 38%, rgba(242, 185, 29, 0.34), transparent 66%), linear-gradient(120deg, #1F1311 0%, #3A2420 100%); }
.prem-hero__kicker { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #F6CF4A; }
.prem-hero__title { margin: 0 0 12px; max-width: 18ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.05; letter-spacing: -0.025em; }
.prem-hero__title em { font-style: normal; color: #F6CF4A; }
.prem-hero__sub { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.5; opacity: 0.86; }
.prem-bill { display: inline-flex; gap: 2px; margin: 26px 0 14px; padding: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); }
.prem-bill button { appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: rgba(255, 255, 255, 0.78); font: 700 14px var(--font-ui); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
@media (hover: hover), (min-width: 640px) { .prem-bill button:hover { color: #fff; } }
.prem-bill button[aria-pressed="true"] { background: #F6CF4A; color: #2A1A00; }
.prem-bill small { padding: 1px 7px; border-radius: var(--r-pill); background: #1E8E4E; color: #fff; font-size: 11px; font-weight: 900; }
.prem-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.prem-price__num { font-family: var(--font-display); font-weight: 900; font-size: clamp(42px, 5vw, 58px); line-height: 1; letter-spacing: -0.03em; }
.prem-price__per { font-size: 17px; font-weight: 700; opacity: 0.78; }
.prem-price__chip { align-self: center; padding: 3px 10px; border-radius: var(--r-pill); background: #F6CF4A; color: #2A1A00; font-size: 12.5px; font-weight: 900; }
.prem-price__sub { margin: 8px 0 0; font-size: 14px; opacity: 0.8; }
.prem-hero__cta { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.prem-hero__note { margin: 0; font-size: 13px; opacity: 0.75; }
.prem-cta[disabled] { opacity: 0.75; cursor: default; }
.prem-art { position: relative; height: 330px; }
.prem-art .ferinha { position: absolute; right: -28px; bottom: -64px; width: 250px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.45)); }
.prem-art .ferinha img { display: block; width: 100%; height: auto; }
.prem-art .prem-card { position: absolute; margin: 0; }
.prem-art .prem-card--alert { top: 4px; left: 0; transform: rotate(-3deg); }
.prem-art .prem-card--total { top: 138px; left: 64px; width: 236px; gap: 6px; transform: rotate(2deg); }
/* the cards are always cream, so they keep the light tokens in dark mode */
:root[data-theme="dark"] .prem-art .prem-card { --gray-25: #FBF9F8; --green-soft: #E4F5EA; --amber-soft: #FFF3C4; --amber-ink: #7A5A00; --amber-line: #F2DB85; --red-ink: #C4121F; --ink-3: #7C6A64; }
.prem-card__row--total { background: var(--amber-soft); }
.prem-card__row--total b { font-family: var(--font-display); font-weight: 900; font-size: 15px; color: var(--red-ink); }
.prem-perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 18px; }
.prem-perk { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 22px 20px 20px; border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--edge); }
.prem-perk__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--amber-soft); color: var(--amber-ink); box-shadow: 0 2px 0 var(--amber-line); }
.prem-perk h3 { margin: 6px 0 0; font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.prem-perk p { margin: 0; color: var(--ink-3); font-size: 14.5px; line-height: 1.45; }
.prem-perk__proof { justify-self: start; margin-top: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--gray-50); color: var(--ink-2); font-size: 12.5px; font-weight: 800; }
.prem-sec { margin: 0 0 44px; }
.prem-sec > h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -0.015em; }
.prem-sec__lead { margin: 0 0 18px; max-width: 70ch; color: var(--ink-3); font-size: 15.5px; }
.prem-fine { margin: 10px 0 0; color: var(--ink-3); font-size: 12.5px; }

/* the same purchase on both plans: two timelines that end in a price */
.prem-duel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.prem-duel__col { display: grid; grid-template-rows: auto 1fr auto; padding: 22px 24px; border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--edge); }
.prem-duel__col.is-premium { border-color: #E3B92B; background: linear-gradient(180deg, var(--amber-soft), var(--white) 70%); box-shadow: 0 3px 0 #E3B92B; }
.prem-duel__tag { display: inline-block; padding: 3px 12px; border-radius: var(--r-pill); background: var(--gray-100); font-size: 13px; font-weight: 900; }
.is-premium .prem-duel__tag { background: #F6CF4A; color: #2A1A00; }
.prem-steps { position: relative; display: grid; align-content: start; gap: 16px; margin: 18px 0; padding: 0; list-style: none; }
.prem-steps li { position: relative; display: grid; gap: 2px; padding-left: 28px; font-size: 14.5px; line-height: 1.45; }
.prem-steps li::before { content: ''; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--gray-300); background: var(--white); }
.prem-steps li:not(:last-child)::after { content: ''; position: absolute; left: 6px; top: 20px; bottom: -14px; width: 2px; background: var(--line); }
.prem-steps time { color: var(--ink-3); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.prem-steps .is-wait::before { border-color: var(--red); }
.prem-steps .is-wait time { color: var(--red-ink); }
.prem-steps .is-go::before { border-color: var(--green); background: var(--green); }
.prem-steps .is-go time { color: var(--green); }
.prem-duel__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--gray-300); font-weight: 700; color: var(--ink-3); }
.prem-duel__total b { font-family: var(--font-display); font-size: 28px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); }
.is-premium .prem-duel__total b { color: var(--red-ink); }

/* plans: monthly, annual (with the 12-month strip) and the break-even calculator */
.prem-pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.prem-plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--edge); }
.prem-plan--best { border-color: #E3B92B; background: linear-gradient(180deg, var(--amber-soft), var(--white) 60%); box-shadow: 0 3px 0 #E3B92B; }
.prem-plan__tag { position: absolute; top: -12px; right: 18px; padding: 3px 12px; border-radius: var(--r-pill); background: #F6CF4A; color: #3A2A00; font-size: 12px; font-weight: 900; }
.prem-plan__name { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 900; }
.prem-plan__price { margin: 0; }
.prem-plan__price b { font-family: var(--font-display); font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.prem-plan__price span { margin-left: 4px; color: var(--ink-3); font-size: 16px; font-weight: 700; }
.prem-plan__meta { margin: 0; color: var(--ink-3); font-size: 13.5px; }
.prem-plan__meta strong { margin-left: 4px; color: var(--green); font-weight: 900; }
.prem-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.prem-months i { height: 10px; border-radius: 3px; background: var(--gray-300); }
.prem-months i.is-free { background: #F2B91D; }
.prem-months__legend { display: flex; justify-content: space-between; margin: -4px 0 0; color: var(--ink-3); font-size: 12px; font-weight: 800; }
.prem-months__legend .is-free { color: var(--amber-ink); }
.prem-plan__list { flex: 1; display: grid; align-content: start; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 14.5px; }
.prem-plan__list li { position: relative; padding-left: 24px; }
.prem-plan__list li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(-45deg); }
.prem-plan .btn { align-self: flex-start; margin-top: 8px; }
.prem-calc { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 2px dashed var(--gray-300); border-radius: var(--r-lg); background: var(--gray-25); }
.prem-calc h3 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.prem-calc__q { margin: 0; font-size: 14.5px; font-weight: 700; }
.prem-calc__opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.prem-calc__opts button { appearance: none; min-height: 42px; border: 2px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); font: 800 15px var(--font-ui); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
@media (hover: hover), (min-width: 640px) { .prem-calc__opts button:hover { border-color: var(--gray-300); } }
.prem-calc__opts button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.prem-calc__out { margin: 4px 0 0; font-size: 15px; line-height: 1.55; }
.prem-calc__out b { font-family: var(--font-display); font-size: 19px; font-weight: 900; color: var(--red-ink); white-space: nowrap; }
.prem-calc__hint { margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; }
.prem-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin: 20px 0 0; padding: 0; list-style: none; }
.prem-trust li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.prem-trust b { color: var(--ink); }
.prem-trust__ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--green-soft); color: var(--green); }

/* comparison table: grouped rows, sticky plan header, meters for the list limits */
.prem-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 2px solid var(--line); border-radius: var(--r-lg); overflow: clip; background: var(--white); box-shadow: var(--edge); font-size: 15px; }
.prem-table th, .prem-table td { padding: 14px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.prem-table thead th { position: sticky; top: 0; z-index: 2; border-top: 0; vertical-align: bottom; background: var(--page); box-shadow: 0 1px 0 var(--line); }
.prem-table thead th.is-premium { background: linear-gradient(160deg, #F7DE8A, #EDBF45); color: #2A1A00; }
.prem-table__plan { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 900; }
.prem-table__price { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 700; opacity: 0.8; }
.prem-table tbody th { width: 30%; font-weight: 700; }
.prem-table sup { margin-left: 2px; color: var(--red-ink); font-size: 10px; font-weight: 900; }
.prem-table td { width: 35%; color: var(--ink-2); }
.prem-table td.is-premium { background: color-mix(in srgb, var(--amber-soft) 55%, transparent); color: var(--ink); font-weight: 600; }
.prem-table td > span:last-child { display: block; overflow: hidden; }
.prem-table td small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
@media (hover: hover), (min-width: 640px) { .prem-table tbody tr:not(.prem-group):hover > * { background-image: linear-gradient(rgba(127, 90, 60, 0.06), rgba(127, 90, 60, 0.06)); } }
.prem-table .prem-group th { padding: 18px 20px 8px; background: var(--gray-25); color: var(--ink-3); font-size: 11.5px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.prem-y, .prem-n, .prem-inf { float: left; display: grid; place-items: center; width: 20px; height: 20px; margin: 1px 10px 0 0; border-radius: 50%; font-size: 11.5px; font-weight: 900; }
.prem-y { background: var(--green-soft); color: var(--green); }
.prem-n { background: var(--gray-100); color: var(--ink-3); }
.prem-inf { background: #F6CF4A; color: #2A1A00; font-size: 16px; line-height: 1; }
.prem-dots { float: left; display: flex; gap: 3px; margin: 7px 10px 0 0; }
.prem-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); opacity: 0.55; }
.prem-meter { float: left; position: relative; width: 72px; height: 8px; margin: 7px 12px 0 0; border-radius: var(--r-pill); background: var(--gray-100); overflow: hidden; }
.prem-meter::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: var(--ink-3); }
.is-premium .prem-meter::after { background: linear-gradient(90deg, #EDBF45, #C99220); }
.prem-x { margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); background: #1E8E4E; color: #fff; font-size: 11px; font-style: normal; font-weight: 900; }
.prem-table tfoot td { padding-top: 16px; padding-bottom: 18px; vertical-align: middle; }
.prem-table__have { color: var(--ink-3); font-size: 13.5px; font-weight: 700; }
.prem-notes { display: grid; gap: 4px; max-width: 900px; margin: 14px 0 0; padding-left: 18px; color: var(--ink-3); font-size: 12.5px; }

.prem-faq { margin: 0 0 36px; max-width: 820px; }
.prem-faq h2 { font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.prem-faq details { padding: 14px 4px; border-top: 1px solid var(--line); }
.prem-faq summary { cursor: pointer; font-weight: 700; }
.prem-faq p { margin: 8px 0 0; color: var(--ink-3); font-size: 14.5px; }
.prem-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 0 0 44px; padding: 28px 34px; border-radius: var(--r-xl); color: #fff;
  background: radial-gradient(40% 120% at 90% 50%, rgba(242, 185, 29, 0.28), transparent 70%), linear-gradient(120deg, #1F1311 0%, #3A2420 100%); }
.prem-end h2 { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.prem-end p { margin: 4px 0 0; opacity: 0.8; }
@media (max-width: 1099.98px) {
  .prem-hero { grid-template-columns: minmax(0, 1fr); }
  .prem-art { display: none; }
  .prem-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prem-pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prem-calc { grid-column: 1 / -1; }
}
@media (max-width: 719.98px) {
  .prem-hero { padding: 26px 20px; }
  .prem-end { padding: 22px 20px; }
  .prem-sec > h2 { font-size: 24px; }
  .prem-perks, .prem-duel, .prem-pricing, .prem-trust { grid-template-columns: minmax(0, 1fr); }
  .prem-plan--best { order: -1; }
  .prem-table, .prem-table tbody, .prem-table tfoot, .prem-table tbody th, .prem-table td { display: block; width: auto; }
  .prem-table thead { display: none; }
  .prem-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
  .prem-table tbody tr:first-child { border-top: 0; }
  .prem-table tbody tr.prem-group { display: block; }
  .prem-table tbody th { grid-column: 1 / -1; padding: 12px 14px 4px; border-top: 0; }
  .prem-table .prem-group th { padding: 14px 14px 8px; }
  .prem-table td { padding: 6px 14px 12px; border-top: 0; font-size: 13.5px; }
  .prem-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
  .prem-table td.is-premium::before { color: var(--amber-ink); }
  .prem-meter { width: 40px; }
  .prem-table tfoot tr { display: block; border-top: 1px solid var(--line); }
  .prem-table tfoot td:not(.is-premium) { display: none; }
  .prem-table tfoot td.is-premium { padding: 14px; background: none; }
  .prem-table tfoot td.is-premium::before { content: none; }
}
@media (prefers-reduced-motion: reduce) { .prem-art .prem-card { transform: none; } }

/* Ads and house promos (docs/plans/offera-premium.md §6, §7). .ad-slot reserves
   its space so a late ad cannot shift the layout; Premium never sees either. */
.ad-slot { display: block; width: 100%; margin: 24px auto; text-align: center; overflow: hidden; }
.ad-slot::before { content: 'Publicidade'; display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.ad-slot[data-placement="grid-end"] { min-height: 130px; max-width: 970px; }
.ad-slot[data-placement="content"] { min-height: 280px; max-width: 728px; }
.ad-slot[data-placement="sidebar"] { min-height: 600px; max-width: 300px; }
@media (max-width: 719.98px) { .ad-slot[data-placement="sidebar"] { display: none; } }
.promo { display: block; }
.promo--inline { margin: 10px 0 0; padding: 10px 14px; border: 2px solid #E3B92B; border-radius: var(--r-md, 12px); background: var(--amber-soft); color: var(--ink); font-size: 14px; }
.promo--inline a { font-weight: 800; color: var(--red-ink); text-decoration: underline; }
[data-plan="premium"] .ad-slot, [data-plan="premium"] .promo { display: none !important; }

/* community coupons: sent in by visitors, approved by an admin (feature B) */
.cpn__sent { margin: -4px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.sub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sub-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--white); }
.sub-item__code { font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.sub-item__meta { font-size: 13px; color: var(--ink-3); }
.sub-item__reason { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--ink-2); }
.sub-status { align-self: start; font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--gray-100); color: var(--ink-2); white-space: nowrap; }
.sub-status--pending { background: #FFF4DB; color: #8A5A00; }
.sub-status--approved { background: var(--green-soft); color: var(--green); }
.sub-status--rejected { background: #FDE7E9; color: var(--red); }
.send-form { display: grid; gap: 14px; max-width: 640px; }
.send-form .field { display: grid; gap: 6px; }
.send-form label, .send-form legend { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.send-form input[type="text"], .send-form input[type="date"], .send-form input[type="number"], .send-form input[type="url"], .send-form textarea {
  font: inherit; font-size: 15px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--gray-25); color: var(--ink); min-width: 0; }
.send-form input:focus, .send-form textarea:focus { outline: 0; border-color: var(--red); background: var(--white); }
/* value box: looks like the inputs above; the unit (R$ before, % after) hugs the digits */
.send-form .amount { display: flex; align-items: baseline; gap: 4px; font-size: 15px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--gray-25); color: var(--ink); cursor: text; min-width: 0; }
.send-form .amount:focus-within { border-color: var(--red); background: var(--white); }
.send-form .amount__unit { font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.send-form .amount__unit[hidden] { display: none; }
.send-form .amount--empty .amount__unit { color: var(--ink-3); }
.send-form .amount__sizer { display: inline-grid; min-width: 0; max-width: 100%; }
.send-form .amount__sizer::after { content: attr(data-value); grid-area: 1 / 1; visibility: hidden; white-space: pre; font: inherit; padding-right: 1px; }
.send-form .amount .amount__input { grid-area: 1 / 1; width: 0; min-width: 100%; font: inherit; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; }
.send-form .amount .amount__input:focus { outline: 0; background: transparent; }
.send-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.send-form .radios { display: flex; gap: 8px; flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
.send-form .radios label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 2px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 700; }
.send-form .radios input { accent-color: var(--red); }
.send-form .hint { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.send-form .err { font-size: 14px; font-weight: 700; color: var(--red); margin: 0; }
.send-done { max-width: 640px; padding: 24px; border: 2px solid var(--green-soft); border-radius: 18px; background: var(--green-soft); }
.send-done h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 22px; }
.send-done p { margin: 0; color: var(--ink-2); }
.cpn-send { margin: 4px 0 0; font-size: 14px; }
.cpn-send a { color: var(--red); font-weight: 700; }
@media (max-width: 719.98px) { .send-form .row2 { grid-template-columns: minmax(0, 1fr); } }

/* busca: one thin row of coupons above the offers (products stay the focus) */
#buscaCoupons, .listing > div:has(> #buscaCoupons) { min-width: 0; }
.cslim-row { min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 6px 10px 6px 14px; min-height: 48px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--gray-25); }
.cslim-row__label { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cslim-row__list { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 2px 4px; list-style: none;
  overflow-x: auto; scrollbar-width: none; }
.cslim-row__list::-webkit-scrollbar { display: none; }
.cslim-row__nav { flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white); color: var(--ink-2); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
@media (hover: hover), (min-width: 640px) { .cslim-row__nav:hover { border-color: var(--gray-300); color: var(--ink); } }
.cslim-row__nav[hidden] { display: none; }
.cslim { text-decoration: none; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 5px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: border-color var(--t-fast), background var(--t-fast); }
@media (hover: hover), (min-width: 640px) { .cslim:hover { border-color: var(--gray-300); } }
.cslim__logo { position: relative; width: 24px; height: 24px; display: inline-grid; place-items: center; flex: none; }
.cslim__logo img, .cslim__logo > .crowned > * { max-width: 100%; max-height: 100%; }
.cslim__logo img { width: 24px; height: 24px; object-fit: contain; border-radius: 6px; }
.cslim__logo .crowned { width: 100%; height: 100%; }
.cslim__logo .crown { top: -7px; width: 15px; height: 10.5px; margin-left: -7.5px; }
.cslim__off { font-weight: 800; color: var(--red-ink); }
.cslim__store { color: var(--ink-2); max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.cslim__cta { font-weight: 800; font-size: 12px; color: var(--red-ink); padding-left: 8px; border-left: 1px dashed var(--gray-300); }
.cslim--open .cslim__cta { letter-spacing: .05em; color: var(--ink); }
@media (max-width: 600px) { .cslim-row__label { display: none; } .cslim__store { display: none; } }

/* Categorias (home): three rows, then a plus button */
.cat-tiles .cat-tile2.is-extra { display: none; }
.cat-more { display: flex; align-items: center; gap: 10px; margin: 16px auto 2px; padding: 8px 18px 8px 10px; border: 2px solid var(--line); border-radius: 999px; background: var(--white); box-shadow: 0 3px 0 var(--line); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.cat-more[hidden] { display: none; }
@media (hover: hover), (min-width: 640px) { .cat-more:hover { border-color: var(--red); color: var(--red-ink); } }
.cat-more:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.cat-more__plus { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--red); }
.cat-more__plus::before, .cat-more__plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.5px; margin: -1.25px 0 0 -6px; border-radius: 2px; background: #fff; transition: transform 0.2s ease; }
.cat-more__plus::after { transform: rotate(90deg); }
.cat-more.is-open .cat-more__plus::after { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .cat-more__plus::before, .cat-more__plus::after { transition: none; } }

/* "Powered by virtues.pro" pill in the footer's bottom row */
.site-footer__powered { order: 3; flex: 0 0 100%; display: flex; justify-content: center; margin: 14px 0 0; }
.site-footer__powered picture { display: block; width: min(310px, 100%); }
.site-footer__powered img { display: block; width: 100%; height: auto; }

/* Ofertas & Cashback (home): one more card per row than the other grids */
@media (min-width: 1280px) { .cashback .product-grid { grid-template-columns: repeat(6, 1fr); } }

/* Gated pages (theme-boot.js data-gate): <main> and the footer stay hidden until pageReady()
   reveals them together; the header is already there, and a spinner (shown only if the wait
   passes 150ms, so a fast load never flashes it) tells the visitor the page is coming. */
main, [data-include="footer"] { transition: opacity 0.28s ease; }
html.page-gate main, html.page-gate [data-include="footer"] { opacity: 0; }
html.page-gate body::after {
  content: ''; position: fixed; left: 50%; top: 52%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 4px solid var(--line, #e6dedb); border-top-color: var(--red, #EA1D2C); border-radius: 50%;
  animation: gate-in 0.2s 0.15s both, gate-spin 0.8s linear infinite; pointer-events: none;
}
/* The header partial arrives with the scripts. Until then its slot holds the height the header will
   have, so the page below does not jump down when it lands (heights of the header per width, measured). */
[data-include="header"]:empty { min-height: 188px; }
@media (min-width: 760px) { [data-include="header"]:empty { min-height: 150px; } }
@media (min-width: 1180px) { [data-include="header"]:empty { min-height: 100px; } }
/* Cashback: the rates list is thousands of px tall once it arrives. Holding a screenful from the first paint keeps the
   panels below out of view, so they are not pushed down in front of the visitor. */
#cbStoresBody:empty, .cbstores__loading { min-height: 100vh; min-height: 100svh; }
@keyframes gate-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gate-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  main, [data-include="footer"] { transition: none; }
  html.page-gate body::after { animation: gate-in 0.2s 0.15s both, gate-pulse 1.2s ease-in-out infinite; border-top-color: var(--line, #e6dedb); background: var(--red, #EA1D2C); }
}
@keyframes gate-pulse { 50% { opacity: 0.35; } }

/* ---------- 100 · 404 page ---------- */
.not-found { padding: 80px 20px 96px; }
.not-found__code { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(88px, 18vw, 168px); line-height: 1; letter-spacing: -0.02em; color: var(--red); }
.not-found .empty-state__title { font-size: clamp(22px, 3vw, 28px); margin-top: 8px; }
.not-found .empty-state__text { font-size: 15px; }
.not-found__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
.not-found__actions .btn { margin-top: 0; }

/* ======================================================================
   SEO: server-rendered pages (crawler blocks, store pages, store hubs,
   /lojas, 404, footer links). Tokens and existing components only; every
   selector here is new and scoped to the seo-/faq/site-footer__seo names.
   ====================================================================== */

.seo-block { margin: 28px 0; }
.seo-block__para { margin: 0 0 12px; color: var(--ink-2); font-size: 14.5px; max-width: 70ch; }
.seo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.seo-list li { font-size: 14px; color: var(--ink-2); }
.seo-list a { color: var(--red-ink); font-weight: 700; }
@media (hover: hover), (min-width: 640px) { .seo-list a:hover { text-decoration: underline; } }
.seo-list__meta { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }

.seo-copy { margin: 28px 0; }
.seo-copy__note { color: var(--ink-3); font-size: 13px; }

.faq { margin: 28px 0; max-width: 820px; }
.faq h2 { font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.faq details { padding: 14px 4px; border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { margin: 8px 0 0; color: var(--ink-3); font-size: 14.5px; }

.seo-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.seo-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
.seo-card a { display: flex; flex-direction: column; gap: 8px; color: inherit; }
@media (hover: hover), (min-width: 640px) { .seo-card a:hover .seo-card__title { color: var(--red-ink); } }
.seo-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: var(--r-sm); }
.seo-card__title { font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.seo-card__price { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink); }
.seo-card__badge { align-self: flex-start; padding: 3px 10px; border-radius: var(--r-pill); background: var(--red-soft); color: var(--red-ink); font-weight: 800; font-size: 13px; }
.seo-card__meta { font-size: 12px; font-weight: 600; color: var(--ink-3); }

.seo-search { display: flex; gap: 10px; max-width: 560px; margin: 0 0 28px; }
.seo-search input { flex: 1; min-width: 0; min-height: 46px; padding: 0 16px; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--white); color: var(--ink); font: inherit; }
.seo-search input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* footer: the top stores and categories as plain links, under the footer's own columns */
.site-footer__seo { padding-block: 24px 8px; display: grid; gap: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
@media (min-width: 640px) { .site-footer__seo { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer__seo ul { display: block; columns: 2; column-gap: 20px; }
@media (min-width: 640px) { .site-footer__col--wide ul { columns: 3; } }
.site-footer__seo li { break-inside: avoid; margin: 0 0 9px; }

/* "Me lembrar" calendar button on coupon cards (js/remind-dialog.js) */
.remind-btn {
  flex: none; position: relative; z-index: 3;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-2);
  cursor: pointer;
}
.remind-btn:hover, .remind-btn:focus-visible { color: var(--red-ink); }
.ctk__head .remind-btn { margin-left: auto; }

/* ---------- mobile touch targets + press feedback (Phase 1) ----------
   Every tappable thing reaches 44x44. Small round icons grow an invisible
   ::after hit area instead of a bigger drawing; pills/buttons get real height.
   Phone widths only: desktop is untouched. */
@media (max-width: 639.98px) {
  .share__trigger, .share__link, .vote .vote__btn, .ctk__go, .cpn__go, .store-go,
  .storechip, .brand-band__cta, .panel__link, .cbrates__all, .site-header__pill, .acct--login, .cpn__copy { position: relative; }
  .share__trigger::after, .share__link::after, .vote .vote__btn::after,
  .save-heart::after, .hscroll__arrow::after, .suggest-btn::after, .ctk__go::after, .cpn__go::after,
  .store-go::after, .storechip::after, .brand-band__cta::after, .panel__link::after, .cbrates__all::after,
  .site-header__pill::after, .acct--login::after, .cpn__copy::after {
    content: ""; position: absolute; inset: -8px; /* 28px drawing -> 44px target */
  }
  .share__trigger, .share__link { width: 28px; height: 28px; }
  .share__trigger::after, .share__link::after { inset: -9px; } /* 1px border sits outside the abs-pos box */
  /* share: the network icons open as a column under the trigger (a row of four
     44px targets would not fit a half-width card); 16px between the 28px
     drawings leaves the 44px targets touching, never overlapping */
  .share { flex-direction: column; align-items: flex-end; gap: 16px; }
  .share__panel { flex-direction: column; gap: 16px; max-width: none; max-height: 0; transition: max-height var(--t-fast) var(--ease-out); }
  .share:focus-within .share__panel, .share.is-open .share__panel { max-width: none; max-height: 260px; }
  .share:hover .share__panel { max-width: none; }
  /* like / dislike */
  .vote { gap: 16px; }
  .vote .vote__btn { width: 28px; height: 28px; }
  .cpn__votes .vote { gap: 0; }
  .cpn__votes .vote__btn { width: 100%; height: 44px; }
  .cpn__votes .vote__btn::after { inset: 0; }
  /* heart, carousel arrows, floating buttons */
  .save-heart::after { inset: -6px; }
  .hscroll__arrow::after { inset: -8px; }
  .suggest-btn::after { inset: -2px; }
  .carousel__dot::after { inset: -19px -8px; } /* 7px dot -> 44px tall, 22px+ wide targets */
  .carousel__dots { gap: 14px; }
  /* pills and buttons */
  .ctk__go::after { inset: -9px; }
  .cpn__go::after { inset: -7px; }
  .store-go::after { inset: -9px; }
  .store-go--wide::after { inset: -3px; }
  .storechip::after { inset: -6px -2px; }
  .store-chips { gap: 10px; }
  .brand-band__cta::after { inset: -5px; }
  .panel__link::after { inset: -10px -6px; }
  .cbrates__all::after { inset: -12px -6px; }
  .site-header__pill::after { inset: -4px -6px; }
  .acct--login::after { inset: -5px; }
  .cpn__copy::after { inset: -6px -4px; }
  .site-search__select { min-height: 44px; }
  .cpn__activate, .hero-slide__cta, .suggest__send { min-height: 44px; }
  .cpn__code { height: 50px; }
  .spon__why summary, .faq summary, .prem-faq summary { display: inline-block; padding-block: 13px; }
  .store-finder__letter { min-width: 44px; height: 44px; }
  .store-pick__more, .filters-trigger { min-height: 44px; }
  .breadcrumb a { display: inline-block; padding-block: 13px; margin-block: -13px; min-width: 44px; }
  .ctk .cpn__code { height: 48px; }
  .ctk__activate { height: 44px; }
  .trust__inner a { display: inline-flex; align-items: center; min-height: 44px; }
  /* cookie bar: 44px buttons, still a slim one-line bar */
  .consent { padding-block: 4px; }
  .consent__actions { gap: 8px; }
  .consent__btn { min-height: 44px; }
}

/* press feedback on touch: primary buttons and cards answer the tap right away
   (hover is gated to real pointers above, so these are the touch states) */
@media (hover: none) and (max-width: 639.98px) {
  .btn--primary:active, .cpn__activate:active, .hero-slide__cta:active, .consent__btn--yes:active { filter: brightness(0.92); }
  .btn--primary:active, .hero-slide__cta:active { transform: translateY(2px); }
  .product-card:active, .cpn__card:active, .ctk:active, .cat-tile:active, .cat-tile2:active, .shortcut:active, .promo:active, .feature-card:active {
    transform: scale(0.985); transition: transform 90ms ease-out;
  }
  .store-go:active, .storechip:active, .cpn__go:active, .ctk__go:active { filter: brightness(0.9); }
  .share__trigger:active, .share__link:active, .save-heart:active { transform: scale(0.92); }
}

/* ---------- mobile home (Phase 2): deal, small shortcuts, compact coupons ----------
   Phones only. Order: header + search, store pills, oferta do dia, shortcut row,
   coupons, then the rest. The hero carousel stays in the page for desktop. */
.page-home .m-only { display: none; }
@media (max-width: 639.98px) {
  .page-home .home-top { display: none; }
  .page-home .home { display: flex; flex-direction: column; padding-top: 12px; }
  .page-home .home > * { order: 10; }
  .page-home .deal-split { display: contents; }
  .page-home .m-pills { display: block; order: 1; margin-top: 0; padding: 10px 0 10px 12px; }
  .page-home .m-pills[hidden] { display: none; }
  .page-home .m-pills__row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-right: 12px; }
  .page-home .m-pills__row::-webkit-scrollbar { display: none; }
  .page-home .m-pills .storechip { height: 44px; padding-inline: 6px 14px; font-size: 13px; }
  .page-home .m-pills .storechip img, .page-home .m-pills .storechip .mono { width: 30px; height: 30px; border-radius: 50%; }
  .page-home .deal-day { order: 2; margin-top: 12px; padding: 14px; }
  .page-home .deal-day .panel__head { display: flex; align-self: stretch; width: 100%; margin-bottom: 10px; }
  .page-home .deal-day .panel__link.m-only { display: inline; }
  .page-home .deal-day .panel__title, .page-home .coupons-panel .panel__title { margin-right: auto; }
  .page-home .m-short { display: grid; order: 3; margin-top: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 10px 6px; }
  .page-home .m-short__i { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; text-align: center; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--ink); }
  .page-home .m-short__i span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--red-tint); color: var(--red-ink); }
  .page-home .coupons-panel { order: 4; margin-top: 12px; padding: 14px; }
  .page-home .coupons-panel .panel__head { display: flex; margin-bottom: 8px; }
  .page-home .home > .panel, .page-home .home > .shelf, .page-home .home > .promo-pair, .page-home .home > .brand-band { margin-top: 12px; }

  /* what moved out of the first screen */
  .page-home .ticket-row { display: none; }
  .page-home .shortcuts { order: 11; display: block; margin: 12px 0 0; }
  .page-home .shortcut:not(.shortcut--fera) { display: none; }

  /* oferta do dia, compact: photo left, price story right, full-width button */
  .page-home .deal-day .spark-stamp, .page-home .deal-day .kinds, .page-home .deal-day .offer-source, .page-home .deal-day .store-go,
  .page-home .deal-day .product-card__benefit, .page-home .deal-day .product-card__cpn { display: none; }
  .page-home .feature-card { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-content: start; }
  .page-home .feature-card__body { display: contents; }
  .page-home .feature-card__media { grid-column: 1; grid-row: 1 / span 8; width: 124px; aspect-ratio: 1; padding: 6px; }
  .page-home .feature-card__body > * { grid-column: 2; margin: 0 0 4px; }
  .page-home .feature-card__name { font-size: 15px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .page-home .feature-card__body > .feature-card__cta { grid-column: 1 / -1; margin: 8px 0 0; }

  /* coupons: one compact row each */
  .page-home .coupon-list { list-style: none; margin: 0; padding: 0; }
  .crow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); animation: none; }
  .crow:first-child { border-top: 0; padding-top: 0; }
  .crow__logo { display: grid; place-items: center; width: 48px; height: 48px; }
  .crow__logo img, .crow__logo .mono { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; font-size: 20px !important; }
  .crow__mid { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .crow__store { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; font-size: 14px; }
  .crow__store b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crow__store .cpn__sponsored { flex-basis: auto; margin: 0; height: 18px; padding: 0 6px; font-size: 11px; }
  .crow__off { font-style: normal; font-weight: 800; font-size: 16px; color: var(--red-ink); }
  .crow__title { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crow__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-sm); background: var(--red); color: #fff; border: 0; font: inherit; font-weight: 700; font-size: 13px; box-shadow: 0 3px 0 var(--red-dark); }
  .crow__btn:active { transform: translateY(2px); box-shadow: none; }
  .crow__reveal { display: none; grid-column: 2 / -1; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
  .crow.cpn--revealed .crow__reveal { display: flex; }
  .crow__reveal .cpn__code-text { flex: 1; min-width: 0; padding: 10px 12px; border: 1.5px solid var(--red); border-radius: var(--r-sm); background: var(--red-tint); text-align: center; font-weight: 800; letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; }
  .crow__reveal .cpn__copy { min-height: 44px; }
  .crow__foot { grid-column: 2 / -1; display: flex; align-items: center; gap: 12px; min-height: 28px; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
  .crow__foot { margin-top: -4px; }
  .crow__foot .share { margin-left: auto; align-items: center; }
  .crow__foot .offer-source.cpn__votes { margin: 0; border: 0; border-radius: 0; width: auto; }
  .crow__foot .cpn__votes .vote { display: flex; width: auto; }
  .crow__foot .cpn__votes .vote__btn { width: 44px; height: 44px; }
  .crow__foot .cpn__votes .vote__btn--dislike { border-left: 0; }
}

/* ---------- mobile home (Phase 2): panel header links fit at 360-430px ----------
   "Ver todos os cupons" is nowrap and overflowed the coupons panel's right edge.
   On phones the pill may wrap onto two lines (label text unchanged). Desktop untouched. */
@media (max-width: 639.98px) {
  .page-home .coupons-panel .panel__head { flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
  .page-home .coupons-panel .panel__link,
  .page-home .deal-day .panel__link { white-space: normal; max-width: 60%; text-align: center; line-height: 1.2; border-radius: 14px; padding: 4px 10px; }
  .page-home .coupons-panel .panel__title { flex: 0 1 auto; }
}

/* ---------- mobile bottom tab bar (js/tabbar.js) ---------- */
.tabbar { display: none; }
@media (max-width: 639.98px) {
  :root { --tabbar-h: 60px; --tabbar-space: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    height: var(--tabbar-space); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--white); border-top: 1px solid var(--line);
  }
  .tabbar__tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 44px; font-size: 11px; font-weight: 600; line-height: 1.1;
    color: var(--ink-3); text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .tabbar__tab.is-on { color: var(--red); }
  .tabbar__tab:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; border-radius: 10px; }
  html.has-tabbar body { padding-bottom: var(--tabbar-space); }
  html.has-tabbar .site-drawer__link--tab { display: none; } /* now in the tab bar */
  /* floating things sit above the bar */
  html.has-tabbar .suggest-btn { bottom: calc(var(--tabbar-space) + 14px); }
  html.has-tabbar .back-to-top { bottom: calc(var(--tabbar-space) + 66px); }
  html.has-tabbar .suggest { bottom: calc(var(--tabbar-space) + 64px); }
  html.has-tabbar .consent { bottom: calc(var(--tabbar-space) + 8px); }
  html.has-tabbar body .toast { bottom: calc(var(--tabbar-space) + 14px); }
}

/* ---------- coupon bottom sheet (phones; render.js openCouponSheet) ---------- */
.csheet { display: none; }
@media (max-width: 639.98px) {
  html.csheet-open { overflow: hidden; }
  .csheet { display: block; position: fixed; inset: 0; z-index: 120; pointer-events: none; }
  .csheet__backdrop { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity var(--t-base) var(--ease-out); }
  .csheet__panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 12px; padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--white); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-float);
    transform: translateY(100%); transition: transform var(--t-base) var(--ease-out); outline: 0;
  }
  .csheet.is-open { pointer-events: auto; }
  .csheet.is-open .csheet__backdrop { opacity: 1; }
  .csheet.is-open .csheet__panel { transform: none; }
  .csheet__grip { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--gray-200); }
  .csheet__head { display: flex; align-items: center; gap: 12px; }
  .csheet__logo { display: grid; place-items: center; width: 48px; height: 48px; }
  .csheet__logo img, .csheet__logo .mono { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; font-size: 20px !important; }
  .csheet__store { flex: 1; min-width: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .csheet__close { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--gray-50); color: var(--ink-2); }
  .csheet__off { margin: 0; font-size: 22px; font-weight: 800; color: var(--red-ink); }
  .csheet__title { margin: -6px 0 0; font-size: 14px; color: var(--ink-3); }
  .csheet__code { display: grid; place-items: center; min-height: 64px; padding: 8px 12px; border: 2px dashed var(--red); border-radius: var(--r-md); background: var(--red-tint); }
  .csheet__code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 28px; font-weight: 800; letter-spacing: .06em; color: var(--ink); word-break: break-all; text-align: center; user-select: all; }
  .csheet__copy, .csheet__go { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; border-radius: var(--r-md); font: inherit; font-weight: 800; font-size: 16px; text-decoration: none; }
  .csheet__copy { border: 0; background: var(--red); color: #fff; }
  .csheet__copy--done { background: var(--green); }
  .csheet__go { border: 2px solid var(--line); background: var(--white); color: var(--ink-2); }
  .csheet__go--main { border: 0; background: var(--red); color: #fff; }
  .csheet__copy:active, .csheet__go:active { transform: translateY(2px); }
  .csheet__copy:focus-visible, .csheet__go:focus-visible, .csheet__close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
  .csheet__valid { margin: 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-3); }
  .csheet__foot { display: flex; align-items: center; gap: 12px; }
  .csheet__foot .cpn__votes { flex: 1; margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); }
  .csheet__foot .share { flex: none; }
  @media (prefers-reduced-motion: reduce) { .csheet__panel, .csheet__backdrop { transition: none; } }
}

/* ---------- /busca on phones: filter sheet, chips, recent searches ---------- */
.facets__body { display: grid; gap: 18px; }
.facets__head, .facets__foot, .busca-chips, .busca-sort, .filters-trigger__n, .recent { display: none; }
@media (max-width: 639.98px) {
  html[data-page="busca"] .site-search__select { display: none; }
  html.filters-open { overflow: hidden; }
  .busca-chips { display: flex; gap: 8px; overflow-x: auto; margin: 12px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 2px; scrollbar-width: none; }
  .busca-chips:empty { display: none; }
  .busca-chips::-webkit-scrollbar { display: none; }
  .busca-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1.5px solid var(--red); background: var(--red-tint); color: var(--red-ink); font: inherit; font-size: 14px; font-weight: 700; }
  .busca-chip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
  .listing__toolbar { gap: 8px; }
  .listing__toolbar .save-search { white-space: nowrap; }
  .listing__count { flex: 1 1 0; min-width: 80px; }
  .busca-sort { display: block; flex: 1 1 60%; min-width: 0; height: 44px; font-size: 16px; }
  .filters-trigger { gap: 6px; flex: none; }
  .filters-trigger__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; }
  .filters-trigger__n[hidden] { display: none; }
  .listing { margin-top: 8px; }
  .facets[data-open="true"] { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; gap: 0; max-height: none; padding: 0; border: 0; border-radius: 0; overflow: hidden; box-shadow: none; }
  .facets__head { display: flex; align-items: center; justify-content: space-between; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px 16px; border-bottom: 1px solid var(--line); }
  .facets__head h2 { margin: 0; font-size: 18px; }
  .facets__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--gray-50); color: var(--ink-2); }
  .facets__close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
  .facets[data-open="true"] .facets__body { flex: 1; overflow-y: auto; padding: 16px; overscroll-behavior: contain; align-content: start; }
  .facet-group--sort { display: none; }
  .facets[data-open="true"] .facet-row { min-height: 44px; font-size: 15px; gap: 12px; }
  .facets[data-open="true"] .facet-row input { width: 22px; height: 22px; }
  .facets[data-open="true"] .facet-group ul { gap: 0; }
  .facets[data-open="true"] .facet-clear { min-height: 44px; }
  .facets[data-open="true"] .facets__foot { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--white); }
  .facets__foot .btn { flex: 1; min-height: 48px; justify-content: center; }
  .recent { display: block; position: fixed; left: 12px; right: 12px; z-index: 60; max-height: 60vh; overflow-y: auto; background: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-float); padding: 4px 0; }
  .recent__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 0; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); }
  .recent__clear { min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--red-ink); text-transform: none; letter-spacing: 0; }
  .recent ul { list-style: none; margin: 0; padding: 0; }
  .recent__item { display: flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 15px; color: var(--ink); }
  .recent__item:active { background: var(--gray-50); }
}

/* ---------- product page on phones: sticky offer bar, gallery, suggestions row ---------- */
.pd-bar { display: none; }
@media (max-width: 639.98px) {
  .pd-bar[hidden] { display: none; }
  .pd-bar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: var(--tabbar-space, 0px); z-index: 65;
    padding: 8px 16px; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgba(59, 39, 35, 0.08);
  }
  .pd-bar__info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
  .pd-bar__price { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink); }
  .pd-bar__store { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-bar__cta { flex: none; min-height: 44px; padding: 0 22px; justify-content: center; }
  html.has-pdbar body { padding-bottom: calc(var(--tabbar-space, 0px) + 64px); }
  html.has-pdbar.has-tabbar .suggest-btn { bottom: calc(var(--tabbar-space) + 78px); }
  html.has-pdbar.has-tabbar .back-to-top { bottom: calc(var(--tabbar-space) + 130px); }
  html.has-pdbar.has-tabbar .suggest { bottom: calc(var(--tabbar-space) + 128px); }
  html.has-pdbar.has-tabbar body .toast { bottom: calc(var(--tabbar-space) + 78px); }

  .pd-gallery { position: relative; width: 100%; height: 100%; }
  .pd-gallery__track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pd-gallery__track::-webkit-scrollbar { display: none; }
  .pd-gallery__track img { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; box-sizing: border-box; object-fit: contain; padding: 14px; }
  .pd-gallery__dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
  .pd-gallery__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-300, #d8d2cf); }
  .pd-gallery__dots span.is-on { background: var(--red); }

  .price-chart { padding: 14px; }
  .price-chart svg { height: 110px; }
  .price-chart__meta { font-size: 13px; }

  .pd-actions .pd-action, .offer-table__code { min-height: 44px; }
}

/* === 4d-stores start === */
/* Phase 4d: stores and categories on phones. Desktop untouched. */
@media (max-width: 639.98px) {
  /* /lojas: logo rows, sticky A-Z bar, store search (js/pages/lojas.js) */
  .az { margin: 12px 20px 0; width: auto; padding: 0 0 6px; background: var(--white); border-radius: var(--r-md); box-shadow: 0 1px 2px rgba(59, 39, 35, 0.08); max-width: none; }
  .az [hidden] { display: none !important; }
  .az__top { position: sticky; top: 0; z-index: 40; padding: 10px 12px 0; background: var(--white); border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: 0 1px 0 var(--line); }
  .az__q { display: block; width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--ink); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
  .az__bar { display: flex; gap: 2px; overflow-x: auto; margin: 0 -12px; padding: 2px 8px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .az__bar::-webkit-scrollbar { display: none; }
  .az__bar a { flex: none; display: grid; place-items: center; min-width: 40px; height: 44px; font-weight: 800; font-size: 15px; color: var(--red-ink); }
  .az__empty { margin: 0; padding: 20px 16px; color: var(--ink-3); text-align: center; }
  .az .seo-block { margin: 0; scroll-margin-top: 104px; }
  .az .section__head { margin: 0; padding: 6px 16px; background: var(--page); }
  .az .section__title { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink-2); }
  .az .seo-list { display: block; }
  .az .seo-list li { display: flex; flex-wrap: wrap; align-items: center; padding: 0 16px; border-top: 1px solid var(--line); font-size: 0; }
  .az .seo-list li:first-child { border-top: 0; }
  .az .az__name { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 56px; font-size: 16px; font-weight: 700; color: var(--ink); }
  .az__logo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; }
  .az__logo img, .az__logo .mono { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; font-size: 17px !important; }
  .az .seo-list__meta { flex: none; font-size: 13px; }
  .az .seo-list li > a:not(.az__name) { flex: 0 0 100%; display: flex; align-items: center; min-height: 40px; padding-left: 52px; font-size: 13px; font-weight: 600; }
  .az .seo-list li > a:not(.az__name)::before { content: none; }

  /* /loja: compact header, coupons first, every block on a white panel */
  .page-loja .page-hero, .page-lojas .page-hero, .page-cat .page-hero { padding: 14px 16px; border-radius: var(--r-md); }
  .page-loja .page-hero__kicker, .page-lojas .page-hero__kicker, .page-cat .page-hero__kicker { display: none; }
  .page-loja .page-hero__title, .page-lojas .page-hero__title, .page-cat .page-hero__title { font-size: 24px; }
  .page-loja .page-hero__sub, .page-lojas .page-hero__sub, .page-cat .page-hero__sub { margin-top: 4px; font-size: 13px; }
  .page-cat .page-hero__art { display: none; }
  .page-loja .seo-block { margin: 12px 0 0; padding: 14px 12px 12px; background: var(--white); border-radius: var(--r-md); box-shadow: 0 1px 2px rgba(59, 39, 35, 0.08); }
  .page-loja .section__head { margin-bottom: 8px; }
  .page-loja .section__title { font-size: 17px; }
  .page-loja .section__link { display: inline-flex; align-items: center; min-height: 44px; }
  .page-loja .seo-block .seo-cards { gap: 0; grid-template-columns: minmax(0, 1fr); }
  .page-loja .seo-card--coupon { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; padding: 10px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .page-loja .seo-card--coupon:first-child { border-top: 0; }
  .page-loja .seo-card--coupon .seo-card__badge { grid-row: 1 / span 2; font-size: 14px; }
  .page-loja .seo-card--coupon .seo-card__title { font-size: 14px; }
  .page-loja .seo-card--coupon .seo-card__meta { grid-column: 2; }
  .page-loja .seo-cards:not(:has(.seo-card--coupon)) { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-loja .seo-list { display: block; }
  .page-loja .seo-list li { display: flex; align-items: center; min-height: 44px; padding: 2px 0; border-top: 1px solid var(--line); }
  .page-loja .seo-list li:first-child { border-top: 0; }

  /* /categoria/<slug>: compact offer rows like the coupon list */
  .page-cat .listing__toolbar { padding: 4px 4px 0; }
  .page-cat .filters-trigger { min-height: 44px; }
  #catGrid .product-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 12px; background: var(--white); border-radius: var(--r-md); box-shadow: 0 1px 2px rgba(59, 39, 35, 0.08); }
  #catGrid .product-grid .product-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 12px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; }
  #catGrid .product-grid .product-card:first-child { border-top: 0; }
  #catGrid .product-card__media { grid-column: 1; grid-row: 1; width: 96px; padding: 6px; border-radius: 12px; border: 1px solid var(--gray-100); }
  #catGrid .product-card__body { grid-column: 2; grid-row: 1; padding: 0; border-top: 0; min-width: 0; gap: 3px; }
  #catGrid .product-card__name { margin: 0; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #catGrid .product-card .share--card { display: none; }
  #catGrid .product-card .offer-source { display: none; }
  #catGrid .product-card__meta { padding-top: 2px; }
  #catGrid .product-card .btn, #catGrid .product-card [class*="__go"] { min-height: 44px; }

  /* /lista: 44px actions */
  .uitem__actions .btn { min-height: 44px; }
}
/* === 4d-stores end === */

/* === 6-polish start === */
/* Phase 6: contrast, dark mode, small-screen and landscape polish. Phones only. */
@media (max-width: 639.98px) {
  :root { --red: #E41B2A; } /* white on the brand red: 4.46 -> 4.68, still the same red to the eye */
  :root:not([data-theme="dark"]) { --gray-500: #6F5E58; --green: #1A7F45; }
  .site-header__pill { color: #fff; }
  .site-header .acct--login { background: rgba(0, 0, 0, 0.2); }
  .cpn-send a { color: var(--red-ink); }
  :root:not([data-theme="dark"]) .stars--4 .stars__num { color: #A35700; }
  .page-hero__kicker, .page-hero__sub, .expiry__lead { opacity: 1; }
  .tabbar__tab { min-width: 0; }
  .tabbar__tab.is-on { color: var(--red-ink); }
  .offer-source { flex-wrap: wrap; row-gap: 2px; }
  :root[data-theme="dark"] .cpn-pill.is-on { color: var(--white); }
  :root[data-theme="dark"] #cuponsExpiring .cpn-pill.is-on { color: #fff; }
  :root[data-theme="dark"] .pd-bar { box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.45); }
  :root[data-theme="dark"] .az, :root[data-theme="dark"] .page-loja .seo-block, :root[data-theme="dark"] #catGrid .product-grid { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 639.98px) {
  html { scroll-behavior: auto; }
  .share__panel, .product-card:active, .cpn__card:active, .ctk:active, .cat-tile:active, .cat-tile2:active, .shortcut:active, .promo:active, .feature-card:active { transition: none; }
}
/* landscape phones: a slim one-row tab bar and offer bar leave the screen to the page */
@media (max-width: 639.98px) and (orientation: landscape) and (max-height: 480px) {
  :root { --tabbar-h: 44px; }
  .tabbar__tab { flex-direction: row; gap: 6px; }
  .pd-bar { padding-block: 4px; }
  .pd-bar__cta { min-height: 40px; }
  html.has-pdbar body { padding-bottom: calc(var(--tabbar-space, 0px) + 52px); }
  .csheet__panel { max-height: 100vh; }
  .tabbar { transition: transform var(--t-base) var(--ease-out); }
  html.tabbar-away .tabbar { transform: translateY(100%); }
  html.tabbar-away .pd-bar { bottom: 0; }
  @media (prefers-reduced-motion: reduce) { .tabbar { transition: none; } }
}
/* === 6-polish end === */