/* ==========================================================================
   app.css — GetFrugaled.com · Ghost deals theme · EDITORIAL environment only
   ==========================================================================
   Loaded on: home, index, post/custom-deal, category hubs, merchant, tag,
   page, author. NEVER loaded on sponsor pages (they get sponsor.css).

   THE SWAP LAYER
   --------------
   The :root block below is the only thing that changes when this system
   clones to a new deals site: the six brand-core colors, the two font
   families (plus mono if desired), and the mascot assets in assets/images/.
   Neutrals, semantic mappings, spacing, radius, and every component
   downstream stay untouched. No component below this block may invent a
   color, size, or radius — tokens only.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  /* brand core — swap per clone */
  --brand-green: #6DBE45;      --brand-green-dark: #549A32;
  --brand-green-text: #3E7D24; --brand-navy: #123A61;
  --brand-navy-deep: #0A2745;  --brand-cream: #FBFAF6;

  /* neutrals */
  --card-white: #FFFFFF;  --border: #E6E3DA;  --divider: #F0EEE7;
  --text-muted: #5B6B7B;  --text-faint: #8A97A4;
  --tint-green: #F0F7E9;  --tint-navy: #E8EEF5;  --tint-gray: #EFEDE6;
  --disclosure-bg: #F4EFE2;  --disclosure-border: #E7DFCC; /* disclosure-bar cream/tan */

  /* semantic */
  --savings: var(--brand-green-text);  --success: var(--brand-green-text);
  --error: #B5482E;  --label-bg: var(--tint-navy);  --expired-chip: var(--tint-gray);

  /* type — families are part of the swap layer */
  --font-display: 'Fredoka', sans-serif;  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* type scale (desktop; mobile overrides below) */
  --type-page-title: 36px;            /* Fredoka 600, -0.02em */
  --type-section: 26px;               /* Fredoka 600, -0.01em */
  --type-card-headline: 19px;         /* Fredoka 500 */
  --type-card-headline-featured: 24px;
  --type-body: 15px;                  /* Plex Sans 400, lh 1.6 */
  --type-meta: 12px;                  /* Plex Sans 500, caps, 0.08em */

  /* spacing (4px base — the only spacing values allowed) + radius */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-8: 48px; --sp-10: 64px;
  --r-chip: 6px; --r-btn: 10px; --r-card: 14px; --r-panel: 20px; --r-pill: 999px;
}

@media (max-width: 640px) {
  :root {
    --type-page-title: 28px;
    --type-section: 22px;
    --type-card-headline: 17px;
    --type-card-headline-featured: 21px;
    --type-body: 14px;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

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

/* keep the hidden attribute authoritative even on elements whose component
   class sets a display value (e.g. a hidden .btn CTA awaiting hydration) */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--brand-cream);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--brand-navy);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--brand-navy);
  margin: 0;
}

p { margin: 0 0 var(--sp-4); color: var(--text-muted); }

a { color: var(--brand-green-text); }
a:hover { color: var(--brand-green-dark); }

/* Type-scale utilities — names match the token sheet */
.type-page-title { font-family: var(--font-display); font-weight: 600; font-size: var(--type-page-title); letter-spacing: -0.02em; color: var(--brand-navy); }
.type-section    { font-family: var(--font-display); font-weight: 600; font-size: var(--type-section); letter-spacing: -0.01em; color: var(--brand-navy); }
.type-body       { font-family: var(--font-body); font-weight: 400; font-size: var(--type-body); line-height: 1.6; color: var(--text-muted); }
.type-meta       { font-family: var(--font-body); font-weight: 500; font-size: var(--type-meta); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }

/* ==========================================================================
   Underline accent ("swoosh") — the brand's signature stroke
   Inline SVG with fill="currentColor"; color it via these modifiers so the
   accent follows the swap layer. Used under section headings, headlines on
   hover, and beneath the primary CTA.
   ========================================================================== */

.swoosh { display: block; transition: opacity .15s ease; }
.swoosh--green { color: var(--brand-green); }
.swoosh--navy  { color: var(--brand-navy); }

