/* =========================================================
   STORM GLOBAL STYLE — GENERAL PAGE SYSTEM
   -----------------------------------------------------------
   This is the reusable component system for standard/commerce
   pages (homepage, category, PLP-style pages, etc.)

   This is NOT the themed skin used on the technical/education
   pages (weightblock, coverstock, layout, ball-care, lane-play).
   Those pages keep using web-page-style.css + COMMERCE-WEB-STYLE.css.
   Do not load this file on those pages, and do not load
   web-page-style.css here — they are two separate systems.
   ========================================================= */

/* ---------------------------------------------------------
   1. RESET
--------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--spi-font-body);
  color: var(--spi-black);
  background: var(--spi-white);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------
   2. TOKENS
--------------------------------------------------------- */
:root {
  /* Neutrals */
  --spi-white: #ffffff;
  --spi-black: #191c1b;
  --spi-gray-100: #f7f7f7;
  --spi-gray-200: #ececec;
  --spi-gray-300: #d9d9d9;
  /* placeholder image gray */
  --spi-gray-400: #b3b3b3;
  --spi-gray-600: #6b6b6b;
  --spi-text-muted: rgba(25, 28, 27, 0.65);
  --spi-border: #e2e2e2;

  /* Overlay for image-based cards */
  --spi-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 70%);

  /* Radii */
  --spi-radius-sm: 8px;
  --spi-radius-md: 16px;
  --spi-radius-lg: 20px;
  --spi-radius-pill: 999px;

  /* Spacing */
  --spi-gap: 24px;
  --spi-gap-sm: 12px;
  --spi-section-y: 72px;
  --spi-section-y-mobile: 40px;
  --spi-pad-desktop: 64px;
  --spi-pad-tablet: 32px;
  --spi-pad-mobile: 16px;
  --spi-container-max: 1440px;

  /* Motion */
  --spi-ease: all 0.25s ease;

  /* Type */
  --spi-font-display: 'Oswald', sans-serif;
  --spi-font-body: 'Roboto', sans-serif;
}

/* ---------------------------------------------------------
   3. TYPOGRAPHY
--------------------------------------------------------- */
.spi-h1,
.spi-h2,
.spi-h3 {
  font-family: var(--spi-font-display);
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.spi-h1 {
  font-size: 40px;
}

.spi-h2 {
  font-size: 28px;
}

.spi-h3 {
  font-size: 18px;
}

.spi-body {
  font-family: var(--spi-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--spi-text-muted);
}

.spi-eyebrow {
  font-family: var(--spi-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spi-text-muted);
}

@media (max-width: 768px) {
  .spi-h1 {
    font-size: 26px;
  }

  .spi-h2 {
    font-size: 20px;
  }

  .spi-h3 {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------
   4. LAYOUT CONTAINERS
   - .spi-section-full   : edge-to-edge, no side padding
   - .spi-section-padded : side padding at every breakpoint
   - .spi-container       : centers + caps content width
--------------------------------------------------------- */
.spi-section-full {
  width: 100%;
}

.spi-section-padded {
  width: 100%;
  padding-left: var(--spi-pad-desktop);
  padding-right: var(--spi-pad-desktop);
}

.spi-container {
  max-width: var(--spi-container-max);
  margin: 0 auto;
}

/* Vertical rhythm applied to whichever wrapper is on the section */
.spi-section-full,
.spi-section-padded {
  padding-top: var(--spi-section-y);
  padding-bottom: var(--spi-section-y);
}

@media (max-width: 1024px) {

  .spi-section-padded {
    padding-left: var(--spi-pad-tablet);
    padding-right: var(--spi-pad-tablet);
  }
}

@media (max-width: 600px) {

  .spi-section-padded {
    padding-left: var(--spi-pad-mobile);
    padding-right: var(--spi-pad-mobile);
  }

  .spi-section-full,
  .spi-section-padded {
    padding-top: var(--spi-section-y-mobile);
    padding-bottom: var(--spi-section-y-mobile);
  }
}

/* Eyebrow stacks above the title. This is the default. */
.spi-section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 34px;
}

/* Title beside a trailing control — a filter chip, a "view all" link. */
.spi-section-header.is-row {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

/* Centered section header — title (and optional subtitle) centered in
   the column. Children stay full-width so paragraphs wrap exactly as
   they would in a plain block; only the text is centered. gap is 0
   because the subtitle carries its own margin. */
.spi-section-header.is-center {
  align-items: stretch;
  text-align: center;
  gap: 0;
}

/* The header owns the space beneath it — a trailing subtitle must not
   add its own margin on top, or headers with a subtitle sit further
   from their content than headers without one. */
.spi-section-header > *:last-child {
  margin-bottom: 0;
}

/* Filter/tag chip, e.g. "Style ✕" on Best For Your Style */
.spi-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--spi-radius-pill);
  background: var(--spi-gray-100);
  border: 1px solid var(--spi-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--spi-black);
}

.spi-chip button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--spi-text-muted);
}

