/* ==========================================================================
   Catalog slice, wave 3: responsive pass for /wholesale/ and /wholesale/{sport}/.
   Targets 320, 360, 375, 390, 414, 768, 820, 1024, 1280, 1440 and 1920 wide screens.
   Builds on 10-catalog.css and 20-catalog.css. Scoped to .route-catalog and .route-sport.
   ========================================================================== */

/* ---------- guards shared by both templates ---------- */
.route-catalog main, .route-sport main { overflow-x: clip; }
.route-catalog h1.display, .route-sport h1.display, .cx-styles-head h2, .route-sport .group-h { overflow-wrap: anywhere; }
.cx-hero-copy, .cx-spec, .cx-sports, .route-sport .products { min-width: 0; }
.cx-sport-img img, .route-sport .pcard .plate img { max-width: 100%; }

/* "Other sports" chips: full tap targets */
.route-sport .chip-row .chip { min-height: 44px; padding-inline: 14px; }

/* ---------- wide desktop (1920): keep the sport grid and cards from stretching thin ---------- */
@media (min-width: 1600px) {
  .cx-sport-items { font-size: .86rem; }
  .route-sport .products { gap: 16px; }
}

/* ---------- small laptops and landscape tablets (861 to 1100) ---------- */
@media (min-width: 861px) and (max-width: 1100px) {
  .cx-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
  .cx-spec dl div { grid-template-columns: 88px minmax(0, 1fr); }
}

/* ---------- tablets, portrait (561 to 860): spec card goes full width as a 3-column fact grid ---------- */
@media (min-width: 561px) and (max-width: 860px) {
  .cx-spec { max-width: none; padding: 16px 18px 14px; }
  .cx-spec dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; }
  .cx-spec dl div { grid-template-columns: 1fr; gap: 3px; padding: 10px 0 4px; }
  .cx-spec-price { margin-bottom: 6px; }
}
@media (min-width: 700px) and (max-width: 860px) {
  .cx-sports { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- sport hero: once stacked, darken evenly so copy stays readable across the width ---------- */
@media (max-width: 860px) {
  .cx-sport-hero::after { background: linear-gradient(180deg, rgba(14,27,44,.90) 0%, rgba(14,27,44,.94) 100%); }
  .cx-sport-hero .cx-spec { margin-top: 4px; }

  /* Sticky order bar: lift the WhatsApp button above it and keep the last row of cards clear. */
  .route-sport .wa-float { transition: bottom .3s var(--ease); }
  .route-sport.cx-mbar-on .wa-float { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .route-sport .cx-styles-band { padding-bottom: calc(clamp(48px, 6vw, 88px) + 24px); }
}

/* ---------- phones (up to 560) ---------- */
@media (max-width: 560px) {
  /* Hero facts: two columns, label above value, so all trade terms fit in one screen. */
  .cx-spec { padding: 14px 14px 10px; }
  .cx-spec dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .cx-spec dl div { grid-template-columns: 1fr; gap: 2px; padding: 9px 0 5px; }
  .cx-spec dd { font-size: .94rem; }
  .cx-spec dd small { font-size: .8rem; }
  .cx-spec-price b { font-size: 1.8rem; }

  .route-catalog .cx-hero h1.display { font-size: clamp(1.85rem, 8.4vw, 2.4rem); }
  .cx-sport-hero h1.display { font-size: clamp(1.8rem, 8.2vw, 2.3rem); }
  .cx-sport-hero .sport-hero-inner { padding-block: 24px 28px; }
  .cx-sports-head p { font-size: 1rem; }

  /* Sport list rows: readable garment line, image keeps its crop. */
  .cx-sport-img { align-self: stretch; }
  .cx-sport-top strong { font-size: 1.1rem; }
  .cx-sport-items { font-size: .875rem; line-height: 1.4; color: var(--ink-2); }
  .cx-sport-foot { font-size: .82rem; }
  .cx-sport .go { width: 32px; height: 32px; flex: none; }

  /* Range chips in the sport hero wrap tightly; counts stay visible. */
  .cx-range { gap: 6px; }
  .cx-range a { padding: 6px 10px; font-size: .875rem; }

  .cx-styles-head { align-items: flex-start; }
  .cx-styles-head .cx-custom { font-size: .84rem; }

  /* Product cards: two per row, name and price stay legible. */
  .route-sport .products { gap: 10px; }
  .route-sport .pcard .body { padding: 10px 10px 12px; gap: 4px; }
  .route-sport .pcard h3, .route-sport .pcard h4 { font-size: .98rem; line-height: 1.22; overflow-wrap: anywhere; }
  /* Style code stays on one line; the group name is already the section heading, so it may truncate. */
  .route-sport .pcard .cat { font-size: .64rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .route-sport .pcard .price { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 8px; }
  .route-sport .pcard .price b { font-size: 1.05rem; }
  .route-sport .group-h { font-size: 1.08rem; }
  .route-sport .group + .group { margin-top: 26px; }
  .cx-flip { top: 6px; right: 6px; }

  .route-sport .hint, .route-catalog .hint { font-size: .94rem; }
  .cx-search-hint { font-size: .875rem; }
  .cx-none-copy p { font-size: 1rem; }
}

/* ---------- smallest phones (up to 359): tighter two-up product grid and sport rows ---------- */
@media (max-width: 359px) {
  .route-sport .products, .cx-results { gap: 8px; }
  .route-sport .pcard .body, .cx-results .pcard .body { padding: 9px 8px 10px; }
  .route-sport .pcard h3, .route-sport .pcard h4, .cx-results .pcard h3 { font-size: .92rem; }
  .cx-spec dl { column-gap: 10px; }
  .cx-sport-n { font-size: .62rem; }
  .cx-mbar-txt span { font-size: .64rem; }
  .cx-mbar .btn { padding-inline: 14px; }
}

/* ---------- phones turned sideways: the order bar would eat a fifth of the screen ---------- */
@media (max-height: 460px) and (orientation: landscape) {
  .cx-mbar { display: none !important; }
  .route-sport.cx-mbar-on .wa-float { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .route-sport .wa-float { transition: none; }
}