/**
 * ====================================================================
 * Rapid Extreme - Product Page Stylesheet
 * Figma Node: 26:951 (Product List)
 * Sections:
 *   1. Product Hero (26:1066)
 *   2. Filter Bar (26:1095)
 *   3. Product Series (26:1117): Discovery, Nomad, Performance
 *   4. Complete The Kit Banner (52:12648)
 *   5. Equip Your Crew CTA Banner (26:1274)
 * ====================================================================
 */

/* ====================================================================
   1. PRODUCT HERO SECTION (Figma Node 26:1066)
   ==================================================================== */
.prod-hero {
  position: relative;
  width: 100%;
  min-height: 509px;
  background-color: var(--color-black-surface, #101310);
  border-bottom: 1px solid var(--color-border-subtle, #262b27);
  display: flex;
  align-items: flex-end;
  padding: 56px 64px 64px 64px;
  overflow: hidden;
}

/* Background Image & Dual Gradient Overlays */
.prod-hero__bg-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.prod-hero__bg-img {
  position: absolute;
  width: 100%;
  height: 188.6%;
  top: -35.3%;
  left: 0;
  object-fit: cover;
  object-position: center;
  max-width: none;
}

.prod-hero__gradient-x {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    rgba(16, 19, 16, 0.96) 0%,
    rgba(16, 19, 16, 0.88) 38%,
    rgba(16, 19, 16, 0.45) 68%,
    rgba(16, 19, 16, 0.6) 100%
  );
  z-index: 2;
  pointer-events: none;
}

.prod-hero__gradient-y {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    180deg,
    rgba(16, 19, 16, 0.4) 0%,
    rgba(16, 19, 16, 0) 30%,
    rgba(16, 19, 16, 0.5) 75%,
    rgba(16, 19, 16, 0.85) 100%
  );
  z-index: 3;
  pointer-events: none;
}

/* Hero Content Container */
.prod-hero__container {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: var(--container-max-width, 1440px);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}

/* Left Typography Block */
.prod-hero__left {
  max-width: 580px;
  display: flex;
  flex-direction: column;
}

.prod-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-size: 13px;
  line-height: 1;
  margin-bottom: 24px;
}