/* ---------------------------------------------------------
   5. GRID / ROW SYSTEM
   Row of equal-width cards. Wraps to 3-up on tablet, 2-up on
   small screens, and stacks to a single column on phones so
   text stays readable. For an intentional horizontal carousel,
   use .spi-scroll (below) instead.
--------------------------------------------------------- */
.spi-row {
  display: flex;
  gap: var(--spi-gap);
}

.spi-row>* {
  flex: 1 1 0;
  min-width: 0;
}

.spi-cols-2>* {
  flex-basis: calc((100% - var(--spi-gap)) / 2);
}

.spi-cols-3>* {
  flex-basis: calc((100% - (2 * var(--spi-gap))) / 3);
}

.spi-cols-4>* {
  flex-basis: calc((100% - (3 * var(--spi-gap))) / 4);
}

.spi-cols-5>* {
  flex-basis: calc((100% - (4 * var(--spi-gap))) / 5);
}

.spi-cols-6>* {
  flex-basis: calc((100% - (5 * var(--spi-gap))) / 6);
}

/* Tablet: rows wrap; the densest counts step down to 3-up */
@media (max-width: 1024px) {
  .spi-row:not(.spi-scroll) {
    flex-wrap: wrap;
  }

  .spi-cols-4>*,
  .spi-cols-5>*,
  .spi-cols-6>* {
    flex: 1 1 calc((100% - (2 * var(--spi-gap))) / 3);
  }
}

/* Small tablet / large phone: even counts go 2-up; 3-up text rows
   stack straight to one column so there's never an orphaned card. */
@media (max-width: 768px) {

  .spi-cols-4>*,
  .spi-cols-5>*,
  .spi-cols-6>* {
    flex: 1 1 calc((100% - var(--spi-gap)) / 2);
  }

  .spi-cols-3>* {
    flex: 1 1 100%;
  }
}

/* Centered row (.spi-row.is-center)
   For rows with too few items to fill the container — a two-video
   tutorial row, a pair of CTAs. Children hold a fixed track width
   (--spi-row-w) and the group centers instead of stretching each
   child to an oversized half. Wraps on narrow screens. */
.spi-row.is-center {
  justify-content: center;
  flex-wrap: wrap;
}

.spi-row.is-center>* {
  flex: 0 1 var(--spi-row-w, 320px);
}

/* Phone: stack into a single full-width column.
   (.spi-scroll is excluded — carousels keep scrolling horizontally.) */
@media (max-width: 600px) {
  .spi-row:not(.spi-scroll)>* {
    flex: 1 1 100%;
  }
}

/* ---------------------------------------------------------
   HORIZONTAL SCROLLER (.spi-scroll)
   The mobile ".spi-row" swipe feel kept at EVERY width.
   Add it to a .spi-row inside a .spi-container: children hold
   a fixed card width (--spi-scroll-w) and the overflow scrolls
   with snap. It BREAKS OUT of the padded container so the row
   runs full-bleed — cards visibly flow off the edge of the
   screen instead of being clipped at the container edge.
   Reusable on any page — video rows, card carousels, etc.
--------------------------------------------------------- */
.spi-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Break out of the centered container to the FULL screen width on
     both sides, then hold a small gutter (--spi-scroll-gutter) so the
     first card sits near the left edge but never flush against it, and
     later cards run off the right of the screen. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* top/bottom room so the card hover lift + glow isn't clipped
     (overflow-x:auto forces the vertical axis to clip). */
  padding: 28px var(--spi-scroll-gutter, 40px) 48px;
  scroll-padding-left: var(--spi-scroll-gutter, 40px);
}