/* ==========================================================================
   Button set — one primary per view (the deal CTA)
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  border-radius: var(--r-btn);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color .15s ease, color .15s ease;
  min-height: 44px; /* mobile tap target */
}

.btn-primary {
  background: var(--brand-green);
  color: var(--card-white);
  border: none;
  padding: 13px 28px;
}
.btn-primary:hover { background: var(--brand-green-dark); color: var(--card-white); }

.btn-secondary {
  background: transparent;
  color: var(--brand-navy);
  border: 1.5px solid var(--brand-navy);
  padding: 12px 28px;
}
.btn-secondary:hover { background: var(--tint-navy); color: var(--brand-navy); }

.link-text {
  color: var(--brand-green-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
}
.link-text:hover { border-bottom-color: var(--brand-green-text); color: var(--brand-green-text); }

.btn:focus-visible, .link-text:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

/* CTA + navy swoosh lockup (swoosh revealed on hover by the parent) */
.cta-lockup { display: inline-flex; flex-direction: column; align-items: center; }
.cta-lockup .swoosh { width: 86%; height: 6px; margin-top: 5px; opacity: 0; }
.cta-lockup:hover .swoosh { opacity: 1; }

/* ==========================================================================
   Chips & labels — shared across deal-card, deal-meta, filter-bar
   ========================================================================== */

/* Sponsored / Affiliate — plain word on navy tint, never gray-on-gray */
.label-chip {
  display: inline-block;
  background: var(--label-bg);
  color: var(--brand-navy);
  border-radius: var(--r-chip);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Expired — gray chip; honest-looking, never hidden */
.label-chip--expired {
  background: var(--expired-chip);
  color: var(--text-muted);
}

/* Coupon code — dashed green border + green tint, mono code */
.coupon-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1.5px dashed var(--brand-green);
  background: var(--tint-green);
  color: var(--brand-green-text);
  border-radius: var(--r-chip);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

/* ==========================================================================
   deal-card — THE core unit (partials/deal-card.hbs)
   Variants: .deal-card--standard (grid default) · .deal-card--featured
   (hero, image + CTA) · .deal-card--compact (dense list row)
   States: .is-expired (grayscale content, gray chip, no hover lift)
   ========================================================================== */

.deal-card {
  background: var(--card-white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}

.deal-card:not(.is-expired):hover,
.deal-card:not(.is-expired):focus-within {
  border-color: var(--brand-green);
  transform: translateY(-2px);
}

.deal-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.deal-card__link:hover { color: inherit; }
.deal-card__link:focus-visible { outline: none; } /* card border + lift signal focus */

/* --- media (standard/featured) --- */
.deal-card__media { position: relative; }

.deal-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 1px solid var(--divider);
}

.deal-card__image--placeholder {
  background: repeating-linear-gradient(45deg, var(--divider) 0px, var(--divider) 10px, var(--brand-cream) 10px, var(--brand-cream) 20px);
}

.deal-card__tag {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--card-white);
  border: 1px solid var(--border);
  color: var(--brand-navy);
  border-radius: var(--r-chip);
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.deal-card__staff-pick {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--brand-navy);
  color: var(--card-white);
  border-radius: var(--r-chip);
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- body (standard/featured) --- */
.deal-card__body { padding: var(--sp-4); }
.deal-card--featured .deal-card__body { padding: var(--sp-5); }

.deal-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.deal-card__merchant {
  font-size: var(--type-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.deal-card__labels { display: flex; gap: 6px; margin-left: auto; }

.deal-card__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-card-headline);
  line-height: 1.25;
  color: var(--brand-navy);
}
.deal-card--featured .deal-card__headline { font-size: var(--type-card-headline-featured); }

.deal-card__swoosh {
  width: 96px;
  height: 7px;
  margin-top: 6px;
  opacity: 0;
}
.deal-card:not(.is-expired):hover .deal-card__swoosh,
.deal-card:not(.is-expired):focus-within .deal-card__swoosh { opacity: 1; }

.deal-card__savings {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--savings);
}

.deal-card__was {
  font-size: 13px;
  color: var(--text-faint);
  font-weight: 400;
  text-decoration: line-through;
}

.deal-card__summary {
  margin: var(--sp-2) 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

.deal-card__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-3);
}

