/* ============================================================
   shop.css — pro shop page styles.

   Loaded after styles.css so it inherits the existing top-nav,
   footer, button, reveal, and hamburger vocabularies, and only
   adds the shop-specific surface area: hero, tabs, filters,
   product grid + card, product modal, cart pill.

   Brand fidelity:
   - DDC Biden display for the hero title
   - Aghast for body / cards
   - 220ms standard transitions (project animation language)
   - sage/cream palette from tokens.css

   Layout reuses the .wrap / .canvas pattern from the landing
   page so the shop scales the same way as the rest of the site.
   ============================================================ */

.body--shop {
  background: var(--color-pale-green);
}

.page--shop {
  background: var(--color-pale-green);
  position: relative;
  overflow-x: hidden;
  /* Scope a tighter content-inset to the shop. The landing page's
     220px desktop inset is editorial-Figma-driven; for a grid-led
     shop browse experience the gutters should breathe with viewport
     instead of stranding content at a fixed center. Clamps from
     32px (at 768 viewport, which is where the mobile breakpoint
     fires) up to 80px (at 1440+), so the four-column grid stays
     comfortable across the entire desktop range. */
  --content-inset: clamp(32px, calc(32px + (100vw - 768px) * 0.072), 80px);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   SHOP HERO — contained box like the gift-cards section on the
   landing. The image lives inside a 15px-radius box, with the
   title overlaid (same type style as .gift-cards__title) over a
   dark radial overlay (same recipe as .proshop-top__overlay).
   Four images crossfade inside the box on a 6s auto-timer.

   CMS-controllable tokens (designer-facing knobs):
     --hero-title-color     — title text color
     --hero-title-opacity   — title alpha
     --hero-overlay-color   — tint over the image
     --hero-overlay-opacity — tint alpha

   Alignment is a class because text-align + align-items must
   swap together (three discrete states, not a single variable):
     .shop-hero--left | .shop-hero--center | .shop-hero--right
   ============================================================ */

.shop-hero {
  /* Clear the fixed top-nav, then a generous gap below the box
     before the sub-nav row starts. */
  padding: 120px 0 64px;

  --hero-title-color: var(--color-pale-green);
  --hero-title-opacity: 0.85;
  /* Default: solid black at 10% — light, subtle. CMS can dial up
     the opacity for darker images or dial in a different color. */
  --hero-overlay-color: #000000;
  --hero-overlay-opacity: 0.10;
}

/* Override the global .canvas (which is a strict 1440 width) so
   the hero canvas matches the shop section's max-width + padding
   pattern. Result: the hero box and the content below it occupy
   the exact same width, so the rounded corners always read. */
.shop-hero__canvas {
  width: 100%;
  max-width: var(--canvas-width);
  margin: 0 auto;
  padding: 0 var(--content-inset);
}

/* The contained box fills the full content area — aspect-ratio
   keeps the gift-cards proportion (1200x496 ≈ 2.42:1) at any
   width, so the box scales with the viewport while staying
   cinematic. */
.shop-hero__box {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 496;
  border-radius: 15px;
  overflow: hidden;
}

.shop-hero__carousel {
  position: absolute;
  inset: 0;
}

.shop-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease-in-out;
}

.shop-hero__slide.is-active {
  opacity: 1;
}

.shop-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Full-image-covering flat overlay. Color + opacity are driven
   by independent CSS custom properties so the eventual CMS can
   tune each separately (default = solid black at 10%). */
.shop-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--hero-overlay-color);
  opacity: var(--hero-overlay-opacity);
  pointer-events: none;
  z-index: 1;
}

/* Hero label — single line in the lower-left corner of the box,
   styled like .courses__featured-label on the landing: DDC Biden
   display, uppercase, pale-green at 0.85 opacity. Percentage-based
   positioning so the inset scales with the box width. */
.shop-hero__label {
  position: absolute;
  left: 5%;
  bottom: 8%;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 36px;
  text-transform: uppercase;
  color: var(--hero-title-color);
  opacity: var(--hero-title-opacity);
  margin: 0;
}

/* Dots sit on the same baseline as the .shop-hero__label and
   mirror its inset on the opposite side — label at left 5%
   bottom 8%, dots at right 5% bottom 8%. The small +4px lift
   on bottom optically centers the 20px dot circles against the
   cap-height of the 36px-line-height Biden label rather than
   the raw line-box bottom. */