.spi-scroll::-webkit-scrollbar { display: none; }

.spi-scroll>* {
  flex: 0 0 var(--spi-scroll-w, 280px);
  width: auto;
  min-width: 0;
  scroll-snap-align: start;
}

@media (max-width: 600px) {
  .spi-scroll>* { flex-basis: 78%; }
}

/* ---------------------------------------------------------
   6. BUTTONS
   (carried over as-is from the existing brand system so
   general pages match established button behavior)
--------------------------------------------------------- */
.btn {
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
  transition: 0.2s ease;
  margin: 6px 0;
  display: inline-block;
  cursor: pointer;
  font-size: 14px;
  border: none;
}

.btn.default {
  border: 2px solid #191c1b !important;
  background-color: #fafdfa !important;
  color: #191c1b !important;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25) !important;
}

.btn.default:hover {
  transform: translateY(-2px);
  background-color: #fafdfa !important;
  border: 2px solid #fafdfa !important;
  color: #191c1b !important;
  box-shadow: 0px 1px 2px 3px rgba(0, 0, 0, 0.05) !important;
}

.btn.default.active {
  border: 2px solid #fafdfa !important;
  background-color: #fafdfa !important;
  color: #191c1b !important;
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) !important;
}

@media (max-width: 1024px) {
  .btn {
    padding: 6px 14px !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    line-height: 20px !important;
    letter-spacing: 0.1px !important;
  }
}

/* ---------------------------------------------------------
   7. HERO
   300px tall, full-bleed image, slide controls bottom-left.
   No headline/title — CTA + slide dots only.
--------------------------------------------------------- */
.spi-hero {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.spi-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.spi-hero-slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.spi-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spi-hero-controls {
  position: absolute;
  left: 32px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  z-index: 2;
}

.spi-hero-dots {
  display: flex;
  gap: 8px;
}

.spi-hero-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.spi-hero-dots button.is-active {
  background: #ffffff;
}

@media (max-width: 600px) {
  .spi-hero {
    height: 220px;
  }

  .spi-hero-controls {
    left: 16px;
    bottom: 16px;
  }
}

/* ---------------------------------------------------------
   8. CATEGORY CARD
   Image fills the card, label sits bottom-left over a
   gradient. Used by "Shop By Ball Type" and
   "A Bag For Every Player".
--------------------------------------------------------- */
.spi-card-category {
  position: relative;
  border-radius: var(--spi-radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: block;
}

.spi-card-category img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--spi-ease);
}

.spi-card-category:hover img {
  transform: scale(1.04);
}

.spi-card-category::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--spi-overlay);
}

.spi-card-category span {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  max-width: calc(100% - 32px);
}

/* ---------------------------------------------------------
   9. RECOMMENDATION CARD
   "Best For Your Style" — image + product info stack.
--------------------------------------------------------- */
.spi-card-rec {
  background: var(--spi-white);
  border: 1px solid var(--spi-border);
  border-radius: var(--spi-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.spi-card-rec-img {
  aspect-ratio: 4 / 3;
  background: var(--spi-gray-300);
}

.spi-card-rec-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spi-card-rec-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.spi-card-rec-body dt {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 8px;
}

.spi-card-rec-body dd {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--spi-text-muted);
}

.spi-card-rec-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------------------------------------------------------
   10. FEATURE CARD
   Full-bleed background image, gradient, title + CTA
   bottom-left. Used standalone (full width) and inside
   50/50 split containers.
--------------------------------------------------------- */
.spi-card-feature {
  position: relative;
  border-radius: var(--spi-radius-md);
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
}

.spi-card-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spi-card-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--spi-overlay);
}

.spi-card-feature-content {
  position: relative;
  z-index: 2;
  padding: 28px;
  color: #fff;
}

.spi-card-feature-content h3 {
  color: #fff;
  margin-bottom: 16px;
  max-width: 380px;
}

