/* Black Friday deals page. Product cards in a grid under each group heading, with a two-row filter that deals.js builds.
   Without JavaScript every card shows. Mobile first: one column, two from 40em, three from 64em. */
.deals-page { padding-block: var(--space-4) clamp(2.5rem, 6vw, 4.5rem); }
.deals-page .prose { max-width: none; }
.deals-page .prose > :where(p, ul, .faq) { max-width: 64rem; }

/* Head: a short lead on one wide line or two, and the filter close below it */
.deals-page .article__title { margin-bottom: var(--space-2); font-size: var(--fs-800); }
.deals-page .article__lead { max-width: 64rem; margin-bottom: 0; font-size: var(--fs-500); }
.deals-page__body { margin-top: var(--space-4); }
.deals-page .prose > .deals__when { padding: var(--space-3) var(--space-4); background: var(--cream-deep); border-radius: var(--radius); font-size: var(--fs-300); }
@media (min-width: 40em) { .deals-page .prose > .deals__when { font-size: var(--fs-400); } }
.deals-page .prose > .deals__note { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--fs-300); }
.deals-page .prose > .deals { margin-top: var(--space-5); }

/* Filter bar (inserted by deals.js) */
.filter { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--cream-deep); border-radius: var(--radius); }
.filter__row { display: grid; gap: var(--space-2); }
.filter__label { margin: 0; font-weight: var(--fw-bold); }
@media (min-width: 40em) { .filter__row { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; } }
.filter__chips { display: flex; flex-wrap: nowrap; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); }   /* phones: one scrolling line per row keeps the filter short */
@media (min-width: 40em) { .filter__chips { flex-wrap: wrap; overflow: visible; padding-bottom: 0; } }
.filter__chip {
  flex: none;
  min-height: var(--target);
  padding: 0.4rem 0.95rem;
  background: var(--surface);
  color: var(--espresso);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font: var(--fw-semibold) var(--fs-300) / 1.2 var(--font-body);
  cursor: pointer;
}
.filter__chip[aria-pressed='true'] { background: var(--olive); color: var(--white); border-color: var(--olive); }
.filter__count { margin: 0; color: var(--text-muted); font-size: var(--fs-300); }

/* Groups and cards */
.deals { display: grid; gap: var(--space-6); }
.deals [hidden] { display: none; }
.deals__group { display: grid; gap: var(--space-4); }
.deals__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); }
.deals__head > * { margin: 0; }
.deals__lede { margin: 0; max-width: 64rem; color: var(--text-muted); }
.deals__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 40em) { .deals__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .deals__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.deals .deal { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.deals .deal > * { margin: 0; }
.deal__media { display: block; }
.deal__media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--white); border-radius: var(--radius-s); }
.deal__title { color: var(--olive); font: var(--fw-semibold) var(--fs-500) / var(--lh-snug) var(--font-heading); }
.deal__facts { color: var(--text-muted); font-size: var(--fs-300); }
.deal__hook { font-weight: var(--fw-semibold); }
.deals .deal__specs { display: grid; gap: var(--space-2); padding: 0; list-style: none; font-size: var(--fs-300); }
.deals .deal > .deal__buy { margin-top: auto; padding-top: var(--space-2); }
.deals-page .deal__buy .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--action);
  border-radius: var(--radius-s);
  background: var(--action);
  color: var(--action-text);
  font: var(--fw-bold) 1rem / 1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--action);
}
.deals-page .deal__buy .wp-block-button__link:hover { background: var(--action-hover); border-color: var(--action-hover); box-shadow: 0 3px 0 var(--action-hover); }
.deal__more { font-size: var(--fs-300); }
.deals__link a, .deal__more a { display: inline-block; padding-block: var(--space-3); }