/*
Theme Name: Promo e Poupe
Theme URI: https://promoepoupe.com.br
Author: Studio Comprovante
Description: Tema custom para o Promo e Poupe — ofertas, cupons e cashback do Brasil. Identidade "Comprovante": um comprovante de economia que soma o quanto você poupa. Compatível com WooCommerce.
Version: 1.0.5
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: promoepoupe
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* Receipt Ledger palette */
  --paper: #EFEDE3;
  --receipt: #FBFAF4;
  --ink: #1C1B17;
  --poupa: #0E7A4B;
  --poupa-bright: #2DD083;
  --tag: #F0432B;
  --faded: #8A8578;
  --line: #DAD6C8;
  --ink-08: rgba(28, 27, 23, 0.08);
  --ink-14: rgba(28, 27, 23, 0.14);

  /* Type */
  --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "Space Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Scale (px steps) */
  --s1: 0.25rem;  --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  --maxw: 1180px;
  --radius: 4px;

  /* Vitrine Slide Gallery mapping */
  --vsg-accent: var(--poupa);
  --vsg-accent-contrast: var(--receipt);
  --vsg-badge-bg: var(--tag);
  --vsg-card-bg: var(--receipt);
  --vsg-radius: var(--radius);
  --vsg-font-display: var(--display);
  --vsg-font-body: var(--body);

  /* PP Widgets mapping (plugin pp-slide) — widgets herdam os tokens do tema */
  --ppw-bg: var(--paper);
  --ppw-surface: var(--receipt);
  --ppw-surface-2: var(--paper);
  --ppw-ink: var(--ink);
  --ppw-ink-soft: #38362f;
  --ppw-muted: var(--faded);
  --ppw-accent: var(--poupa);
  --ppw-accent-2: var(--poupa-bright);
  --ppw-accent-ink: #ffffff;
  --ppw-badge: var(--tag);
  --ppw-badge-ink: #ffffff;
  --ppw-line: var(--line);
  --ppw-radius: var(--radius);
  --ppw-shadow: rgba(28, 27, 23, 0.45);
  --ppw-font-display: var(--display);
  --ppw-font-body: var(--body);
  --ppw-font-mono: var(--mono);
  --ppw-wrap: var(--maxw);
  --ppw-gutter: var(--s5);
  --pp-slide-wrap: var(--maxw);
  --pp-slide-gutter: var(--s5);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
p { margin: 0 0 var(--s4); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s5); }
.entry-content > .ppw,
.entry-content > .pp-slide,
.entry-content > .pp-slide-position,
.entry > .ppw,
.entry > .pp-slide,
.entry > .pp-slide-position,
.page-body > .ppw,
.page-body > .pp-slide,
.page-body > .pp-slide-position {
  max-width: calc(var(--maxw) + var(--s5) + var(--s5));
  margin-inline: auto;
  padding-inline: var(--s5);
}

/* Focus — visible, on-brand */
:focus-visible {
  outline: 3px solid var(--poupa);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Scrollbar — on-brand (Receipt Ledger palette)
   Cor sempre visível, até no mobile; tamanho/raio/hover/setas só em desktop
   com mouse de verdade (mobile usa o scrollbar nativo, só recolorido). */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--poupa) var(--paper);
  }
}

*::-webkit-scrollbar-track {
  background-color: var(--paper);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--poupa);
}

@media (hover: hover) and (pointer: fine) {
  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  *::-webkit-scrollbar-track {
    border-radius: 8px;
  }

  *::-webkit-scrollbar-track:hover {
    background-color: var(--line);
  }

  *::-webkit-scrollbar-track:active {
    background-color: var(--ink-14);
  }

  *::-webkit-scrollbar-thumb {
    border-radius: 8px;
    min-height: 30px;
  }

  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--poupa-bright);
  }

  *::-webkit-scrollbar-thumb:active {
    background-color: color-mix(in srgb, var(--poupa) 70%, black);
  }

  *::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
}

