/** Shopify CDN: Minification failed

Line 3652:1 Unexpected "/"

**/
@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@400;700&display=swap');

html {
  scrollbar-gutter: stable;
}

/* ── USSSA Trial Popup ─────────────────────────────────────── */

.usssa-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.usssa-popup.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.usssa-popup__inner {
  position: relative;
  width: 100%;
  background: #343434;
  color: #faf5e5;
  font-family: 'Quantico', sans-serif;
  padding: 44px 24px 28px;
  border-radius: 4px;
  transform: translateY(24px);
  transition: transform 0.35s ease;
  max-height: 88vh;
  overflow-y: auto;
}

.usssa-popup.is-visible .usssa-popup__inner {
  transform: translateY(0);
}

.usssa-popup__close {
  position: sticky;
  top: 0;
  float: right;
  background: none;
  border: none;
  color: #faf5e5;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 8px 8px;
  opacity: 0.75;
  transition: opacity 0.2s;
  z-index: 1;
}

.usssa-popup__close:hover {
  opacity: 1;
}

/* ── Screens ───────────────────────────────────────────────── */

.usssa-screen {
  display: none;
}

.usssa-screen.is-active {
  display: block;
}

/* ── Screen 1 content ──────────────────────────────────────── */

.usssa-popup__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.usssa-popup__headline {
  font-size: 24px;
  font-weight: 700;
  color: #faf5e5;
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
}

.usssa-popup__image-wrap {
  align-self: stretch;
  margin-left: -24px;
  margin-right: -24px;
  height: 130px;
  overflow: hidden;
}

.usssa-popup__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.usssa-popup__subheading {
  font-size: 24px;
  font-weight: 700;
  color: #e32c2b;
  margin: 0;
  line-height: 1.5;
  opacity: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.usssa-popup__body {
  font-size: 14px;
  font-weight: 400;
  color: #faf5e5;
  margin: 0;
  line-height: 1.5;
  opacity: 0.88;
  max-width: 300px;
  text-align: center;
}

/* ── Shared: CTA buttons ───────────────────────────────────── */

.usssa-popup__cta-primary {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 14px 32px;
  background: #faf5e5;
  color: #343434;
  font-family: 'Quantico', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s;
}

.usssa-popup__cta-primary:hover {
  opacity: 0.88;
}

.usssa-cta--disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ── Shared: back link ─────────────────────────────────────── */

.usssa-back {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: none;
  border: none;
  color: #faf5e5;
  font-family: 'Quantico', sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.65;
  cursor: pointer;
  transition: opacity 0.2s;
  padding: 0;
}

.usssa-back:hover {
  opacity: 1;
}

.usssa-popup__faq-link {
  display: block;
  margin-top: 8px;
  color: #faf5e5;
  font-family: 'Quantico', sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.65;
  transition: opacity 0.2s;
}
.usssa-popup__faq-link:hover {
  opacity: 1;
}

/* ── Shared: section label ─────────────────────────────────── */

.usssa-label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  color: #faf5e5;
}

/* ── Screen 2: How It Works steps ──────────────────────────── */

.usssa-steps {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(250, 245, 229, 0.15);
}

.usssa-steps__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 8px;
}

.usssa-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  gap: 6px;
}

.usssa-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(250, 245, 229, 0.5);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #faf5e5;
  flex-shrink: 0;
}

.usssa-steps__text {
  font-size: 10px;
  font-weight: 400;
  color: #faf5e5;
  opacity: 0.85;
  line-height: 1.3;
}

.usssa-steps__arrow {
  display: none;
  color: #faf5e5;
  opacity: 0.4;
  font-size: 14px;
  padding-top: 4px;
  flex-shrink: 0;
}

/* ── Screen 2: Size picker ─────────────────────────────────── */

.usssa-size-picker {
  display: flex;
  flex-direction: column;
}

.usssa-drop-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.usssa-drop-btn {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: 1px solid rgba(250, 245, 229, 0.4);
  border-radius: 2px;
  color: #faf5e5;
  font-family: 'Quantico', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.usssa-drop-btn:hover {
  border-color: rgba(250, 245, 229, 0.8);
}

.usssa-drop-btn.is-active {
  background: #faf5e5;
  border-color: #faf5e5;
  color: #343434;
}

.usssa-size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
  margin-bottom: 16px;
}

.usssa-size-btn {
  padding: 9px 12px;
  background: none;
  border: 1px solid rgba(250, 245, 229, 0.4);
  border-radius: 2px;
  color: #faf5e5;
  font-family: 'Quantico', sans-serif;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.usssa-size-btn:hover {
  border-color: rgba(250, 245, 229, 0.8);
}

.usssa-size-btn.is-active {
  background: #faf5e5;
  border-color: #faf5e5;
  color: #343434;
}

/* ── Screen 3: Terms ───────────────────────────────────────── */

.usssa-terms {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.usssa-terms li {
  font-size: 14px;
  font-weight: 400;
  color: #faf5e5;
  opacity: 0.88;
  line-height: 1.45;
  padding-left: 16px;
  position: relative;
}

.usssa-terms li::before {
  content: '—';
  position: absolute;
  left: 0;
  opacity: 0.5;
}

/* ── Desktop overrides ─────────────────────────────────────── */

@media (min-width: 600px) {
  .usssa-popup {
    align-items: center;
    padding: 24px;
  }

  .usssa-popup__inner {
    max-width: 480px;
    padding: 44px 40px 36px;
  }

  .usssa-popup__headline {
    font-size: 30px;
  }

  .usssa-popup__image-wrap {
    margin-left: -40px;
    margin-right: -40px;
  }

  .usssa-popup__subheading {
    font-size: 30px;
  }

  .usssa-steps__text {
    font-size: 11px;
  }

  .usssa-size-btn {
    font-size: 13px;
    padding: 10px 14px;
  }

  .usssa-terms li {
    font-size: 15px;
  }

  .usssa-steps__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
  }

  .usssa-steps__arrow {
    display: block;
  }
}

/* ── USSSA Comparison Table ─────────────────────────────────── */

.usssa-comparison-table {
  background: #343434;
  padding: 60px 24px;
}

.usssa-comparison-table__container {
  max-width: 900px;
  margin: 0 auto;
}

.usssa-comparison-table__heading {
  font-family: 'Quantico', sans-serif;
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 700;
  color: #faf5e5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 40px;
  text-align: center;
}

.usssa-comparison-table__wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.usssa-comparison-table__table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Quantico', sans-serif;
  color: #faf5e5;
  min-width: 480px;
}

.usssa-comparison-table__table thead th {
  padding: 14px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(250, 245, 229, 0.2);
}

.usssa-comparison-table__table thead th:first-child {
  width: 38%;
}

.usssa-comparison-table__table thead th:last-child {
  border-bottom-color: #faf5e5;
}

.usssa-comparison-table__table tbody tr {
  border-bottom: 1px solid rgba(250, 245, 229, 0.1);
}

.usssa-comparison-table__table tbody tr:last-child {
  border-bottom: none;
}

.usssa-comparison-table__table td {
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.45;
  vertical-align: top;
}

.usssa-comparison-table__table td:first-child {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
}

.usssa-comparison-table__negative {
  color: rgba(250, 245, 229, 0.5);
}

.usssa-comparison-table__positive {
  color: #faf5e5;
  font-weight: 700;
}

@media (max-width: 599px) {
  .usssa-comparison-table {
    padding: 40px 16px;
  }

  .usssa-comparison-table__table thead th,
  .usssa-comparison-table__table td {
    padding: 12px 12px;
    font-size: 12px;
  }
}

/* ── USSSA Bat Fitting Quiz ─────────────────────────────────── */

.usssa-bat-quiz {
  background: #1a1a1a;
  padding: 72px 24px;
}

.usssa-bat-quiz__container {
  max-width: 640px;
  margin: 0 auto;
}

.usssa-bat-quiz__header {
  text-align: center;
  margin-bottom: 48px;
}

.usssa-bat-quiz__headline {
  font-family: 'Quantico', sans-serif;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  color: #faf5e5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
}

.usssa-bat-quiz__subheadline {
  font-family: 'Quantico', sans-serif;
  font-size: 15px;
  color: #faf5e5;
  opacity: 0.8;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
}

.usssa-bat-quiz__progress {
  height: 3px;
  background: rgba(250, 245, 229, 0.15);
  border-radius: 2px;
  margin-bottom: 40px;
  overflow: hidden;
}

.usssa-bat-quiz__progress-bar {
  height: 100%;
  background: #faf5e5;
  border-radius: 2px;
  transition: width 0.35s ease;
  width: 0%;
}

.usssa-bat-quiz__step {
  display: none;
}

.usssa-bat-quiz__step.is-active {
  display: block;
  animation: quizStepIn 0.25s ease;
}

@keyframes quizStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.usssa-bat-quiz__step-label {
  font-family: 'Quantico', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #faf5e5;
  opacity: 0.5;
  margin: 0 0 12px;
}

.usssa-bat-quiz__question {
  font-family: 'Quantico', sans-serif;
  font-size: clamp(20px, 3.5vw, 28px);
  font-weight: 700;
  color: #faf5e5;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 28px;
}

.usssa-bat-quiz__select-label {
  font-family: 'Quantico', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #faf5e5;
  opacity: 0.85;
  display: block;
  margin: 0 0 8px;
}

.usssa-bat-quiz__select {
  width: 100%;
  padding: 14px 16px;
  background: rgba(250, 245, 229, 0.06);
  border: 1px solid rgba(250, 245, 229, 0.3);
  border-radius: 2px;
  color: #faf5e5;
  font-family: 'Quantico', sans-serif;
  font-size: 15px;
  appearance: none;
  cursor: pointer;
}