.deal-card__expires {
  font-size: var(--type-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.deal-card__cta { margin-top: 14px; }
.deal-card__cta .btn-primary {
  font-size: 15px;
  padding: 11px 24px;
  min-height: 0;
}
.deal-card:not(.is-expired):hover .deal-card__cta .btn-primary { background: var(--brand-green-dark); }
.deal-card:not(.is-expired):hover .deal-card__cta .swoosh { opacity: 1; }

/* --- compact row --- */
.deal-card--compact .deal-card__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
}

.deal-card__thumb {
  display: block;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: var(--r-chip);
  border: 1px solid var(--divider);
  object-fit: cover;
}

.deal-card__thumb--placeholder {
  background: repeating-linear-gradient(45deg, var(--divider) 0px, var(--divider) 8px, var(--brand-cream) 8px, var(--brand-cream) 16px);
}

.deal-card__compact-body { flex: 1; min-width: 0; }

.deal-card--compact .deal-card__topline {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.deal-card--compact .deal-card__merchant { font-size: 11px; }
.deal-card--compact .deal-card__labels { margin-left: 0; }
.deal-card--compact .label-chip { font-size: 10.5px; padding: 2px 7px; }

.deal-card--compact .deal-card__headline {
  display: block; /* markup uses spans inside the row link */
  font-size: 15.5px;
  line-height: 1.3;
  margin-top: 3px;
}

.deal-card--compact .deal-card__savings {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
}

.deal-card__arrow {
  color: var(--brand-green-text);
  font-weight: 600;
  font-size: 16px;
  opacity: 0;
  transition: opacity .15s ease;
  flex: none;
}
.deal-card:not(.is-expired):hover .deal-card__arrow,
.deal-card:not(.is-expired):focus-within .deal-card__arrow { opacity: 1; }

/* --- expired state --- */
/* Dim wraps the deal content only; merchant row + labels stay legible so
   the Expired chip reads at full contrast. */
.deal-card__dim { transition: filter .15s ease, opacity .15s ease; }
.is-expired .deal-card__dim,
.is-expired .deal-card__media {
  filter: grayscale(1);
  opacity: 0.55;
}

/* ==========================================================================
   deal-meta — the structured facts of a deal (partials/deal-meta.hbs)
   Contexts: .deal-meta--card (inside deal-card: coupon chip + expiry note)
   · .deal-meta--page (deal-page facts block above/beside the primary CTA).
   Data comes from the per-post data-deal-meta JSON block, hydrated by
   site.js; missing fields render nothing.
   ========================================================================== */

/* --- card context: a chip row that vanishes when it holds no facts --- */
.deal-meta--card {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.deal-meta--card:not(:has(> :not(template))) { display: none; } /* no facts → no stray gap */
.deal-card--compact .deal-meta--card { margin-top: 3px; }

/* --- page context: the facts block --- */
.deal-meta--page {
  background: var(--card-white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-5);
}

/* Stacked rows: small-caps label above the value, hairline dividers —
   matches the approved Deal Page facts panel. */
.deal-meta__row {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--divider);
}
.deal-meta__row:first-child { padding-top: var(--sp-1); }
.deal-meta__row:last-child { border-bottom: none; padding-bottom: var(--sp-1); }

.deal-meta__label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.deal-meta__value {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  color: var(--brand-navy);
  font-size: 15px;
}

.deal-meta__merchant-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--brand-navy);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.deal-meta__merchant-link:hover { color: var(--brand-navy); border-bottom-color: var(--brand-green); }

.deal-meta__now {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--savings);
}

.deal-meta__save {
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 600;
  color: var(--savings);
  margin-top: 2px;
}

.deal-meta__was,
.deal-meta__was-only {
  font-size: 14px;
  color: var(--text-faint);
  font-weight: 400;
  text-decoration: line-through;
}