/* Full-bleed feature standalone in a full-width section (no rounding) */
.spi-card-feature.is-flush {
  border-radius: 0;
  min-height: 320px;
}

/* Feature card with NO artwork — centred title + subtitle on a dark
   ground. The learn/nav cards are flat in the comp and no image
   exports exist, so the card supplies its own ground. Swap this for
   real <img> artwork if those exports ever land. */
.spi-card-feature.is-flat {
  background: linear-gradient(180deg, #16191c 0%, #0d1013 100%);
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.2s ease;
}

/* no artwork underneath, so the darkening overlay has nothing to do */
.spi-card-feature.is-flat::after { content: none; }

.spi-card-feature.is-flat:hover { transform: translateY(-3px); }

.spi-card-feature.is-flat .spi-card-feature-content { padding: 40px 32px; }

.spi-card-feature.is-flat .spi-h3 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 0;
  max-width: none;
}

/* Subtitle under a feature-card title */
.spi-feature-sub {
  margin: 14px 0 0;
  font-family: var(--spi-font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7f8f95;
}

@media (max-width: 600px) {
  .spi-card-feature.is-flat .spi-h3 { font-size: 19px; }
  .spi-card-feature.is-flat .spi-card-feature-content { padding: 28px 22px; }
}

/* ---------------------------------------------------------
   11. 50/50 SPLIT CONTAINER
--------------------------------------------------------- */
.spi-split {
  display: flex;
  width: 100%;
}

.spi-split>* {
  flex: 1 1 50%;
  min-width: 0;
}

.spi-split.has-gap {
  gap: var(--spi-gap);
}

/* Vertically center the two halves against each other — an image
   beside a short block of copy. Use this instead of an inline
   align-items, which would survive the mobile stack below and
   squeeze each stacked child down to its content width. */
.spi-split.is-vcenter {
  align-items: center;
}

@media (max-width: 768px) {

  .spi-split,
  .spi-split.is-vcenter {
    flex-direction: column;
    /* stacked halves fill the column, whatever the desktop alignment */
    align-items: stretch;
  }
}

/* ---------------------------------------------------------
   12. PRODUCT CARD
   "New Arrivals" — image, centered text below.
--------------------------------------------------------- */
.spi-card-product {
  background: var(--spi-white);
  border: 1px solid var(--spi-border);
  border-radius: var(--spi-radius-md);
  overflow: hidden;
  text-align: center;
}

.spi-card-product-img {
  aspect-ratio: 1 / 1;
  background: var(--spi-gray-300);
}

.spi-card-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spi-card-product-body {
  padding: 16px;
}

.spi-card-product-body h4 {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
}

.spi-card-product-body span {
  font-size: 12px;
  color: var(--spi-text-muted);
}

/* ---------------------------------------------------------
   13. NAV CARD
   "Bags / Shoes / Accessories / Apparel" and
   "Apparel for Every Occasion" — image, title + CTA
   bottom-left, links out to a category/product list.
--------------------------------------------------------- */
.spi-card-nav {
  position: relative;
  border-radius: var(--spi-radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
}

.spi-card-nav img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spi-card-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--spi-overlay);
}

.spi-card-nav-content {
  position: relative;
  z-index: 2;
  padding: 20px;
  color: #fff;
}

.spi-card-nav-content h3 {
  color: #fff;
  margin-bottom: 12px;
}

/* ---------------------------------------------------------
   14. LEARNING RESOURCES SECTION
   Section itself is full-width; its title/cards are padded
   within it. Own card style — links to the technical/
   education pages (weightblock, coverstock, layout, etc.)
--------------------------------------------------------- */
.spi-section-learning {
  width: 100%;
  background: var(--spi-gray-200);
}

.spi-card-learning {
  background: var(--spi-white);
  border-radius: var(--spi-radius-md);
  overflow: hidden;
  display: block;
}

.spi-card-learning-img {
  aspect-ratio: 16 / 10;
  background: var(--spi-gray-300);
}

.spi-card-learning-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spi-card-learning-body {
  padding: 16px 20px;
}

.spi-card-learning-body h4 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