.usssa-bat-quiz__select option {
  background: #343434;
  color: #faf5e5;
}

.usssa-bat-quiz__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.usssa-bat-quiz__opt-btn {
  padding: 12px 20px;
  background: none;
  border: 1px solid rgba(250, 245, 229, 0.35);
  border-radius: 2px;
  color: #faf5e5;
  font-family: 'Quantico', sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.usssa-bat-quiz__opt-btn:hover {
  border-color: rgba(250, 245, 229, 0.7);
}

.usssa-bat-quiz__opt-btn.is-selected {
  background: #faf5e5;
  border-color: #faf5e5;
  color: #343434;
  font-weight: 700;
}

.usssa-bat-quiz__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 36px;
  gap: 12px;
}

.usssa-bat-quiz__nav[hidden] { display: none !important; }

.usssa-bat-quiz__nav-back {
  background: none;
  border: none;
  color: #faf5e5;
  font-family: 'Quantico', sans-serif;
  font-size: 13px;
  opacity: 0.5;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}

.usssa-bat-quiz__nav-back:hover { opacity: 1; }

.usssa-bat-quiz__nav-back[hidden] {
  visibility: hidden;
  pointer-events: none;
}

.usssa-bat-quiz__nav-next {
  padding: 14px 36px;
  background: #faf5e5;
  border: none;
  border-radius: 2px;
  color: #343434;
  font-family: 'Quantico', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-left: auto;
}

.usssa-bat-quiz__nav-next:hover { opacity: 0.88; }

.usssa-bat-quiz__nav-next:disabled {
  opacity: 0.3;
  pointer-events: none;
}

.usssa-bat-quiz__result-label {
  font-family: 'Quantico', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #faf5e5;
  opacity: 0.5;
  margin: 0 0 12px;
}

.usssa-bat-quiz__result-heading {
  font-family: 'Quantico', sans-serif;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 700;
  color: #faf5e5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
}

.usssa-bat-quiz__result-body {
  font-family: 'Quantico', sans-serif;
  font-size: 15px;
  color: #faf5e5;
  opacity: 0.8;
  line-height: 1.6;
  margin: 0 0 32px;
}

.usssa-bat-quiz__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.usssa-bat-quiz__field {
  padding: 13px 16px;
  background: rgba(250, 245, 229, 0.06);
  border: 1px solid rgba(250, 245, 229, 0.3);
  border-radius: 2px;
  color: #faf5e5;
  font-family: 'Quantico', sans-serif;
  font-size: 15px;
}

.usssa-bat-quiz__field::placeholder {
  color: rgba(250, 245, 229, 0.38);
}

.usssa-bat-quiz__form-submit {
  padding: 14px 32px;
  background: #faf5e5;
  border: none;
  border-radius: 2px;
  color: #343434;
  font-family: 'Quantico', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 4px;
}

.usssa-bat-quiz__form-submit:hover { opacity: 0.88; }

.usssa-bat-quiz__form-success {
  display: none;
  text-align: center;
  padding: 24px 0;
}

.usssa-bat-quiz__form-success.is-visible { display: block; }

.usssa-bat-quiz__form-success-msg {
  font-family: 'Quantico', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #faf5e5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.usssa-bat-quiz__trial-prompt {
  font-family: 'Quantico', sans-serif;
  font-size: 13px;
  color: #faf5e5;
  opacity: 0.55;
  margin: 28px 0 10px;
  text-align: center;
}

.usssa-bat-quiz__trial-btn {
  display: block;
  width: 100%;
  padding: 14px 32px;
  background: none;
  border: 1px solid rgba(250, 245, 229, 0.45);
  border-radius: 2px;
  color: #faf5e5;
  font-family: 'Quantico', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: border-color 0.2s;
}