.deal-meta__expiry {
  font-size: var(--type-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* tap-to-copy coupon: the chip itself is the button (44px tap target),
   hint text right-aligned, success state reuses --success */
.coupon-chip--copy {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  cursor: pointer;
  padding: 9px 13px;
  font-size: 14px;
  min-height: 44px;
  border-radius: var(--r-chip);
  text-align: left;
  transition: background-color .15s ease, border-color .15s ease;
}
.coupon-chip--copy > [data-coupon-code] { flex: 1; }
.coupon-chip--copy:hover { background: var(--card-white); }
.coupon-chip--copy.is-copied { border-style: solid; border-color: var(--success); }

.coupon-chip__hint {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.deal-meta__coupon-note {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.deal-meta__expired-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* ==========================================================================
   Site shell — header, category nav, footer (default.hbs / partials)
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--brand-cream) 94%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 960px;
  margin: 0 auto;
  padding: 14px var(--sp-4) 10px;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
}

.site-header__mascot { width: 26px; height: 26px; object-fit: contain; }

.site-header__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--brand-navy);
}
.site-header__wordmark-accent { color: var(--brand-green); }

.category-nav { max-width: 960px; margin: 0 auto; }

.category-nav__scroll {
  display: flex;
  gap: 6px;
  padding: 0 var(--sp-4) 11px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;         /* horizontal-scroll pills, no scrollbar */
}
.category-nav__scroll::-webkit-scrollbar { display: none; }

.category-nav__pill {
  flex: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.category-nav__pill:hover { color: var(--brand-navy); border-color: var(--brand-navy); }
.category-nav__pill.is-current {
  font-weight: 600;
  color: var(--brand-navy);
  background: var(--card-white);
  border-color: var(--brand-navy);
}

.site-main { max-width: 960px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-8); }

.site-footer { border-top: 1px solid var(--border); }

.site-footer__inner { max-width: 960px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-6); }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 13px;
  font-weight: 500;
}
.site-footer__links a { color: var(--text-muted); text-decoration: none; }
.site-footer__links a:hover { color: var(--brand-navy); }

.site-footer__disclosure {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-faint);
  margin: 14px 0 0;
}

/* ==========================================================================
   disclosure-bar — FTC clear-and-conspicuous (partials/disclosure-bar.hbs)
   ========================================================================== */

.disclosure-bar {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--disclosure-bg);
  border: 1px solid var(--disclosure-border);
  border-radius: 11px;
  padding: var(--sp-3) 14px;
  margin-top: 18px;
}

.disclosure-bar__icon {
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--brand-green-text);
  color: var(--card-white);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.disclosure-bar__copy {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}
.disclosure-bar__copy b { color: var(--brand-navy); }

.disclosure-bar__link { font-weight: 600; white-space: nowrap; text-decoration: none; }
.disclosure-bar__link:hover { text-decoration: underline; }

/* ==========================================================================
   Deal page (partials/deal-page.hbs via post.hbs / custom-deal.hbs)
   ========================================================================== */

.deal-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: var(--sp-3);
  min-width: 0;
}
.deal-breadcrumb__link { color: var(--text-faint); text-decoration: none; flex: none; }
.deal-breadcrumb__link:hover { color: var(--brand-green-text); }
.deal-breadcrumb__sep { flex: none; }
.deal-breadcrumb__current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* hero band: main column + facts panel wrap responsively */
.deal-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 32px;
  align-items: flex-start;
}
.deal-hero__main { flex: 1 1 320px; min-width: 0; }
.deal-hero__meta { flex: 1 1 292px; min-width: 0; max-width: 100%; }

.deal-hero__headline {
  font-size: var(--type-page-title);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.deal-hero__swoosh { width: 120px; height: 8px; margin-top: var(--sp-3); }

.deal-hero__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
}

.deal-hero__now {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  color: var(--savings);
}
.deal-hero__now--was-only {
  color: var(--text-faint);
  text-decoration: line-through;
  font-size: 22px;
}

.deal-hero__was { font-size: 16px; color: var(--text-faint); }

.deal-hero__save { font-size: 15px; font-weight: 600; color: var(--savings); }

/* inline CTA — the only CTA pattern on this page (no sticky bar) */
.deal-hero__cta { margin-top: 20px; }