/* ---------------------------------------------------------
   15. ARTICLE / VIDEO CARD
   Placeholder only — final spec to be provided.
--------------------------------------------------------- */
.spi-card-article {
  background: var(--spi-white);
  border: 1px solid var(--spi-border);
  border-radius: var(--spi-radius-md);
  overflow: hidden;
}

.spi-card-article-img {
  aspect-ratio: 16 / 10;
  background: var(--spi-gray-300);
}

.spi-card-article-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spi-card-article-body {
  padding: 14px 16px;
}

.spi-card-article-body h4 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

/* ---------------------------------------------------------
   16. HELPERS
--------------------------------------------------------- */
.spi-text-center {
  text-align: center;
}

.spi-mt-0 {
  margin-top: 0;
}

/* Accent-colored inline text (themed teal by the skin) */
.spi-accent-text {
  color: var(--spi-accent);
}
/* ---------------------------------------------------------
   17. TECH-PAGE COMPONENTS  (reusable structure)
   Tick lists, pill tags, dividers, article badges/meta, and
   the numbered step list. Structure + neutral color via the
   --spi-* tokens (+ --spi-accent), so a skin re-themes them
   by overriding those tokens. Used on the technical pages.
--------------------------------------------------------- */
:root {
  --spi-accent: var(--spi-black);   /* a skin maps this onto its brand color */
}

/* Content card (visual shell comes from the skin; this is the light default) */
.ui-card {
  border: 1px solid var(--spi-border);
  border-radius: var(--spi-radius-md);
  padding: 28px;
  background: var(--spi-white);
}

.ui-card-center { text-align: center; }

.ui-card-center img {
  max-width: 160px;
  height: auto;
  margin: 0 auto 16px;
  display: block;
}

.ui-panel { padding: 52px; }

/* Horizontal divider */
.spi-divider {
  border: none;
  border-top: 1px solid var(--spi-border);
  margin: 20px 0;
}

/* Tick list — teal bar bullet + row dividers */
.ui-list { list-style: none; padding: 0; margin: 16px 0 0; }

.ui-list li {
  position: relative;
  padding: 14px 0 14px 18px;
  border-bottom: 1px solid var(--spi-border);
  font-size: 14px;
  line-height: 1.6;
  color: var(--spi-text-muted);
}

.ui-list li:last-child { border-bottom: none; }

.ui-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--spi-accent);
}

.ui-list li strong { color: var(--spi-black); font-weight: 700; }

/* Pill tags */
.spi-tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--spi-radius-pill);
  border: 1px solid var(--spi-border);
  background: var(--spi-gray-100);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--spi-text-muted);
}

.spi-tag-block { display: block; text-align: center; margin-bottom: 8px; }

.spi-tag.accent {
  color: var(--spi-accent);
  border-color: var(--spi-accent);
  background: transparent;
}

/* Article-card badges + meta */
.spi-card-article-img { position: relative; }

.spi-read-time {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 11px !important;
  letter-spacing: 0.1em;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}

.spi-card-article-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.spi-card-article-body h4 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
  line-height: 1.45;
}

.spi-meta { font-size: 13px; color: var(--spi-text-muted); }

/* Numbered step list */
.layout-step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.layout-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--spi-radius-md);
  border: 1px solid var(--spi-border);
  color: var(--spi-black);
  cursor: pointer;
  user-select: none;
  transition: var(--spi-ease);
}

.layout-step:hover {
  border-color: var(--spi-accent);
}

.layout-step:focus-visible {
  outline: 2px solid var(--spi-accent);
  outline-offset: 2px;
}

.layout-step:focus:not(:focus-visible) {
  outline: none;
}

/* Numbered circle — used inline in .layout-step and standalone
   (e.g. centered on top of a step card in a grid). */
.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  background: var(--spi-gray-200);
  color: var(--spi-black);
}

/* Standalone/centered variant for a step-card grid */
.step-num.step-num-lg {
  width: 44px;
  height: 44px;
  font-size: 16px;
  margin: 0 auto 16px;
  border: 1px solid var(--spi-accent);
  color: var(--spi-accent);
  background: transparent;
}

.layout-step.active { border-color: var(--spi-accent); }
.layout-step.active .step-num { background: var(--spi-accent); color: var(--spi-white); }