.usssa-bat-quiz__trial-btn:hover { border-color: #faf5e5; }

@media (max-width: 599px) {
  .usssa-bat-quiz { padding: 48px 16px; }
  .usssa-bat-quiz__opt-btn { padding: 10px 14px; font-size: 13px; }
}

/* ── USSSA Trial CTA Section ────────────────────────────────── */

.usssa-trial-cta {
  position: relative;
  background: #343434;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px 24px 40px;
}

.usssa-trial-cta__watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Quantico', sans-serif;
  font-size: clamp(52px, 13vw, 148px);
  font-weight: 700;
  color: #faf5e5;
  opacity: 0.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.usssa-trial-cta__content {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.usssa-trial-cta__headline {
  font-family: 'Quantico', sans-serif;
  font-size: clamp(40px, 8vw, 80px);
  font-weight: 700;
  color: #faf5e5;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
  line-height: 1;
}

.usssa-trial-cta__btn {
  display: inline-block;
  padding: 18px 56px;
  background: #faf5e5;
  border: none;
  border-radius: 2px;
  color: #343434;
  font-family: 'Quantico', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
  max-width: 360px;
  width: 100%;
}

.usssa-trial-cta__btn:hover { opacity: 0.88; }

@media (max-width: 599px) {
  .usssa-trial-cta { min-height: 320px; padding: 60px 16px 40px; }
  .usssa-trial-cta__btn {
    max-width: 220px;
    font-size: 11px;
    letter-spacing: 0.05em;
    padding: 14px 20px;
  }
}

/* ── FIX 1: Hero secondary anchor link ──────────────────────── */

.usssa-hero-anchor-link {
  font-family: 'Quantico', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #faf5e5;
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 0.75;
  transition: opacity 0.2s;
  letter-spacing: 0.03em;
}

.usssa-hero-anchor-link:hover { opacity: 1; }

/* ── FIX 2: Comparison table mobile cards ───────────────────── */

.usssa-comparison-table__cards { display: none; }

@media (max-width: 599px) {
  .usssa-comparison-table { padding: 40px 16px; }

  .usssa-comparison-table__wrapper { display: none; }

  .usssa-comparison-table__cards {
    display: flex;
    gap: 10px;
  }

  .usssa-comparison-table__card {
    flex: 1;
    background: rgba(250, 245, 229, 0.05);
    border: 1px solid rgba(250, 245, 229, 0.12);
    border-radius: 3px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .usssa-comparison-table__card--warstic {
    border-color: rgba(250, 245, 229, 0.3);
    background: rgba(250, 245, 229, 0.08);
  }

  .usssa-comparison-table__card-header {
    font-family: 'Quantico', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #faf5e5;
    opacity: 0.55;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(250, 245, 229, 0.15);
  }

  .usssa-comparison-table__card--warstic .usssa-comparison-table__card-header {
    opacity: 1;
  }

  .usssa-comparison-table__card-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(250, 245, 229, 0.07);
  }

  .usssa-comparison-table__card-row:last-child { border-bottom: none; }

  .usssa-comparison-table__card-label {
    font-family: 'Quantico', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #faf5e5;
    opacity: 0.45;
  }

  .usssa-comparison-table__card-row .usssa-comparison-table__negative,
  .usssa-comparison-table__card-row .usssa-comparison-table__positive {
    font-family: 'Quantico', sans-serif;
    font-size: 12px;
    line-height: 1.4;
  }
}

/* ── FIX 4: CTA watermark marquee (overrides static) ────────── */

.usssa-trial-cta__watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  font-size: 0;
  opacity: 1;
  white-space: normal;
}

.usssa-trial-cta__watermark-track {
  display: flex;
  flex-shrink: 0;
  animation: usssaMarquee 22s linear infinite;
  will-change: transform;
}

.usssa-trial-cta__watermark-track span {
  font-family: 'Quantico', sans-serif;
  font-size: clamp(68px, 17vw, 192px);
  font-weight: 700;
  color: #e32c2b;
  opacity: 0.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  padding-right: 4rem;
}

@keyframes usssaMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── USSSA trial hero button hovers ─────────────────────────── */
.shopify-section--image-with-text-overlay .button:not(.button--outline) {
  transition: background 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.shopify-section--image-with-text-overlay .button:not(.button--outline):hover,
.shopify-section--image-with-text-overlay .button:not(.button--outline):active {
  --button-background: 52, 52, 52 !important;
  --button-text-color: 250, 245, 229 !important;
  background: #343434 !important;
  background-color: #343434 !important;
  color: #faf5e5 !important;
  border-color: #faf5e5 !important;
}
.shopify-section--image-with-text-overlay .button--outline {
  transition: background 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.shopify-section--image-with-text-overlay .button--outline:hover,
.shopify-section--image-with-text-overlay .button--outline:active {
  --button-background: 250, 245, 229 !important;
  --button-text-color: 52, 52, 52 !important;
  background: #faf5e5 !important;
  background-color: #faf5e5 !important;
  color: #343434 !important;
  border-color: #faf5e5 !important;
}

/* ── USSSA Homepage Trial Section ───────────────────────────── */

.usssa-trial {
  background: #1c1c1c;
  padding: 80px 24px;
}

.usssa-trial__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.usssa-trial__eyebrow {
  margin: 0 0 24px;
  font-family: 'Quantico', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e32c2b;
}

.usssa-trial__headline {
  margin: 0 0 16px;
  font-family: 'Quantico', sans-serif;
  font-size: clamp(36px, 7vw, 72px);
  font-weight: 700;
  color: #faf5e5;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

.usssa-trial__sub {
  margin: 0 0 24px;
  font-family: 'Quantico', sans-serif;
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 400;
  color: #faf5e5;
  opacity: 0.65;
  letter-spacing: 0.02em;
}

.usssa-trial__body {
  margin: 0 0 48px;
  font-family: 'Quantico', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #faf5e5;
  opacity: 0.8;
  max-width: 580px;
  line-height: 1.6;
}

.usssa-trial__signals {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-bottom: 48px;
  width: 100%;
}

.usssa-trial__signal {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  max-width: 260px;
  text-align: left;
}

.usssa-trial__signal-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}

.usssa-trial__signal-title {
  margin: 0 0 4px;
  font-family: 'Quantico', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #faf5e5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.usssa-trial__signal-body {
  margin: 0;
  font-family: 'Quantico', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #faf5e5;
  opacity: 0.7;
  line-height: 1.5;
}

.usssa-trial__ctas {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.usssa-trial__btn-primary {
  display: inline-block;
  padding: 14px 40px;
  background: #faf5e5;
  color: #343434;
  font-family: 'Quantico', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid #faf5e5;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.usssa-trial__btn-primary:hover {
  background: #343434;
  color: #faf5e5;
  border-color: #faf5e5;
}

.usssa-trial__link-secondary {
  font-family: 'Quantico', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #faf5e5;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.65;
  transition: opacity 0.2s;
}

.usssa-trial__link-secondary:hover {
  opacity: 1;
}

@media (max-width: 767px) {
  .usssa-trial {
    padding: 60px 16px;
  }

  .usssa-trial__signals {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .usssa-trial__signal {
    max-width: 100%;
  }

  .usssa-trial__ctas {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .usssa-trial__btn-primary {
    width: 100%;
    text-align: center;
  }
}

/* ── USSSA Trial PDP Section ──────────────────────────────────────────────── */

.trial-pdp {
  background: #1c1c1c;
  color: #faf5e5;
}

.trial-pdp__inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 40px;
  align-items: start;
  overflow-x: hidden;
}

/* Gallery */

.trial-pdp__gallery {
  position: sticky;
  top: 20px;
  min-width: 0;
  max-width: 100%;
}

.trial-pdp__main-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 600px;
  background: #242424;
  border-radius: 4px;
  overflow: hidden;
}

.trial-pdp__main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.trial-pdp__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  height: 80px;
  flex-shrink: 0;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.trial-pdp__thumbs::-webkit-scrollbar {
  display: none;
}

.trial-pdp__thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border: 2px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  background: #242424;
  padding: 0;
  transition: border-color 0.15s;
}

.trial-pdp__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.trial-pdp__thumb.is-active,
.trial-pdp__thumb:hover {
  border-color: #faf5e5;
}

/* Info */

.trial-pdp__info {
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
}

.trial-pdp__eyebrow {
  font-family: 'Quantico', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e32c2b;
  margin: 0 0 10px;
}

.trial-pdp__title {
  font-family: 'Quantico', sans-serif;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  color: #faf5e5;
  margin: 0 0 28px;
  text-transform: uppercase;
}

/* Steps */

.trial-pdp__step {
  margin-bottom: 24px;
}

.trial-pdp__step-label {
  font-family: 'Quantico', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 245, 229, 0.5);
  margin: 0 0 10px;
}

.trial-pdp__drop-btns,
.trial-pdp__size-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trial-pdp__drop-btn,
.trial-pdp__size-btn {
  font-family: 'Quantico', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #faf5e5;
  background: transparent;
  border: 1.5px solid rgba(250, 245, 229, 0.28);
  border-radius: 3px;
  padding: 10px 18px;
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.trial-pdp__drop-btn:hover,
.trial-pdp__size-btn:hover {
  border-color: rgba(250, 245, 229, 0.7);
}

.trial-pdp__drop-btn.is-active,
.trial-pdp__size-btn.is-active {
  background: #faf5e5;
  border-color: #faf5e5;
  color: #1c1c1c;
}

.trial-pdp__drop-btn:disabled,
.trial-pdp__size-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.trial-pdp__size-btns.is-loading {
  opacity: 0.4;
  pointer-events: none;
  min-height: 42px;
}

.trial-pdp__size-error {
  font-size: 12px;
  color: #e32c2b;
  margin: 8px 0 0;
  min-height: 16px;
}

/* Trial price block */

.trial-pdp__price-block {
  margin: 28px 0;
  padding: 20px 24px;
  background: rgba(227, 44, 43, 0.07);
  border: 1px solid rgba(227, 44, 43, 0.22);
  border-radius: 4px;
}

.trial-pdp__trial-badge {
  display: block;
  font-family: 'Quantico', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e32c2b;
  margin-bottom: 8px;
}

.trial-pdp__price-zero {
  font-family: 'Quantico', sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: #faf5e5;
  margin: 0 0 6px;
  line-height: 1;
}

.trial-pdp__price-note {
  font-size: 13px;
  color: rgba(250, 245, 229, 0.6);
  margin: 0;
}

/* CTA */

.trial-pdp__cta {
  display: block;
  width: 100%;
  font-family: 'Quantico', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #faf5e5;
  background: #e32c2b;
  border: none;
  border-radius: 3px;
  padding: 18px 24px;
  cursor: pointer;
  transition: background 0.2s;
}

.trial-pdp__cta:hover {
  background: #c8211f;
}

.trial-pdp__cta:disabled {
  background: rgba(227, 44, 43, 0.4);
  cursor: not-allowed;
}

.trial-pdp__cta-error {
  font-size: 12px;
  color: #e32c2b;
  margin: 8px 0 0;
  min-height: 16px;
}

/* Trust signals */

.trial-pdp__trust {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
  padding: 20px 0;
  border-top: 1px solid rgba(250, 245, 229, 0.1);
  border-bottom: 1px solid rgba(250, 245, 229, 0.1);
}

.trial-pdp__trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(250, 245, 229, 0.8);
}

.trial-pdp__trust-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Links */

.trial-pdp__faq-link,
.trial-pdp__still-not-sure {
  margin: 16px 0;
}

.trial-pdp__faq-link a,
.trial-pdp__still-not-sure a {
  font-family: 'Quantico', sans-serif;
  font-size: 13px;
  color: rgba(250, 245, 229, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.trial-pdp__faq-link a:hover,
.trial-pdp__still-not-sure a:hover {
  color: #faf5e5;
}

/* Accordion */

.trial-pdp__accordion {
  margin: 16px 0 0;
  border-top: 1px solid rgba(250, 245, 229, 0.1);
}

.trial-pdp__accordion-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  color: #faf5e5;
  font-family: 'Quantico', sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 0;
  cursor: pointer;
}

.trial-pdp__accordion-icon {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.trial-pdp__accordion.is-open .trial-pdp__accordion-icon {
  transform: rotate(180deg);
}

.trial-pdp__accordion-body {
  display: none;
  padding: 0 0 20px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(250, 245, 229, 0.75);
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
}

.trial-pdp__accordion-body p {
  margin: 0 0 12px;
}

.trial-pdp__accordion-body p:last-child {
  margin-bottom: 0;
}

.trial-pdp__accordion.is-open .trial-pdp__accordion-body {
  display: block;
}

/* Mobile */

@media (max-width: 767px) {
  .trial-pdp__inner {
    grid-template-columns: 1fr;
    padding: 32px 16px;
    gap: 28px;
  }

  .trial-pdp__gallery {
    position: static;
  }

  .trial-pdp__title {
    font-size: 20px;
  }

  .trial-pdp__price-zero {
    font-size: 30px;
  }

  .trial-pdp__drop-btn,
  .trial-pdp__size-btn {
    font-size: 12px;
    padding: 9px 14px;
  }
}

/* ── Composite Break-In Guide ───────────────────────────────── */

.break-in-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Hero */
.break-in-hero {
  background: #1c1c1c;
  padding: 80px 0 64px;
  text-align: center;
}

.break-in-eyebrow {
  font-family: 'Quantico', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e32c2b;
  margin: 0 0 18px;
}

.break-in-headline {
  font-family: 'Quantico', sans-serif;
  font-size: 52px;
  line-height: 1.05;
  color: #faf5e5;
  margin: 0 0 20px;
}

.break-in-subheading {
  font-family: 'Quantico', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #faf5e5;
  opacity: 0.72;
  max-width: 580px;
  margin: 0 auto;
}

/* Video */
.break-in-video-section {
  background: #000;
  padding: 48px 0;
}

.break-in-video-wrap {
  max-width: 900px;
  margin: 0 auto;
  background: #000;
  line-height: 0;
}

.break-in-video-wrap video {
  width: 100%;
  display: block;
}

/* Steps */
.break-in-steps-section {
  background: #242424;
  padding: 72px 0;
}

.break-in-section-heading {
  font-family: 'Quantico', sans-serif;
  font-size: 30px;
  color: #faf5e5;
  text-align: center;
  margin: 0 0 48px;
}

.break-in-steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.break-in-step {
  background: #1c1c1c;
  border: 1px solid rgba(250, 245, 229, 0.08);
  border-radius: 3px;
  padding: 32px;
}

.break-in-step-number {
  width: 40px;
  height: 40px;
  background: #e32c2b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Quantico', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #faf5e5;
  margin-bottom: 18px;
}

.break-in-step-title {
  font-family: 'Quantico', sans-serif;
  font-size: 17px;
  color: #faf5e5;
  margin: 0 0 10px;
}

.break-in-step-body {
  font-family: 'Quantico', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #faf5e5;
  opacity: 0.68;
  margin: 0;
}

/* Warnings */
.break-in-warnings-section {
  background: rgba(227, 44, 43, 0.07);
  border-top: 1px solid rgba(227, 44, 43, 0.18);
  border-bottom: 1px solid rgba(227, 44, 43, 0.18);
  padding: 72px 0;
  color: #1c1c1c;
}

.break-in-warnings-section .break-in-section-heading {
  color: #1c1c1c;
}

.break-in-warnings-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.break-in-warning-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: 'Quantico', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #1c1c1c;
}

.break-in-warning-icon {
  color: #e32c2b;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.55;
}

/* Timeline */
.break-in-timeline-section {
  background: #1c1c1c;
  padding: 72px 0;
}

.break-in-timeline {
  display: flex;
  align-items: flex-start;
}

.break-in-timeline-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
}

.break-in-stage-number {
  width: 48px;
  height: 48px;
  background: #e32c2b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Quantico', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #faf5e5;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.break-in-stage-content {
  padding: 0 4px;
}

.break-in-stage-title {
  font-family: 'Quantico', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #faf5e5;
  margin: 0 0 8px;
}

.break-in-stage-body {
  font-family: 'Quantico', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #faf5e5;
  opacity: 0.68;
  margin: 0;
}

.break-in-timeline-connector {
  flex: 0 0 28px;
  height: 2px;
  background: rgba(227, 44, 43, 0.38);
  margin-top: 23px;
  align-self: flex-start;
}

/* CTA */
.break-in-cta-section {
  background: #343434;
  padding: 72px 0;
  text-align: center;
}

.break-in-cta-heading {
  font-family: 'Quantico', sans-serif;
  font-size: 30px;
  color: #faf5e5;
  margin: 0 0 14px;
}

.break-in-cta-body {
  font-family: 'Quantico', sans-serif;
  font-size: 16px;
  color: #faf5e5;
  opacity: 0.68;
  margin: 0 0 32px;
}

.break-in-cta-links {
  display: flex;
  gap: 36px;
  justify-content: center;
  flex-wrap: wrap;
}

.break-in-cta-link {
  font-family: 'Quantico', sans-serif;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #faf5e5;
  text-decoration: none;
  border-bottom: 1px solid #e32c2b;
  padding-bottom: 3px;
  transition: color 0.2s;
}

.break-in-cta-link:hover {
  color: #e32c2b;
}

/* Responsive — break-in guide */
@media (max-width: 768px) {
  .break-in-headline {
    font-size: 34px;
  }

  .break-in-steps-grid {
    grid-template-columns: 1fr;
  }

  .break-in-timeline {
    flex-direction: column;
    gap: 0;
  }

  .break-in-timeline-stage {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    padding: 0 0 32px;
    gap: 16px;
    width: 100%;
  }

  .break-in-stage-number {
    margin-bottom: 0;
  }

  .break-in-stage-content {
    padding-top: 10px;
  }

  .break-in-timeline-connector {
    display: none;
  }
}

/* ── USSSA Why We Did This ──────────────────────────────────── */

.usssa-why {
  background: #1c1c1c;
  padding: 80px 24px;
}

.usssa-why--no-v-spacing { padding-top: 0; padding-bottom: 0; }
.usssa-why--bordered { border-top: 1px solid rgba(250, 245, 229, 0.15); }

.usssa-why__inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.usssa-why__eyebrow {
  margin: 0 0 20px;
  font-family: 'Quantico', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e32c2b;
}

.usssa-why__heading {
  margin: 0 0 16px;
  font-family: 'Quantico', sans-serif;
  font-size: clamp(26px, 5vw, 48px);
  font-weight: 700;
  color: #faf5e5;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.08;
}

.usssa-why__subheading {
  margin: 0 0 56px;
  font-family: 'Quantico', sans-serif;
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 400;
  color: #faf5e5;
  opacity: 0.7;
  line-height: 1.4;
}

.usssa-why__blocks {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.usssa-why__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 0;
  border-bottom: 1px solid rgba(250, 245, 229, 0.1);
}

.usssa-why__block:last-child {
  border-bottom: none;
}

.usssa-why__block-icon-wrap {
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.usssa-why__block-body {
  font-family: 'Quantico', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #faf5e5;
  opacity: 0.82;
  line-height: 1.65;
  max-width: 280px;
}

.usssa-why__block-body p {
  margin: 0;
}

@media (min-width: 768px) {
  .usssa-why {
    padding: 96px 40px;
  }

  .usssa-why__blocks {
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
  }

  .usssa-why__block {
    flex: 1;
    padding: 0 40px;
    border-bottom: none;
    border-right: 1px solid rgba(250, 245, 229, 0.1);
  }

  .usssa-why__block:last-child {
    border-right: none;
  }

  .usssa-why__block-body {
    font-size: 15px;
    max-width: 240px;
  }
}

@media (min-width: 1024px) {
  .usssa-why__block {
    padding: 0 56px;
  }
}

/* ── USSSA Bonesaber Cards ──────────────────────────────────── */

.usssa-cards {
  background: #1c1c1c;
  padding: 80px 24px;
}

.usssa-cards--no-v-spacing { padding-top: 0; padding-bottom: 0; }
.usssa-cards--bordered { border-top: 1px solid rgba(250, 245, 229, 0.15); }

.usssa-cards__inner {
  max-width: 1160px;
  margin: 0 auto;
}

.usssa-cards__heading {
  margin: 0 0 48px;
  font-family: 'Quantico', sans-serif;
  font-size: clamp(24px, 4.5vw, 42px);
  font-weight: 700;
  color: #faf5e5;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
}

.usssa-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 48px;
}

.usssa-cards__card {
  background: rgba(250, 245, 229, 0.03);
  border: 1px solid rgba(250, 245, 229, 0.12);
  border-radius: 2px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 200ms ease, border-color 200ms ease;
}

@media (hover: hover) {
  .usssa-cards__card:hover {
    transform: translateY(-6px);
    border-color: #e32c2b;
  }
}

.usssa-cards__card-icon-wrap {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.usssa-cards__card-title {
  margin: 0 0 14px;
  font-family: 'Quantico', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #faf5e5;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.usssa-cards__card-body {
  font-family: 'Quantico', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #faf5e5;
  opacity: 0.8;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.usssa-cards__card-body.is-expanded {
  display: block;
  overflow: visible;
}

.usssa-cards__card-body p {
  margin: 0 0 10px;
}

.usssa-cards__card-body p:last-child {
  margin-bottom: 0;
}

.usssa-cards__card-body:not(.is-expanded) p {
  margin: 0;
}

.usssa-cards__card-toggle {
  margin-top: 12px;
  background: none;
  border: none;
  padding: 0;
  font-family: 'Quantico', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e32c2b;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.usssa-cards__card-toggle:hover {
  opacity: 0.75;
}

.usssa-cards__cta {
  text-align: center;
}

.usssa-cards__cta-btn {
  display: inline-block;
  padding: 16px 48px;
  background: #faf5e5;
  color: #343434;
  font-family: 'Quantico', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease;
}

.usssa-cards__cta-btn:hover {
  background: #343434;
  color: #faf5e5;
}

@media (min-width: 768px) {
  .usssa-cards {
    padding: 96px 40px;
  }

  .usssa-cards__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }

  .usssa-cards__card {
    padding: 36px 32px;
  }
}

/* ── USSSA Trial Flow ───────────────────────────────────────── */

.usssa-flow {
  background: #1c1c1c;
  padding: 80px 0;
}

.usssa-flow--no-v-spacing { padding-top: 0; padding-bottom: 0; }
.usssa-flow--bordered { border-top: 1px solid rgba(250, 245, 229, 0.15); }

.usssa-flow__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.usssa-flow__eyebrow {
  font-family: 'Quantico', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e32c2b;
  margin: 0 0 20px;
}

.usssa-flow__heading {
  font-family: 'Quantico', sans-serif;
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 700;
  color: #faf5e5;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0 0 56px;
}

/* Track */
.usssa-flow__track {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Linear row (mobile: vertical stack) */
.usssa-flow__linear-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Step */
.usssa-flow__step {
  opacity: 0.35;
  transition: opacity 300ms ease;
  text-align: center;
  cursor: pointer;
  padding: 8px 0;
  flex-shrink: 0;
}

.usssa-flow__step.is-active {
  opacity: 1;
}

/* Step label */
.usssa-flow__step-label {
  font-family: 'Quantico', sans-serif;
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 700;
  color: #faf5e5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  display: inline-block;
  position: relative;
}

/* Red underline accent on active */
.usssa-flow__step-label::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 2px;
  background: #e32c2b;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms ease;
}

.usssa-flow__step.is-active .usssa-flow__step-label::after {
  transform: scaleX(1);
}

/* Step copy */
.usssa-flow__step-copy {
  font-family: 'Quantico', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #faf5e5;
  opacity: 0;
  margin: 12px auto 0;
  max-width: 220px;
  line-height: 1.5;
  transition: opacity 300ms ease 150ms;
}

.usssa-flow__step.is-active .usssa-flow__step-copy {
  opacity: 0.7;
}

/* Connector — mobile default: vertical */
.usssa-flow__connector {
  width: 2px;
  height: 40px;
  background: rgba(250, 245, 229, 0.25);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 600ms ease, background 300ms ease;
  flex-shrink: 0;
  align-self: center;
}

.usssa-flow__connector.is-drawing,
.usssa-flow__connector.is-drawn {
  transform: scaleY(1);
  background: #e32c2b;
}

/* Branch zone (mobile: column, no horizontal bars) */
.usssa-flow__branch-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Horizontal spread bars: hidden on mobile */
.usssa-flow__branch-spread {
  display: none;
}

/* Branch steps: 2-column grid on mobile */
.usssa-flow__branch-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 440px;
}

.usssa-flow__step--branch {
  padding: 8px;
}

.usssa-flow__step--branch .usssa-flow__step-copy {
  font-size: 12px;
}

/* Final row */
.usssa-flow__final-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

.usssa-flow__step--final .usssa-flow__step-label {
  color: rgba(250, 245, 229, 0.6);
  transition: color 300ms ease;
}

.usssa-flow__step--final.is-active .usssa-flow__step-label {
  color: #faf5e5;
}

/* ── Desktop layout (768px+) ───────────────────── */

@media (min-width: 768px) {
  .usssa-flow { padding: 96px 0; }

  /* Linear row: horizontal */
  .usssa-flow__linear-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
  }

  /* Linear step sizing */
  .usssa-flow__linear-row .usssa-flow__step {
    min-width: 130px;
    padding: 0 8px;
  }

  /* Linear connectors: horizontal */
  .usssa-flow__linear-row .usssa-flow__connector {
    width: 60px;
    height: 2px;
    margin-top: 20px; /* aligns to mid-label */
    transform: scaleX(0);
    transform-origin: left center;
  }

  .usssa-flow__linear-row .usssa-flow__connector.is-drawing,
  .usssa-flow__linear-row .usssa-flow__connector.is-drawn {
    transform: scaleX(1);
  }

  /* Branch stem and merge stem: always vertical */
  .usssa-flow__branch-stem,
  .usssa-flow__merge-stem {
    width: 2px;
    height: 48px;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 600ms ease, background 300ms ease;
  }

  .usssa-flow__branch-stem.is-drawing,
  .usssa-flow__branch-stem.is-drawn,
  .usssa-flow__merge-stem.is-drawing,
  .usssa-flow__merge-stem.is-drawn {
    transform: scaleY(1);
    background: #e32c2b;
  }

  /* Show horizontal spread bars on desktop */
  .usssa-flow__branch-spread {
    display: flex;
    width: 520px;
    max-width: 100%;
    height: 2px;
  }

  /* Branch bar: left half grows from center outward left */
  .usssa-flow__branch-bar--left {
    flex: 1;
    height: 2px;
    background: rgba(250, 245, 229, 0.25);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 600ms ease, background 300ms ease;
  }

  /* Branch bar: right half grows from center outward right */
  .usssa-flow__branch-bar--right {
    flex: 1;
    height: 2px;
    background: rgba(250, 245, 229, 0.25);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 600ms ease, background 300ms ease;
  }

  .usssa-flow__branch-bar.is-drawing,
  .usssa-flow__branch-bar.is-drawn {
    transform: scaleX(1);
    background: #e32c2b;
  }

  /* Merge bars: same width as branch spread, converge from outside to center */
  .usssa-flow__merge-bar--left {
    flex: 1;
    height: 2px;
    background: rgba(250, 245, 229, 0.25);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 600ms ease, background 300ms ease;
  }

  .usssa-flow__merge-bar--right {
    flex: 1;
    height: 2px;
    background: rgba(250, 245, 229, 0.25);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 600ms ease, background 300ms ease;
  }

  .usssa-flow__merge-bar--left.is-drawing,
  .usssa-flow__merge-bar--left.is-drawn,
  .usssa-flow__merge-bar--right.is-drawing,
  .usssa-flow__merge-bar--right.is-drawn {
    transform: scaleX(1);
    background: #e32c2b;
  }

  /* Branch steps: wider spacing on desktop */
  .usssa-flow__branch-steps {
    width: 520px;
    max-width: 100%;
    gap: 0;
  }

  .usssa-flow__step--branch {
    padding: 20px 24px;
  }

  .usssa-flow__step--branch .usssa-flow__step-copy {
    font-size: 13px;
    max-width: 180px;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .usssa-flow__inner { padding: 0 16px; }
}

/* ── USSSA Trial CTA — button zone below marquee ────────────── */

.usssa-trial-cta__btn-wrap {
  background: #343434;
  text-align: center;
  padding: 16px 24px 48px;
}

@media (max-width: 599px) {
  .usssa-trial-cta__btn-wrap {
    padding: 16px 16px 40px;
  }
}

/* ── USSSA Trial CTA — button inside overlay ────────────────── */

.usssa-trial-cta__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

.usssa-trial-cta__overlay .usssa-trial-cta__btn {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

/* ── Klaviyo Question Modal ──────────────────────────────────── */

.usssa-kmodal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.usssa-kmodal__overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.usssa-kmodal__dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #1c1c1c;
  border: 1px solid rgba(250, 245, 229, 0.15);
  padding: 32px 24px;
}

.usssa-kmodal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #faf5e5;
  opacity: 0.5;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.usssa-kmodal__close:hover {
  opacity: 1;
}

.usssa-kmodal__heading {
  font-family: Quantico, sans-serif;
  font-weight: 700;
  color: #faf5e5;
  font-size: clamp(22px, 4vw, 32px);
  margin: 0 0 10px;
}

.usssa-kmodal__subhead {
  font-family: Quantico, sans-serif;
  color: #faf5e5;
  opacity: 0.7;
  font-size: 15px;
  margin: 0 0 24px;
}

.usssa-kmodal__field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.usssa-kmodal__field label {
  font-family: Quantico, sans-serif;
  color: #faf5e5;
  opacity: 0.6;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.usssa-kmodal__field input,
.usssa-kmodal__field textarea {
  width: 100%;
  background: #2a2a2a;
  border: 1px solid rgba(250, 245, 229, 0.2);
  color: #faf5e5;
  padding: 12px 16px;
  font-family: Quantico, sans-serif;
  font-size: 14px;
  border-radius: 2px;
  outline: none;
  resize: vertical;
}

.usssa-kmodal__field input:focus,
.usssa-kmodal__field textarea:focus {
  border-color: #e32c2b;
}

.usssa-kmodal__submit {
  display: block;
  width: 100%;
  background: #faf5e5;
  color: #343434;
  font-family: Quantico, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 14px;
  padding: 16px 40px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  margin-top: 8px;
  transition: opacity 0.2s;
}

.usssa-kmodal__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.usssa-kmodal__error {
  margin-top: 12px;
  font-family: Quantico, sans-serif;
  font-size: 13px;
  color: #e32c2b;
}

.usssa-kmodal__error a {
  color: #e32c2b;
}

.usssa-kmodal__success {
  text-align: center;
  padding: 32px 0;
}

.usssa-kmodal__success p {
  font-family: Quantico, sans-serif;
  color: #faf5e5;
  font-size: 18px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .usssa-kmodal__dialog {
    padding: 48px;
  }
}

/* ── Homepage USSSA Hero — font size overrides ───────────────── */
#shopify-section-template--22503568015616__slideshow_7YrkDW .h1 {
  font-size: clamp(40px, 5vw, 64px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
}

#shopify-section-template--22503568015616__slideshow_7YrkDW .h6 {
  font-size: clamp(18px, 2.5vw, 26px) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

/* ── USSSA Trial — eyebrow size ──────────────────────────────── */
.usssa-trial__eyebrow {
  font-size: 14px !important;
  letter-spacing: 3px !important;
}

/* ── USSSA Yotpo Reviews ─────────────────────────────────────── */
.usssa-yotpo-reviews {
  background: #1c1c1c;
  padding: 64px 20px;
}

.usssa-yotpo-reviews--no-v-spacing {
  padding-top: 0;
  padding-bottom: 0;
}

.usssa-yotpo-reviews--bordered {
  border-top: 1px solid rgba(250, 245, 229, 0.15);
}

.usssa-yotpo-reviews__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.usssa-yotpo-reviews__eyebrow {
  color: #e32c2b;
  font-family: Quantico, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 14px;
}

.usssa-yotpo-reviews__heading {
  color: #faf5e5;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 40px;
  text-align: center;
}

.usssa-yotpo-reviews__carousel {
  position: relative;
  display: flex;
  align-items: center;
}

.usssa-yotpo-reviews__card-wrap {
  flex: 1;
  min-width: 0;
}

.usssa-yotpo-reviews__card {
  opacity: 1;
  transition: opacity 300ms ease;
}

.usssa-yotpo-reviews__card.is-fading {
  opacity: 0;
}

.usssa-yotpo-reviews__stars {
  color: #e8b84b;
  font-size: 20px;
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.usssa-yotpo-reviews__body {
  color: #faf5e5;
  font-family: Quantico, sans-serif;
  font-size: clamp(16px, 2.5vw, 20px);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.usssa-yotpo-reviews__author {
  color: #faf5e5;
  font-family: Quantico, sans-serif;
  font-size: 12px;
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 16px 0 0;
  text-align: center;
}

.usssa-yotpo-reviews__verified {
  color: #e32c2b;
  font-family: Quantico, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 6px 0 0;
  text-align: center;
}

.usssa-yotpo-reviews__arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #faf5e5;
  opacity: 0.4;
  font-size: 32px;
  width: 48px;
  height: 48px;
  cursor: pointer;
  transition: opacity 200ms ease;
  padding: 0;
  line-height: 48px;
  text-align: center;
  z-index: 2;
}

.usssa-yotpo-reviews__arrow--prev {
  left: 0;
}

.usssa-yotpo-reviews__arrow--next {
  right: 0;
}

.usssa-yotpo-reviews__arrow:hover {
  opacity: 1;
}

.usssa-yotpo-reviews__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.usssa-yotpo-reviews__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(250, 245, 229, 0.25);
  transition: background 200ms ease;
  flex-shrink: 0;
}

.usssa-yotpo-reviews__dot.is-active {
  background: #faf5e5;
}

@media (min-width: 600px) {
  .usssa-yotpo-reviews {
    padding: 80px 20px;
  }

  .usssa-yotpo-reviews__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .usssa-yotpo-reviews__card-wrap {
    padding: 0 56px;
  }
}

/* ----------------------------------------------------------------------------------------------------------------------
   APPAREL PRODUCT CARD
   ---------------------------------------------------------------------------------------------------------------------- */

.apparel-product-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.apparel-product-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.apparel-product-card__sizes {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem;
  margin: 0;
  border: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.25));
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.apparel-product-card:hover .apparel-product-card__sizes,
.apparel-product-card:focus-within .apparel-product-card__sizes {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.apparel-size-pill {
  padding: 0.25rem 0.625rem;
  font: var(--button-font);
  font-size: 0.75rem;
  letter-spacing: var(--button-letter-spacing);
  text-transform: var(--button-text-transform);
  background: var(--button-background);
  color: #faf5e5;
  border: 1px solid transparent;
  border-color: rgba(250, 245, 229, 0.3);
  border-radius: var(--button-border-radius);
  cursor: pointer;
  transition: border-color 150ms ease;
}

.apparel-size-pill:hover,
.apparel-size-pill:focus-visible {
  border-color: #faf5e5;
}

.apparel-size-pill.is-loading {
  opacity: 0.5;
  pointer-events: none;
  cursor: wait;
}

.apparel-size-pill.has-error {
  border-color: #e32c2b;
  opacity: 1;
  pointer-events: none;
}

@media (hover: none) {
  .apparel-product-card__sizes {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: none;
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apparel-product-card__sizes {
    transition: none;
  }
}

/* ----------------------------------------------------------------------------------------------------------------------
   APPAREL HOMEPAGE GRID
   ---------------------------------------------------------------------------------------------------------------------- */

.apparel-product-grid {
  display: grid;
  grid-template-columns: repeat(var(--apparel-grid-columns-mobile, 2), minmax(0, 1fr));
  gap: 1.5rem 1rem;
}

@media (min-width: 700px) {
  .apparel-product-grid {
    grid-template-columns: repeat(var(--apparel-grid-columns-desktop, 4), minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }
}

/* ----------------------------------------------------------------------------------------------------------------------
   APPAREL COLLECTION HERO
   ---------------------------------------------------------------------------------------------------------------------- */

.apparel-collection-hero__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.apparel-collection-hero__content[style*='text-align: left'] {
  align-items: flex-start;
}

.apparel-collection-hero__content[style*='text-align: right'] {
  align-items: flex-end;
}

.apparel-collection-hero__content > * {
  margin: 0;
}

.apparel-collection-hero__subheading {
  opacity: 0.85;
}

.apparel-collection-hero__tiles-container {
  margin-top: 2rem;
}

.apparel-collection-hero__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 700px) {
  .apparel-collection-hero__tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.apparel-collection-hero__tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--button-border-radius);
}

.apparel-collection-hero__tile-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.apparel-collection-hero__tile:hover .apparel-collection-hero__tile-image,
.apparel-collection-hero__tile:focus-visible .apparel-collection-hero__tile-image {
  transform: scale(1.05);
}

.apparel-collection-hero__tile-label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 0.75rem;
  text-align: center;
  font: var(--button-font);
  text-transform: var(--button-text-transform);
  letter-spacing: var(--button-letter-spacing);
  color: #faf5e5;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0));
}

@media (hover: none) {
  .apparel-collection-hero__tile-image {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apparel-collection-hero__tile-image {
    transition: none;
  }
}

.visually-hidden {
  position: absolute;
  left: -10000px;
}

.skip-link {
  position: absolute;
  left: -10000px;
  top: 0px;
  padding: 12px;
  background-color: white;
  color: black;
  border: 2px solid black;
  border-radius: 5px;
  z-index: 999999999;
}
.skip-link:focus-visible {
  left: 0px;
}

@media (prefers-reduced-motion) {
  .usssa-trial-cta__watermark-track {
    animation: none !important;
    display: none !important;
  }
}

/* ----------------------------------------------------------------------------------------------------------------------
   SWATCH-SWAP PDP COMPONENT — core swap + real product-gallery + fixed-shell size/inventory buy-box
   Generic component, not BBCOR-specific — see sections/swatch-swap-product.liquid and
   _shared/WARSTIC_BBCOR_STATUS.md for the full plan. Deliberately generic class names (not reusing
   .bbcor-edition-swatch etc.) since this is meant to serve USA bats and batting gloves too, not just BBCOR.

   2026-07-28 UAT round 5: no custom gallery/thumbnail CSS needed anymore — each edition renders a real
   product-gallery instance (sections/swatch-swap-product.liquid), styled entirely by Prestige's existing core
   CSS like every other PDP, same reasoning as the buy-buttons area needing none.
   ---------------------------------------------------------------------------------------------------------------------- */

.swatch-swap-product__layout {
  display: grid;
  gap: 1.875rem;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 1000px) {
  .swatch-swap-product__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 3.5rem;
  }
}

@media screen and (min-width: 1150px) {
  .swatch-swap-product__layout {
    gap: 5rem;
  }
}

/* 2026-07-29 UAT — matches Prestige's own '.product' grid gap values exactly (assets/theme.css), which this
   build's layout never reused since it isn't the real '.product' grid (this section is fully isolated from
   main-product.liquid by design). Flat 2rem read noticeably tighter than the target PDP at desktop widths. */

/* 2026-07-29 UAT round 8 — round 6's flat 'gap-6' (1.5rem between every child) was confirmed applying correctly,
   but still read as flat/cramped vs. the target. Traced product-info.liquid's actual --product-info-gap values
   (assets/theme.css lines ~6084-6114) at this store's real section_vertical_spacing ('xs', config/settings_data.json):
   title/price/vendor/sku cluster = .5rem; before variant_picker = 1.5rem; before buy_buttons = 2rem. The real
   problem wasn't total space (round 6's flat 1.5rem x 4 gaps = 6rem total was already MORE than reference's
   .5+1.5+2 = 4rem) — it's that price/sizes/button are three separate grid children here but one tight visual
   cluster in the reference (a single buy_buttons block), so spreading the same medium gap across all of them
   erased the cluster and the two real transitions (into variant selection, into the CTA) that create the
   target's rhythm. Replaced gap-6 with per-element margins matching those traced values directly, since a flat
   CSS grid `gap` can't express different spacing between different pairs of children. Grid item margins don't
   collapse (unlike flex/block), so each value below is the exact resulting visual gap, not an estimate. */

.swatch-swap-product__info {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.swatch-swap-product__info > :where(* + *) {
  margin-block-start: 1.5rem; /* default for anything after the buy box (description, accordion, etc.) —
                                  matches product-info's 'variant-picker/description/text' tier */
}

.swatch-swap-product__title {
  margin: 0;
  margin-block-start: 0.5rem; /* gap above title (from the star-rating widget) — matches the tight
                                  vendor/title/sku/price cluster gap */
}

/* 2026-07-29 UAT round 9, design refinement (Option B) — the row previously sat with a generous, roughly
   symmetric gap on both sides (24px before, 32px after), which read as a floating, disconnected element rather
   than a deliberate part of the page. Re-paired tight against the title (8px, matching the title/price cluster
   gap) so it reads as part of the title/identity block; the one real "breathing room" moment in this column is
   now the transition into the price/sizes/button cluster below it, matching the reference's actual rhythm
   (tight cluster -> one deliberate gap -> CTA), not two roughly-equal gaps around a floating row. */
.swatch-swap-editions {
  margin-block-start: 0.5rem;
}

.swatch-swap-product__price {
  margin-block-start: 2rem; /* unchanged — the one deliberate transitional gap, now immediately after the
                                title+editions cluster instead of before it */
}

.swatch-swap-product__sizes {
  margin-block-start: 0.5rem; /* tight — price/sizes/button read as one cluster, matching the reference's
                                  single buy_buttons block */
}

[data-swatch-swap-buybox-buttons] {
  margin-block-start: 0.5rem; /* tight, same cluster as above */
}

.swatch-swap-edition-swatch {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  box-shadow: 0 0 0 1px rgb(var(--border-color) / 0.4);
  overflow: hidden;
  cursor: pointer;
  background: #888;
  transition: box-shadow 150ms ease;
  flex-shrink: 0;
}

:checked + .swatch-swap-edition-swatch {
  outline: 2px solid rgb(var(--text-color));
  outline-offset: 2px;
}

:focus-visible + .swatch-swap-edition-swatch {
  outline: 2px solid rgb(var(--text-color));
  outline-offset: 3px;
}

.swatch-swap-edition-swatch.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Permanent ring on the "Hybrid" edition swatch specifically — matched by swatch_match_key identity
   (data-swatch-match-key, set from product.metafields.custom.swatch_match_key), not color/handle, so it's
   correct wherever "Hybrid" renders: BBCOR grid + USA grid (.bbcor-edition-swatch, same literal class both
   places) and BBCOR PDP + USA PDP (.swatch-swap-edition-swatch, same shared snippet both places). Values are
   deliberately identical to the existing :checked ring above — when Hybrid IS selected, this rule and the
   :checked rule resolve to the same outline, so there's no double ring. */
.bbcor-edition-swatch[data-swatch-match-key="hybrid"],
.swatch-swap-edition-swatch[data-swatch-match-key="hybrid"] {
  outline: 2px solid rgb(var(--text-color));
  outline-offset: 2px;
}
.swatch-swap-product__size-label {
  margin-bottom: 0.5rem;
}

.swatch-swap-size-button {
  padding: 0.65rem 1rem;
  min-height: 44px;
  position: relative;
  overflow: hidden;
  font: var(--button-font);
  font-size: 0.8125rem;
  letter-spacing: var(--button-letter-spacing);
  text-transform: var(--button-text-transform);
  background: transparent;
  color: rgb(var(--text-color));
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--button-border-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 150ms ease, background 150ms ease, opacity 150ms ease;
}

.swatch-swap-size-button:hover,
.swatch-swap-size-button:focus-visible {
  border-color: rgb(var(--text-color));
}

.swatch-swap-size-button.is-selected {
  background: rgb(var(--text-color));
  color: rgb(var(--background));
  border-color: rgb(var(--text-color));
}

.swatch-swap-size-button.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: none;
}

.swatch-swap-size-button.is-disabled::after {
  content: "";
  position: absolute;
  left: -10%;
  top: 50%;
  width: 120%;
  height: 1px;
  background: currentColor;
  transform: rotate(-16deg);
  transform-origin: center;
  pointer-events: none;
}
.swatch-swap-product__sizes > .h-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
}

.swatch-swap-product__sizes .swatch-swap-size-button {
  width: 100%;
  min-height: 44px;
}

/* Subtle visual cue when the previously-selected size wasn't available on the newly-swapped edition and the
   buy box fell back to the first available size — deliberately not a popup/alert, confirmed behavior. */
.swatch-swap-product__sizes.size-changed [data-swatch-swap-size-button].is-selected {
  animation: swatch-swap-size-changed-cue 700ms ease;
}

@keyframes swatch-swap-size-changed-cue {
  0% { box-shadow: 0 0 0 2px rgb(var(--text-color) / 0); }
  30% { box-shadow: 0 0 0 2px rgb(var(--text-color) / 0.6); }
  100% { box-shadow: 0 0 0 2px rgb(var(--text-color) / 0); }
}

@media (prefers-reduced-motion: reduce) {
  .swatch-swap-product__sizes.size-changed [data-swatch-swap-size-button].is-selected {
    animation: none;
  }
}

/* 2026-07-30 — USA Hybrid dynamic-shell fallback. Deliberately NOT built from .swatch-swap-size-button
   (no button shapes, no strikethrough) — that's this site's established sold-out language specifically, and
   this is a config-error state, not a sold-out state. See snippets/swatch-swap-buybox.liquid's comment. */
.swatch-swap-product__unavailable-notice {
  margin-block-start: 0.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--button-border-radius);
  background: rgb(var(--text-color) / 0.04);
}

.swatch-swap-product__unavailable-notice p + p {
  margin-block-start: 0.5rem;
  font-size: 0.875rem;
  color: rgb(var(--text-color) / 0.75);
}

.swatch-swap-product__unavailable-notice a {
  text-decoration: underline;
}

.swatch-swap-product__sold-out {
  margin: 0;
  font-size: 0.875rem;
  color: rgb(var(--text-color) / 0.6);
}

/* No custom CSS needed for the buy-buttons/Shop Pay area (2026-07-28 UAT round 3) — it's the theme's own
   'buy-buttons' snippet, unmodified, styled entirely by Prestige's existing core CSS like every other PDP. */

/* 2026-07-29 UAT round 6 — this override didn't actually apply (Jake re-tested, button still light). Root
   cause, confirmed by inspecting the real rendered markup: 'button.liquid' always emits an inline `style`
   attribute on the button whenever background/text_color are non-blank (which they are here, on purpose, to
   escape the outline branch — see snippets/swatch-swap-buybox.liquid) — even though '.rgb' on a plain string
   resolves to an empty value, an EMPTY custom-property value in an inline style is still a validly-SET value
   (CSS treats it as the guaranteed-invalid value, not "absent"), and inline style beats any non-!important
   external stylesheet rule regardless of selector specificity. That's why this rule was correctly deployed and
   correctly selector-matched (both confirmed independently) yet never won. `!important` is what's actually
   needed here — it's one of the few things that outranks a (non-!important) inline style. */
/* 2026-07-30 — USA templates round: the rule above alone left this button with background-image: none and
   border-style: none on all sides (confirmed via real computed-style inspection on the actual <button> element,
   not a wrapper — height 42.2px, correctly identified). Root cause, traced through theme.css's real .button
   rule: --button-outline-color was never covered by the rule above at all (border: 1px solid
   rgb(var(--button-outline-color, var(--button-background))) — an empty-but-set custom property doesn't trigger
   the var() fallback, so the whole border shorthand goes invalid-at-computed-value-time, which resets ALL of
   border-width/style/color to their initial values — border-style's initial value is exactly "none", matching
   what was observed). Separately, the actual VISIBLE fill was never background-color at all (theme.css sets
   that to transparent unconditionally) — it's background-image, built from --initial-gradient, which is ITSELF
   a custom property computed from --button-background inside the same theme.css rule, one indirection level
   beyond what the original round-6/7 fix touched. Rather than trust that chain wins a second time, background-
   image is now set directly here with literal values, structured as the same two-layer gradient theme.css
   itself uses (solid fill + a transparent hover layer) so the existing hover-retract transition/background-size
   rules — untouched, not overridden — keep working exactly as before. */
[data-swatch-swap-buybox-buttons] .button {
  --button-background: 52, 52, 52 !important;
  --button-text-color: 255, 255, 255 !important;
  --button-outline-color: 52, 52, 52 !important;
  background-image: linear-gradient(rgb(52, 52, 52), rgb(52, 52, 52)), linear-gradient(transparent, transparent) !important;
}

/* ----------------------------------------------------------------------------------------------------------------------
   BBCOR PRODUCT CARD
   ---------------------------------------------------------------------------------------------------------------------- */

.bbcor-product-card__colorway-label {
  text-align: left;
  color: rgb(var(--text-color) / 0.7);
}

.bbcor-product-card__size-overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  /* Hard cap: overlay never covers more than half the image so the secondary
     crossfade image remains visible above it. Excess buttons clip — intentional. */
  max-height: 46%;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.bbcor-product-card__sizes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.45rem 0.4rem 0.35rem;
  border: 0;
  /* Gradient fades out quickly upward — image stays dominant above the shelf. */
  background: linear-gradient(to top, rgba(52, 52, 52, 0.9) 0%, rgba(52, 52, 52, 0.55) 60%, rgba(52, 52, 52, 0) 100%);
}