.deal-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  background: var(--brand-green);
  color: var(--card-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  padding: 15px var(--sp-5);
  border-radius: 12px;
  text-decoration: none;
  min-height: 44px;
  box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--brand-green) 90%, transparent);
  transition: background-color .15s ease;
}
.deal-cta:hover { background: var(--brand-green-dark); color: var(--card-white); }

.deal-cta__swoosh { width: 70%; height: 6px; margin: 7px auto 0; }

.deal-cta__caption {
  text-align: center;
  font-size: 11.5px;
  color: var(--text-faint);
  margin: var(--sp-2) 0 0;
}

.deal-cta--repeat { font-size: 16px; padding: 14px var(--sp-5); box-shadow: none; }
.deal-body__cta { margin-top: var(--sp-5); }

/* supporting details */
.deal-body { margin-top: 34px; max-width: 640px; }

.deal-body__heading { font-size: 20px; font-weight: 600; }
.deal-body__swoosh, .related-deals__swoosh { width: 90px; height: 7px; margin-top: 9px; }

.deal-body__content { margin-top: var(--sp-4); }
.deal-body__content p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}
.deal-body__content b, .deal-body__content strong { color: var(--brand-navy); }

/* Koenig editor cards inside post content — wide/full image breakouts
   (bookmark + gallery card CSS ships via Ghost's card_assets) */
.deal-body__content .kg-width-wide { max-width: none; width: 100%; }
.deal-body__content .kg-width-wide img { width: 100%; }
.deal-body__content .kg-width-full { max-width: none; width: 100%; }
.deal-body__content .kg-width-full img { width: 100%; }
.static-page__image { display: block; width: 100%; border-radius: var(--r-card); margin-top: var(--sp-5); }
.static-page__content { margin-top: var(--sp-5); max-width: 640px; }

/* "Worth flagging" caveats — honest caveats are a designed trust feature.
   Authored in the post body as a blockquote or an HTML card with
   class="deal-caveats"; both get the left-border treatment. */
.deal-body__content blockquote,
.deal-body__content .deal-caveats {
  margin: 18px 0 0;
  border-left: 3px solid var(--border);
  padding: 2px 0 2px var(--sp-4);
}
.deal-body__content blockquote p:first-child b,
.deal-body__content blockquote p:first-child strong,
.deal-caveats__title {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-2);
}
.deal-body__content blockquote ul,
.deal-body__content .deal-caveats ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* merchant block */
.merchant-block {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card-white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-4) 18px;
  max-width: 640px;
}

.merchant-block__avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--tint-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--brand-navy);
}

.merchant-block__body { flex: 1; min-width: 0; }

.merchant-block__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--brand-navy);
  text-decoration: none;
}
.merchant-block__name:hover { color: var(--brand-navy); text-decoration: underline; }
/* store-link gate: without an href the name is plain text, not a link */
.merchant-block__name:not([href]) { cursor: default; }
.merchant-block__name:not([href]):hover { text-decoration: none; }

.merchant-block__count {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.merchant-block__all {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-green-text);
  white-space: nowrap;
  text-decoration: none;
}
.merchant-block__all:hover { text-decoration: underline; }

/* related deals */
.related-deals { margin-top: 38px; }
.related-deals__heading { font-size: 20px; font-weight: 600; }
.related-deals__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 10px;
  margin-top: var(--sp-4);
}
@media (max-width: 360px) {
  .related-deals__grid { grid-template-columns: 1fr; } /* keep 320px viewports single-column */
}

/* ==========================================================================
   newsletter-module — navy panel, Ghost Members form
   ========================================================================== */

.newsletter-module {
  margin-top: 38px;
  background: var(--brand-navy);
  border-radius: var(--r-panel);
  padding: var(--sp-5) 22px;
  color: var(--card-white);
}

.newsletter-module__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  color: var(--card-white);
}

.newsletter-module__copy {
  font-size: 13.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--card-white) 75%, var(--brand-navy));
  margin: var(--sp-2) 0 0;
}

.newsletter-module__form {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: var(--sp-4);
}