/* ---------------------------------------------------------
   TOGGLE BUTTON GROUP (.spi-toggle)
   Reusable pill toggle — e.g. the grit selector. One button
   carries .active. Token-driven, so the skin themes it.
--------------------------------------------------------- */
.spi-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.spi-toggle button {
  padding: 8px 16px;
  border-radius: var(--spi-radius-pill);
  border: 1px solid var(--spi-border);
  background: transparent;
  color: var(--spi-text-muted);
  font-family: var(--spi-font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.spi-toggle button:hover {
  color: var(--spi-black);
  border-color: var(--spi-accent);
}

.spi-toggle button.active {
  background: var(--spi-accent);
  border-color: var(--spi-accent);
  color: var(--spi-white);
}

/* Legend row (e.g. SKID / HOOK / ROLL under the toggle) */
.spi-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 20px 0;
}

.spi-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spi-text-muted);
}

.spi-legend span::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot, var(--spi-accent));
}

/* ---------------------------------------------------------
   18. WRAPPING GRID  (companion to the .spi-row scroller)
   Use when items should wrap to multiple rows instead of
   scrolling. Collapses to 1 column on mobile.
--------------------------------------------------------- */
.spi-grid { display: grid; gap: var(--spi-gap); }
.spi-grid-2 { grid-template-columns: repeat(2, 1fr); }
.spi-grid-3 { grid-template-columns: repeat(3, 1fr); }
.spi-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .spi-grid-3, .spi-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .spi-grid-2, .spi-grid-3, .spi-grid-4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   19. VIDEO CARD  (thumbnail + play button + timestamp + title)
--------------------------------------------------------- */
.spi-card-video { display: block; text-decoration: none; }

/* One canonical video-card width, whether the row is a centered pair
   (.is-center) or a full-bleed carousel (.spi-scroll). Without this a
   carousel fell back to the generic 280px card track and video cards
   came out smaller on carousel pages than on centered ones. */
.spi-scroll>.spi-card-video {
  flex-basis: var(--spi-row-w, 320px);
}

.spi-video-thumb {
  position: relative;
  border-radius: var(--spi-radius-md);
  overflow: hidden;
  background: var(--spi-gray-300);
}

.spi-video-thumb img { width: 100%; display: block; }

.spi-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.spi-play::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}

.spi-time {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: var(--spi-radius-sm);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.spi-video-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 12px 0 0;
  line-height: 1.45;
  color: var(--spi-black);
}

/* ---------------------------------------------------------
   20. PULL QUOTE
--------------------------------------------------------- */
.spi-quote {
  max-width: 680px;
  margin: 44px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--spi-border);
  text-align: center;
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--spi-accent);
}

/* ---------------------------------------------------------
   21. VERTICAL TIMELINE (.spi-timeline)
   A staged progression read top-to-bottom — "3 stages of ball
   wear", a process, a lifecycle. Each item carries an eyebrow
   label, a title and a line of copy, joined by an accent rail
   with a node dot. Reusable on any page.
--------------------------------------------------------- */
.spi-timeline {
  max-width: 720px;
  margin: 32px auto 0;
  padding-left: 28px;
  border-left: 1px solid var(--spi-border);
}

.spi-timeline-item {
  position: relative;
  padding-bottom: 28px;
}

.spi-timeline-item:last-child {
  padding-bottom: 0;
}

/* node dot sitting on the rail */
.spi-timeline-item::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--spi-white);
  border: 2px solid var(--spi-accent);
}

.spi-timeline-item h3 {
  margin: 4px 0 6px;
}

.spi-timeline-item p {
  margin: 0;
}

/* ---------------------------------------------------------
   22. SEVERITY CARD (.spi-card-severity)
   A diagnostic card ranked by how bad the symptom is. The
   severity level sets the top bar + icon colour via one token
   (--sev), so new levels are a one-line addition.
--------------------------------------------------------- */
.spi-card-severity {
  --sev: var(--spi-accent);
  position: relative;
  overflow: hidden;
}

.spi-card-severity::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--sev);
}

.spi-card-severity .spi-sev-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border: 1px solid var(--sev);
  color: var(--sev);
}