.prod-hero__breadcrumb-link {
  color: var(--color-text-secondary, #a3a8a2);
  transition: color 0.2s ease;
}

.prod-hero__breadcrumb-link:hover {
  color: var(--color-accent-lime, #c6ff00);
}

.prod-hero__breadcrumb-separator {
  color: var(--color-text-secondary, #a3a8a2);
}

.prod-hero__breadcrumb-current {
  color: var(--color-text-primary, #f4f3ee);
  font-weight: 500;
}

.prod-hero__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(72px, 11.6vw, 168px);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.84px;
  color: var(--color-text-primary, #f4f3ee);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.prod-hero__title-accent {
  color: var(--color-accent-lime, #c6ff00);
}

.prod-hero__subtitle {
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-size: 20px;
  line-height: 1.5;
  color: #c9ccc6;
  font-weight: 400;
}

/* Right Series Preview Cards */
.prod-hero__series-list {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 8px;
}

.prod-hero__series-card {
  width: 216px;
  background-color: #1a1e1b;
  padding: 23px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  border-top-width: 4px;
  border-top-style: solid;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.prod-hero__series-card:hover {
  transform: translateY(-4px);
  background-color: #212622;
}

.prod-hero__series-card--discovery {
  border-top-color: var(--color-accent-lime, #c6ff00);
}

.prod-hero__series-card--discovery:hover {
  box-shadow: 0 10px 24px rgba(198, 255, 0, 0.12);
}

.prod-hero__series-card--nomad {
  border-top-color: var(--color-accent-cyan, #29dce8);
}

.prod-hero__series-card--nomad:hover {
  box-shadow: 0 10px 24px rgba(41, 220, 232, 0.12);
}

.prod-hero__series-card--performance {
  border-top-color: var(--color-accent-orange, #ff713c);
}

.prod-hero__series-card--performance:hover {
  box-shadow: 0 10px 24px rgba(255, 113, 60, 0.12);
}

.prod-hero__series-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 0.92;
  letter-spacing: 0.14px;
  text-transform: uppercase;
}

.prod-hero__series-card--discovery .prod-hero__series-name {
  color: var(--color-accent-lime, #c6ff00);
}

.prod-hero__series-card--nomad .prod-hero__series-name {
  color: var(--color-accent-cyan, #29dce8);
}

.prod-hero__series-card--performance .prod-hero__series-name {
  color: var(--color-accent-orange, #ff713c);
}

.prod-hero__series-sub {
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-size: 13px;
  line-height: 1.2;
  color: var(--color-text-secondary, #a3a8a2);
}


/* ====================================================================
   2. FILTER BAR (Figma Node 26:1095)
   ==================================================================== */
.prod-filter-bar {
  width: 100%;
  background-color: var(--color-black-surface, #101310);
  border-bottom: 1px solid var(--color-border-subtle, #262b27);
  padding: 0 64px;
  position: sticky;
  top: 88px;
  z-index: 10;
}

.prod-filter-bar__container {
  max-width: var(--container-max-width, 1440px);
  margin: 0 auto;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.prod-filter-bar__nav {
  display: flex;
  gap: 10px;
  align-items: center;
}

.prod-filter-btn {
  height: 44px;
  padding: 0 20px;
  background-color: transparent;
  border: 1px solid #2e332f;
  color: var(--color-text-primary, #f4f3ee);
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.prod-filter-btn:hover {
  border-color: #555c56;
  background-color: rgba(255, 255, 255, 0.04);
}

.prod-filter-btn__count {
  opacity: 0.6;
}

.prod-filter-btn--active {
  background-color: #f4f3ee;
  border-color: #f4f3ee;
  color: #101310;
}

.prod-filter-btn--active:hover {
  background-color: #ffffff;
  border-color: #ffffff;
}

.prod-filter-btn--active .prod-filter-btn__count {
  opacity: 0.7;
}


/* ====================================================================
   3. PRODUCTS CONTENT SECTION (Figma Node 26:1117)
   ==================================================================== */
.prod-content-section {
  width: 100%;
  background-color: var(--color-black-surface, #101310);
  padding: 20px 64px 120px 64px;
}

.prod-content-section__container {
  max-width: var(--container-max-width, 1440px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Series Block */
.prod-series-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 41px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.prod-series-block--hidden {
  display: none !important;
}

/* Series Header */
.prod-series-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 80px;
  gap: 24px;
}

.prod-series-header__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 0.92;
  letter-spacing: 0.32px;
  text-transform: uppercase;
}

.prod-series-block--discovery .prod-series-header__title {
  color: var(--color-accent-lime, #c6ff00);
}

.prod-series-block--nomad .prod-series-header__title {
  color: var(--color-accent-cyan, #29dce8);
}

.prod-series-block--performance .prod-series-header__title {
  color: var(--color-accent-orange, #ff713c);
}

.prod-series-header__meta {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 6px;
}

.prod-series-header__desc {
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-size: 17px;
  line-height: 1.5;
  color: #c9ccc6;
  font-weight: 400;
}

.prod-series-header__count {
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.prod-series-block--discovery .prod-series-header__count {
  color: var(--color-accent-lime, #c6ff00);
}

.prod-series-block--nomad .prod-series-header__count {
  color: var(--color-accent-cyan, #29dce8);
}

.prod-series-block--performance .prod-series-header__count {
  color: var(--color-accent-orange, #ff713c);
}

/* Product Cards Grid */
.prod-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  width: 100%;
}

/* Individual Product Card */
.prod-card {
  background-color: #1a1e1b;
  border: 1px solid #262b27;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.prod-card:hover {
  transform: translateY(-4px);
  border-color: #3b423c;
}

.prod-series-block--discovery .prod-card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 20px rgba(198, 255, 0, 0.08);
}

.prod-series-block--nomad .prod-card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 20px rgba(41, 220, 232, 0.08);
}

.prod-series-block--performance .prod-card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 113, 60, 0.08);
}

/* Card Image Area */
.prod-card__image-link {
  display: block;
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  background-color: #121512;
}

.prod-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.prod-card:hover .prod-card__img {
  transform: scale(1.04);
}

/* Card Series Badge */
.prod-card__badge {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 7px 12px;
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #101310;
  z-index: 2;
  pointer-events: none;
}

.prod-card--discovery .prod-card__badge {
  background-color: var(--color-accent-lime, #c6ff00);
}

.prod-card--nomad .prod-card__badge {
  background-color: var(--color-accent-cyan, #29dce8);
}

.prod-card--performance .prod-card__badge {
  background-color: var(--color-accent-orange, #ff713c);
}

/* Color Accent Divider Line */
.prod-card__accent-bar {
  width: 100%;
  height: 4px;
  flex-shrink: 0;
}

.prod-card--discovery .prod-card__accent-bar {
  background-color: var(--color-accent-lime, #c6ff00);
}

.prod-card--nomad .prod-card__accent-bar {
  background-color: var(--color-accent-cyan, #29dce8);
}

.prod-card--performance .prod-card__accent-bar {
  background-color: var(--color-accent-orange, #ff713c);
}

/* Card Content Body */
.prod-card__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.prod-card__category {
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.prod-card--discovery .prod-card__category {
  color: var(--color-accent-lime, #c6ff00);
}

.prod-card--nomad .prod-card__category {
  color: var(--color-accent-cyan, #29dce8);
}

.prod-card--performance .prod-card__category {
  color: var(--color-accent-orange, #ff713c);
}

.prod-card__title-link {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 12px;
}

.prod-card__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 52px;
  line-height: 0.92;
  letter-spacing: 0.26px;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.prod-card--discovery .prod-card__title {
  color: var(--color-accent-lime, #c6ff00);
}

.prod-card--nomad .prod-card__title {
  color: var(--color-accent-cyan, #29dce8);
}

.prod-card--performance .prod-card__title {
  color: var(--color-accent-orange, #ff713c);
}

.prod-card__title-link:hover .prod-card__title {
  opacity: 0.85;
}

.prod-card__tagline {
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--color-text-primary, #f4f3ee);
  margin-bottom: 8px;
}

.prod-card__activities {
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary, #a3a8a2);
  margin-bottom: 24px;
}

/* Card Bottom Action Bar */
.prod-card__bottom {
  margin-top: auto;
  border-top: 1px solid #2e332f;
  padding-top: 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.prod-card__price {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 0.92;
  letter-spacing: 0.15px;
  text-transform: uppercase;
  color: var(--color-text-primary, #f4f3ee);
}

.prod-card__add-btn {
  height: 48px;
  padding: 0 20px;
  border-width: 1px;
  border-style: solid;
  background-color: transparent;
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.prod-card--discovery .prod-card__add-btn {
  border-color: var(--color-accent-lime, #c6ff00);
  color: var(--color-accent-lime, #c6ff00);
}

.prod-card--discovery .prod-card__add-btn:hover {
  background-color: var(--color-accent-lime, #c6ff00);
  color: #101310;
}

.prod-card--nomad .prod-card__add-btn {
  border-color: var(--color-accent-cyan, #29dce8);
  color: var(--color-accent-cyan, #29dce8);
}

.prod-card--nomad .prod-card__add-btn:hover {
  background-color: var(--color-accent-cyan, #29dce8);
  color: #101310;
}

.prod-card--performance .prod-card__add-btn {
  border-color: var(--color-accent-orange, #ff713c);
  color: var(--color-accent-orange, #ff713c);
}

.prod-card--performance .prod-card__add-btn:hover {
  background-color: var(--color-accent-orange, #ff713c);
  color: #101310;
}


/* ====================================================================
   4. COMPLETE THE KIT BANNER (Figma Node 52:12648)
   ==================================================================== */
.prod-kit-banner {
  background-color: #1a1e1b;
  border: 1px solid #262b27;
  padding: 40px 32px 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  margin-top: 16px;
}

.prod-kit-banner:hover {
  border-color: #3d453e;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.prod-kit-banner__left {
  max-width: 380px;
  display: flex;
  flex-direction: column;
}

.prod-kit-banner__tag {
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-accent-cyan, #29dce8);
  margin-bottom: 8px;
}

.prod-kit-banner__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 0.92;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-text-primary, #f4f3ee);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}

.prod-kit-banner__title-cyan {
  color: var(--color-accent-cyan, #29dce8);
}

.prod-kit-banner__desc {
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-size: 16px;
  line-height: 1.5;
  color: #c9ccc6;
  font-weight: 400;
}

/* Center Tiles */
.prod-kit-banner__tiles {
  display: flex;
  gap: 12px;
  align-items: center;
}

.prod-kit-tile {
  width: 124px;
  height: 124px;
  background-color: #101310;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top-width: 3px;
  border-top-style: solid;
  transition: transform 0.25s ease, background-color 0.25s ease;
  flex-shrink: 0;
}

.prod-kit-tile:hover {
  transform: translateY(-4px);
  background-color: #171b17;
}

.prod-kit-tile--lime {
  border-top-color: var(--color-accent-lime, #c6ff00);
}

.prod-kit-tile--orange {
  border-top-color: var(--color-accent-orange, #ff713c);
}

.prod-kit-tile--light {
  border-top-color: var(--color-text-primary, #f4f3ee);
}

.prod-kit-tile--cyan {
  border-top-color: var(--color-accent-cyan, #29dce8);
}

.prod-kit-tile__icon-wrap {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prod-kit-tile__icon-wrap img,
.prod-kit-tile__icon-wrap svg {
  width: 22px;
  height: 22px;
}

.prod-kit-tile__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 0.92;
  letter-spacing: 0.09px;
  text-transform: uppercase;
}

.prod-kit-tile--lime .prod-kit-tile__label {
  color: var(--color-accent-lime, #c6ff00);
}

.prod-kit-tile--orange .prod-kit-tile__label {
  color: var(--color-accent-orange, #ff713c);
}

.prod-kit-tile--light .prod-kit-tile__label {
  color: var(--color-text-primary, #f4f3ee);
}

.prod-kit-tile--cyan .prod-kit-tile__label {
  color: var(--color-accent-cyan, #29dce8);
}

/* Right CTA Button */
.prod-kit-banner__cta {
  height: 60px;
  padding: 0 28px;
  background-color: var(--color-accent-cyan, #29dce8);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #101310;
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: background-color 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}

.prod-kit-banner__cta:hover {
  background-color: #5ceaf4;
  transform: translateX(4px);
}

.prod-kit-banner__cta-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}


/* ====================================================================
   5. EQUIP YOUR CREW CTA BANNER (Figma Node 26:1274)
   ==================================================================== */
.prod-crew-section {
  width: 100%;
  background-color: var(--color-black-surface, #101310);
  padding: 0 64px 120px 64px;
}

.prod-crew-section__container {
  max-width: var(--container-max-width, 1440px);
  margin: 0 auto;
}

.prod-crew-banner {
  background-color: var(--color-accent-lime, #c6ff00);
  padding: 57px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.prod-crew-banner__left {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.prod-crew-banner__tag {
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #101310;
}

.prod-crew-banner__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 0.92;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  color: #101310;
}

.prod-crew-banner__desc {
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-size: 17px;
  line-height: 1.55;
  color: #101310;
  font-weight: 400;
}

.prod-crew-banner__cta {
  height: 64px;
  padding: 0 32px;
  background-color: #101310;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-accent-lime, #c6ff00);
  font-family: var(--font-family-base, 'Barlow', sans-serif);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.28px;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: background-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}

.prod-crew-banner__cta:hover {
  background-color: #212622;
  transform: translateX(4px);
  color: #d4ff33;
}

.prod-crew-banner__cta-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}


/* ====================================================================
   RESPONSIVE ADAPTATIONS
   ==================================================================== */
@media (max-width: 1200px) {
  .prod-hero {
    padding: 48px 32px 56px 32px;
    min-height: auto;
  }
  
  .prod-hero__container {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .prod-hero__series-list {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .prod-hero__series-card {
    flex: 1;
    min-width: 180px;
  }

  .prod-filter-bar {
    padding: 0 32px;
  }

  .prod-content-section {
    padding: 20px 32px 80px 32px;
  }

  .prod-crew-section {
    padding: 0 32px 80px 32px;
  }

  .prod-kit-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 36px 32px;
  }

  .prod-kit-banner__tiles {
    flex-wrap: wrap;
    width: 100%;
  }

  .prod-kit-tile {
    flex: 1;
    min-width: 110px;
  }

  .prod-crew-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 44px 36px;
  }
}

@media (max-width: 860px) {
  .prod-hero {
    padding: 40px 20px 48px 20px;
  }

  .prod-hero__series-list {
    flex-direction: column;
    width: 100%;
  }

  .prod-hero__series-card {
    width: 100%;
  }

  .prod-filter-bar {
    padding: 0 20px;
    top: 72px;
  }

  .prod-filter-bar__container {
    height: 72px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .prod-filter-bar__container::-webkit-scrollbar {
    display: none;
  }

  .prod-filter-bar__nav {
    flex-shrink: 0;
  }

  .prod-content-section {
    padding: 16px 20px 64px 20px;
  }

  .prod-series-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .prod-series-header__meta {
    align-items: flex-start;
    text-align: left;
  }

  .prod-cards-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .prod-crew-section {
    padding: 0 20px 64px 20px;
  }

  .prod-crew-banner {
    padding: 36px 24px;
  }

  .prod-kit-banner {
    padding: 32px 20px;
  }

  .prod-kit-tile {
    width: calc(50% - 6px);
    height: 110px;
  }
}