.newsletter-module__input {
  flex: 1 1 180px;
  min-width: 0;
  border: none;
  border-radius: var(--r-btn);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--brand-navy);
}

.newsletter-module__submit {
  flex: none;
  cursor: pointer;
  border: none;
  background: var(--brand-green);
  color: var(--card-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--r-btn);
  min-height: 44px;
  transition: background-color .15s ease;
}
.newsletter-module__submit:hover { background: var(--brand-green-dark); }

/* Ghost toggles .loading / .success / .error on the form */
.newsletter-module__success, .newsletter-module__error { display: none; font-size: 13px; margin: 10px 0 0; }
.newsletter-module:has(.newsletter-module__form.success) .newsletter-module__form { display: none; }
.newsletter-module:has(.newsletter-module__form.success) .newsletter-module__success { display: block; }
.newsletter-module:has(.newsletter-module__form.error) .newsletter-module__error { display: block; color: #F0B9AC; }

/* ==========================================================================
   Category hub (category.hbs / index.hbs)
   ========================================================================== */

.category-head { max-width: 640px; }

.category-head__heading {
  font-size: var(--type-page-title);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.category-head__swoosh { width: 110px; height: 8px; margin-top: 11px; }

.category-head__intro { margin-top: var(--sp-4); }
.category-head__intro p {
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  text-wrap: pretty;
}

/* shared section heading pattern (merchants, rail) */
.section-heading { font-size: 20px; font-weight: 600; }
.section-swoosh { width: 90px; height: 7px; margin-top: 9px; }

/* featured offer */
.category-featured { margin-top: var(--sp-6); }

.category-featured__eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-green-text);
  margin: 0 0 14px;
}

.category-featured__card { max-width: 560px; }

/* deal grid + honest pagination */
.category-grid { margin-top: 22px; }

.deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--sp-4);
}

.category-grid__more { text-align: center; margin-top: 22px; }
.category-grid__more .btn-secondary { font-size: 14px; padding: 11px 26px; border-radius: 11px; }
.category-grid__more .is-loading { opacity: 0.6; pointer-events: none; }

/* merchant highlights — derived, count-free mini cards */
.merchant-highlights { margin-top: var(--sp-8); }

.merchant-highlights__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.merchant-mini {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--card-white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 14px var(--sp-4);
  text-decoration: none;
  transition: border-color .15s ease;
}
.merchant-mini:hover { border-color: var(--brand-green); }

.merchant-mini__avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--tint-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--brand-navy);
}

.merchant-mini__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--brand-navy);
}

/* related-categories rail */
.category-rail { margin-top: var(--sp-8); }

.category-rail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: var(--sp-4);
}

.category-rail__chip {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--brand-navy);
  background: var(--card-white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  padding: 8px var(--sp-4);
  text-decoration: none;
  transition: border-color .15s ease;
}
.category-rail__chip:hover { color: var(--brand-navy); border-color: var(--brand-navy); }

.category-hub .newsletter-module { margin-top: var(--sp-8); }

/* ==========================================================================
   filter-bar — lens + sort chips (partials/filter-bar.hbs)
   States: default (Newest active) · active (green fill, lens gets ✕) ·
   filtered (summary line + Clear). Empty lens group → label + divider
   vanish and the bar collapses to sort-only.
   ========================================================================== */

.filter-bar {
  margin-top: 34px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}

.filter-bar__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.filter-bar__row::-webkit-scrollbar { display: none; }

.filter-bar__row:not(:has(.filter-bar__lens)) .filter-bar__label--lens,
.filter-bar__row:not(:has(.filter-bar__lens)) .filter-bar__divider { display: none; }

.filter-bar__label {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-right: 2px;
}

.filter-bar__divider {
  flex: none;
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 var(--sp-1);
}