.bbcor-size-button {
  padding: 0.2rem 0.45rem;
  font: var(--button-font);
  font-size: 0.625rem;
  line-height: 1.4;
  letter-spacing: var(--button-letter-spacing);
  text-transform: var(--button-text-transform);
  background: rgba(250, 245, 229, 0.93);
  color: #343434;
  border: 1px solid transparent;
  border-radius: var(--button-border-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 150ms ease, opacity 150ms ease;
}

.bbcor-size-button:hover,
.bbcor-size-button:focus-visible {
  border-color: #343434;
}

.bbcor-size-button.is-loading {
  opacity: 0.5;
  pointer-events: none;
  cursor: wait;
}

.bbcor-size-button.has-error {
  border-color: #e32c2b;
  opacity: 1;
  pointer-events: none;
}

/* Custom Bats (tagged "Custom Metal") — replaces the size-button shelf with a single link to the PDP's
   Kickflip customizer, in the same overlay slot/hover treatment as every other card's size overlay. */
.bbcor-product-card__customize-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin: 0.45rem 0.4rem 0.35rem;
  background: #343434;
  color: #faf5e5;
  font: var(--button-font);
  font-size: 0.6875rem;
  letter-spacing: var(--button-letter-spacing);
  text-transform: var(--button-text-transform);
  text-align: center;
  text-decoration: none;
  border: 1px solid #343434;
  border-radius: var(--button-border-radius);
  transition: background-color 150ms ease, color 150ms ease;
}