.spi-card-severity .spi-sev-icon svg {
  width: 20px;
  height: 20px;
}

.spi-card-severity .spi-sev-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sev);
  margin: 0 0 6px;
}

.spi-card-severity.is-minor    { --sev: #3aa86d; }
.spi-card-severity.is-moderate { --sev: #c9a341; }
.spi-card-severity.is-severe   { --sev: #bf4343; }
.spi-card-severity.is-critical { --sev: var(--spi-gray-400); }

/* ---------------------------------------------------------
   23. ACCORDION (.spi-accordion)
   FAQ / disclosure list. Built on native <details>/<summary>
   so it opens with no JavaScript and stays keyboard- and
   screen-reader-accessible. Reusable on any page.
--------------------------------------------------------- */
.spi-accordion {
  max-width: 820px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spi-accordion details {
  border-bottom: 1px solid var(--spi-border);
}

.spi-accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  font-family: var(--spi-font-display);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--spi-black);
  transition: var(--spi-ease);
}

.spi-accordion summary::-webkit-details-marker { display: none; }

.spi-accordion summary:hover { color: var(--spi-accent); }

/* chevron, rotated when the item is open */
.spi-accordion summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--spi-accent);
  border-bottom: 2px solid var(--spi-accent);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s ease;
}

.spi-accordion details[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.spi-accordion .spi-accordion-body {
  padding: 0 4px 18px;
}

.spi-accordion .spi-accordion-body p {
  margin: 0;
}

/* ---------------------------------------------------------
   24. STEP SCALE (.spi-scale)
   A left-to-right progression rail with labelled nodes —
   the grit progression, a phase ladder, a range. Scrolls
   horizontally on narrow screens rather than crushing labels.
--------------------------------------------------------- */
.spi-scale {
  display: flex;
  align-items: flex-start;
  margin: 28px 0 0;
  padding-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.spi-scale::-webkit-scrollbar { display: none; }

.spi-scale-node {
  position: relative;
  flex: 1 0 auto;
  min-width: 84px;
  text-align: center;
  padding-top: 22px;
}

/* the connecting rail, drawn behind the dots */
.spi-scale-node::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--spi-border);
}

.spi-scale-node:first-child::before { left: 50%; }
.spi-scale-node:last-child::before { right: 50%; }

.spi-scale-node::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--spi-white);
  border: 2px solid var(--spi-accent);
}

.spi-scale-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--spi-text-muted);
}

/* ---------------------------------------------------------
   25. STAT PANEL (.spi-stat)
   One headline figure plus its caption — a lifespan range, a
   count, a benchmark. Sits inside a .ui-card or on its own.
--------------------------------------------------------- */
.spi-stat {
  text-align: center;
  padding: 28px 24px;
}

.spi-stat-num {
  font-family: var(--spi-font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  color: var(--spi-accent);
}

.spi-stat-caption {
  margin: 8px 0 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--spi-text-muted);
}

/* Product image that must not be cropped (bottles, pads, tools
   shot on transparent backgrounds) — contain instead of cover. */
.spi-card-product-img.is-contain {
  background: var(--spi-gray-100);
}

.spi-card-product-img.is-contain img {
  object-fit: contain;
  padding: 14px;
}

/* ---------------------------------------------------------
   26. CENTERED FIGURE (.spi-figure)
   A diagram/illustration capped at a natural size but never
   wider than its container. Use this instead of an inline
   max-width: an inline max-width OVERRIDES the global
   img{max-width:100%} and overflows on narrow screens.
   Cap it per instance with --spi-figure-w.
--------------------------------------------------------- */
.spi-figure {
  display: block;
  width: 100%;
  max-width: var(--spi-figure-w, 420px);
  height: auto;
  margin: 32px auto 0;
}

/* No leading margin — for a figure in a split or grid cell that
   already provides its own spacing. */
.spi-figure.is-flush {
  margin: 0 auto;
}

/* ---------------------------------------------------------
   27. VIDEO MODAL (.spi-modal)
   Lightbox that plays a video in place instead of sending the
   visitor off to YouTube. The overlay element is injected by
   spi-video-modal.js — pages only need data-video on the card,
   so there is no markup to duplicate (or let drift) per page.
--------------------------------------------------------- */
.spi-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.82);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.spi-modal.is-open {
  opacity: 1;
}