.shop-hero__dots {
  position: absolute;
  right: 5%;
  bottom: calc(8% + 4px);
  display: flex;
  gap: 11px;
  z-index: 3;
}

/* Dots match the homepage testimonials/courses dots: 20px circles
   that stay the same size in every state — only the color/opacity
   shifts. Inverted to pale-green for legibility on the dark hero. */
.shop-hero__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-pale-green);
  opacity: 0.5;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 220ms ease;
}

.shop-hero__dot:hover {
  opacity: 0.75;
}

.shop-hero__dot.is-active {
  opacity: 1;
}

/* ============================================================
   SHOP TAB PILLS — BROWSE / CART / ORDERS / REQUESTS
   ============================================================ */

.shop {
  background: var(--color-pale-green);
  padding-bottom: 120px;
}

.shop__canvas {
  width: 100%;
  max-width: var(--canvas-width);
  margin: 0 auto;
  padding: 0 var(--content-inset);
}

.shop-tabs {
  display: flex;
  gap: 12px;
  /* No container box — the round pills sit directly on the page
     background. flex:1 on each pill (below) lets them expand to fill
     the full content width. */
  margin-bottom: 24px;
  justify-content: space-between;
}

/* Master Toggle — LARGE (page sub-nav). Filled light → dark-green
   active, Aghast bold, ~50px. Ported from the consolidated pill
   system: fill-on-hover (medium-green) and a solid dark-green
   active state, both fully round. */
.shop-tabs__pill {
  flex: 1;
  /* flex centering on both axes so the text label sits in the
     true optical center of the pill height (the Aghast cap-height
     was sitting a hair below center with just text-align). */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  background-color: var(--color-light-green);
  font-family: var(--font-body);
  font-size: 16px;             /* Aghast bold */
  font-weight: 700;            /* Aghast bold (synthetic — Aghast ships Regular only) */
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-dark-green);
  text-decoration: none;
  transition: background-color 220ms ease, color 220ms ease;
}

.shop-tabs__pill:hover {
  background-color: var(--color-medium-green);
  color: var(--color-pale-green);
}

/* Active pill — solid dark-green fill, pale-green label, fully round. */
.shop-tabs__pill.is-active,
.shop-tabs__pill.is-active:hover {
  background-color: var(--color-dark-green);
  color: var(--color-pale-green);
  border-radius: 999px;
}

/* Master Label — count variant (red, mono). Sits inside the CART tab. */
.shop-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 11px;
  background: var(--color-red);
  color: var(--color-pale-green);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.02em;
}

/* ============================================================
   BANNER — "Member-only pricing on every item." +
   "Don't see what you want? — Request an item." CTA
   ============================================================ */

.shop-banner {
  background: var(--color-white);
  /* 15px standard radius (matches sub-nav). */
  border-radius: 15px;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.shop-banner__lead {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-black-green-text);
  margin: 0;
}

/* ============================================================
   FILTERS — category pills + brand/sort dropdowns
   ============================================================ */

.shop-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.shop-filters__categories {
  display: flex;
  gap: 8px;
}

/* Filled pill matching the admin tier-pill (soft-green default, solid
   medium-green active) — but in Aghast (--font-body), not the admin's
   display font. */
.shop-filters__pill {
  appearance: none;
  border: 0;
  background-color: var(--color-light-green);
  font-family: var(--font-body);    /* Aghast */
  font-size: 14px;
  font-weight: 700;                 /* Aghast bold */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-dark-green);
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 220ms ease, color 220ms ease;
}

.shop-filters__pill:hover {
  background-color: #bcceb5;
  color: var(--color-dark-green);
}

/* Active — solid medium-green fill, pale text (admin active treatment). */
.shop-filters__pill.is-active {
  background-color: #A6C0AE;
  color: var(--color-pale-green);
}

.shop-filters__pill.is-active:hover {
  background-color: #A6C0AE;
  color: var(--color-pale-green);
  opacity: 0.92;
}

.shop-filters__dropdowns {
  display: flex;
  gap: 12px;
}

.shop-filters__select-wrap {
  position: relative;
  display: inline-block;
}

.shop-filters__select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-white);
  border: 1px solid var(--color-light-green);
  border-radius: 999px;
  padding: 12px 40px 12px 22px;   /* +15% — matches pill scale */
  font-family: var(--font-body);
  font-size: 15px;                /* +15% from 13 — matches pill scale */
  font-weight: 700;               /* Aghast bold for consistency */
  color: var(--color-black-green-text);
  cursor: pointer;
  transition: border-color 220ms ease;
  /* Custom caret */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4 L6 8 L10 4' fill='none' stroke='%234C8D73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px;
}