.filter-bar__chip {
  flex: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-navy);
  background: var(--card-white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  padding: 7px 15px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.filter-bar__chip:hover { color: var(--brand-navy); border-color: var(--brand-navy); }

.filter-bar__chip.is-active {
  font-weight: 600;
  color: var(--card-white);
  background: var(--brand-green);
  border-color: var(--brand-green);
}
.filter-bar__chip.is-active:hover { color: var(--card-white); }

/* removable ✕ on an applied lens */
.filter-bar__lens.is-active::after {
  content: "✕";
  opacity: 0.8;
  font-size: 12px;
  margin-left: 7px;
}

.filter-bar__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.filter-bar__summary-text { font-size: 14px; color: var(--text-muted); }
.filter-bar__summary-text b { color: var(--brand-navy); }

.filter-bar__clear {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-green-text);
  white-space: nowrap;
  text-decoration: none;
}
.filter-bar__clear:hover { text-decoration: underline; }

/* ==========================================================================
   Homepage (home.hbs) — merchandised storefront
   ========================================================================== */

.home-eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-green-text);
  margin: 0 0 var(--sp-1);
}

.home-hero__headline {
  font-size: var(--type-page-title);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-top: 6px;
}

.home-hero__swoosh { width: 130px; height: 9px; margin-top: 11px; }

.home-hero__intro {
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 15px 0 22px;
  max-width: 560px;
  text-wrap: pretty;
}

.home-hero__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .home-hero__grid { grid-template-columns: 1fr 1fr; } }

.home-section { margin-top: 44px; }
.home-section__more { text-align: center; margin-top: var(--sp-5); }
.home-section__more .btn-secondary { font-size: 14px; padding: 11px 26px; border-radius: 11px; }

/* section-head — heading + swoosh + optional sub + "See all" */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.section-head__title { font-size: var(--type-section); font-weight: 600; }
.section-head__swoosh { width: 95px; height: 7px; margin-top: 9px; }
.section-head__sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 10px 0 0;
  max-width: 420px;
}
.section-head__more {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.section-head__more:hover { text-decoration: underline; }

/* horizontal-scroll card row (trending, lens rows) */
.scroll-row {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  padding-bottom: var(--sp-1);
  scrollbar-width: none;
}
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row__item { flex: none; width: 240px; }
@media (min-width: 720px) { .scroll-row__item { width: 270px; } }

/* category rail tiles — emoji + text label (label always present) */
.home-rail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
@media (min-width: 720px) { .home-rail { grid-template-columns: repeat(3, 1fr); } }

.cat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--card-white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  color: var(--brand-navy);
  text-decoration: none;
  transition: border-color .15s ease;
}
.cat-tile:hover { color: var(--brand-navy); border-color: var(--brand-green); }

.cat-tile__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--tint-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.cat-tile__name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }

/* editor's picks — featured card + "Why we picked it" caption */
.home-picks__grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
@media (min-width: 720px) { .home-picks__grid { grid-template-columns: 1fr 1fr; } }

.editor-pick__note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: var(--sp-3);
  background: var(--disclosure-bg);
  border: 1px solid var(--disclosure-border);
  border-radius: 11px;
  padding: var(--sp-3) 14px;
}
.editor-pick__emoji { flex: none; font-size: 15px; }
.editor-pick__text { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin: 0; }
.editor-pick__text b { color: var(--brand-navy); }

/* newsletter head variant with mascot (homepage) */
.newsletter-module__head { display: flex; align-items: center; gap: 10px; }
.newsletter-module__mascot {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* navy mark → white on the navy panel */
  opacity: 0.9;
}

.home .newsletter-module { margin-top: 44px; }

/* trust strip — static brand promises */
.trust-strip {
  margin-top: 44px;
  background: var(--tint-green);
  border: 1px solid color-mix(in srgb, var(--brand-green) 24%, var(--brand-cream));
  border-radius: var(--r-panel);
  padding: 22px 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 720px) { .trust-strip { grid-template-columns: repeat(3, 1fr); } }

.trust-strip__item { display: flex; align-items: flex-start; gap: 11px; }

.trust-strip__check {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--card-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.trust-strip__title { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--brand-navy); margin: 0; }
.trust-strip__copy { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 2px 0 0; }

/* footer brand lockup */
.site-footer__brand { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 14px; }
.site-footer__mascot { width: 22px; height: 22px; object-fit: contain; }
.site-footer__wordmark { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--brand-navy); }