/* Shared mono eyebrow */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faded);
  margin: 0;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95rem 1.5rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: transform 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.btn:hover { background: var(--poupa); border-color: var(--poupa); color: #fff; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.btn--green { background: var(--poupa); border-color: var(--poupa); color: #fff; }
.btn--green:hover { background: #0a623d; border-color: #0a623d; }

/* ============================================================
   HEADER — receipt header bar
   ============================================================ */
.topbar {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
}
.topbar__inner {
  padding-block: 0.4rem;
}
.topbar__track {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--s4);
}
.topbar__track > .topbar__group:last-child { display: none; }
.topbar__item { display: inline-flex; align-items: center; }
.topbar__item a { font-family: var(--body); font-weight: 600; letter-spacing: 0.03em; }
.topbar__group {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.topbar__item::after,
.topbar__dot {
  margin-inline: var(--s4);
  color: var(--poupa-bright);
}
.topbar__item::after { content: "·"; }
/* No loop visible (desktop, or reduced motion): don't dangle a dot after the last item. */
.topbar__track > .topbar__group:first-child > .topbar__item:last-child::after {
  content: none;
}
.topbar__icon { width: 14px; height: 14px; flex-shrink: 0; margin-right: 0.5rem; }
.topbar strong { color: var(--poupa-bright); font-weight: 700; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(239, 237, 227, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s4);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.brand b { color: var(--poupa); }
.brand .tick {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--tag);
  align-self: center;
  border: 1.5px solid var(--tag);
  border-radius: 3px;
  padding: 1px 5px;
  font-weight: 700;
}
.main-nav { display: flex; align-items: center; gap: var(--s6); }
.main-nav ul { list-style: none; display: flex; gap: var(--s5); margin: 0; padding: 0; }
.main-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.14s ease, color 0.14s ease;
}
.main-nav a:hover { border-color: var(--poupa); color: var(--poupa); }

.nav-toggle { display: none; background: none; border: 2px solid var(--ink); border-radius: var(--radius); padding: 0.5rem 0.7rem; font-weight: 700; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-block: var(--s8) var(--s9); overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s8);
  align-items: center;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--s5);
}
.hero__eyebrow .dot { color: var(--tag); }
.hero h1 {
  font-size: clamp(2.8rem, 6.2vw, 5rem);
  margin-bottom: var(--s5);
}
.hero h1 em { font-style: normal; color: var(--poupa); position: relative; white-space: nowrap; }
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.06em;
  height: 0.16em;
  background: var(--poupa-bright);
  opacity: 0.5;
  z-index: -1;
}
.hero__sub {
  font-size: 1.18rem;
  max-width: 34ch;
  color: #38362f;
  margin-bottom: var(--s6);
}
.hero__cta { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.hero__trust {
  margin-top: var(--s6);
  display: flex;
  gap: var(--s5);
  flex-wrap: wrap;
}
.hero__trust div { display: flex; flex-direction: column; }
.hero__trust b { font-family: var(--mono); font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.hero__trust span { font-size: 0.82rem; color: var(--faded); }

/* ---- Signature: savings receipt ---- */
.receipt {
  position: relative;
  background: var(--receipt);
  color: var(--ink);
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  padding: var(--s6) var(--s5) var(--s4);
  font-family: var(--mono);
  font-size: 0.9rem;
  box-shadow: 0 26px 50px -22px rgba(28, 27, 23, 0.45), 0 2px 0 var(--line);
  transform: rotate(-1.4deg);
}
.receipt::before { /* top perforation */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 9px;
  background: var(--receipt);
  -webkit-mask: conic-gradient(from 135deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100% repeat-x;
          mask: conic-gradient(from 135deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100% repeat-x;
}
.receipt__edge { /* bottom perforation */
  position: absolute;
  left: 0; right: 0; bottom: -9px;
  height: 9px;
  background: var(--receipt);
  -webkit-mask: conic-gradient(from -45deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100% repeat-x;
          mask: conic-gradient(from -45deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100% repeat-x;
}
.receipt__head { text-align: center; }
.receipt__store { font-family: var(--display); font-size: 1.15rem; letter-spacing: 0; }
.receipt__meta { font-size: 0.7rem; color: var(--faded); letter-spacing: 0.06em; margin-top: 0.3rem; }
.rule { border: none; border-top: 1.5px dashed var(--line); margin: var(--s4) 0; }
.receipt__cols {
  display: flex;
  justify-content: space-between;
  font-size: 0.66rem;
  color: var(--faded);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.receipt__item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.55rem 0;
  opacity: 1;
}
.receipt__item .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52%; }
.receipt__item .leader { flex: 1; border-bottom: 1.5px dotted var(--ink-14); transform: translateY(-3px); }
.receipt__item .was { color: var(--faded); text-decoration: line-through; font-size: 0.78rem; }
.receipt__item .now { font-weight: 700; }
.receipt__item .save { color: var(--tag); font-weight: 700; }
.receipt__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: var(--poupa);
  color: #fff;
  margin: var(--s4) calc(var(--s5) * -1) 0;
  padding: var(--s4) var(--s5);
}
.receipt__total .label { font-family: var(--display); font-size: 1rem; letter-spacing: 0; }
.receipt__total .amount { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.barcode {
  height: 44px;
  margin-top: var(--s4);
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px,
    var(--ink) 4px 5px, transparent 5px 9px,
    var(--ink) 9px 12px, transparent 12px 14px,
    var(--ink) 14px 15px, transparent 15px 18px);
}
.barcode__no { text-align: center; font-size: 0.66rem; letter-spacing: 0.4em; color: var(--faded); margin-top: 0.4rem; }

/* Load animation */
.is-anim .receipt__item { opacity: 0; transform: translateY(6px); }
.is-anim .receipt__item.in { opacity: 1; transform: none; transition: opacity 0.35s ease, transform 0.35s ease; }

/* ============================================================
   STEPS — como funciona (a real sequence)
   ============================================================ */
.steps { padding-block: var(--s8); border-top: 1px solid var(--line); }
.steps__head { max-width: 40ch; margin-bottom: var(--s7); }
.steps__head h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); margin-top: var(--s3); }
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.step { border-top: 2px solid var(--ink); padding-top: var(--s4); }
.step .num { font-family: var(--mono); font-size: 0.9rem; color: var(--tag); font-weight: 700; letter-spacing: 0.1em; }
.step h3 { font-size: 1.3rem; margin: var(--s3) 0 var(--s2); }
.step p { color: #46443c; margin: 0; font-size: 0.98rem; }

/* ============================================================
   DEALS GRID
   ============================================================ */
.deals { padding-block: var(--s8); border-top: 1px solid var(--line); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  margin-bottom: var(--s7);
  flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); margin-top: var(--s3); }
.section-head a { font-family: var(--mono); font-size: 0.85rem; text-decoration: none; color: var(--poupa); font-weight: 700; border-bottom: 2px solid var(--poupa-bright); padding-bottom: 2px; }

.deal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.deal {
  position: relative;
  background: var(--receipt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.deal:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(28,27,23,0.4); }
.deal__media { aspect-ratio: 4 / 3; background: var(--paper); position: relative; overflow: hidden; }
.deal__media img { width: 100%; height: 100%; object-fit: cover; }
.deal__media--ph { display: grid; place-items: center; color: var(--line); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; }
.deal__badge {
  position: absolute;
  top: 0.6rem; left: 0.6rem;
  background: var(--tag);
  color: #fff;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.25rem 0.55rem;
  border-radius: 3px;
  transform: rotate(-3deg);
  box-shadow: 0 4px 10px -3px rgba(240,67,43,0.6);
}
.deal__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.deal__store { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faded); }
.deal__title { font-family: var(--body); font-weight: 700; font-size: 1.02rem; line-height: 1.25; letter-spacing: 0; margin: 0; }
.deal__price { display: flex; align-items: baseline; gap: 0.5rem; margin-top: auto; padding-top: var(--s2); }
.deal__was { font-family: var(--mono); color: var(--faded); text-decoration: line-through; font-size: 0.85rem; }
.deal__now { font-family: var(--mono); font-weight: 700; font-size: 1.35rem; color: var(--poupa); font-variant-numeric: tabular-nums; }
.deal__cta {
  margin: 0 var(--s4) var(--s4);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.7rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  transition: background 0.14s ease, color 0.14s ease;
}
.deal__cta:hover { background: var(--ink); color: var(--paper); }

/* ============================================================
   CATEGORIES
   ============================================================ */
.cats { padding-block: var(--s8); border-top: 1px solid var(--line); }
.cat-chips { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.65rem 1.15rem;
  font-weight: 600;
  color: var(--ink);
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.cat-chip span { font-family: var(--mono); font-size: 0.72rem; color: var(--faded); }
.cat-chip:hover { background: var(--poupa); border-color: var(--poupa); color: #fff; }
.cat-chip:hover span { color: rgba(255,255,255,0.8); }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.news { padding-block: var(--s9); border-top: 1px solid var(--line); }
.news__card {
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  padding: clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s7);
  align-items: center;
}
.news__card h2 { color: var(--paper); font-size: clamp(1.8rem, 3vw, 2.6rem); }
.news__card p { color: #cfccc0; margin: var(--s4) 0 0; }
.news__form { display: flex; gap: var(--s3); flex-wrap: wrap; }
.news__form input {
  flex: 1;
  min-width: 200px;
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.95rem 1.1rem;
  border: 2px solid #44423a;
  border-radius: 999px;
  background: #2a2823;
  color: var(--paper);
}
.news__form input::placeholder { color: #8c887c; }
.news__form input:focus-visible { outline: 3px solid var(--poupa-bright); }
.news__note { font-family: var(--mono); font-size: 0.72rem; color: #8c887c; margin: var(--s3) 0 0; }

/* ============================================================
   FOOTER — receipt tail
   ============================================================ */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s8) var(--s6); }
.footer__tail { text-align: center; font-family: var(--mono); margin-bottom: var(--s7); }
.footer__tail .stars { color: var(--tag); letter-spacing: 0.3em; font-size: 0.8rem; }
.footer__tail .thanks { font-family: var(--display); font-size: 1.4rem; margin: var(--s2) 0; }
.footer__tail .barcode { max-width: 240px; margin: var(--s4) auto 0; }
.footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s6); }
.footer__cols h4 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faded); margin-bottom: var(--s4); }
.footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.footer__cols a { text-decoration: none; color: var(--ink); font-size: 0.95rem; }
.footer__cols a:hover { color: var(--poupa); }
.footer__brand p { color: #46443c; font-size: 0.92rem; max-width: 30ch; }
.footer__legal {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px dashed var(--line);
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--faded);
  letter-spacing: 0.04em;
}