.shop-filters__select:hover,
.shop-filters__select:focus {
  border-color: var(--color-dark-green);
  outline: none;
}

/* ============================================================
   PRODUCT GRID + CARD
   ============================================================ */

.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.shop-empty {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-dark-green);
  text-align: center;
  padding: 80px 0;
}

.product-card {
  appearance: none;
  border: 0;
  background: var(--color-white);
  border-radius: 15px;
  padding: 0;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.125);
  transition: transform 220ms ease, box-shadow 220ms ease;
  font: inherit;
  color: inherit;
}

.product-card:hover {
  transform: translateY(-2px);
  /* Tighter shadow — half the blur spread, smaller offset so the
     hover feels more anchored to the card than levitating. */
  box-shadow: 0 6px 14px rgba(53, 68, 59, 0.14);
}

.product-card__photo-wrap {
  position: relative;
  /* Full white card — photo area inherits the same white as the
     body so the card reads as a single unified surface rather than
     a tinted image area + white text area. */
  background: var(--color-white);
  /* Square photo area — matches the modal gallery so all product
     imagery is designed to a single 1:1 spec. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.product-card__photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 420ms ease;
}

.product-card:hover .product-card__photo {
  transform: scale(1.02);
}

/* Status badges — upper-right corner of the product photo.
   Two variants today:
     --sale (red, from the brand palette)
     --new  (yellow, the same #cbc060 used in the help FAB)
   Same small box shape (5px radius matches --button-radius),
   short uppercase label, generous padding, brand body font. */
/* Master Label — product-card badges. Mono, fully round (999px),
   ported from the consolidated pill system (hour-golf-dev/public/hg).
   Per-variant colors below keep this public shop's New/Sale semantics. */
.product-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.product-card__badge--sale {
  background: var(--color-red);
  color: var(--color-pale-green);
}

.product-card__badge--new {
  background: #cbc060;
  color: var(--color-black-green-text);
}

/* "member -NN%" perk tag — green pill on the right of the price row, so it
   sits on the Biden price baseline (the footer is align-items: baseline). */
.product-card__member-tag {
  white-space: nowrap;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--color-light-green);
  color: var(--color-dark-green);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Sits right after the Biden price, dropped to the bottom (dark) price line
     — the price column is two lines (struck price on top), and a plain
     baseline-align would pin the pill to the top line. */
  align-self: flex-end;
}

/* Master Label — DROP/Limited variant (red). */
.product-card__limited {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-red);
  color: var(--color-pale-green);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  padding: 3px 11px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.product-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card__brand {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-dark-green);
  margin: 0 0 6px;
}

.product-card__title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-black-green-text);
  margin: 0 0 6px;
}

.product-card__subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-medium-green);
  margin: 0 0 16px;
  min-height: 18px; /* keeps card heights aligned even when subtitle is empty */
}

.product-card__footer {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.product-card__price {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: var(--color-black-green-text);
  margin: 0;
}

/* Gift-card tile: the price line becomes a "Buy a gift card →" link line
   (the card click-through opens the gift purchase overlay, not the modal). */
.product-card__gift-cta {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
  color: var(--color-red);
  margin: 0;
}

.product-card__price-compare {
  display: block;                                  /* sits on its own line ABOVE the big Biden price */
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;                                /* heavier so it carries weight against the display-font sale price */
  color: var(--color-red);                         /* red strike — stands out against the dark-green sale price */
  text-decoration: line-through;
  text-decoration-color: var(--color-red);         /* ensure the line itself reads red in every browser */
  text-decoration-thickness: 1.5px;                /* a touch thicker so it reads cleanly at 13px */
  margin-bottom: 2px;
}

.product-card__stock-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-dark-green);
}

/* ============================================================
   PAGINATION + ITEMS-PER-PAGE — sub nav controls + bottom row

   Items-per-page lives inline with the brand/sort dropdowns at
   the top (via .shop-filters__select sharing styles). The page-nav
   row below the grid mirrors the sub-nav pill vocabulary so the
   bottom of the shop feels like a closing bookend of the top.
   ============================================================ */

.shop-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
  flex-wrap: wrap;
}

.shop-pagination[hidden] {
  display: none;
}

.shop-pagination__info {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-dark-green);
  margin: 0 16px;
  /* Sits between the prev/next clusters; on narrow widths it wraps
     above the page numbers, which is fine — the focal action is
     still the numbered buttons. */
}

