/* ============================================================
   SPORTS REPACK — MOBILE SHOP
   Product cards + simplified flow for shop.html / baller.html / merch.html
   ============================================================ */

.srms-root { display: none; }

@media (max-width: 768px) {

/* Hide ALL body-direct children except: srms-root + mobile shell + non-rendering tags */
html.srms-mobile-shop body > *:not(.srms-root):not(.sr-mobile-bottom-nav):not(.sr-mobile-float-cta):not(.sr-mobile-menu):not(script):not(style):not(link):not(noscript):not(template) {
  display: none !important;
  content-visibility: hidden !important;
  contain-intrinsic-size: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
html.srms-mobile-shop main > *:not(.srms-root) {
  display: none !important;
  content-visibility: hidden !important;
  contain-intrinsic-size: 0 !important;
  height: 0 !important;
}
/* Trust native browser scroll. Don't touch overflow on html or body —
   mixed-axis overflow (hidden x, visible y) breaks iOS Safari scrolling. */
html.srms-mobile-shop body {
  /* Body padding-bottom clears the fixed bottom nav. Content above ends at nav top. */
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: 0 !important;
}
html.srms-mobile-shop {
  background: #050315;
}

/* Force mobile shop sections to always render (override content-visibility:auto from mobile.css) */
.srms-root,
.srms-root section,
.srms-root section[data-srm] {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
  contain: none !important;
}
.srms-trust-strip {
  padding-bottom: 16px !important;
}

.srms-root {
  display: block;
  background: #050315;
  color: #fff;
  font-family: 'Source Sans 3', -apple-system, system-ui, sans-serif;
}

/* iOS scroll-touch fix: videos are visual-only, parent card still clickable */
.srms-root video {
  pointer-events: none;
}
.srms-root section[data-srm] {
  padding: 0 20px;
}

/* HEAD */
.srms-head {
  padding: 32px 20px 8px !important;
}
.srms-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  letter-spacing: 0.02em;
  line-height: 0.96;
  margin: 0 0 6px;
}
.srms-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

/* LIST */
.srms-list {
  padding: 16px 20px 8px !important;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* CARD */
.srms-card {
  position: relative;
  border-radius: 22px;
  background: #0a081a;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  isolation: isolate;
}
.srms-card[data-glow="gold"]   { box-shadow: 0 20px 60px rgba(255, 215, 0, 0.15), 0 0 0 1px rgba(255, 215, 0, 0.2); }
.srms-card[data-glow="pink"]   { box-shadow: 0 20px 60px rgba(255, 59, 107, 0.15), 0 0 0 1px rgba(255, 59, 107, 0.2); }
.srms-card[data-glow="cyan"]   { box-shadow: 0 20px 60px rgba(0, 200, 255, 0.12), 0 0 0 1px rgba(0, 200, 255, 0.2); }
.srms-card[data-glow="purple"] { box-shadow: 0 20px 60px rgba(168, 85, 247, 0.15), 0 0 0 1px rgba(168, 85, 247, 0.22); }

.srms-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #000;
}
.srms-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(1.1);
}
.srms-img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 70%;
  height: auto;
  max-height: 85%;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
  z-index: 2;
}
.srms-tier {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,215,0,0.4);
  color: #ffd700;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}
.srms-stock {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.srms-stock.is-low {
  border-color: rgba(255, 59, 107, 0.5);
  color: #ff3b6b;
  animation: srms-low-pulse 1.8s ease-in-out infinite;
}
@keyframes srms-low-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 107, 0); }
  50% { box-shadow: 0 0 0 6px rgba(255, 59, 107, 0); background: rgba(255, 59, 107, 0.1); }
}

.srms-body {
  padding: 16px 18px 18px;
}
.srms-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.srms-name {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.srms-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  color: #ffd700;
  text-shadow: 0 0 14px rgba(255, 215, 0, 0.35);
}
.srms-sport {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.srms-chases {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.srms-chase {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
}
.srms-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: 0.22em;
  color: #fff;
  background: linear-gradient(135deg, #ff3b6b 0%, #a855f7 60%, #00c8ff 110%);
  box-shadow: 0 12px 32px rgba(168, 85, 247, 0.35);
  transition: transform 200ms cubic-bezier(.2,.7,.2,1);
  -webkit-tap-highlight-color: transparent;
}
.srms-cta:active { transform: scale(0.97); }
.srms-arrow {
  font-size: 16px;
  transition: transform 200ms ease;
}
.srms-cta:active .srms-arrow { transform: translateX(4px); }

/* Gold-glow tier override */
.srms-card[data-glow="gold"] .srms-cta {
  background: linear-gradient(135deg, #ffd700 0%, #ff9d00 50%, #ff3b6b 110%);
  box-shadow: 0 14px 36px rgba(255, 215, 0, 0.35);
}

/* TRUST STRIP */
.srms-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 32px 20px 48px !important;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.5);
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 16px;
}
.srms-trust-strip span {
  white-space: nowrap;
}

} /* end @media max-width: 768px */