/* ============================================================
   GENERIC CONTENT (blog / pages / woo wrapper)
   ============================================================ */
.page-body { padding-block: var(--s8); }
.page-body h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--s5); }
.post-card { border-bottom: 1px solid var(--line); padding-block: var(--s5); }
.post-card h2 { font-size: 1.6rem; }
.post-card h2 a { text-decoration: none; }
.post-card time { font-family: var(--mono); font-size: 0.78rem; color: var(--faded); }
.woocommerce-wrap { padding-block: var(--s7); }

/* ============================================================
   WOOCOMMERCE - single product
   ============================================================ */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.85fr);
  gap: clamp(var(--s5), 4vw, var(--s8));
  align-items: start;
  width: 100%;
  max-width: calc(var(--maxw) + var(--s5) + var(--s5));
  margin-inline: auto;
  padding-inline: var(--s5);
}
.woocommerce div.product::before,
.woocommerce div.product::after { content: none !important; }
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
.woocommerce div.product div.images {
  min-width: 0;
  position: sticky;
  top: var(--s5);
}
.woocommerce div.product span.onsale {
  position: absolute;
  top: var(--s4);
  left: var(--s4);
  z-index: 3;
  display: inline-grid;
  place-items: center;
  min-width: 54px;
  min-height: 54px;
  margin: 0;
  padding: 0.35rem;
  border-radius: 50%;
  background: var(--tag);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
}
/* Galeria do produto (WooCommerce flexslider): palco de ALTURA FIXA + miniaturas. */
.woocommerce div.product .woocommerce-product-gallery { position: relative; }
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
/* Moldura do palco: com slider = .flex-viewport; com 1 imagem só = o próprio wrapper. */
.woocommerce div.product .woocommerce-product-gallery .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--receipt);
  overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery .flex-viewport { height: clamp(320px, 42vw, 540px) !important; }