.bbcor-product-card__customize-link:hover,
.bbcor-product-card__customize-link:focus-visible {
  background: #faf5e5;
  color: #343434;
}

[data-bbcor-card] .bbcor-product-card__customize-link {
  margin: 0.5rem 0.35rem;
}

.bbcor-product-card__sold-out {
  width: 100%;
  padding: 0.75rem;
  text-align: center;
  font: var(--button-font);
  font-size: 0.75rem;
  letter-spacing: var(--button-letter-spacing);
  text-transform: var(--button-text-transform);
  color: #faf5e5;
}

/* ── Size overlay: right-edge vertical sidebar (all BBCOR cards) ────────────
   [data-bbcor-card] is on every BBCOR card root — 'bbcor-line-card' and
   'bbcor-product-card' alike — so the sidebar treatment applies uniformly
   across the lines grid and the full product grid. */
[data-bbcor-card] .bbcor-product-card__size-overlay {
  inset-inline: auto 0;
  inset-block: 0;
  top: auto;
  /* Hard cap: sidebar never covers more than ~40% of the image width so the
     secondary crossfade image stays visible to its left — same principle as
     the horizontal shelf's max-height cap, applied to the other axis. */
  max-height: none;
  max-width: 42%;
  transform: translateX(8px);
}

[data-bbcor-card] .bbcor-product-card__sizes {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  height: 100%;
  padding: 0.5rem 0.35rem;
  overflow-y: auto;
  /* Opaque at the anchored right edge, fading left toward the image interior. */
  background: linear-gradient(to left, rgba(52, 52, 52, 0.9) 0%, rgba(52, 52, 52, 0.55) 60%, rgba(52, 52, 52, 0) 100%);
}