.shop-pagination__btn {
  appearance: none;
  border: 1px solid var(--color-light-green);
  background: var(--color-white);
  color: var(--color-black-green-text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 10px 16px;
  min-width: 44px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

.shop-pagination__btn:hover:not([disabled]):not(.is-active) {
  color: var(--color-red);
  border-color: var(--color-red);
}

.shop-pagination__btn.is-active {
  /* Same active treatment as the sub-nav pills — soft green box,
     pale-green label — so the current page reads as the same kind
     of "you are here" signal as the active BROWSE / ALL pills. */
  background: #A6C0AE;
  color: var(--color-pale-green);
  border-color: #A6C0AE;
}

.shop-pagination__btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.shop-pagination__ellipsis {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-dark-green);
  padding: 0 4px;
  user-select: none;
}

/* Items-per-page label — sits inline above its select. The label
   lives in a flex column with the select so the pair stays grouped
   when .shop-filters__dropdowns wraps to a new row on narrow widths. */
.shop-filters__select-wrap--per-page {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.shop-filters__per-page-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-dark-green);
  white-space: nowrap;
}

/* ============================================================
   PRODUCT MODAL — image gallery + details + add to cart
   ============================================================ */

.product-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.product-modal[hidden] {
  display: none;
}

.product-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(53, 68, 59, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.product-modal__panel {
  position: relative;
  background: var(--color-white);
  border-radius: 18px;
  /* Narrower than before so the modal doesn't dominate the page,
     and content has breathing room inside. The previous 720px
     created the "image at full size + scroll bars" issue. */
  max-width: 540px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(53, 68, 59, 0.25);
  display: flex;
  flex-direction: column;
}

.product-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  appearance: none;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-black-green-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 220ms ease, color 220ms ease;
  box-shadow: 0 2px 8px rgba(53, 68, 59, 0.15);
}

.product-modal__close:hover {
  color: var(--color-red);
}

.product-modal__gallery {
  position: relative;
  /* Transparent background (inherits panel's white). When the product
     images get finalized as true 1:1 square assets they fill the box
     exactly; until then, non-square images sit on the panel's white
     with no visible "extra frame" around them. */
  background: transparent;
  /* Square gallery — matches the 1:1 product cards so the same image
     asset reads consistently in both contexts.
     - box-sizing: border-box so the padding sits inside the 380×380 box
       (otherwise content-box would inflate to 452×452 and break the
       square calc against max-width).
     - flex-shrink: 0 because the parent panel is a flex-column and
       was shrinking the gallery's height to make room for body content,
       which silently overrode aspect-ratio: 1/1. */
  box-sizing: border-box;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-modal__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 220ms ease;
}

.product-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-black-green-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 220ms ease, color 220ms ease;
  box-shadow: 0 2px 8px rgba(53, 68, 59, 0.15);
}

.product-modal__nav:hover {
  color: var(--color-red);
}

.product-modal__nav--prev {
  left: 16px;
}

.product-modal__nav--next {
  right: 16px;
}

.product-modal__nav[hidden] {
  display: none;
}

.product-modal__dots {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.product-modal__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-medium-green);
  opacity: 0.5;
  transition: opacity 220ms ease, background-color 220ms ease;
}

.product-modal__dot.is-active {
  background: var(--color-dark-green);
  opacity: 1;
}

.product-modal__body {
  /* Generous padding — more breathing room inside the panel,
     less crowded than Matt's admin modal. */
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.product-modal__title {
  font-family: var(--font-display);
  /* 40px on desktop — successive +25% then +20% bumps per David.
     Mobile override below clamps back to 24px so the title still fits
     comfortably in the narrower 540px panel + full-bleed phone modal. */
  font-size: 40px;
  line-height: 1.1;
  color: var(--color-dark-green);
  margin: 0 0 8px;
  text-transform: uppercase;
}

.product-modal__brand {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-dark-green);
  margin: 0 0 20px;
}

.product-modal__description {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-black-green-text);
  white-space: pre-wrap;
  margin: 0 0 24px;
}

.product-modal__sizes {
  margin-bottom: 20px;
}

.product-modal__sizes-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-dark-green);
  margin-bottom: 8px;
}

.product-modal__sizes-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.product-modal__size {
  appearance: none;
  border: 1px solid var(--color-light-green);
  background: var(--color-white);
  padding: 8px 16px;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;                                /* Aghast bold (synthetic — Aghast ships Regular only) */
  color: var(--color-black-green-text);
  cursor: pointer;
  transition: border-color 220ms ease, background-color 220ms ease, color 220ms ease;
  min-width: 48px;
}