.woocommerce div.product .woocommerce-product-gallery__image { height: clamp(320px, 42vw, 540px); margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image a { display: block; width: 100%; height: 100%; }
.woocommerce div.product .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}
/* Miniaturas (flex-control-thumbs) em linha, abaixo do palco. */
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: var(--s3);
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
  overflow: visible;
}
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs li { margin: 0; padding: 0; width: auto; float: none; list-style: none; }
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.14s ease;
}
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs img:hover { opacity: 1; }
.woocommerce div.product div.summary {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding-top: var(--s2);
}
.woocommerce div.product .product_title {
  font-size: clamp(2rem, 4vw, 3.4rem);
  margin: 0;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color: var(--faded);
  font-size: 0.78em;
  opacity: 1;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description {
  color: #38362f;
  max-width: 62ch;
}
.woocommerce div.product form.cart,
.woocommerce div.product p.cart { margin: 0; }
.woocommerce div.product .button,
.woocommerce ul.products li.product .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill, 999px);
  padding: 0.78rem 1.2rem;
  background: var(--ink);
  color: var(--receipt);
  font-weight: 800;
  text-decoration: none;
}
.woocommerce div.product .button:hover,
.woocommerce ul.products li.product .button:hover {
  background: var(--poupa);
  border-color: var(--poupa);
  color: #fff;
}
.woocommerce div.product .product_meta {
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  color: var(--faded);
  font-size: 0.92rem;
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
  grid-column: 1 / -1;
  min-width: 0;
}
.woocommerce div.product .woocommerce-tabs { margin-top: var(--s7); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin: 0 0 var(--s5);
  padding: 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { content: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--paper);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--receipt);
  border-color: var(--ink-14);
}
.woocommerce div.product .woocommerce-Tabs-panel {
  color: var(--ink);
  max-width: none;
}
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products { margin-top: var(--s7); }
.woocommerce div.product .related.products > h2,
.woocommerce div.product .upsells.products > h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  margin-bottom: var(--s5);
}
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }
.woocommerce ul.products li.product {
  position: relative;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--receipt);
}
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  left: auto;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0.28rem;
  border-radius: 50%;
  background: var(--tag);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: #fff;
  margin: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button { margin-inline: var(--s4); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: var(--s4) 0 0;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.22;
}
.woocommerce ul.products li.product .price {
  display: block;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.92rem;
}
.woocommerce ul.products li.product .button {
  width: calc(100% - var(--s4) - var(--s4));
  margin-block: var(--s3) var(--s4);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s3) var(--s4);
  z-index: 100;
}
.skip-link:focus { left: var(--s4); top: var(--s4); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  :root { --ppw-gutter: var(--s4); --pp-slide-gutter: var(--s4); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s7); }
  .receipt { transform: rotate(-1deg); margin-top: var(--s5); }
  .deal-grid { grid-template-columns: repeat(2, 1fr); }
  .news__card { grid-template-columns: 1fr; gap: var(--s5); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  :root { --ppw-gutter: var(--s3); --pp-slide-gutter: var(--s3); }
  .main-nav { display: none; }
  .main-nav.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s4);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: var(--s5);
  }
  .main-nav.open ul { flex-direction: column; gap: var(--s4); }
  .nav-toggle { display: inline-block; }
  .steps__grid { grid-template-columns: 1fr; gap: var(--s5); }

  .topbar__track {
    width: max-content;
    flex-wrap: nowrap;
    justify-content: flex-start;
    animation: topbar-marquee 16s linear infinite;
  }
  .topbar__track > .topbar__group:last-child { display: flex; }
  .topbar__group { flex: none; justify-content: flex-start; flex-wrap: nowrap; white-space: nowrap; }
  /* Looping: the seam between the two copies needs the same dot rhythm as everywhere else. */
  .topbar__track > .topbar__group:first-child > .topbar__item:last-child::after {
    content: "·";
  }
}