[data-bbcor-card] .bbcor-size-button {
  width: 100%;
  text-align: center;
}

/* ── BBCOR Edition Swatches ──────────────────────────────────────────────── */

.bbcor-edition-swatch {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  /* Subtle ring so swatch reads against any background */
  box-shadow: 0 0 0 1px rgb(var(--border-color) / 0.4);
  overflow: hidden;
  cursor: pointer;
  background: #888; /* fallback for any edition not matched below */
  transition: box-shadow 150ms ease;
  flex-shrink: 0;
}

:checked + .bbcor-edition-swatch {
  outline: 2px solid rgb(var(--text-color));
  outline-offset: 2px;
}

:focus-visible + .bbcor-edition-swatch {
  outline: 2px solid rgb(var(--text-color));
  outline-offset: 3px;
}

.bbcor-edition-swatch.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Per-edition tri-color splits — hard stops at 33%/67%, top-to-bottom matching bat color progression.
   Selectors use real product handles confirmed from Shopify admin 2026-07-16.
   NOTE: Frostbite is missing YGroup_bbcorhybrid tag in admin — selector ready for when tag is added.
   NOTE: Bloodline's handle was auto-generated as a Solar Storm duplicate ("-copy" suffix) — selectors
   account for the collision: Bloodline matches the $="-copy" suffix, Solar Storm excludes it. */