.product-modal__size:hover {
  border-color: var(--color-dark-green);
}

.product-modal__size.is-active {
  background: var(--color-dark-green);
  border-color: var(--color-dark-green);
  color: var(--color-white);
}

.product-modal__price {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--color-black-green-text);
  margin: 0 0 4px;
}

/* Struck-through "was" price above the modal price — mirrors
   .product-card__price-compare, sized up a touch for the 28px modal price. */
.product-modal__price-compare {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-red);
  text-decoration: line-through;
  text-decoration-color: var(--color-red);
  text-decoration-thickness: 1.5px;
  margin-bottom: 3px;
}

/* Green "member -NN%" pill beside the modal price — mirrors
   .product-card__member-tag, rendered inline next to the current price. */
.product-modal__member-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  white-space: nowrap;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--color-light-green);
  color: var(--color-dark-green);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.product-modal__stock {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-dark-green);
  margin: 0 0 24px;
}

.product-modal__add {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.product-modal__add[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   CART PILL — floating bottom, shows when cart > 0
   ============================================================ */

.cart-pill {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  background: var(--color-dark-green);
  color: var(--color-white);
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(53, 68, 59, 0.25);
  transition: transform 220ms ease, background-color 220ms ease;
}

.cart-pill:hover {
  background: var(--color-black-green-text);
  transform: translateX(-50%) translateY(-2px);
}

.cart-pill[hidden] {
  display: none;
}

/* ============================================================
   RESPONSIVE — two independent sets of breakpoints:

   1. GRID DENSITY (col-count): 4 / 3 / 2 cards per row.
      Thresholds chosen so a card never gets cramped:
      - >1080: 4 cols (laptop+)
      - 641–1080: 3 cols (narrow desktop, tablets, big-phone landscape)
      - ≤640: 2 cols (phones, both orientations)

   2. LAYOUT STACKING (hero + banner + filter rows):
      Aligned with the landing page system —
      - ≤768: hero stacks, banner/filter wrap (existing breakpoint)
      - ≤500: tightest type sizes (Figma 430-frame floor)
   ============================================================ */

/* Grid: 4 → 3 transition */
@media (max-width: 1080px) {
  .shop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Hero shrinks + banner/filter wrap (landing-system breakpoint) */
@media (max-width: 768px) {
  .shop-hero {
    /* Less top padding on mobile — nav is shorter. */
    padding: 96px 0 40px;
  }

  .shop-hero__title {
    font-size: 28px;
    line-height: 28px;
  }

  .shop-hero__dots {
    /* Inherit bottom/right from the base rule so the dots stay
       aligned with the mobile label baseline. Smaller gap to suit
       the smaller dots below. */
    gap: 9px;
  }

  .shop-hero__dot {
    width: 14px;
    height: 14px;
  }

  /* Hero goes full-bleed + 50% taller, no rounded corners (≤768). */
  .shop-hero__canvas {
    max-width: none;
    padding: 0;
  }

  .shop-hero__box {
    border-radius: 0;
    aspect-ratio: 1200 / 744;
  }

  .shop-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .shop-tabs::-webkit-scrollbar {
    display: none;
  }

  .shop-tabs__pill {
    flex: 0 0 auto;
    padding: 12px 20px;
    font-size: 12px;
  }

  /* Category filter pills shrink to a compact chip (admin-area scale). */
  .shop-filters__pill {
    font-size: 13px;
    padding: 7px 14px;
    letter-spacing: 0.04em;
  }

  .shop-banner {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 18px;
    padding: 20px;
    gap: 16px;
  }

  .shop-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .product-card__body {
    padding: 16px;
  }

  .product-modal {
    padding: 0;
  }

  .product-modal__panel {
    border-radius: 0;
    max-height: 100vh;
    height: 100vh;
  }

  .product-modal__title {
    font-size: 30px;        /* +25% from 24 */
  }

  .product-modal__brand {
    font-size: 21px;        /* +50% from 14 */
    font-weight: 700;
  }

  /* Sizes / price / stock / add-to-cart move ABOVE the description
     (body is flex column; pushing description to the end does it). */
  .product-modal__description {
    order: 1;
  }

  .cart-pill {
    bottom: 16px;
    padding: 12px 22px;
    font-size: 13px;
  }
}

/* Grid: 3 → 2 transition */
@media (max-width: 640px) {
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 16px;    /* taller vertical gap between card rows */
  }
}

/* Smallest type scale (Figma 430-frame floor) */
@media (max-width: 500px) {
  .shop-grid {
    gap: 28px 14px;    /* keep the taller vertical gap on phone */
  }

  .product-card__body {
    padding: 14px;
  }

  .product-card__title {
    font-size: 14px;
  }

  .product-card__subtitle {
    font-size: 12px;
  }

  .product-card__price {
    font-size: 18px;
  }

  .shop-tabs {
    padding: 6px;
    gap: 8px;
  }

  .shop-tabs__pill {
    padding: 10px 16px;
    font-size: 11px;
  }

  /* Filter dropdowns stack only at this (mid-mobile) breakpoint, full
     container width so none are cropped. */
  .shop-filters__dropdowns {
    flex-direction: column;
    gap: 8px;
  }

  .shop-filters__select-wrap {
    display: block;
    width: 100%;
  }

  .shop-filters__select {
    width: 100%;
    max-width: calc(100vw - 2 * var(--content-inset));   /* page width minus margins */
    box-sizing: border-box;
  }

  /* Per-page row keeps "Show" + select on one line; the select fills
     the remaining space so it never overflows. */
  .shop-filters__select-wrap--per-page {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .shop-filters__select-wrap--per-page .shop-filters__select {
    flex: 1;
    width: auto;
  }

  /* Category pills smaller still on phone. */
  .shop-filters__pill {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* ── Gift-card purchase modal ──────────────────────────────────────────
   Skinned as a product modal (shares the product-modal classes): image
   on top, amount pills in the size-selector slot, live price line, the
   add-to-cart button slot. These rules add only what the gift form
   needs beyond a product: the custom-amount input and the purchaser /
   recipient fields. Inputs follow the size-pill vocabulary (white,
   light-green 1px border, 5px radius, Aghast 14). */

.gift-modal .product-modal__gallery {
  /* The clubhouse art is wide, not square — drop the 1:1 gallery box
     (it strands white bands above/below the image and makes the panel
     scroll) and left-align the art with the body's 40px gutter. The
     box takes its height from the capped image below. */
  aspect-ratio: auto;
  max-width: none;
  margin: 0;
  padding: 32px 40px 0;
  justify-content: flex-start;
}

.gift-modal .product-modal__image {
  max-height: 120px;
  /* The art has whitespace baked into the PNG — pull it left so the
     drawing's visible edge aligns with the title's left edge, and
     shift it down (equal-and-opposite margins keep the box height)
     to close the gap between the art and the title. */
  margin-left: -18px;
  margin-top: 20px;
  margin-bottom: -20px;
}

/* Compact rhythm — the gift form is tall (six fields), so field gaps
   run tighter than the product modal's 20px section spacing to keep
   the whole panel on screen without scrolling. */
.gift-modal .product-modal__title {
  /* Two-line Biden title (HOUR GOLF / GIFT CARD) with no brand line
     under it — carry the gap the brand used to provide. */
  margin-bottom: 14px;
}

.gift-modal .product-modal__description {
  margin-bottom: 18px;
}

.gift-modal .product-modal__sizes {
  margin-bottom: 14px;
}

.gift-modal__field {
  display: block;
  margin-bottom: 10px;
}

.gift-modal__input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-light-green);
  border-radius: 5px;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-black-green-text);
  transition: border-color 220ms ease;
}

.gift-modal__input:focus {
  outline: none;
  border-color: var(--color-dark-green);
}

.gift-modal__input::placeholder {
  color: var(--color-medium-green);
  opacity: 0.7;
}

.gift-modal__custom {
  margin-top: 8px;
}

.gift-modal__message {
  resize: vertical;
  min-height: 48px;
}

.gift-modal__error {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-red);
  margin: 0 0 12px;
}

/* ── Post-purchase banner (?gift=sent) ────────────────────────────────
   Sits above the filters on return from Stripe. Calm confirmation —
   pale green panel, no red. */

/* Explicit display beats the UA's [hidden] rule — restate it. */
.gift-sent-banner[hidden] {
  display: none;
}

.gift-sent-banner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 14px 18px;
  background: var(--color-pale-green);
  border: 1px solid var(--color-light-green);
  border-radius: 12px;
}

.gift-sent-banner__head {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-dark-green);
  white-space: nowrap;
}

.gift-sent-banner__body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-black-green-text);
}