@keyframes topbar-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 540px) {
  :root { --ppw-gutter: var(--s2); --pp-slide-gutter: var(--s2); }
  .deal-grid { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  .hero__trust { gap: var(--s4); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .is-anim .receipt__item { opacity: 1 !important; transform: none !important; }
  .receipt { transform: none; }
  .topbar { overflow-x: auto; }
  .topbar__track { width: max-content; flex-wrap: nowrap; justify-content: flex-start; }
  .topbar__track > .topbar__group:last-child { display: none; }
  .topbar__group { flex: none; justify-content: flex-start; flex-wrap: nowrap; white-space: nowrap; }
  .topbar__track > .topbar__group:first-child > .topbar__item:last-child::after { content: none; }
}

/* Responsive container refinements */
@media (max-width: 980px) {
  .wrap { padding-inline: var(--s4); }
  .deal-grid { gap: var(--s4); }
  .woocommerce div.product {
    grid-template-columns: 1fr;
    gap: var(--s6);
    max-width: calc(var(--maxw) + var(--s4) + var(--s4));
    padding-inline: var(--s4);
  }
  .woocommerce div.product div.images { position: static; }
  .woocommerce div.product .woocommerce-product-gallery__wrapper {
    grid-template-columns: repeat(4, minmax(62px, 1fr));
    gap: var(--s2);
  }
}
@media (max-width: 720px) {
  .wrap { padding-inline: var(--s3); }
  .steps, .deals, .cats { padding-block: var(--s7); }
  .section-head, .steps__head { margin-bottom: var(--s5); }
  .steps__grid { gap: var(--s4); }
  .deal-grid { gap: var(--s3); }
  .deal__body { padding: var(--s3); }
  .deal__cta { margin: 0 var(--s3) var(--s3); }
  .cat-chips { gap: var(--s2); margin-top: var(--s4); }
  .cat-chip { padding: 0.55rem 0.85rem; }
  .woocommerce div.product .product_title { font-size: clamp(1.8rem, 9vw, 2.45rem); }
  .woocommerce div.product {
    max-width: calc(var(--maxw) + var(--s3) + var(--s3));
    padding-inline: var(--s3);
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs { gap: 0; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li {
    flex: 1 1 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .woocommerce ul.products { gap: var(--s3); }
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .price,
  .woocommerce ul.products li.product .button { margin-inline: var(--s3); }
  .woocommerce ul.products li.product .button { width: calc(100% - var(--s3) - var(--s3)); }
  .news { padding-block: var(--s7); }
  .news__card { padding: var(--s5); gap: var(--s4); }
  .news__form input { min-width: 0; width: 100%; }
}
@media (max-width: 540px) {
  .wrap { padding-inline: var(--s2); }
  .deal-grid { gap: var(--s2); }
  .woocommerce div.product {
    max-width: calc(var(--maxw) + var(--s2) + var(--s2));
    padding-inline: var(--s2);
  }
  .woocommerce div.product .woocommerce-product-gallery__wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .woocommerce ul.products { gap: var(--s2); }
  .deal__title { font-size: 0.92rem; line-height: 1.2; }
  .deal__now { font-size: 1.08rem; }
  .deal__cta { font-size: 0.82rem; padding: 0.62rem; }
}