/* Coupon / store pages — loaded conditionally via themeOverrideCss (the per-page
   stylesheet swap header.ejs already supports). Every selector is namespaced
   `coupon-` or `store-` so it never leaks into review or home card styling.

   Do not write a `prefix-*` glob in a comment here: the `*` followed by `/`
   closes the comment early, and the rule immediately after it is silently eaten
   by the parser. That exact typo cost an afternoon — the stylesheet loads, most
   of it works, and one rule is just gone. */

/* Equal-height cards. grid-auto-rows:1fr makes every row as tall as its tallest
   card; the card is then a flex column whose footer is pushed down with
   margin-top:auto. Without both halves, a coupon with a two-line title makes its
   neighbours' buttons sit higher than its own, and the row of CTAs — the thing
   the reader's eye is tracking — stops being a line. */
.coupon-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .coupon-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .coupon-grid { grid-template-columns: repeat(3, 1fr); } }

.coupon-card { display: flex; }
.coupon-card__body {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem;
  width: 100%;
}
.coupon-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--color-ink);
}
.coupon-card__discount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
/* Pinned to the bottom — see .coupon-grid above. */
.coupon-card__footer { margin-top: auto; display: flex; flex-direction: column; gap: .6rem; }

/* Dashed, monospace, on the sunken tone: a coupon code should look like
   something you copy, not like body text. */
.coupon-card__code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .15rem .5rem;
  border: 1px dashed currentColor;
  border-radius: 4px;
}
.coupon-card__copy-hint { font-size: .75rem; color: var(--color-muted); }

.coupon-card__meta { color: var(--color-muted); display: flex; flex-direction: column; gap: 4px; font-size: .8rem; }
.coupon-card__expiry--soon { color: var(--color-score-low); font-weight: 600; }
.coupon-card__verified { color: var(--color-score-high); }

/* Home "Featured deals" rail — scroll controls.
 *
 * The affordance is a pair of buttons, NOT an edge fade. A gradient over the last
 * card dims its price and its CTA, which is exactly what a half-rendered card
 * looks like — the cure read as the disease. It also contradicts the theme
 * (hairline rules, no gradients), so the fade was foreign twice over.
 *
 * The buttons live in the section header, clear of the cards: nothing is ever
 * painted over content. Hidden below sm — touch scrolls by swiping and does not
 * need them — and hidden entirely when there is nothing to scroll, a state the
 * rail script measures (a control that cannot do anything must not be offered).
 */
.coupon-rail-nav { display: none; gap: .5rem; }
@media (min-width: 640px) {
  [data-deals-rail].is-scrollable .coupon-rail-nav { display: flex; }
}
.coupon-rail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  transition: border-color .15s ease, opacity .15s ease;
}
.coupon-rail-btn:hover:not(:disabled) { border-color: var(--color-ink); }
.coupon-rail-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Disabled, not removed: a control that vanishes at the end of the rail moves the
   one next to it under the cursor that was about to click it. */
.coupon-rail-btn:disabled { opacity: .35; cursor: default; }
.coupon-rail-btn svg { width: 18px; height: 18px; }

/* Filter bar — plain GET form, no SPA. */
.coupon-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 1rem 0;
  margin-bottom: 2rem;
  border-block: 1px solid var(--color-line);
}
.coupon-filter-bar label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 4px;
}

.coupon-disclosure {
  background: var(--color-sunken);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: .75rem 1rem;
  font-size: .875rem;
  color: var(--color-muted);
}
/* A link sitting inside a block of text must not be identified by colour alone —
   a colourblind reader sees a plain sentence (WCAG 1.4.1; axe: link-in-text-block).
   Underline it. */
.coupon-disclosure a { text-decoration: underline; }

/* Store header (/store/:slug) */
.store-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-line);
}
.store-header__logo { width: 64px; height: 64px; object-fit: contain; }
.store-header__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-sunken);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
.store-header__name { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
.store-header__desc { color: var(--color-muted); max-width: 60ch; }

/* Store stats — same numeric treatment as every other measurement on the site. */
.store-stats { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1.5rem; }
.store-stat__value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.store-stat__label {
  margin-top: .3rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
}