/* Black Cobra — handle contains "black-cobra" */
.bbcor-edition-swatch[data-edition-handle*="black-cobra"] {
  background: linear-gradient(to bottom, #111111 0% 33%, #111111 33% 67%, #C4A870 67% 100%);
}
/* Bloodline — handle: 2025-...-solar-storm-...-copy (Shopify slug collision, distinguished by trailing -copy).
   Scoped to [data-bbcor-card]:not([data-usa-bats-card]) — the "-copy" suffix is a generic Shopify
   duplication artifact, not BBCOR-specific vocabulary like the other edition-name selectors below, so
   without this scoping any future USA product with the same auto-generated collision would silently
   pick up Bloodline's colors too. usa-bats-line-card.liquid emits the same .bbcor-edition-swatch class
   and data-edition-handle attribute, but sets data-usa-bats-card in addition to data-bbcor-card, which
   BBCOR's own card never does — that's the exclusion hook. Added 2026-08-04. */
[data-bbcor-card]:not([data-usa-bats-card]) .bbcor-edition-swatch[data-edition-handle$="-copy"] {
  background: linear-gradient(to bottom, #CC2020 0% 33%, #CC2020 33% 67%, #111111 67% 100%);
}
/* Frostbite — title says "FROSTBITE" but handle bears no resemblance (Shopify slugified the
   "Electric Blue" working name instead), same class of mismatch as Bloodline/base Hybrid below.
   Confirmed via live products.json 2026-07-20: tag now present, exact handle below. */
.bbcor-edition-swatch[data-edition-handle="2025-bonesaber-hybrid-electric-blue-limited-edition-bbcor-metal-baseball-bat"] {
  background: linear-gradient(to bottom, #A8D4E6 0% 33%, #3D5F8F 33% 67%, #1C3A6E 67% 100%);
}
/* Solar Storm — handle contains "solar-storm" but is NOT the Bloodline -copy duplicate. Same scoping
   reasoning as the Bloodline rule above — added 2026-08-04. */
[data-bbcor-card]:not([data-usa-bats-card]) .bbcor-edition-swatch[data-edition-handle*="solar-storm"]:not([data-edition-handle$="-copy"]) {
  background: linear-gradient(to bottom, #F5F0E8 0% 33%, #2A1F6B 33% 67%, #E8286E 67% 100%);
}
/* Lone Star — handle contains "usa-limited" (edition name not in handle slug) */
.bbcor-edition-swatch[data-edition-handle*="usa-limited"] {
  background: linear-gradient(to bottom, #CC1F1F 0% 33%, #F5F0E0 33% 67%, #1A3A8F 67% 100%);
}
/* Battlerosa — handle contains "roses" (edition name not in handle slug) */
.bbcor-edition-swatch[data-edition-handle*="roses"] {
  background: linear-gradient(to bottom, #6B1F2A 0% 33%, #C4847A 33% 67%, #C4847A 67% 100%);
}
/* Harvester — handle contains "harvester" */
.bbcor-edition-swatch[data-edition-handle*="harvester"] {
  background: linear-gradient(to bottom, #6B1F1A 0% 33%, #D4621A 33% 67%, #E8A820 67% 100%);
}
/* Tropic Thunder — handle contains "tropic-thunder" */
.bbcor-edition-swatch[data-edition-handle*="tropic-thunder"] {
  background: linear-gradient(to bottom, #E8B420 0% 33%, #E06820 33% 67%, #E8286E 67% 100%);
}
/* Hypersonic — handle contains "hypersonic" */
.bbcor-edition-swatch[data-edition-handle*="hypersonic"] {
  background: linear-gradient(to bottom, #1C3A6E 0% 33%, #1C3A6E 33% 67%, #20C8E0 67% 100%);
}
/* Base Hybrid (no named edition) — handle confirmed 2026-07-17 via live products.json:
   "2025-bonesaber-hybrid-bbcor-metal-baseball-bat-2025". Doesn't match any edition substring
   above, so it was falling through to the #888 grey fallback. Tan/cream barrel, black handle. */
.bbcor-edition-swatch[data-edition-handle="2025-bonesaber-hybrid-bbcor-metal-baseball-bat-2025"] {
  background: linear-gradient(to bottom, #C4A870 0% 33%, #C4A870 33% 67%, #111111 67% 100%);
}

/* Size overlay only ever reveals on devices with real hover + a precise pointer — on touch it stays
   permanently inert (not just visually hidden), so mobile never gets an in-grid size-select surface. */
/*
/*
@media (hover: hover) and (pointer: fine) {
  .bbcor-product-card__figure:hover .bbcor-product-card__size-overlay,
  .bbcor-product-card__figure:focus-within .bbcor-product-card__size-overlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}
*/
*/

@media (prefers-reduced-motion: reduce) {
  .bbcor-product-card__size-overlay {
    transition: none;
  }
}


/* ── USA BATS GRID — FILTERABLE ─────────────────────────────────────────────
   sections/usa-bats-grid.liquid + assets/usa-bats-grid-filter.js. Dev-theme-only,
   built directly on the real /collections/usa-baseball-bats template — see
   _shared/WARSTIC_BBCOR_STATUS.md, "USA Bats Collection Grid with Filtering". */

.usa-bats-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Mobile-first: filter groups stack vertically on narrow viewports (each group's own button row still
   horizontal), sit side-by-side on wider ones — built and tested mobile-first per the 2026-07-31 stakeholder
   requirement, not as a desktop-first afterthought. */
.usa-bats-grid__filters {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(var(--text-color) / 0.12);
}

@media screen and (min-width: 700px) {
  .usa-bats-grid__filters {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
  }
}

/* Drop appears before Length in source order (sections/usa-bats-grid.liquid) — no order override needed here. */
.usa-bats-grid__filter-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: none;
}

.usa-bats-grid__filter-legend {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0;
  margin: 0 0.5rem 0 0;
  flex: 0 0 auto;
}

.usa-bats-grid__filter-option {
  display: inline-flex;
  cursor: pointer;
}

/* Button visual — Warstic's documented button hex pair (_shared/WARSTIC_CONTEXT.md): off-white/black-border
   default, filled black selected, animated via a plain background/color transition. */
.usa-bats-grid__filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  background-color: #faf5e5;
  color: #343434;
  border: 1px solid #343434;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

/* Hover — same transition properties/timing as the selected-state animation below (consistent motion
   language), but a distinct mid-tone fill so hover is never mistaken for the true selected state. Guarded to
   unchecked/enabled only so it never fights the selected or disabled looks. */
.usa-bats-grid__filter-input:not(:checked):not(:disabled) + .usa-bats-grid__filter-button:hover {
  background-color: #e8dfc7;
  border-color: #343434;
  transform: scale(1.03);
}

.usa-bats-grid__filter-input:checked + .usa-bats-grid__filter-button {
  background-color: #343434;
  color: #faf5e5;
  transform: scale(1.03);
}

.usa-bats-grid__filter-input:focus-visible + .usa-bats-grid__filter-button {
  outline: 2px solid #343434;
  outline-offset: 2px;
}

.usa-bats-grid__filter-input:disabled + .usa-bats-grid__filter-button {
  opacity: 0.35;
  cursor: not-allowed;
}

.usa-bats-grid__filter-option.is-unavailable {
  cursor: not-allowed;
}

/* .bbcor-edition-swatch sets display: inline-block at equal specificity to the browser's default [hidden]
   rule — author CSS wins a tie over the UA stylesheet, so the plain `hidden` attribute assets/usa-bats-
   grid-filter.js sets on a narrowed-out swatch would silently do nothing without this override. */
.bbcor-edition-swatch[hidden] {
  display: none;
}

.usa-bats-grid__empty-state {
  padding: 3rem 1rem;
  text-align: center;
  color: rgb(var(--text-color) / 0.7);
}

.usa-bats-grid__empty-state[hidden] {
  display: none;
}
/* BBCOR PDP size buttons — match Swatch Swap visual states */
variant-picker .variant-picker__option .block-swatch {
  color: rgb(var(--text-color));
  background: transparent;
  border-color: rgb(var(--border-color));
}

/* Selected size */
variant-picker .variant-picker__option input:checked + .block-swatch,
variant-picker .variant-picker__option .block-swatch.is-selected {
  background: rgb(var(--text-color));
  color: rgb(var(--background));
  border-color: rgb(var(--text-color));
}

/* Sold out / unavailable size */
variant-picker .variant-picker__option .block-swatch.is-disabled {
  opacity: 0.35;
  color: rgb(var(--text-color));
}
/* Swatch Swap - knob selector */
.swatch-swap-knob-button {
  width: 76px;
  height: 76px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.swatch-swap-knob-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.swatch-swap-knob-button.is-selected {
  border-color: currentColor;
  border-width: 1px;
}
.swatch-swap-knob-button.is-disabled {
  position: relative;
  opacity: 0.35;
  overflow: hidden;
  cursor: pointer;
}

.swatch-swap-knob-button.is-disabled::after {
  content: "";
  position: absolute;
  left: -10%;
  top: 50%;
  width: 120%;
  height: 1px;
  background: currentColor;
  transform: rotate(-35deg);
  transform-origin: center;
  pointer-events: none;
}