/* MUST stay: .spi-modal sets display:flex, and an author class beats
   the browser's built-in [hidden]{display:none}. Without this the
   closed overlay keeps its flex box over the whole viewport and eats
   every click and hover on the page behind it. */
.spi-modal[hidden] {
  display: none;
}

.spi-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 960px;
  transform: translateY(8px) scale(0.99);
  transition: transform 0.2s ease;
}

.spi-modal.is-open .spi-modal-dialog {
  transform: none;
}

/* 16:9 frame that scales with the viewport */
.spi-modal-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--spi-radius-md);
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.spi-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.spi-modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  transition: var(--spi-ease);
}

.spi-modal-close:hover {
  border-color: var(--spi-accent);
  color: var(--spi-accent);
}

/* The script focuses this button when the modal opens, so it always
   shows a ring — use the accent one, not the browser's default blue. */
.spi-modal-close:focus-visible {
  outline: 2px solid var(--spi-accent);
  outline-offset: 2px;
}

.spi-modal-close:focus:not(:focus-visible) {
  outline: none;
}

.spi-modal-title {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
}

/* Phone: the close button has no room above the frame, so it
   sits inside the top-right corner of the video instead. */
@media (max-width: 600px) {
  .spi-modal {
    padding: 16px;
  }

  .spi-modal-close {
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
  }
}

/* Don't animate for visitors who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {

  .spi-modal,
  .spi-modal-dialog {
    transition: none;
  }
}

/* ---------------------------------------------------------
   28. SPAN FONT-SIZE GUARD
   The store theme ships `span { font-size: unset !important }`
   (COMMERCE-WEB-STYLE.css). On an inherited property `unset`
   means `inherit`, so every <span> silently takes its parent's
   font-size and no ordinary rule can outrank it — the tag pills
   rendered at 20px and the video timestamps at 16px.

   Every span-based component below re-asserts its own size with
   !important. Components built on <p> or <button> are unaffected
   and are deliberately left alone. Delete this block if that
   theme rule is ever removed.
--------------------------------------------------------- */
.spi-tag { font-size: 11px !important; }
.spi-time { font-size: 12px !important; }
.spi-chip { font-size: 12px !important; }
.spi-legend span { font-size: 12px !important; }
.spi-card-product-body span { font-size: 12px !important; }
.spi-card-category span { font-size: 14px !important; }
span.spi-eyebrow { font-size: 12px !important; }

/* ---------------------------------------------------------
   29. BALL RACK  (brand stripe + ball card)
   A brand-banded, horizontally scrolling row of products.
   The SCROLLER ITSELF IS NOT NEW — it reuses .spi-row.spi-scroll,
   which already gives full-bleed breakout, snap and a hidden
   scrollbar. Only the two brand-specific pieces live here.
--------------------------------------------------------- */

/* Full-width dark band carrying the brand logo */
.spi-brand-stripe {
  padding: 16px;
  text-align: center;
  background: #191c1b;
}

.spi-brand-stripe img {
  height: 37px;
  width: auto;
  margin: 0 auto;
}

/* The rack sits tight under its stripe — .spi-scroll supplies its
   own vertical padding, so the wrapper adds none. */
.spi-brand-rack {
  padding-top: 0;
  padding-bottom: 0;
}

/* Product thumbnail + name. No card shell: the ball sits on the
   page ground the way it does on the production rack. */
.spi-card-ball {
  display: block;
  text-align: center;
  text-decoration: none;
}

.spi-card-ball img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  transition: transform 0.25s ease;
}

.spi-card-ball:hover img {
  transform: translateY(-4px) scale(1.03);
}

.spi-card-ball-name {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--spi-black);
}

/* Ball track width — narrower than the generic card track, and it
   must hold on phones too (the generic 78% is far too wide for a
   thumbnail), so it is set explicitly at both sizes. */
.spi-scroll > .spi-card-ball { flex-basis: 200px; }

@media (max-width: 600px) {
  .spi-scroll > .spi-card-ball { flex-basis: 150px; }
}