/* ==========================================================================
   Merchant page + stores index (custom-merchant.hbs / stores-index.hbs)
   ========================================================================== */

/* merchant-avatar — logo-or-lettermark, identical tile either way.
   The lettermark works without JS: the full store name is emitted and
   ::first-letter shows only the initial. has-logo (set by site.js when
   logoUrl exists) swaps to the white logo tile at the same size. */
.merchant-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tint-navy);
  border: 1px solid color-mix(in srgb, var(--brand-navy) 12%, var(--card-white));
  overflow: hidden;
}
.merchant-avatar--s { width: 46px; height: 46px; border-radius: 12px; }
.merchant-avatar--l { width: 72px; height: 72px; border-radius: 18px; }
@media (min-width: 720px) { .merchant-avatar--l { width: 96px; height: 96px; } }

.merchant-avatar__letter {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-navy);
  font-size: 0;               /* hide the full name… */
  line-height: 1;
}
.merchant-avatar__letter::first-letter { font-size: 19px; } /* …show the initial */
.merchant-avatar--l .merchant-avatar__letter::first-letter { font-size: 34px; }
@media (min-width: 720px) { .merchant-avatar--l .merchant-avatar__letter::first-letter { font-size: 44px; } }

.merchant-avatar.has-logo { background: var(--card-white); border-color: var(--border); }
.merchant-avatar.has-logo .merchant-avatar__letter { display: none; }
.merchant-avatar__logo { width: 100%; height: 100%; object-fit: contain; }

/* merchant header */
.merchant-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
@media (min-width: 720px) { .merchant-head { gap: 22px; } }

.merchant-head__body { flex: 1; min-width: 200px; }

.merchant-head__name {
  font-size: var(--type-page-title);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.merchant-head__swoosh { width: 110px; height: 8px; margin-top: 10px; }

.merchant-head__descriptor {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 14px 0 0;
  max-width: 520px;
}

.merchant-head__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--tint-green);
  border: 1px solid color-mix(in srgb, var(--brand-green) 24%, var(--brand-cream));
  border-radius: var(--r-pill);
  padding: 7px 15px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-green-text);
}
.live-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-green); }

.merchant-head__updated { font-size: 13px; color: var(--text-muted); }

.merchant-head__visit { font-size: 13px; font-weight: 600; text-decoration: none; }
.merchant-head__visit:hover { text-decoration: underline; }

/* editorial credibility box */
.editors-box {
  margin-top: 26px;
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--card-white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-4) 18px;
}

.editors-box__icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--disclosure-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.editors-box__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 5px;
}

.editors-box__copy p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 600px;
  text-wrap: pretty;
}

/* deals section */
.merchant-deals { margin-top: 38px; }
.merchant-deals__grid { margin-top: 22px; }
.merchant-deals .filter-bar { margin-top: var(--sp-4); }

.section-head__note { font-size: 13px; color: var(--text-faint); white-space: nowrap; }

/* merchant-tile — store card (stores index + "More stores") */
.merchant-tile {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--card-white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 13px 15px;
  color: var(--brand-navy);
  text-decoration: none;
  transition: border-color .15s ease;
}
.merchant-tile:hover { color: var(--brand-navy); border-color: var(--brand-green); }

.merchant-tile__body { flex: 1; min-width: 0; }

.merchant-tile__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
}

.merchant-tile__count { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }

.merchant-tile__arrow { flex: none; color: var(--brand-green-text); font-weight: 600; }

/* "More stores" row — CSS caps at 4 tiles (gating may drop some) */
.more-stores { margin-top: var(--sp-8); }
.more-stores__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
@media (min-width: 720px) { .more-stores__grid { grid-template-columns: repeat(2, 1fr); } }
.more-stores__grid .merchant-tile:nth-child(n+5) { display: none; }

.merchant-page .newsletter-module { margin-top: var(--sp-8); }

/* stores index grid */
.stores-index__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-top: 26px;
}
@media (min-width: 640px) { .stores-index__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .stores-index__grid { grid-template-columns: repeat(3, 1fr); } }