/* ==========================================================================
   Catalog slice, wave 2: interaction and touch layer for /wholesale/ and /wholesale/{sport}/.
   Builds on 10-catalog.css and the shared press states in 20-system.css (cards and chips already
   sink on :active there). Motion uses transform and opacity only.
   ========================================================================== */

/* ---------- tactile ripple (20-catalog.js adds .cx-ripple on pointerdown) ---------- */
.cx-sport, .route-sport .pcard-link, .cx-results .pcard-link, .cx-try .chip, .cx-results-in a, .route-sport .filter-bar .chip, .cx-range a { position: relative; overflow: hidden; }
.cx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .14; transform: scale(0); animation: cx-ripple .6s var(--ease) forwards; z-index: 0; }
.cx-range a .cx-ripple, .filter-bar .chip.is-on .cx-ripple, .cx-try .chip[aria-current] .cx-ripple { background: #fff; }
@keyframes cx-ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- press states the shared layer does not cover ---------- */
.cx-sport { transition-property: transform, box-shadow, border-color; }
.cx-sport:active { transform: scale(.985); transition-duration: .08s; }
.cx-sport:active .go { background: var(--accent); border-color: var(--accent); color: #fff; }
.cx-range a:active, .cx-results-in a:active { transform: scale(.96); transition-duration: .08s; }
.cx-range a, .cx-results-in a { transition-property: transform, background-color, border-color; }

/* ---------- desktop spotlight on sport cards ---------- */
.cx-sport-body { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .cx-sport::after { content: ""; position: absolute; left: 0; top: 0; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(31, 79, 209, .10), rgba(31, 79, 209, 0) 70%); transform: translate(var(--cx-x, -999px), var(--cx-y, -999px)); opacity: 0; transition: opacity .25s; z-index: 0; }
  .cx-sport:hover::after { opacity: 1; }
  .cx-sport .go { transition: background .2s, color .2s, border-color .2s, transform .25s var(--ease); }
  .cx-sport:hover .go { transform: translateX(2px); }
}

/* ---------- /wholesale/ search: chips and links answer touch without sticky hover ---------- */
@media (hover: none) {
  .cx-try .chip:not([aria-current]):hover { border-color: var(--rule-strong); color: var(--ink); background: var(--surface); }
  .cx-results-in a:hover { border-color: var(--rule); }
}
@media (pointer: coarse) {
  .cx-results-in a { min-height: 44px; }
  .cx-results-clear { padding-inline: 4px; }
}

/* ---------- sport page: filter bar becomes a swipeable rail on small screens ---------- */
.route-sport .filter-bar .chip { font-family: inherit; }
.route-sport .filter-bar .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .route-sport .filter-bar .chip:not(.is-on):hover { border-color: var(--accent); color: var(--accent-ink); } }
@media (max-width: 860px), (pointer: coarse) {
  .route-sport .filter-bar { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 16px; }
  .route-sport .filter-bar::-webkit-scrollbar { display: none; }
  .route-sport .filter-bar .chip { flex: none; scroll-snap-align: start; min-height: 44px; white-space: nowrap; }
  .route-sport .filter-bar.cx-can-r { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .route-sport .filter-bar.cx-can-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
  .route-sport .filter-bar.cx-can-l.cx-can-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .cx-range a { min-height: 44px; }
}

/* ---------- touch: show-back button and swipe on product cards (sport pages and search results) ---------- */
.route-sport .pcard, .cx-results .pcard { position: relative; }
.cx-flip { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule-strong); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); cursor: pointer; box-shadow: 0 2px 8px rgba(14, 27, 44, .12); transition-property: transform, background-color, color, border-color; }
.cx-flip svg { transition: transform .35s var(--ease); }
.cx-flip:active { transform: scale(.9); transition-duration: .08s; }
.cx-flip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-flip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.cx-flip[aria-pressed="true"] svg { transform: rotate(180deg); }
.pcard.is-flipped .plate img.front { opacity: 0; transform: scale(.96); }
.pcard.is-flipped .plate img.back { opacity: 1; transform: none; }
.plate.cx-swipe { touch-action: pan-y; }
/* On touch screens a sticky :hover after a tap must not flip the card on its own. */
@media (hover: none) {
  .route-sport .pcard:not(.is-flipped):hover .plate img.front, .cx-results .pcard:not(.is-flipped):hover .plate img.front { opacity: 1; transform: none; }
  .route-sport .pcard:not(.is-flipped):hover .plate img.back, .cx-results .pcard:not(.is-flipped):hover .plate img.back { opacity: 0; }
}

/* ---------- sticky mobile order bar (sport pages, small screens only) ---------- */
.cx-mbar { display: none; }
@media (max-width: 860px) {
  .cx-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--navy, #0e1b2c); color: #fff; border-top: 3px solid var(--accent); box-shadow: 0 -10px 30px rgba(14, 27, 44, .25); transform: translateY(110%); opacity: 0; transition: transform .35s var(--ease), opacity .25s; }
  .cx-mbar[hidden] { display: none; }
  .cx-mbar.is-on { transform: none; opacity: 1; }
  .cx-mbar-txt { margin: 0; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .cx-mbar-txt b { font: 600 .95rem/1.2 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cx-mbar-txt span { font: 500 .7rem/1.3 var(--f-mono); letter-spacing: .03em; color: #9db6ff; }
  .cx-mbar .btn { flex: none; min-height: 44px; }
}

/* ---------- live style count in the sport heading ---------- */
.cx-styles-head h2 span { display: inline-block; font-variant-numeric: tabular-nums; min-width: 2ch; }
.cx-styles-head h2 span.cx-bump { animation: cx-bump .32s var(--ease); }
@keyframes cx-bump { 40% { transform: translateY(-3px); opacity: .55; } }

/* ---------- hero range link that matches the current filter ---------- */
.cx-range a[aria-current="true"] { background: var(--accent); border-color: var(--accent); }
.cx-range a[aria-current="true"] span { color: #fff; }

/* ---------- sticky filter bar: hairline shadow once it is pinned under the header ---------- */
.cx-pin { height: 1px; margin-bottom: -1px; }
.route-sport .filter-bar { transition: box-shadow .2s; }
.route-sport .filter-bar.is-stuck { box-shadow: 0 8px 16px -12px rgba(14, 27, 44, .35); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cx-ripple, .cx-sport::after { display: none; }
  .cx-styles-head h2 span.cx-bump { animation: none; }
  .cx-sport:active, .cx-range a:active, .cx-results-in a:active, .cx-flip:active, .cx-sport:hover .go { transform: none; }
  .route-sport .filter-bar, .cx-flip, .cx-flip svg, .cx-mbar, .cx-sport .go { transition: none; }
  .cx-flip[aria-pressed="true"] svg { transform: none; }
}