/** Shopify CDN: Minification failed

Line 3705:19 Expected ":"
Line 6258:0 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:abs-of-mayhem-1 (INDEX:0) */
.abs-mayhem {
    padding: 60px 0;
    font-family: 'Montserrat', sans-serif;
  }
  .abs-mayhem__title {
    color: black;
    font-size: 40px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    margin: 0 0 8px 0;
  }
  .abs-mayhem__subtitle {
    color: #4a4a4a;
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 24px 0;
    max-width: 749px;
  }
  .abs-mayhem__loading {
    padding: 40px 0;
    color: #6b6b6b;
    font-size: 15px;
  }
  .abs-mayhem__card {
    background: white;
    border-radius: 16px;
    padding: 28px;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .abs-mayhem__card--disconnected {
    border: 2px solid #FFD201;
  }
  .abs-mayhem__strava-logo { margin-bottom: 4px; }
  .abs-mayhem__card-title { font-size: 22px; font-weight: 700; margin: 0; }
  .abs-mayhem__card-body { color: #333; font-size: 15px; line-height: 22px; margin: 0; }
  .abs-mayhem__qualifying { color: #6b6b6b; font-size: 13px; margin: 0; }
  .abs-mayhem__connect-btn {
    display: inline-block;
    padding: 12px 20px;
    background: #fc4c02;
    color: white;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    width: fit-content;
    margin-top: 8px;
  }
  .abs-mayhem__connect-btn:hover { background: #d33f01; color: white; }

  .abs-mayhem__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
  }
  .abs-mayhem__stat {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  .abs-mayhem__stat--highlight { background: #FFD201; }
  .abs-mayhem__stat-value { font-size: 30px; font-weight: 700; color: black; }
  .abs-mayhem__stat-label { font-size: 14px; font-weight: 600; color: black; }

  .abs-mayhem__rules {
    background: #f0f0f0;
    border-radius: 12px;
    padding: 20px;
    max-width: 749px;
  }
  .abs-mayhem__rules-title { font-size: 16px; font-weight: 700; margin: 0 0 8px 0; }
  .abs-mayhem__rules-body { color: #333; font-size: 14px; line-height: 20px; margin: 0; }

  @media screen and (max-width: 749px) {
    .abs-mayhem__title { font-size: 28px; }
  }
/* END_SECTION:abs-of-mayhem-1 */

/* START_SECTION:affiliate-assets-library-1 (INDEX:1) */
/* FIRST content section - 80px top (banner above gives 0),
 * 40px bottom. Mobile 40/20. */
.aal1-section {
  padding-top: 80px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}

.aal1-header {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.aal1-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  height: 56px;
  background: #FFD201;
  border-radius: 12px;
}

.aal1-badge-icon-wrapper {
  width: 21px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.aal1-badge-icon-img {
  width: 21px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.aal1-badge-text {
  color: #212121;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-align: center;
  word-wrap: break-word;
  white-space: nowrap;
}

.aal1-heading {
  align-self: stretch;
  text-align: center;
  color: #212121;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 65px;
  margin: 0;
}

@media (max-width: 749px) {
  .aal1-section {
    padding-top: 40px;
    padding-bottom: 20px;
    gap: 22px;
  }
  .aal1-header { gap: 14px; }
  .aal1-badge {
    padding: 0 16px;
    height: 44px;
    border-radius: 12px;
  }
  .aal1-badge-text { font-size: 12px; }
  .aal1-heading {
    font-size: 26px;
    line-height: 1.1;
  }
}

@media (max-width: 480px) {
  .aal1-heading { font-size: 24px; }
}

/* ── Instagram reels grid (added) ──────────────────
 * Operator-curated grid below the heading. 4-up on desktop,
 * 3-up on tablet, 2-up on mobile. Each tile is a 9:16 portrait
 * thumbnail with a play-icon overlay that intensifies on hover. */
.aal1-reels-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.aal1-reel {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: #212121;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.aal1-reel:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
}
.aal1-reel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.aal1-reel__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, #2a2a2a 0%, #212121 100%);
}
.aal1-reel__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.45) 100%);
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.aal1-reel:hover .aal1-reel__overlay { opacity: 1; }
.aal1-reel__play {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
@media (max-width: 1024px) {
  .aal1-reels-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .aal1-reels-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
/* END_SECTION:affiliate-assets-library-1 */

/* START_SECTION:affiliate-assets-library-2 (INDEX:2) */
/* ═══════════════════════════════════════════════
   AFFILIATE ASSETS LIBRARY 2 - Section Styles
   Prefix: aal2-
═══════════════════════════════════════════════ */

/* ── Outer Shell ── */
/* Middle content section - 80px between sections (40px each side). */
.aal2-section {
    padding: 40px 0;
}

.aal2-section>.page-width {
  background: #212121;
  border-radius: 20px;
  overflow: hidden;
}

/* ── Inner Wrapper (padding + flex column) ── */
.aal2-wrapper {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ═══ SECTION HEADER ═══ */
.aal2-header {
  display: flex;
  align-items: center;
  gap: 24px;
}

.aal2-header__icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: #D70000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.aal2-header__icon-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.aal2-header__title {
  color: white;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 65px;
  margin: 0;
}

/* ═══ MAIN CONTENT COLUMN ═══ */
.aal2-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ═══ SHIMMER SKELETONS ═══ */
@keyframes aal2-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

/* base shimmer — dark modal/section bg (#181818 / #212121) */
/* #2e2e2e → #484848 gives clear contrast on near-black bg */
.aal2-sk {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #2e2e2e 25%, #484848 50%, #2e2e2e 75%);
  background-size: 600px 100%;
  animation: aal2-shimmer 1.4s infinite linear;
  min-height: 12px; /* fallback so zero-height never hides them */
}

/* on the yellow→red gradient active card */
.aal2-sk--light {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(0,0,0,0.22) 25%, rgba(0,0,0,0.40) 50%, rgba(0,0,0,0.22) 75%);
  background-size: 600px 100%;
  animation: aal2-shimmer 1.4s infinite linear;
  min-height: 12px;
}

/* section skeleton: active campaign card shell */
.aal2-skel-active {
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.aal2-skel-active__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.aal2-skel-active__left { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.aal2-skel-active__right { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; width: 90px; }
.aal2-skel-active__boxes { display: flex; gap: 24px; }
.aal2-skel-box {
  flex: 1;
  background: rgba(0,0,0,0.20);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* upcoming card skeleton */
.aal2-skel-upcoming { display: flex; gap: 24px; }
.aal2-skel-card {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aal2-sk--card {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #d8dade 25%, #eaecef 50%, #d8dade 75%);
  background-size: 600px 100%;
  animation: aal2-shimmer 1.4s infinite linear;
  min-height: 12px;
}

/* modal loading label */
.aal2-skel-modal__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #FFD201;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.aal2-skel-modal__loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFD201;
  display: inline-block;
  animation: aal2-pulse 1s ease-in-out infinite;
}
@keyframes aal2-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.7); }
}

/* modal skeleton */
.aal2-skel-modal { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.aal2-skel-modal__header { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; border-bottom: 2px solid #2a2a2a; }
.aal2-skel-modal__section { display: flex; flex-direction: column; gap: 10px; }

/* ═══ ACTIVE CAMPAIGN GRADIENT CARD ═══ */
.aal2-active-campaign {
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.aal2-active-campaign { cursor: default; }
.aal2-active-campaign:hover { transform: none !important; box-shadow: none !important; }

/* Campaign top row: info (left) + commission card (right) */
.aal2-campaign__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.aal2-campaign__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Status row: badge + days remaining */
.aal2-campaign__status-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aal2-campaign__badge {
  display: inline-block;
  background: #D70000;
  border-radius: 4px;
  padding: 4px 11px;
  color: white;
  font-size: 11px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aal2-days-remaining {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

.aal2-days-remaining__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  flex-shrink: 0;
  animation: aal2-pulse 1.6s ease-in-out infinite;
}

.aal2-campaign__title {
  color: white;
  font-size: 30px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}

.aal2-campaign__period {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,0.82);
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  margin: 0;
}

/* Commission boost — glass card top-right */
.aal2-commission-card {
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.30);
  border-radius: 14px;
  padding: 14px 18px;
  min-width: 148px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.aal2-commission-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.aal2-commission-card__value {
  color: #fff;
  font-size: 36px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}

.aal2-commission-card__icon {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.18);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aal2-commission-card__label {
  color: rgba(255,255,255,0.72);
  font-size: 11px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.aal2-commission-card__status {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

/* ═══ THREE INFO BOXES ═══ */
.aal2-campaign__boxes {
  display: flex;
  gap: 16px;
}

.aal2-info-box {
  flex: 1;
  background: rgba(0,0,0,0.20);
  border-radius: 12px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aal2-info-box__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aal2-info-box__icon {
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.16);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aal2-info-box__title {
  color: white;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.aal2-info-box__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Tick items — Key Talking Points + Benefits */
.aal2-tick-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: rgba(255,255,255,0.90);
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 1.5;
}

.aal2-tick-item__circle {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Posting Rhythm — absolute dot + pseudo-element line */
.aal2-rhythm-items {
  display: flex;
  flex-direction: column;
}

/* each row: relative so dot + line can be absolute */
.aal2-rhythm-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-left: 22px;   /* 12px dot + 10px gap */
  padding-bottom: 16px;
}

.aal2-rhythm-item--last {
  padding-bottom: 0;
}

/* yellow dot — absolutely placed on the left */
.aal2-rhythm-item__dot {
  display: block !important; /* override base.css div:empty { display:none } */
  position: absolute;
  left: 0;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFD201;
  box-shadow: 0 0 8px rgba(255,210,1,0.60);
  z-index: 1;
}

/* connecting line — runs from below this dot to the bottom of the item */
.aal2-rhythm-item:not(.aal2-rhythm-item--last)::before {
  content: '';
  position: absolute;
  left: 5px;          /* center of 12px dot (6px) minus 1px (half of 2px line) */
  top: 15px;          /* 3px dot-top + 12px dot-height = just below the dot */
  bottom: 0;
  width: 2px;
  background: rgba(255,210,1,0.35);
}

/* right column content */
.aal2-rhythm-item__content {
  flex: 1;
}

.aal2-rhythm-item__week {
  color: #FFD201;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.35;
  display: block;
}

.aal2-rhythm-item__focus {
  color: rgba(255,255,255,0.80);
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.45;
  display: block;
  margin-top: 2px;
}

/* ═══ SUGGESTED FORMATS ═══ */
.aal2-suggested-formats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aal2-formats__title {
  color: rgba(255,255,255,0.65);
  font-size: 11px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.aal2-formats__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.aal2-format-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.20);
  border-radius: 10px;
  padding: 10px 14px;
}

.aal2-format-card__icon {
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.14);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aal2-format-card__text { display: flex; flex-direction: column; }

.aal2-format-card__name {
  color: #fff;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

.aal2-format-card__sub {
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

/* ═══ VIEW BRIEF BUTTON (active card) ═══ */
.aal2-active__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.aal2-brief-btn {
  background: rgba(0,0,0,0.25);
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  padding: 11px 22px;
  min-height: 48px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.aal2-brief-btn:hover {
  background: rgba(0,0,0,0.45);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}

/* Download variant — white bg, dark text, orange icon */
.aal2-brief-btn--dl {
  background: #fff;
  border-color: #D70000;
  color: #D70000;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.aal2-brief-btn--dl:hover {
  background: #fff;
  border-color: #D70000;
  color: #D70000;
}
.aal2-brief-btn--dl .aal2-dl-icon {
  color: #FFD201;
  flex-shrink: 0;
}

/* ═══ UPCOMING CAMPAIGN CARDS ═══ */
.aal2-upcoming-cards {
  display: flex;
  gap: 24px;
}

.aal2-upcoming-card {
  flex: 1;
  background: white;
  border-radius: 12px;
  border: 1px solid white;
  padding: 25px;
  display: flex;
  flex-direction: column;
}

.aal2-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.aal2-card__badge {
  background: #D70000;
  border-radius: 4px;
  padding: 4px 11px;
  color: white;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 16px;
}

.aal2-card__date {
  color: #333;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 20px;
}

.aal2-card__title {
  color: #212121;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 28px;
  margin: 0 0 8px;
}

.aal2-card__desc {
  color: #000;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 20px;
  margin: 0 0 16px;
}

.aal2-card__btn {
  display: block;
  background: white;
  border-radius: 4px;
  border: 1px solid #FFD201;
  color: #212121;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-align: center;
  padding: 11px 0;
  text-decoration: none;
  cursor: pointer;
  margin-top: auto;
  width: 100%;
}

.aal2-card__btn:hover {
  background: #FFD201;
  color: #212121;
}

/* Download link below upcoming card button */
.aal2-card__dl-link {
  display: block;
  text-align: center;
  color: #D70000;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin-top: 8px;
  text-decoration: none;
}
.aal2-card__dl-link:hover { color: #a00000; text-decoration: underline; }

/* ═══ BRIEF MODAL ═══ */
/* backdrop-filter must live on the fixed root — child elements don't composite correctly */
.aal2-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 12, 0.55);
  backdrop-filter: blur(14px) saturate(0.8);
  -webkit-backdrop-filter: blur(14px) saturate(0.8);
}

/* just a click-to-close layer, no visual */
.aal2-modal__backdrop {
  position: absolute;
  inset: 0;
}

.aal2-modal__panel {
  position: relative;
  background: #181818;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  width: min(1020px, 96vw);
  min-height: 400px !important;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
}

/* sticky close bar at the top of the panel */
.aal2-modal__close {
  position: sticky;
  top: 0;
  z-index: 10;
  align-self: stretch;
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px 0;
  background: #181818;
  flex-shrink: 0;
  border: none;
  width: auto;
  height: auto;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  cursor: default;
}

/* the actual × sits inside a proper button */
.aal2-modal__close-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: rgba(255,255,255,0.7);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.aal2-modal__close-btn:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
}

.aal2-modal__body {
  padding: 20px 44px 44px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  overflow-y: auto;
  flex: 1;
}

/* brief header */
.aal2-brief__header {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.aal2-brief__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.aal2-brief__badge {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.aal2-brief__badge--type  { background: rgba(255,255,255,0.1); color: #bbb; }
.aal2-brief__badge--new   { background: #FFD201; color: #212121; }
.aal2-brief__badge--boost { background: #D70000; color: #fff; }

.aal2-brief__title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 10px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
}

.aal2-brief__period {
  font-size: 17px;
  color: rgba(255,255,255,0.55);
  margin: 0 0 8px;
}

.aal2-brief__offer {
  font-size: 18px;
  font-weight: 700;
  color: #FFD201;
  margin: 12px 0 6px;
}

.aal2-brief__code,
.aal2-brief__version {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  margin: 4px 0;
}

/* doc embed */
.aal2-brief__doc {
  margin-bottom: 36px;
}

.aal2-brief__doc-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #FFD201;
  margin: 0 0 14px;
}

/* "Summary Notes" divider — shown between doc and text sections */
.aal2-brief__summary-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  color: rgba(255,255,255,0.28);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: 'Montserrat', sans-serif;
}
.aal2-brief__summary-divider::before,
.aal2-brief__summary-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.09);
}

.aal2-brief__pdf {
  width: 100%;
  height: 560px;
  border: none;
  border-radius: 10px;
  display: block;
  margin-bottom: 12px;
  background: #fff;
}

.aal2-brief__download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,210,1,0.12);
  border: 1.5px solid #FFD201;
  border-radius: 8px;
  color: #FFD201;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 20px;
  text-decoration: none;
  transition: background 0.15s;
}

.aal2-brief__download:hover { background: rgba(255,210,1,0.25); color: #FFD201; }

/* content sections inside modal */
.aal2-brief__section {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.aal2-brief__section:last-child { border-bottom: none; margin-bottom: 0; }

.aal2-brief__section--legal {
  background: rgba(215,0,0,0.07);
  border-radius: 10px;
  padding: 20px 22px;
  border: 1px solid rgba(215,0,0,0.22);
  border-bottom: 1px solid rgba(215,0,0,0.22);
}

.aal2-brief__section-title {
  font-size: 13px;
  font-weight: 800;
  color: #FFD201;
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.aal2-brief__section p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 8px;
  color: rgba(255,255,255,0.85);
}

.aal2-brief__item {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  margin: 0 0 6px !important;
}

.aal2-brief__sub {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.1em;
  margin: 16px 0 8px !important;
}

.aal2-brief__tag {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin: 3px;
}

.aal2-brief__tag--opt { opacity: 0.55; }

.aal2-brief__idea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.aal2-brief__caption {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.aal2-brief__caption-text {
  font-style: italic;
  color: rgba(255,255,255,0.7) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Stack everything 1-col, shrink title 52→28, info-boxes wrap.
 */
@media (max-width: 749px) {
  .aal2-section { padding: 20px 0; }
  .aal2-section > .page-width { padding-left: 0; padding-right: 0; }
  .aal2-wrapper {
    padding: 24px 0;
    gap: 22px;
  }
  .aal2-header {
    gap: 14px;
    align-items: flex-start;
  }
  .aal2-header__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .aal2-header__icon-img {
    width: 22px;
    height: 22px;
  }
  .aal2-header__title {
    font-size: 26px;
    line-height: 1.1;
  }
  .aal2-active-campaign {
    padding: 22px;
    gap: 16px;
    border-radius: 16px;
  }
  .aal2-campaign__header {
    flex-direction: column;
    gap: 14px;
  }
  .aal2-commission-card {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
  }
  .aal2-commission-card__top { flex: 1; }
  .aal2-commission-card__value { font-size: 28px; }
  .aal2-campaign__title {
    font-size: 20px;
    line-height: 1.2;
  }
  .aal2-campaign__period { font-size: 13px; }
  .aal2-campaign__boxes {
    flex-direction: column;
    gap: 12px;
  }
  .aal2-info-box { padding: 14px; }
  .aal2-formats__tags { gap: 8px; }
  .aal2-format-card { padding: 8px 12px; }
  /* override theme clamp() on <p> and [class*=__title] elements */
  .aal2-formats__title { font-size: 11px !important; }
  .aal2-info-box__title { font-size: 13px !important; }
  /* buttons: each full width */
  .aal2-brief-btn { flex: unset; width: 100%; padding: 13px; justify-content: center; text-align: center; }
  /* Upcoming campaign cards: stack instead of 2-col */
  .aal2-upcoming-cards {
    flex-direction: column;
    gap: 14px;
  }
  .aal2-upcoming-card { padding: 18px; }
  .aal2-card__title {
    font-size: 18px;
    line-height: 1.2;
  }
  .aal2-card__btn {
    padding: 13px 0;
    min-height: 44px;
    font-size: 14px;
  }
  /* modal on mobile - sheet from bottom */
  .aal2-modal { align-items: flex-end; }
  .aal2-modal__panel {
    width: 100vw;
    max-height: 94vh;
    border-radius: 20px 20px 0 0;
  }
  .aal2-modal__body { padding: 12px 20px 32px; }
  .aal2-brief__title { font-size: 26px; }
  .aal2-brief__pdf { height: 260px; }
}

@media (max-width: 480px) {
  .aal2-header__title { font-size: 22px; }
}

.aal2-campaign-gap { height: 40px; }
@media (max-width: 749px) {
  .aal2-campaign-gap { height: 24px; }
}
/* END_SECTION:affiliate-assets-library-2 */

/* START_SECTION:affiliate-assets-library-3 (INDEX:3) */
/* ═══════════════════════════════════════════
   Section wrapper
═══════════════════════════════════════════ */
/* LAST content section - 40px top, 80px bottom (footer below gives 0). */
.aal3-section {
  padding: 40px 0 80px;
}

/* ═══════════════════════════════════════════
   Two-column layout
═══════════════════════════════════════════ */
.aal3-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

/* ═══════════════════════════════════════════
   Left panel
═══════════════════════════════════════════ */
.aal3-left {
    width: calc(50% - 30px);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.aal3-left-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aal3-heading {
  color: #000;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 1em;
  margin: 0;
}

.aal3-subheading {
  color: #000;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 28px;
  margin: 0;
}

/* ── Library provides ── */
.aal3-library {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 315px;
}

.aal3-library-label {
  color: #212121;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin: 0;
}

.aal3-library-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 235px;
}

.aal3-library-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aal3-library-icon {
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aal3-library-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.aal3-library-item-label {
  color: #212121;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

/* ═══════════════════════════════════════════
   Right panel
═══════════════════════════════════════════ */
.aal3-right {
  width: 50%;
  height: 545px;
  border-radius: 20px;
  background-color: #F07900;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding: 60px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 30px;
}

/* ── "You turn that into:" badge ── */
.aal3-right-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 16px;
  background: #FFD201;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  color: #212121;
  font-size: 32px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 1em;
  white-space: nowrap;
}

/* ── Benefit bullet list ── */
.aal3-benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aal3-benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1em;
}

.aal3-benefit-icon {
  color: #fff;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.aal3-benefit-text {
  color: #fff;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1em;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is 50/50 two-column: left has 52px Racing Sans heading
 * + library list, right is an orange hero panel (545px tall).
 * Stack columns; hero shrinks; library list goes full width.
 */
@media (max-width: 749px) {
  .aal3-section { padding: 20px 0 40px; }
  .aal3-container {
    flex-direction: column;
    gap: 22px;
  }
  .aal3-left {
    width: 100%;
    gap: 20px;
  }
  .aal3-heading {
    font-size: 26px;
    line-height: 1.1;
  }
  .aal3-subheading {
    font-size: 14px;
    line-height: 1.45;
  }
  .aal3-library {
    width: 100%;
    gap: 14px;
  }
  .aal3-library-label { font-size: 16px; }
  .aal3-library-list {
    width: 100%;
    gap: 12px;
  }
  .aal3-library-icon img {
    width: 38px;
    height: 38px;
  }
  .aal3-library-item-label { font-size: 14px; }
  .aal3-right {
    width: 100%;
    height: auto;
    min-height: 360px;
    padding: 24px;
    gap: 20px;
    border-radius: 16px;
  }
  .aal3-right-badge {
    font-size: 18px;
    padding: 8px 14px;
  }
  .aal3-benefits-list { gap: 14px; }
  .aal3-benefit-text { font-size: 14px; }
}

@media (max-width: 480px) {
  .aal3-heading { font-size: 24px; }
}
/* END_SECTION:affiliate-assets-library-3 */

/* START_SECTION:affiliate-reels-library (INDEX:4) */
/* ═══ REELS LIBRARY ═══ */
.arl-section {
  padding: 40px 0;
}

.arl-section > .page-width {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
}

.arl-wrapper {
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── TOOLBAR ── */
.arl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.arl-tabs {
  display: flex;
  gap: 8px;
}

.arl-tab {
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: #f2f2f2;
  color: #555;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}

.arl-tab--active,
.arl-tab:hover {
  background: #D70000;
  color: #fff;
}

.arl-updated {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #999;
}

.arl-updated__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFD201;
  flex-shrink: 0;
  animation: arl-pulse 1.6s ease-in-out infinite;
}

@keyframes arl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.65); }
}

/* ── GRID ── */
.arl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ── CARD ── */
.arl-card {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid #f0f0f0;
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.arl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

/* hidden state for filter */
.arl-card--hidden {
  display: none;
}

/* ── THUMBNAIL ── */
.arl-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #1e1e1e;
  overflow: hidden;
  flex-shrink: 0;
}

.arl-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.arl-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.12);
}

/* TRENDING / NEW badge */
.arl-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.arl-badge--trending {
  background: #D70000;
  color: #fff;
}

.arl-badge--trending::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFD201;
  flex-shrink: 0;
}

.arl-badge--new {
  background: #FFD201;
  color: #111;
}

/* Duration pill */
.arl-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.arl-duration__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFD201;
  flex-shrink: 0;
}

/* ── CARD BODY ── */
.arl-card__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.arl-card__title {
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  margin: 0;
}

.arl-card__desc {
  font-size: 11px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color: #888;
  line-height: 1.45;
  margin: 0;
  flex: 1;
}

/* ── FOOTER ── */
.arl-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.arl-card__age {
  font-size: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #bbb;
  white-space: nowrap;
}

.arl-card__stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.arl-stat {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #aaa;
}

/* ── EMPTY STATE ── */
.arl-empty {
  text-align: center;
  padding: 48px 24px;
  color: #bbb;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  display: none;
}

.arl-empty--visible { display: block; }

/* ── MOBILE ── */
@media (max-width: 749px) {
  .arl-section > .page-width { padding-left: 0; padding-right: 0; }
  .arl-wrapper { padding: 24px 16px; }
  .arl-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .arl-tab { padding: 7px 14px; font-size: 12px; }
}

@media (max-width: 480px) {
  .arl-grid { grid-template-columns: repeat(2, 1fr); }
}
/* END_SECTION:affiliate-reels-library */

/* START_SECTION:all_blogs (INDEX:5) */
.blogs-all-sec {
  padding: 100px 0;
}

/* Hero */
.blogs-all-sec__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  text-align: center;
}

.blogs-all-sec__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #000;
  margin: 0;
}

.blogs-all-sec__heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 46px;
  text-transform: capitalize;
  color: #212121;
  margin: 0;
  max-width: 800px;
}

.blogs-all-sec__description {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  max-width: 812px;
  margin: 8px auto 0;
}

/* Filters */
.blogs-all-sec__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 36px;
}

.blogs-all-sec__filter {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border: 2px solid #212121;
  border-radius: 9999px;
  background: transparent;
  color: #212121;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.blogs-all-sec__filter:hover,
.blogs-all-sec__filter.is-active {
  background: #212121;
  color: #fff;
}

/* Grid */
.blogs-all-sec__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 640px) {
  .blogs-all-sec__grid {
    grid-template-columns: 1fr;
  }

  .blogs-all-sec__heading {
    font-size: 36px;
    line-height: 38px;
  }
}

/* Blog Card */
.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s ease;
}

.blog-card.is-hidden {
  display: none;
}

.blog-card:hover {
  transform: translateY(-4px);
}

.blog-card__image-wrap {
  display: block;
  width: 100%;
  /* height: 376px; */
  aspect-ratio: 632 / 376;
  overflow: hidden;
  background: #ddd;
  flex-shrink: 0;
}

.blog-card__image-placeholder {
  width: 100%;
  height: 100%;
  background: #ddd;
}

.blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-card__image {
  transform: scale(1.04);
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 15px 10px;
  background: #fff;
}

.blog-card__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__title:hover {
  text-decoration: underline;
}

/* Meta row */
.blog-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-card__author {
  display: flex;
  align-items: center;
  gap: 11px;
}

.blog-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #212121;
  flex-shrink: 0;
  text-transform: uppercase;
}

.blog-card__author-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.blog-card__author-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.blog-card__date {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #212121;
}

.blog-card__linkedin {
  display: flex;
  flex-shrink: 0;
}

.blog-card__linkedin svg {
  display: block;
}

/* Footer */
.blog-card__footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-card__divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
}

.blog-card__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-card__actions-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-card__comments {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.56px;
  color: #000;
}

.blog-card__bookmark {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.blog-card__share {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.56px;
  color: #000;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.blogs-all-sec__empty {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  color: #666;
  text-align: center;
  padding: 40px 0;
}
/* END_SECTION:all_blogs */

/* START_SECTION:ambassador-application (INDEX:6) */
/* ── Modern Ambassador Application - mirrors campus-application ── */
  /* Only content section on the page → first AND last → 80px top
   * and bottom (banner above + footer below both give 0). */
  .amb-apply {
    padding: 80px 0;
    font-family: 'Montserrat', sans-serif;
    color: #212121;
    max-width: 760px;
    margin: 0 auto;
  }
  .amb-apply__header {
    text-align: left;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #ddd;
    position: relative;
  }
  .amb-apply__header::after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 80px; height: 3px;
    background: linear-gradient(90deg, #FFD201, #D70000);
    border-radius: 2px;
  }
  .amb-apply__title {
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: 0.01em;
    margin: 0 0 10px 0;
    color: #212121;
  }
  .amb-apply__subtitle {
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 14px;
    max-width: 640px;
  }
  .amb-apply__rates {
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  .amb-apply__rate-pill {
    background: linear-gradient(90deg, #FFD201, #D70000);
    color: #fff; font-size: 12px; font-weight: 700;
    padding: 4px 12px; border-radius: 9999px;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .amb-apply__rate-pill--gray { background: #ddd; color: #374151; }

  /* State card (pending / approved / rejected) */
  .amb-apply__state {
    background: linear-gradient(135deg, #fffbeb 0%, #fff5f5 100%);
    border: 1px solid #f1dd7a;
    border-left: 4px solid #FFD201;
    border-radius: 12px;
    padding: 24px 26px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(15,20,33,0.04);
  }
  .amb-apply__state-msg {
    margin: 0 0 12px 0;
    font-size: 15px;
    line-height: 1.55;
    color: #212121;
    font-weight: 500;
  }
  .amb-apply__state-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #FFD201, #D70000);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .amb-apply__state-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(215,0,0,0.25);
  }
  .amb-apply__state-cta::after { content: '→'; font-size: 16px; }

  /* Form layout */
  .amb-apply__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .amb-apply__group {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 24px 26px 18px;
    box-shadow: 0 1px 2px rgba(15,20,33,0.04);
    transition: box-shadow 0.18s;
  }
  .amb-apply__group:hover { box-shadow: 0 4px 14px rgba(15,20,33,0.06); }
  .amb-apply__group legend {
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    padding: 0 12px;
    font-size: 18px;
    color: #212121;
    letter-spacing: 0.02em;
    background: #fff;
    border-radius: 4px;
  }

  /* Fields */
  .amb-apply__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 16px 0;
  }
  .amb-apply__field label {
    font-size: 13px;
    font-weight: 600;
    color: #212121;
  }
  .amb-apply__field label small { font-weight: 500; color: #333; }
  .amb-apply__field input,
  .amb-apply__field select,
  .amb-apply__field textarea {
    padding: 11px 14px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    color: #212121;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
  }
  .amb-apply__field input:focus,
  .amb-apply__field select:focus,
  .amb-apply__field textarea:focus {
    outline: none;
    border-color: #FFD201;
    box-shadow: 0 0 0 3px rgba(255,210,1,0.18);
  }
  .amb-apply__field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #333 50%), linear-gradient(135deg, #333 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
    cursor: pointer;
  }
  .amb-apply__field textarea { resize: vertical; min-height: 110px; }
  .amb-apply__field small {
    font-size: 12px;
    color: #333;
    line-height: 1.5;
  }
  #aa-preferredCode {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 15px;
  }
  .amb-apply__inline-note {
    margin-top: 10px;
    padding: 12px 14px;
    background: #fffbeb;
    border-left: 3px solid #FFD201;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
  }

  /* Fitness focus chips + general checks */
  .amb-apply__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
  }
  .amb-apply__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    user-select: none;
  }
  .amb-apply__field .amb-apply__checks .amb-apply__check {
    padding: 8px 16px;
    border: 1.5px solid #ddd;
    border-radius: 9999px;
    background: #fff;
    transition: all 0.15s;
  }
  .amb-apply__field .amb-apply__checks .amb-apply__check:hover {
    border-color: #FFD201;
    background: #fffbeb;
  }
  .amb-apply__field .amb-apply__checks .amb-apply__check input { display: none; }
  .amb-apply__field .amb-apply__checks .amb-apply__check:has(input:checked) {
    background: linear-gradient(90deg, #FFD201, #D70000);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
  }

  /* Code preview chip */
  .amb-apply__code-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
  }
  .amb-apply__code-preview-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #333;
  }
  .amb-apply__code-preview-badge {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 16px;
    background: linear-gradient(90deg, #FFD201, #D70000);
    color: #fff;
    padding: 6px 16px;
    border-radius: 8px;
    letter-spacing: 0.05em;
  }

  /* Payouts */
  .amb-apply__payouts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 6px;
  }
  .amb-apply__payout {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    border: 1.5px solid #ddd;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
  }
  .amb-apply__payout:hover { border-color: #FFD201; background: #fffbeb; }
  .amb-apply__payout input { position: absolute; opacity: 0; pointer-events: none; }
  .amb-apply__payout-icon { font-size: 24px; }
  .amb-apply__payout-name { font-size: 13px; font-weight: 600; color: #374151; }
  .amb-apply__payout:has(input:checked) {
    border-color: transparent;
    background: linear-gradient(135deg, #fffbeb, #fff5f5);
    box-shadow: 0 0 0 2px #FFD201 inset, 0 4px 14px rgba(215,0,0,0.12);
  }

  /* Agreements (large checkbox) */
  .amb-apply__group:nth-last-of-type(2) .amb-apply__check,
  .amb-apply__group:last-of-type .amb-apply__check {
    padding: 10px 0;
    font-size: 14px;
    align-items: flex-start;
  }
  .amb-apply__group:nth-last-of-type(2) .amb-apply__check input[type="checkbox"],
  .amb-apply__group:last-of-type .amb-apply__check input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: #D70000;
    margin-top: 2px;
    flex-shrink: 0;
  }
  .amb-apply__link {
    color: #D70000;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Submit */
  .amb-apply__submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #fff;
    padding: 14px 32px;
    border: 0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    cursor: pointer;
    width: fit-content;
    margin-top: 8px;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  }
  .amb-apply__submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(215,0,0,0.25);
  }
  .amb-apply__submit::after { content: '→'; font-size: 18px; }
  .amb-apply__submit:disabled { opacity: 0.55; cursor: not-allowed; }

  .amb-apply__status {
    min-height: 22px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
  }
  .amb-apply__status--error {
    color: #8a1c1c;
    background: #fde8e6;
    border-left: 3px solid #d70000;
    padding: 10px 14px;
    border-radius: 8px;
  }

  /* Logged-out gate */
  .amb-apply__gate {
    background: linear-gradient(135deg, #fffbeb 0%, #fff5f5 100%);
    border: 1px solid #f1dd7a;
    border-radius: 16px;
    padding: 48px 32px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(15,20,33,0.06);
  }
  .amb-apply__gate-icon { font-size: 56px; margin-bottom: 12px; }
  .amb-apply__gate-title {
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    font-size: 32px;
    margin: 0 0 12px;
    color: #212121;
  }
  .amb-apply__gate-text {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    max-width: 480px;
    margin: 0 auto 24px;
  }
  .amb-apply__gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
  }
  .amb-apply__gate-link {
    color: #212121;
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .amb-apply__gate-link:hover { color: #D70000; }

  @media (max-width: 600px) {
    .amb-apply__title { font-size: 34px; }
    .amb-apply__group { padding: 20px 18px 14px; }
    .amb-apply__payouts { grid-template-columns: 1fr; }
    .amb-apply__gate { padding: 36px 22px; }
    .amb-apply__gate-title { font-size: 26px; }
  }

/* Mobile (≤ 749px) - added by mobile-spacing audit so this section
 * follows the project's standard 20px-vertical mobile rhythm. */
@media (max-width: 749px) {
  .amb-apply {
    padding: 20px 0;
  }
}
/* END_SECTION:ambassador-application */

/* START_SECTION:ambassador-leaderboard (INDEX:7) */
.ambassador-leaderboard {
    padding: 64px 0 56px;
    font-family: 'Montserrat', sans-serif;
    color: #212121;
  }

  .alb-header { margin-bottom: 24px; }
  .alb-title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: clamp(32px, 5vw, 48px);
    margin: 0 0 8px;
    color: #212121;
  }
  .alb-subtitle {
    margin: 0;
    font-size: 15px;
    color: #555;
    max-width: 620px;
  }

  /* "My rank" pill row */
  .alb-mine {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
  }
  .alb-pill {
    background: #FFD201;
    border-radius: 12px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #212121;
  }
  .alb-pill__label { letter-spacing: 0.04em; }
  .alb-pill__value { font-weight: 800; }

  .alb-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    background: #fff;
  }
  .alb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
  }
  .alb-table thead tr {
    background: #212121;
    color: #FFD201;
    text-align: left;
  }
  .alb-table th,
  .alb-table td {
    padding: 13px 18px;
  }
  .alb-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
  }
  .alb-table tbody tr:last-child { border-bottom: none; }
  .alb-table tbody tr:hover { background: #FFFBE6; }

  .alb-table tbody tr.alb-top3 {
    background: #FFF9D6;
    font-weight: 700;
  }
  .alb-table tbody tr.alb-me {
    background: #FFE8E8;
    font-weight: 800;
  }
  .alb-table tbody tr.alb-me.alb-top3 {
    /* When the caller is also in the top 3, "you" highlight wins. */
    background: #FFE0E0;
  }

  .alb-rank {
    font-size: 17px;
    font-weight: 800;
    color: #D70000;
    width: 60px;
  }
  .alb-code {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    letter-spacing: 0.02em;
  }
  .alb-me-badge {
    background: #D70000;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
  }

  .alb-loading td,
  .alb-empty {
    text-align: center;
    color: #888;
    padding: 36px 18px;
  }

  .alb-footnote {
    margin-top: 12px;
    font-size: 12px;
    color: #888;
    text-align: right;
  }

  @media (max-width: 640px) {
    .alb-table th,
    .alb-table td { padding: 10px 12px; }
    .alb-rank { width: 40px; }
  }

/* Mobile (≤ 749px) - added by mobile-spacing audit so this section
 * follows the project's standard 20px-vertical mobile rhythm. */
@media (max-width: 749px) {
  .ambassador-leaderboard {
    padding: 20px 0;
  }
}
/* END_SECTION:ambassador-leaderboard */

/* START_SECTION:ambassador-state-button (INDEX:8) */
.amb-state { max-width: 560px; margin: 24px auto; font-family: 'Montserrat', sans-serif; }
  .amb-state__box { padding: 20px 24px; border-radius: 12px; border: 1px solid #d0d4de; background: #fff; }
  .amb-state__box--pending { border-color: #f1c40f; background: #fffbe6; }
  .amb-state__box--approved { border-color: #1fa15e; background: #e9f7ef; }
  .amb-state__box--rejected { border-color: #d43131; background: #fdecec; }
  .amb-state__title { font-family: 'Racing Sans One', sans-serif; font-size: 26px; margin: 0 0 6px; color: #1f2533; }
  .amb-state__copy { margin: 0 0 14px; font-size: 14px; color: #2f384b; line-height: 1.5; }
  .amb-state__btn { display: inline-block; padding: 10px 20px; border-radius: 4px; font-weight: 600; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; }
  .amb-state__btn--primary { background: linear-gradient(90deg, #FFD201 0%, #D70000 100%); color: #fff; }
  .amb-state__btn--disabled { background: #e1e4ec; color: #333; cursor: not-allowed; }
  .amb-state__tools { border: 1px solid #b7dfc9; border-radius: 7px; overflow: hidden; margin-bottom: 14px; }
  .amb-state__tool-row { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #f0faf5; border-bottom: 1px solid #b7dfc9; }
  .amb-state__tool-row:last-child { border-bottom: 0; }
  .amb-state__tool-label { font-size: 11px; font-weight: 700; color: #1fa15e; text-transform: uppercase; letter-spacing: 0.06em; min-width: 80px; }
  .amb-state__tool-value { font-size: 13px; font-weight: 700; color: #1f2533; flex: 1; word-break: break-all; }
  .amb-state__tool-value--link { font-weight: 400; font-size: 12px; color: #374151; }
  .amb-state__copy-btn { background: none; border: 1px solid #b7dfc9; border-radius: 4px; padding: 4px 6px; cursor: pointer; color: #1fa15e; flex-shrink: 0; display: flex; align-items: center; }
  .amb-state__copy-btn:hover { background: #e9f7ef; }

  /* ── Mobile (< 750px) ────────────────────────────────────────────
   * The tool-rows render code/link side-by-side with a copy button.
   * On a 375px viewport the long referral link gets truncated and
   * the button can fall off-row. Stack the rows vertically.
   */
  @media (max-width: 749px) {
    .amb-state { margin: 18px auto; }
    .amb-state__box { padding: 16px 18px; }
    .amb-state__title { font-size: 18px; }
    .amb-state__copy { font-size: 12px; }
    .amb-state__btn {
      display: block;
      width: 100%;
      text-align: center;
      padding: 12px 18px;
      min-height: 44px;
      font-size: 14px;
    }
    .amb-state__tool-row {
      flex-wrap: wrap;
      align-items: flex-start;
      padding: 10px 12px;
      gap: 6px;
    }
    .amb-state__tool-label {
      flex: 0 0 100%;
      min-width: 0;
    }
    .amb-state__tool-value {
      flex: 1 1 calc(100% - 40px);
      font-size: 12px;
    }
    .amb-state__copy-btn { flex-shrink: 0; }
  }
/* END_SECTION:ambassador-state-button */

/* START_SECTION:ambassador_program_1 (INDEX:9) */
/* FIRST content section - 80px top (banner above gives 0),
 * 40px bottom. Mobile 40/20. */
.ap1-outer {
  padding-top: 80px;
  padding-bottom: 40px;
}

.ap1-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.ap1-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0 20px 60px;
}

.ap1-heading {
  color: var(--black, #212121);
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 46px;
  word-wrap: break-word;
  margin: 0;
}

.ap1-description {
  color: #000;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  word-wrap: break-word;
  margin: 0;
}

.ap1-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.ap1-btn-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 4px;
  color: #fff;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1em;
}

.ap1-btn-secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  border-radius: 4px;
  outline: 1px solid #D70000;
  color: #D70000;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1em;
}

.ap1-image-wrap {
  flex-shrink: 0;
  width: 569px;
  height: 100%;
}

.ap1-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ap1-placeholder {
  width: 100%;
  height: 100%;
}

/* Status cards (pending / cooldown) - full card layout */
.ap1-status-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f0f0f0;
  max-width: 460px;
}
.ap1-status-card--pending { border-color: #fde68a; background: #fffbeb; }
.ap1-status-card--cooldown { border-color: #ddd; background: #f1f5f9; }

/* Thin status banner (revoked) - single-line strip with title + inline body.
   Sits above the regular .ap1-buttons row so the Reapply button keeps the
   same visual weight as the non-member primary CTA. */
.ap1-status-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  max-width: 560px;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.4;
}
.ap1-status-banner__title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}
.ap1-status-banner__body {
  font-size: 13px;
  color: #475569;
}
.ap1-status-title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.005em;
}
.ap1-status-body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
}
.ap1-status-card .ap1-btn-primary,
.ap1-status-card .ap1-btn-secondary {
  align-self: flex-start;
  margin-top: 4px;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop layout is a flex card with content on the left and a fixed
 * 569px image on the right. On a 430px iPhone the 569px image alone
 * blows past viewport, and the 60px left padding + 52px heading leave
 * almost no room for actual copy.
 *
 * Fix: stack vertically. Image on top, content below. Image scales to
 * the card width, content fills the remaining space. Headings shrink
 * to fit phone widths. Buttons stretch to full width for chunky tap
 * targets.
 */
@media (max-width: 749px) {
  .ap1-outer {
    padding-top: 40px;
    padding-bottom: 20px;
  }
  .ap1-card {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  .ap1-content {
    padding: 24px 20px;
    gap: 16px;
    order: 2;
  }
  .ap1-image-wrap {
    width: 100%;
    height: 220px;
    order: 1;
  }
  .ap1-heading {
    font-size: 32px;
    line-height: 38px;
  }
  .ap1-description {
    font-size: 14px;
    line-height: 1.5;
  }
  .ap1-buttons {
    width: 100%;
    gap: 12px;
  }
  .ap1-btn-primary,
  .ap1-btn-secondary {
    flex: 1 1 100%;
    padding: 14px 18px;
    font-size: 14px;
    min-height: 48px;
    white-space: normal;
    text-align: center;
  }
  .ap1-status-card,
  .ap1-status-banner {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .ap1-heading {
    font-size: 30px;
    line-height: 32px;
  }
  .ap1-image-wrap {
    height: 180px;
  }
}
/* END_SECTION:ambassador_program_1 */

/* START_SECTION:ambassador_program_2 (INDEX:10) */
/* ============================================================
   Ambassador Program 2 - How It Works
   ============================================================ */

/* Middle content section - 80px between sections (40px each side). */
.amp2 {
  padding: 40px 0;
}

.amp2__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 35px;
}

/* ----- Heading ----- */
.amp2__heading {
  align-self: stretch;
  text-align: center;
  color: var(--black, #212121);
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 46px;
  word-wrap: break-word;
  margin: 0;
}

/* ----- Two-column layout ----- */
.amp2__layout {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 29px;
  width: 100%;
}

/* ============================================================
   LEFT COLUMN
   ============================================================ */

.amp2__left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 30px;
  flex: 1;
  min-width: 0;
  max-width: 725px;
}

.amp2__subtitle {
  align-self: stretch;
  color: var(--black, #212121);
  font-size: 32px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 24.64px;
  word-wrap: break-word;
  margin: 0;
}

/* ----- Accordion container ----- */
.amp2__accordion {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 20px;
}

/* ----- Single accordion item ----- */
.amp2__item {
  padding: 10px;
  background: white;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  outline: 1px solid #ffd201;
  outline-offset: -1px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ----- Item header row ----- */
.amp2__item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.amp2__item-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

/* ----- Icon (gradient background + image) ----- */
.amp2__item-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.amp2__item-icon img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  display: block;
}

/* ----- Item title ----- */
.amp2__item-title {
  color: var(--black, #212121);
  font-size: 22px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  word-wrap: break-word;
  line-height: 1.25;
}

/* ----- Toggle (+/−) ----- */
.amp2__item-toggle {
  width: 25px;
  height: 25px;
  background: #212121;
  border-radius: 3px;
  flex-shrink: 0;
  position: relative;
}

.amp2__item-toggle::before,
.amp2__item-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: white;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Horizontal bar - always visible */
.amp2__item-toggle::before {
  width: 13px;
  height: 2px;
}

/* Vertical bar - hidden when open */
.amp2__item-toggle::after {
  width: 2px;
  height: 13px;
}

.amp2__item--open .amp2__item-toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ----- Item body (expandable with transition) ----- */
.amp2__item-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
  align-self: stretch;
}

.amp2__item--open .amp2__item-body {
  grid-template-rows: 1fr;
}

.amp2__item-body-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 0 0 56px; /* 40px icon + 16px gap */
  display: flex;
  align-items: center;
  gap: 10px;
  transition: padding-bottom 0.35s ease;
}

.amp2__item--open .amp2__item-body-inner {
  padding-bottom: 6px;
}

.amp2__item-desc {
  flex: 1 1 0;
  color: var(--black, #212121);
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  word-wrap: break-word;
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   RIGHT COLUMN - Swiper Slider
   ============================================================ */

.amp2__right {
  width: 566px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 20px;
  overflow: hidden;
}

.amp2__swiper {
  height: 100%;
  min-height: 491px;
}

.amp2__swiper .swiper-wrapper {
  height: 100%;
}

/* ----- Slide ----- */
.amp2__slide {
  position: relative;
  height: 100%;
}

.amp2__slide-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}

.amp2__slide-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #888;
  z-index: 0;
}

/* ----- Slide caption (gradient bar) ----- */
/* bottom: pagination 20px + dot height 13px + gap 12px = 45px */
.amp2__slide-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 45px;
  padding: 12px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  z-index: 1;
}

.amp2__slide-caption-text {
  flex: 1 1 0;
  color: white;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
  line-height: 1.5;
}

.amp2__slide-caption-text strong {
  font-weight: 700;
}

/* ----- Swiper pagination bullets ----- */
.amp2__swiper .amp2__pagination {
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}

.amp2__swiper .swiper-pagination-bullet {
  width: 13px;
  height: 13px;
  background: rgba(255, 255, 255, 0.30);
  border-radius: 20px;
  opacity: 1;
  margin: 0 !important;
  transition: width 0.3s ease, background 0.3s ease;
}

.amp2__swiper .swiper-pagination-bullet-active {
  width: 56px;
  background: white;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a two-column layout: accordion (max-width 725px) on
 * left, 566px-wide swiper image carousel on right. On a 430px iPhone
 * the row shrinks each column to ~205px which destroys both the
 * accordion text and the image. Stack vertically: accordion first
 * (the actual program info), images below as a visual reinforcement.
 */
@media (max-width: 749px) {
  .amp2 { padding: 20px 0; }
  .amp2__wrapper { gap: 22px; }
  .amp2__heading {
    font-size: 26px;
    line-height: 1.15;
  }
  .amp2__layout {
    flex-direction: column;
    gap: 22px;
  }
  .amp2__left {
    max-width: 100%;
    gap: 18px;
  }
  .amp2__subtitle {
    font-size: 18px;
    line-height: 1.2;
  }
  .amp2__accordion { gap: 12px; }
  .amp2__item-title { font-size: 16px; }
  .amp2__item-body-inner {
    padding: 0 0 0 44px; /* 32px icon + 12px gap */
  }
  .amp2__item-desc {
    font-size: 14px;
    line-height: 1.45;
  }
  .amp2__right {
    width: 100%;
    /* Was `min-height: 280px` which reserved a large empty area
       between the accordion (above) and the carousel image (below)
       while slides were loading. Let the swiper drive its own
       height based on the loaded slide content - no more empty
       white gap. */
    min-height: 0;
    border-radius: 16px;
  }
  .amp2__swiper {
    min-height: 0;
    /* Force the swiper's natural height to follow its slides
       instead of stretching to 100% of an arbitrarily-tall parent. */
    height: auto;
  }
  .amp2__swiper .swiper-wrapper {
    height: auto;
  }
  .amp2__slide,
  .amp2__slide-img {
    position: relative;
    height: auto;
  }
  .amp2__slide-img {
    width: 100%;
    display: block;
  }
  .amp2__slide-caption {
    bottom: 40px;
    padding: 10px;
    left: 12px;
    right: 12px;
  }
  .amp2__slide-caption-text {
    font-size: 14px;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  .amp2__heading { font-size: 24px; }
  /* Tiny min-height (20px) keeps the carousel from layout-shifting
     when slides are still loading; once images load the swiper grows
     to fit content. */
  .amp2__right, .amp2__swiper { min-height: 20px; }
}
/* END_SECTION:ambassador_program_2 */

/* START_SECTION:ambassador_program_3 (INDEX:11) */
/* Middle content section - 80px between sections (40px each side). */
  .ap3-outer {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .ap3-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
  }

  .ap3-image {
    width: 598px;
    min-width: 598px;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
  }

  .ap3-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex: 1;
  }

  .ap3-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }

  .ap3-heading {
    color: #000;
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 56px;
    word-wrap: break-word;
    margin: 0;
  }

  .ap3-subheading {
    color: #000;
    font-size: 18px;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    margin: 0;
  }

  .ap3-perks-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-self: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ap3-perk-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .ap3-perk-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    object-fit: contain;
  }

  .ap3-perk-text {
    color: #000;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    word-wrap: break-word;
    margin: 0;
    line-height: 1.2em;
  }

  @media screen and (max-width: 1024px) {
    .ap3-inner {
      flex-direction: column;
      align-items: center;
    }

    .ap3-image {
      width: 100%;
      min-width: unset;
      height: auto;
      max-height: 500px;
    }

    .ap3-content {
      width: 100%;
    }

    .ap3-heading {
      font-size: 40px;
      line-height: 44px;
    }
  }

  @media screen and (max-width: 640px) {
    .ap3-outer {
      padding-top: 20px;
      padding-bottom: 20px;
    }

    .ap3-heading {
      font-size: 32px;
      line-height: 36px;
    }

    .ap3-perk-text {
      font-size: 18px;
    }
  }

/* Mobile (≤ 749px) - added by mobile-spacing audit so this section
 * follows the project's standard 20px-vertical mobile rhythm. */
@media (max-width: 749px) {
  .ap3-outer {
    padding: 20px 0;
  }
}
/* END_SECTION:ambassador_program_3 */

/* START_SECTION:ambassador_program_4 (INDEX:12) */
/* ===== AP4: AMBASSADOR PROGRAM 4 ===== */

/* Middle content section - 80px between sections (40px each side). */
.ap4-section {
  padding: 40px 0;
}

/* --- Header --- */
.ap4-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-bottom: 40px;
  text-align: center;
}

.ap4-header__title {
  color: #000;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 56px;
  word-wrap: break-word;
  margin: 0;
}

.ap4-header__subtitle {
  color: #000;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
}

/* --- Main Layout --- */
.ap4-main-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* --- Sidebar --- */
.ap4-sidebar {
  width: 363px;
  flex-shrink: 0;
  background: var(--1, #FFD201);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}

.ap4-sidebar__image-block {
  position: relative;
  height: 419px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.ap4-sidebar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ap4-sidebar__overlay {
  position: absolute;
  inset: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ap4-sidebar__why-title {
  color: #fff;
  font-size: 30px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 39px;
  word-wrap: break-word;
  margin: 0;
}

.ap4-sidebar__bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: disc;
  padding-left: 18px;
  margin: 0;
  width: 317px;
}

.ap4-sidebar__bullet {
  color: #fff;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
}

.ap4-sidebar__body {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ap4-sidebar__how-title {
  color: var(--black, #212121);
  font-size: 30px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 39px;
  word-wrap: break-word;
  margin: 0 0 20px;
}

.ap4-sidebar__how-text {
  color: var(--black, #212121);
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  word-wrap: break-word;
  margin: 0;
}

.ap4-sidebar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 12px;
  outline: 2px solid var(--black, #212121);
  outline-offset: -2px;
  text-decoration: none;
  color: var(--black, #212121);
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  word-wrap: break-word;
  background: transparent;
  line-height: 1em
}

.ap4-sidebar__btn-icon {
  width: 30px;
  height: 30px;
  background: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ap4-sidebar__btn-icon svg {
  width: 16px;
  height: 16px;
}

/* --- Connector --- */
.ap4-connector {
    width: 3px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    background: linear-gradient(0deg, #d70000, #ffd201);
    border-radius: 1000px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: calc(100% - (350px / 2));
}


.ap4-levels-grid-wrap {
    flex: 1;
    position: relative
}

/* --- Levels Grid --- */
.ap4-levels-grid {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 40px;
}

.ap4-levels-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ap4-levels-col--left,
.ap4-levels-col--right {
  display:flex !important;
  position: relative;
}

/* --- Level Card --- */
.ap4-level-card {
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  outline: 3px solid var(--1, #FFD201);
  outline-offset: -3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  min-height: 350px;
}

.ap4-level-card--signed {
  /* Match the Level 1-3 cards (white bg + 3px outline) but in red instead
     of yellow, so the Signed Athlete tier reads as part of the same set. */
  background: #fff;
  outline: 3px solid #D70000;
  outline-offset: -3px;
}

.ap4-level-card__label {
  display: inline-block;
  padding: 0px 10px;
  border-bottom: 2px solid #ffd201;
  color: #ffd201;
  font-size: 16px;s
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
}

.ap4-level-card--signed .ap4-level-card__label {
  border-bottom-color: #D70000;
  color: #D70000;
}

.ap4-level-card__name {
  color: #000;
  font-size: 30px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 1em;
  word-wrap: break-word;
  margin: 0;
  align-self: stretch;
      margin-top: -15px;
    margin-bottom: 5px;
}

.ap4-level-card__badge {
  align-self: stretch;
  padding: 12px;
  border-radius: 4px;
  outline: 1px solid #D70000;
  outline-offset: -1px;
  text-align: center;
  color: #000;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  word-wrap: break-word;
  text-transform: uppercase;
  line-height: 1em;
}

.ap4-level-card--signed .ap4-level-card__badge {
  background: #D70000;
  color: #fff;
  outline: none;
  font-size: 18px;
}

/* Red check circles for the Signed Athlete card (base card uses yellow). */
.ap4-level-card--signed .ap4-level-card__perk-icon {
  background: #D70000;
}
/* White ticks on the red circles (markup hardcodes stroke="#212121"; a CSS
   stroke beats the presentation attribute). */
.ap4-level-card--signed .ap4-level-card__perk-icon svg {
  stroke: #fff;
}

.ap4-level-card__perks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ap4-level-card__perk {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--black, #212121);
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
  line-height: 1.1em
}

.ap4-level-card__perk-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: var(--1, #FFD201);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ap4-level-card__perk-icon svg {
  width: 12px;
  height: 12px;
}

.circle_pointer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 27px;
    height: 27px;
    display: flex !important;
    border-radius: 9999px;
    background: linear-gradient(0deg, #d70000, #ffd201);
    z-index: 1;
}

.circle_pointer.circle_pointer1, .circle_pointer.circle_pointer3 {
    left: -33px;
}

.circle_pointer.circle_pointer2, .circle_pointer.circle_pointer4 {
    right: -33px;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 363px-wide yellow sidebar on the left + 2-column
 * tier-card grid on the right with a vertical connector spine
 * between them. None of that layout makes sense at phone widths.
 * Stack everything single-column, hide the connector + pointer dots
 * (decorative artifacts of the desktop spine), shrink imagery.
 */
@media (max-width: 749px) {
  .ap4-section { padding: 20px 0; }
  .ap4-header {
    margin-bottom: 22px;
    gap: 10px;
  }
  .ap4-header__title {
    font-size: 26px;
    line-height: 1.15;
  }
  .ap4-header__subtitle { font-size: 14px; }
  .ap4-main-content {
    flex-direction: column;
    gap: 0;
  }
  .ap4-sidebar {
    width: 100%;
  }
  /* On phones the "Why" overlay content (title + 5 bullets) is taller
   * than a fixed image height, so absolutely-positioned overlay text
   * spilled out and collided with the "How It Works" body below.
   * Let the image-block grow to its content: image becomes a layer
   * behind a now-static overlay that occupies real layout space. */
  .ap4-sidebar__image-block {
    height: auto;
    min-height: 280px;
    /* Dark bg sits BEHIND the 0.2-opacity image so the parent yellow
     * `.ap4-sidebar` background doesn't bleed through when the image
     * is dimmed. Without this the "Why This Program" block read
     * yellow-on-yellow (text washed out). */
    background-color: #212121;
  }
  .ap4-sidebar__img {
    position: absolute;
    inset: 0;
    /* Dim the background image so the "Why This Program Is Different"
     * heading + bullet text reads cleanly on top. Combined with the
     * dark bg above, the result is a deep tinted portrait - text
     * stays white, image is recognisable, no yellow bleed-through. */
    opacity: 0.2;
  }
  .ap4-sidebar__overlay {
    position: static;
    padding: 16px;
    min-height: 280px;
  }
  .ap4-sidebar__why-title,
  .ap4-sidebar__how-title {
    font-size: 18px;
    line-height: 1.15;
  }
  .ap4-sidebar__bullets {
    width: 100%;
    gap: 8px;
  }
  .ap4-sidebar__bullet { font-size: 12px; }
  .ap4-sidebar__how-text { font-size: 14px; }
  .ap4-sidebar__btn {
    font-size: 14px;
    padding: 12px 16px;
    min-height: 48px;
  }
  /* Hide the central spine + side dots - they were the visual link
   * between the sidebar and the cards row on desktop. Stacked layout
   * doesn't have that geometric relationship. */
  .ap4-connector,
  .circle_pointer {
    display: none !important;
  }
  /* Mobile stacks the columns vertically, so the visible gap between
     any two adjacent cards is either the grid gap (between cards from
     different columns) OR the col gap (between cards in the same col).
     Setting both to 24px so every adjacent pair gets identical
     breathing room - no card ever looks "touching" its neighbour. */
  .ap4-levels-grid {
    flex-direction: column;
    gap: 0;
    margin-top: 20px;
  }
  .ap4-levels-col {
    gap: 24px;
  }
  .ap4-level-card {
    min-height: 0;
    padding: 16px;
    gap: 10px;
  }
  .ap4-level-card__name {
    font-size: 18px;
    margin-top: -10px;
  }
  .ap4-level-card__badge { font-size: 12px; }
  .ap4-level-card--signed .ap4-level-card__badge { font-size: 14px; }
  .ap4-level-card__perks { gap: 10px; }
  .ap4-level-card__perk { font-size: 12px; }
}

@media (max-width: 480px) {
  .ap4-header__title { font-size: 24px; }
  .ap4-sidebar__image-block { height: 220px; }
}
/* END_SECTION:ambassador_program_4 */

/* START_SECTION:ambassador_program_5 (INDEX:13) */
/* Middle content section - 80px between sections (40px each side). */
.ap5-section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.ap5-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.ap5-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ap5-heading {
  color: #212121;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 56px;
  max-width: 400px;
  margin: 0;
}

.ap5-payment-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  max-width: 410px;
}

.ap5-payment-icons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ap5-payment-icon-wrap {
  width: 65px;
  height: 65px;
  padding: 8px;
  background: white;
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ap5-payment-icon-wrap img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.ap5-payment-note {
  color: #000;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  text-align: right;
  margin: 0;
}

.ap5-cards {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.ap5-card {
  flex: 1;
  padding: 20px;
  background: white;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ap5-card-icon-wrap {
  width: 46px;
  height: 46px;
  padding: 8px 3px;
  background: #D70000;
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.ap5-card-icon-wrap img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.ap5-card-text {
  color: #212121;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.4;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop: heading on left + payment-icons cluster on right (space-
 * between row), then a 4-column feature card row below. On mobile
 * the right cluster squeezes the heading and the 4 cards are too
 * narrow. Stack the header vertically and turn the cards into a
 * 2-col grid (or 1-col on tiny phones).
 */
@media (max-width: 749px) {
  .ap5-section {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .ap5-container { gap: 24px; }
  .ap5-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .ap5-heading {
    font-size: 26px;
    line-height: 1.15;
    max-width: 100%;
  }
  .ap5-payment-info {
    align-items: flex-start;
    max-width: 100%;
    gap: 10px;
  }
  .ap5-payment-icons { gap: 12px; }
  .ap5-payment-icon-wrap {
    width: 52px;
    height: 52px;
    padding: 6px;
  }
  .ap5-payment-icon-wrap img {
    width: 32px;
    height: 32px;
  }
  .ap5-payment-note {
    text-align: left;
    font-size: 12px;
  }
  .ap5-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .ap5-card {
    padding: 14px;
    gap: 10px;
  }
  .ap5-card-icon-wrap {
    width: 38px;
    height: 38px;
    padding: 6px;
  }
  .ap5-card-icon-wrap img {
    width: 24px;
    height: 24px;
  }
  .ap5-card-text {
    font-size: 12px;
    line-height: 1.35;
  }
}

@media (max-width: 380px) {
  .ap5-cards { grid-template-columns: 1fr; }
  .ap5-heading { font-size: 24px; }
}
/* END_SECTION:ambassador_program_5 */

/* START_SECTION:ambassador_program_6 (INDEX:14) */
/* Middle content section - 80px between sections (40px each side).
 * Was an inline padding from theme settings; moved to CSS for a
 * consistent page rhythm. */
.ap6-section {
  padding: 40px 0;
}
.ap6-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ap6-heading {
  color: #000;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 56px;
  word-wrap: break-word;
  margin: 0;
}

/* Banner */
.ap6-banner {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 340px;
  background-color: #F0F0F0;
  background-size: cover;
  background-position: center;
}

.ap6-banner-overlay-card {
  position: absolute;
  left: 38px;
  top: 63px;
  width: 550px;
  max-width: calc(100% - 76px);
  padding: 35px 30px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ap6-banner-card-title {
  color: #fff;
  font-size: 30px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 39px;
  word-wrap: break-word;
  margin: 0;
}

.ap6-banner-card-text {
  color: #fff;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
}

/* Audience Section */
.ap6-audience-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.ap6-audience-subtitle {
  color: #000;
  font-size: 30px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 39px;
  word-wrap: break-word;
  margin: 0;
}

/* White cards box */
.ap6-cards-container {
  width: 100%;
  padding: 20px 20px 40px;
  background: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
}

.ap6-cards-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 17px;
  width: 100%;
}

/* Individual card */
.ap6-card {
  width: 415px;
  padding: 20px;
  background: #f0f0f0;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ap6-card-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  border-radius: 8.33px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ap6-card-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.ap6-card-label {
  text-align: center;
  color: #000;
  font-size: 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
  line-height: 1.1em;
}

/* CTA row */
.ap6-cta-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.ap6-tagline {
  color: #212121;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
  text-align: center;
}

.ap6-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 43px;
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 4px;
  color: #fff;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.ap6-cta-btn:hover {
  color: #fff;
  text-decoration: none;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop padding 100px top+bottom, banner overlay card 550px wide
 * floating left, audience cards 415px each in a wrapped row, CTA at
 * bottom. On mobile the banner overlay overflows + 415px cards force
 * horizontal scroll. Stack everything, shrink card widths.
 */
@media (max-width: 749px) {
  .ap6-section {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .ap6-wrapper { gap: 22px; }
  .ap6-heading {
    font-size: 26px;
    line-height: 1.15;
  }
  .ap6-banner {
    min-height: 280px;
    border-radius: 16px;
  }
  .ap6-banner-overlay-card {
    left: 16px;
    top: 16px;
    right: 16px;
    width: auto;
    max-width: calc(100% - 32px);
    padding: 18px;
    gap: 10px;
  }
  .ap6-banner-card-title {
    font-size: 18px;
    line-height: 1.15;
  }
  .ap6-banner-card-text { font-size: 14px; }
  .ap6-audience-section { gap: 14px; }
  .ap6-audience-subtitle {
    font-size: 18px;
    line-height: 1.15;
    text-align: center;
  }
  .ap6-cards-container {
    padding: 16px 14px 24px;
    gap: 14px;
    border-radius: 16px;
  }
  .ap6-cards-grid { gap: 10px; }
  .ap6-card {
    width: 100%;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 14px;
    gap: 12px;
  }
  .ap6-card-icon {
    width: 40px;
    height: 40px;
  }
  .ap6-card-icon img {
    width: 24px;
    height: 24px;
  }
  .ap6-card-label {
    font-size: 14px;
    text-align: left;
  }
  .ap6-tagline { font-size: 14px; }
  .ap6-cta-btn {
    align-self: stretch;
    height: auto;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 14px;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .ap6-heading { font-size: 24px; }
  .ap6-banner-card-title { font-size: 20px; }
}
/* END_SECTION:ambassador_program_6 */

/* START_SECTION:best-sellers-top-n (INDEX:19) */
/* Only content section on the best-sellers pages → first AND last
   * → 80px top and bottom. Was a viewport-relative clamp(). */
  .bsn { padding: 80px 0; font-family: 'Montserrat', sans-serif; }

  .bsn__title {
    margin: 0 0 6px;
    font-family: 'Racing Sans One', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(24px, 4vw, 44px);
    line-height: 1.05;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #212121;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .bsn__sub { margin: 0 0 20px; font-size: 14px; color: #333; }

  .bsn__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .bsn__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(15, 22, 41, 0.05);
  }
  .bsn__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 22, 41, 0.10);
  }

  .bsn__rank {
    position: absolute;
    top: 10px; left: 10px; z-index: 3;
    background: #FFD201;
    color: #212121;
    font-weight: 800;
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 9999px;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    pointer-events: none;
  }

  .bsn__media-link { display: block; text-decoration: none; }
  .bsn__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
  }
  .bsn__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .bsn__noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: #888; font-size: 12px; }

  .bsn__sale {
    position: absolute;
    bottom: 10px; left: 10px;
    background: linear-gradient(90deg, #ffd201 0%, #d70000 100%);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 14px;
    border-radius: 9999px;
    letter-spacing: 0.3px;
  }
  .bsn__sold {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(15, 22, 41, 0.85);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 4px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }

  .bsn__body { flex: 1; padding: 0 4px 12px; }
  .bsn__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #212121;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    margin-bottom: 4px;
    min-height: 39px;
  }
  .bsn__name:hover { text-decoration: underline; }
  .bsn__vendor {
    font-size: 11px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .bsn__price {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
  }
  .bsn__price-now { color: #d43131; }
  .bsn__price-was {
    color: #888;
    text-decoration: line-through;
    font-size: 13px;
    font-weight: 500;
  }

  /* Button - orange→red gradient. Override Dawn's quick-add button defaults
     (theme loads quick-add.css which targets `.quick-add__submit`, so use
     the bsn class to win specificity-wise - both have one class so the
     later-loaded inline stylesheet wins). */
  .bsn__form { margin: 0; }
  .bsn__btn,
  .bsn .quick-add__submit.bsn__btn {
    display: block;
    width: 100%;
    background: linear-gradient(90deg, #ffd201 0%, #d70000 100%);
    color: #fff;
    border: 0;
    padding: 12px 14px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
    position: relative;
    box-shadow: none;
  }
  .bsn__btn:hover { filter: brightness(1.05); }
  .bsn__btn:active { transform: translateY(1px); }
  .bsn__btn--disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

  .bsn__shopall { text-align: center; margin-top: 28px; }
  .bsn__shopall-link {
    display: inline-block;
    color: #212121;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 2px solid #FFD201;
    padding: 4px 2px;
  }
  .bsn__shopall-link:hover { color: #333; }

  .bsn__empty {
    padding: 40px;
    text-align: center;
    color: #333;
    background: #f6f6f8;
    border-radius: 8px;
    font-size: 14px;
  }

  /* Reflow */
  @media (max-width: 990px) {
    .bsn__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  }
  @media (max-width: 749px) {
    .bsn { padding: 40px 0; }
    .bsn__title { font-size: clamp(22px, 6vw, 30px); line-height: 1.1; }
    .bsn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .bsn__card { padding: 10px; }
    .bsn__name { font-size: 14px; }
    .bsn__price { font-size: 12px; }
    .bsn__btn { padding: 12px 14px; font-size: 12px; min-height: 44px; }
    .bsn__rank { font-size: 12px; padding: 2px 8px; top: 8px; left: 8px; }
    .bsn__sale { font-size: 12px; padding: 3px 10px; bottom: 8px; left: 8px; }
  }
  /* Small phones - keep a 2-up grid. Collapsing to a single column
     made each card fill the viewport: a full-width 1:1 product image
     plus padding ran roughly one screen per card. Two compact columns
     keep the cards a sensible height. */
  @media (max-width: 480px) {
    .bsn__title { font-size: 22px; }
    .bsn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .bsn__card { padding: 8px; }
    .bsn__media { margin-bottom: 8px; }
    .bsn__body { padding: 0 2px 8px; }
    .bsn__name { font-size: 13px; min-height: 34px; }
    .bsn__vendor { font-size: 10px; margin-bottom: 6px; }
    .bsn__price { font-size: 12px; }
    .bsn__btn { padding: 12px 10px; font-size: 12px; min-height: 44px; }
    .bsn__rank { font-size: 11px; padding: 2px 7px; }
  }
/* END_SECTION:best-sellers-top-n */

/* START_SECTION:campus-application (INDEX:21) */
/* ── Modern Campus Application - mirrors ambassador-application ── */
  /* Only content section on the page → first AND last → 80px top
   * and bottom. */
  .campus-apply {
    padding: 80px 0;
    font-family: 'Montserrat', sans-serif;
    color: #212121;
    max-width: 760px;
    margin: 0 auto;
  }
  .campus-apply__header {
    text-align: left;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #ddd;
    position: relative;
  }
  .campus-apply__header::after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 80px; height: 3px;
    background: linear-gradient(90deg, #FFD201, #D70000);
    border-radius: 2px;
  }
  .campus-apply__title {
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: 0.01em;
    margin: 0 0 10px 0;
    color: #212121;
  }
  .campus-apply__subtitle {
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    max-width: 640px;
  }

  /* State card (pending / approved / rejected) */
  .campus-apply__state {
    background: linear-gradient(135deg, #fffbeb 0%, #fff5f5 100%);
    border: 1px solid #f1dd7a;
    border-left: 4px solid #FFD201;
    border-radius: 12px;
    padding: 24px 26px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(15,20,33,0.04);
  }
  .campus-apply__state-msg {
    margin: 0 0 12px 0;
    font-size: 15px;
    line-height: 1.55;
    color: #212121;
    font-weight: 500;
  }
  .campus-apply__state-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #FFD201, #D70000);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .campus-apply__state-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(215,0,0,0.25);
  }
  .campus-apply__state-cta::after { content: '→'; font-size: 16px; }

  /* Form layout */
  .campus-apply__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .campus-apply__group {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 24px 26px 18px;
    box-shadow: 0 1px 2px rgba(15,20,33,0.04);
    transition: box-shadow 0.18s;
  }
  .campus-apply__group:hover { box-shadow: 0 4px 14px rgba(15,20,33,0.06); }
  .campus-apply__group legend {
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    padding: 0 12px;
    font-size: 18px;
    color: #212121;
    letter-spacing: 0.02em;
    background: #fff;
    border-radius: 4px;
  }

  /* Fields */
  .campus-apply__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 16px 0;
  }
  .campus-apply__field label {
    font-size: 13px;
    font-weight: 600;
    color: #212121;
  }
  .campus-apply__field input,
  .campus-apply__field select,
  .campus-apply__field textarea {
    padding: 11px 14px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    color: #212121;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
  }
  .campus-apply__field input:focus,
  .campus-apply__field select:focus,
  .campus-apply__field textarea:focus {
    outline: none;
    border-color: #FFD201;
    box-shadow: 0 0 0 3px rgba(255,210,1,0.18);
  }
  .campus-apply__field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #333 50%), linear-gradient(135deg, #333 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
    cursor: pointer;
  }
  .campus-apply__field textarea { resize: vertical; min-height: 110px; }
  .campus-apply__field small {
    font-size: 12px;
    color: #333;
    line-height: 1.5;
  }
  #ca-preferredCode {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 15px;
  }

  /* Fitness focus chips */
  .campus-apply__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
  }
  .campus-apply__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    user-select: none;
  }
  /* Chip-style checks inside fitness focus */
  .campus-apply__field .campus-apply__checks .campus-apply__check {
    padding: 8px 16px;
    border: 1.5px solid #ddd;
    border-radius: 9999px;
    background: #fff;
    transition: all 0.15s;
  }
  .campus-apply__field .campus-apply__checks .campus-apply__check:hover {
    border-color: #FFD201;
    background: #fffbeb;
  }
  .campus-apply__field .campus-apply__checks .campus-apply__check input { display: none; }
  .campus-apply__field .campus-apply__checks .campus-apply__check:has(input:checked) {
    background: linear-gradient(90deg, #FFD201, #D70000);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
  }

  /* Agreements (large checkbox style) */
  .campus-apply__group:last-of-type .campus-apply__check {
    padding: 10px 0;
    font-size: 14px;
    align-items: flex-start;
  }
  .campus-apply__group:last-of-type .campus-apply__check input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: #D70000;
    margin-top: 2px;
    flex-shrink: 0;
  }

  /* Submit */
  .campus-apply__submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #fff;
    padding: 14px 32px;
    border: 0;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    cursor: pointer;
    width: fit-content;
    margin-top: 8px;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  }
  .campus-apply__submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(215,0,0,0.25);
  }
  .campus-apply__submit::after { content: '→'; font-size: 18px; }
  .campus-apply__submit:disabled { opacity: 0.55; cursor: not-allowed; }

  .campus-apply__status {
    min-height: 22px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
  }
  .campus-apply__status--error {
    color: #8a1c1c;
    background: #fde8e6;
    border-left: 3px solid #d70000;
    padding: 10px 14px;
    border-radius: 8px;
  }

  /* Loading skeleton */
  .campus-apply__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 60px 20px;
    color: #333;
    font-size: 14px;
  }
  .campus-apply__spinner {
    width: 36px; height: 36px;
    border: 3px solid #f1f5f9;
    border-top-color: #FFD201;
    border-right-color: #D70000;
    border-radius: 50%;
    animation: campusSpin 0.9s linear infinite;
  }
  @keyframes campusSpin { to { transform: rotate(360deg); } }

  /* Logged-out gate */
  .campus-apply__gate {
    background: linear-gradient(135deg, #fffbeb 0%, #fff5f5 100%);
    border: 1px solid #f1dd7a;
    border-radius: 16px;
    padding: 48px 32px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(15,20,33,0.06);
  }
  .campus-apply__gate-icon { font-size: 56px; margin-bottom: 12px; }
  .campus-apply__gate-title {
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    font-size: 32px;
    margin: 0 0 12px;
    color: #212121;
  }
  .campus-apply__gate-text {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    max-width: 480px;
    margin: 0 auto 24px;
  }
  .campus-apply__gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
  }
  .campus-apply__gate-link {
    color: #212121;
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .campus-apply__gate-link:hover { color: #D70000; }

  @media (max-width: 600px) {
    .campus-apply__title { font-size: 34px; }
    .campus-apply__group { padding: 20px 18px 14px; }
    .campus-apply__gate { padding: 36px 22px; }
    .campus-apply__gate-title { font-size: 26px; }
  }

/* Mobile (≤ 749px) - added by mobile-spacing audit so this section
 * follows the project's standard 20px-vertical mobile rhythm. */
@media (max-width: 749px) {
  .campus-apply {
    padding: 20px 0;
  }
}
/* END_SECTION:campus-application */

/* START_SECTION:campus-leaderboard-1 (INDEX:22) */
.campus-leaderboard {
    padding: 80px 0 60px;
    font-family: 'Montserrat', sans-serif;
  }

  .lb-title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #212121;
    margin: 0 0 8px;
  }

  .lb-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 32px;
  }

  .my-rank-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
  }

  .rank-pill {
    background: #FFD201;
    border-radius: 12px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
  }

  .rank-value {
    font-weight: 500;
  }

  .lb-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #D0D0D0;
  }

  .lb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
  }

  .lb-table thead tr {
    background: #212121;
    color: #FFD201;
    text-align: left;
  }

  .lb-table th,
  .lb-table td {
    padding: 14px 20px;
  }

  .lb-table tbody tr {
    border-bottom: 1px solid #EFEFEF;
    transition: background 0.15s;
  }

  .lb-table tbody tr:hover {
    background: #FFFBE6;
  }

  .lb-table tbody tr.lb-top3 {
    background: #FFF9D6;
    font-weight: 700;
  }

  .lb-table tbody tr.lb-me {
    background: #FFF0F0;
    font-weight: 700;
  }

  .lb-rank {
    font-size: 18px;
    font-weight: 700;
    color: #D70000;
  }

  .lb-loading-row td,
  .lb-empty {
    text-align: center;
    color: #888;
    padding: 32px;
  }

  .lb-updated-at {
    margin-top: 12px;
    font-size: 12px;
    color: #888;
    text-align: right;
  }

  @media (max-width: 749px) {
    .lb-title { font-size: 32px; }
  }
/* END_SECTION:campus-leaderboard-1 */

/* START_SECTION:campus-state-button (INDEX:23) */
.campus-state-btn { padding: 20px 0; font-family: 'Montserrat', sans-serif; }
  .campus-state-btn__a {
    display: inline-block; background: #FFD201; color: black; padding: 14px 24px; border-radius: 8px;
    font-weight: 700; text-decoration: none; font-size: 16px;
  }
  .campus-state-btn__a:hover { background: #e6bd00; color: black; }
  .campus-state-btn__a--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
  .campus-state-btn__hint { margin: 8px 0 0 0; font-size: 13px; color: #4a4a4a; }

  @media (max-width: 749px) {
    .campus-state-btn__a {
      display: block;
      width: 100%;
      text-align: center;
      padding: 14px 18px;
      min-height: 48px;
      font-size: 14px;
    }
  }
/* END_SECTION:campus-state-button */

/* START_SECTION:cart-modal-prototype (INDEX:28) */
/* ───────────────────────────────────────────────────────────
   * Cart Modal Prototype - preview-only styles
   * All class names are prefixed `.cmp-` so they don't collide
   * with the real cart classes (`.ssa-drawer__*`, `.ssa-vault2__*`,
   * etc.). When approved, the CSS gets ported to the real
   * cart-drawer.liquid with classes remapped.
   * ─────────────────────────────────────────────────────────── */

  .cmp-stage {
    background: rgba(0, 0, 0, 0.55);
    padding: 40px;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    color: #212121;
  }

  .cmp-modal {
    width: 100%;
    max-width: 1400px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
  }

  /* ── HEADER ───────────────────────────────────────────────── */
  .cmp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid #ececec;
  }
  .cmp-header__title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .cmp-header__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    background: #212121;
    color: #FFD201;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 800;
    border-radius: 999px;
  }
  .cmp-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
  .cmp-header__clear {
    background: none;
    border: 0;
    color: #888;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
  }
  .cmp-header__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #ececec;
    background: #fff;
    color: #212121;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* ── BODY - 2-col grid ───────────────────────────────────── */
  .cmp-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 24px;
    background: #f5f5f5;
    min-height: 600px;
  }
  .cmp-col { min-width: 0; display: flex; flex-direction: column; gap: 20px; }

  /* ── LEFT COL - Smart Pick carousel ───────────────────────── */
  .cmp-smart {
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px;
  }
  .cmp-smart__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }
  .cmp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
  }
  .cmp-eyebrow--green { color: #1f7a3a; }
  .cmp-eyebrow--red { color: #D70000; }
  .cmp-eyebrow__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(0, 128, 0, 0.18);
  }
  .cmp-eyebrow--red .cmp-eyebrow__dot { box-shadow: 0 0 0 3px rgba(215, 0, 0, 0.18); }

  .cmp-smart__title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 22px;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .cmp-smart__nav { display: inline-flex; gap: 6px; flex-shrink: 0; }
  .cmp-smart__nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ececec;
    background: #fff;
    color: #888;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .cmp-smart__scroll {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  .cmp-smart__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 10px;
    min-width: 0;
  }
  .cmp-smart__media {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #f4f4f4, #e8e8e8);
    border-radius: 8px;
    margin-bottom: 8px;
  }
  .cmp-smart__vendor {
    font-size: 9px;
    color: #999;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    margin-bottom: 4px;
  }
  .cmp-smart__name {
    font-size: 12px;
    font-weight: 800;
    margin: 0 0 6px;
    line-height: 1.2;
    color: #212121;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .cmp-smart__price {
    font-size: 13px;
    font-weight: 900;
    color: #212121;
    margin-bottom: 8px;
  }
  .cmp-smart__btn {
    margin-top: auto;
    border: 1px solid #212121;
    background: #fff;
    color: #212121;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
  }

  /* ── LEFT COL - Make It A Stack inline rows ───────────────── */
  .cmp-stack {
    background: linear-gradient(135deg, rgba(255, 210, 1, 0.08), rgba(215, 0, 0, 0.06));
    border: 1px solid rgba(215, 0, 0, 0.20);
    border-radius: 12px;
    padding: 18px 20px;
  }
  .cmp-stack__head { margin-bottom: 14px; }
  .cmp-stack__title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 22px;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .cmp-stack__list { display: flex; flex-direction: column; gap: 10px; }
  .cmp-stack__row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  .cmp-stack__media {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f4f4f4, #e8e8e8);
  }
  .cmp-stack__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .cmp-stack__vendor {
    font-size: 9px;
    color: #999;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.06em;
  }
  .cmp-stack__name { font-size: 14px; font-weight: 800; margin: 0 0 4px; line-height: 1.2; color: #212121; }
  .cmp-stack__price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .cmp-stack__price { font-size: 14px; font-weight: 900; color: #D70000; }
  .cmp-stack__cur { font-size: 10px; font-weight: 700; color: #D70000; }
  .cmp-stack__compare { font-size: 11px; color: #999; text-decoration: line-through; }
  .cmp-stack__save {
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: #1f7a3a;
    padding: 2px 6px;
    border-radius: 4px;
  }
  .cmp-stack__btn {
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    cursor: pointer;
    white-space: nowrap;
  }

  /* ── RIGHT COL - Cart line item ──────────────────────────── */
  .cmp-line {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cmp-line__top { display: flex; gap: 12px; align-items: flex-start; }
  .cmp-line__media {
    width: 84px;
    height: 84px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f4f4f4, #e8e8e8);
    flex-shrink: 0;
  }
  .cmp-line__details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .cmp-line__row-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
  .cmp-line__name { font-size: 16px; font-weight: 800; color: #212121; text-decoration: none; flex: 1; line-height: 1.25; }
  .cmp-line__price { font-size: 16px; font-weight: 800; color: #212121; white-space: nowrap; }
  .cmp-line__cur { font-size: 12px; font-weight: 500; color: #888; font-style: italic; margin-left: 3px; }
  .cmp-line__unit { font-size: 12px; color: #888; }
  .cmp-line__options { margin: 4px 0 0; font-size: 12px; color: #555; }
  .cmp-line__options span:not(:last-child)::after { content: '•'; color: #bbb; margin: 0 8px; font-weight: 700; }
  .cmp-line__options strong { color: #212121; font-weight: 800; }
  .cmp-line__plan-chip {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 10px;
    background: rgba(31, 122, 58, 0.10);
    color: #1f7a3a;
    font-size: 10px;
    font-weight: 800;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: flex-start;
  }

  /* Toggle (one-time / subscribe) - uses the same hand-built look as real cart */
  .cmp-line__toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cmp-line__opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    cursor: pointer;
    border: 1.5px solid #e5e5e5;
    background: #fff;
    transition: transform 0.18s ease;
  }
  .cmp-line__opt:hover { transform: translateY(-2px); }
  .cmp-line__opt input { flex-shrink: 0; width: 16px; height: 16px; accent-color: #D70000; cursor: pointer; }
  .cmp-line__opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; overflow: hidden; }
  .cmp-line__opt-title { font-size: 15px; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
  .cmp-line__opt-price { font-size: 15px; font-weight: 700; }
  .cmp-line__opt-cur { font-style: italic; font-weight: 500; color: #888; font-size: 12px; }
  .cmp-line__opt-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 500;
  }
  .cmp-line__opt--onetime input:checked ~ * { color: #212121; }
  .cmp-line__opt--onetime:has(input:checked) { border-color: #212121; }
  .cmp-line__opt--save {
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-color: transparent;
  }
  .cmp-line__opt--save .cmp-line__opt-title { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
  .cmp-line__opt--save .cmp-line__opt-price { color: #fff; }
  .cmp-line__opt--save .cmp-line__opt-cur { color: rgba(255, 255, 255, 0.85); }
  .cmp-line__opt--save .cmp-line__opt-note { color: #fff; }
  .cmp-line__opt--save:has(input:checked) {
    border: 2px solid transparent;
    background:
      linear-gradient(90deg, #FFD201 0%, #D70000 100%) padding-box,
      linear-gradient(135deg, #FFC000 0%, #ff6a00 50%, #8B0000 100%) border-box;
  }
  .cmp-line__opt--save input[type=radio] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    position: relative;
  }
  .cmp-line__opt--save input[type=radio]:checked { background: #fff; }
  .cmp-line__opt--save input[type=radio]:checked::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #D70000;
  }
  .cmp-line__save-badge {
    position: absolute;
    top: -10px; right: 14px;
    background: #fff;
    color: #D70000;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  }
  .cmp-line__arrow { font-size: 20px; color: #fff; font-weight: 700; margin-left: auto; flex-shrink: 0; }

  .cmp-line__cadence {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fff;
  }
  .cmp-line__cadence-label { font-size: 11px; font-weight: 800; color: #888; text-transform: uppercase; letter-spacing: 0.06em; }
  .cmp-line__cadence-value { font-size: 13px; font-weight: 600; color: #212121; flex: 1; }

  .cmp-line__qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
  }
  .cmp-line__stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    overflow: hidden;
  }
  .cmp-line__stepper button { width: 36px; height: 36px; background: #fff; border: 0; cursor: pointer; font-size: 16px; font-weight: 700; }
  .cmp-line__stepper span { width: 40px; text-align: center; font-size: 14px; font-weight: 700; }
  .cmp-line__remove {
    background: none;
    border: 0;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  /* ── RIGHT COL - Vault panel (65/35 inside) ──────────────── */
  .cmp-vault {
    display: grid;
    grid-template-columns: 65fr 35fr;
    gap: 16px;
    align-items: start;
  }
  .cmp-vault__left {
    background: #fff;
    border: 1px solid rgba(111, 66, 193, 0.18);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cmp-vault__hd { display: flex; gap: 10px; align-items: flex-start; }
  .cmp-vault__hd-icon { flex-shrink: 0; }
  .cmp-vault__hd-text { flex: 1; min-width: 0; }
  .cmp-vault__hd-title {
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    font-size: 18px;
    margin: 0;
    text-transform: uppercase;
  }
  .cmp-vault__hd-title em { font-style: normal; color: #6f42c1; }
  .cmp-vault__hd-title span { color: #6f42c1; font-size: 13px; }
  .cmp-vault__hd-tag { font-size: 11px; color: #6f42c1; margin: 2px 0 0; font-weight: 700; }
  .cmp-vault__hd-bal { text-align: right; flex-shrink: 0; }
  .cmp-vault__hd-bal-lbl { font-size: 8px; color: #888; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; display: block; }
  .cmp-vault__hd-bal-num { font-family: 'Racing Sans One', sans-serif; font-size: 26px; color: #6f42c1; line-height: 1; }
  .cmp-vault__hd-bal-num span { font-size: 10px; color: #6f42c1; margin-left: 2px; }

  .cmp-vault__next {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: stretch;
    background: linear-gradient(120deg, rgba(255, 240, 160, 0.4), rgba(255, 210, 1, 0.15));
    border: 1px solid rgba(255, 175, 0, 0.30);
    border-radius: 10px;
    padding: 10px;
  }
  .cmp-vault__ticket {
    background: linear-gradient(135deg, #ff8000, #D70000);
    color: #fff;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 50px;
  }
  .cmp-vault__ticket strong { font-size: 20px; font-weight: 900; line-height: 1; }
  .cmp-vault__ticket span { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; }
  .cmp-vault__next-body { min-width: 0; }
  .cmp-vault__next-badge { font-size: 9px; font-weight: 900; color: #D70000; text-transform: uppercase; letter-spacing: 0.06em; }
  .cmp-vault__next-title { font-size: 16px; font-weight: 900; margin: 2px 0; }
  .cmp-vault__next-sub { font-size: 11px; color: #555; margin: 0 0 6px; }
  .cmp-vault__next-track { height: 6px; background: rgba(215, 0, 0, 0.12); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
  .cmp-vault__next-fill { display: block; height: 100%; background: linear-gradient(90deg, #FFD201, #D70000); border-radius: 999px; }
  .cmp-vault__next-nudge { font-size: 10px; color: #D70000; font-weight: 700; margin: 0; }
  .cmp-vault__next-side { text-align: center; padding: 0 6px; display: flex; flex-direction: column; justify-content: center; min-width: 60px; }
  .cmp-vault__next-pts { font-family: 'Racing Sans One', sans-serif; font-size: 22px; color: #D70000; line-height: 1; }
  .cmp-vault__next-pts span { font-size: 9px; color: #D70000; }
  .cmp-vault__next-pts-sub { font-size: 7px; color: #D70000; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

  .cmp-vault__future { display: flex; flex-direction: column; gap: 6px; }
  .cmp-vault__future-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; }
  .cmp-vault__future-ticket {
    background: linear-gradient(135deg, #a77edd, #6f42c1);
    color: #fff;
    border-radius: 5px;
    padding: 3px;
    text-align: center;
    line-height: 1;
  }
  .cmp-vault__future-ticket strong { font-size: 11px; font-weight: 900; display: block; }
  .cmp-vault__future-ticket span { font-size: 6px; font-weight: 800; letter-spacing: 0.06em; }
  .cmp-vault__future-track { height: 4px; background: rgba(111, 66, 193, 0.12); border-radius: 999px; overflow: hidden; }
  .cmp-vault__future-fill { display: block; height: 100%; background: linear-gradient(90deg, #a77edd, #6f42c1); border-radius: 999px; }
  .cmp-vault__future-away { font-size: 9px; font-weight: 700; color: #6f42c1; white-space: nowrap; }

  .cmp-vault__cta {
    background: linear-gradient(120deg, rgba(255, 240, 160, 0.30), rgba(255, 210, 1, 0.12));
    border: 1px solid rgba(255, 175, 0, 0.30);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .cmp-vault__cta-top { display: flex; gap: 8px; align-items: flex-start; }
  .cmp-vault__cta-bolt { font-size: 14px; }
  .cmp-vault__cta-copy strong { font-size: 13px; display: block; }
  .cmp-vault__cta-copy span { font-size: 11px; color: #555; }
  .cmp-vault__cta-pts { display: flex; gap: 8px; align-items: center; }
  .cmp-vault__cta-cart { color: #6f42c1; font-size: 14px; }
  .cmp-vault__cta-pts-info { display: flex; flex-direction: column; }
  .cmp-vault__cta-pts-info strong { font-size: 12px; font-weight: 800; color: #6f42c1; }
  .cmp-vault__cta-pts-info span { font-size: 10px; color: #6f42c1; }
  .cmp-vault__cta-btn {
    background: linear-gradient(90deg, #FFD201, #ff8000, #D70000);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(215, 0, 0, 0.28);
  }

  /* ── Right vault column - YOU'RE SAVING ──────────────────── */
  .cmp-vault__right {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .cmp-saving__title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .cmp-saving__amount { font-family: 'Racing Sans One', sans-serif; font-size: 24px; color: #1f7a3a; font-weight: 400; line-height: 1; }
  .cmp-saving__list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
  .cmp-saving__list li { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #555; }
  .cmp-saving__check {
    width: 14px; height: 14px; border-radius: 50%;
    background: rgba(31, 122, 58, 0.12); color: #1f7a3a;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px;
  }
  .cmp-saving__label { flex: 1; }
  .cmp-saving__amt { font-weight: 800; color: #1f7a3a; }

  /* ── Dispatch + manage subs ──────────────────────────────── */
  .cmp-dispatch {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    font-size: 12px;
    color: #555;
  }
  .cmp-manage-subs {
    display: block;
    text-align: center;
    font-size: 13px;
    color: #555;
    text-decoration: underline;
    padding: 4px 0;
  }

  /* ── Footer - totals + checkout ──────────────────────────── */
  .cmp-footer {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cmp-totals {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid #ececec;
    padding-bottom: 10px;
  }
  .cmp-totals__lbl {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
  }
  .cmp-totals__val { margin: 0; display: inline-flex; align-items: baseline; gap: 6px; }
  .cmp-totals__amt { font-size: 32px; font-weight: 900; color: #212121; line-height: 1; }
  .cmp-totals__cur { font-size: 14px; font-weight: 500; color: #888; font-style: italic; }
  .cmp-tax-note { font-size: 10px; color: #777; margin: 0; }
  .cmp-checkout {
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
  }
  .cmp-pay {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .cmp-pay span {
    padding: 4px 8px;
    border: 1px solid #ececec;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    color: #555;
  }
  .cmp-pay-note { text-align: center; font-size: 11px; color: #555; margin: 0; }
  .cmp-pay-note strong { color: #1f7a3a; }

  /* ── Mobile (≤749px) - single column stack ───────────────── */
  @media (max-width: 749px) {
    .cmp-stage { padding: 0; }
    .cmp-modal { max-width: 100%; border-radius: 0; min-height: 100vh; }
    .cmp-body { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
    .cmp-vault { grid-template-columns: 1fr; }
    .cmp-smart__scroll { grid-template-columns: repeat(2, 1fr); overflow-x: auto; }
  }
/* END_SECTION:cart-modal-prototype */

/* START_SECTION:challenge-leaderboard (INDEX:31) */
.cl { padding: 24px 0; font-family: 'Montserrat', sans-serif; }
  .cl__header { margin-bottom: 14px; }
  .cl__title { margin: 0; font-size: 22px; font-weight: 700; }
  .cl__sub { margin: 4px 0 0; font-size: 14px; color: #333; }
  .cl__table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e1e4ec; border-radius: 8px; overflow: hidden; }
  .cl__table th, .cl__table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef0f5; font-size: 14px; }
  .cl__table th { background: #f6f6f8; color: #333; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
  .cl__rank { width: 48px; font-weight: 700; }
  .cl__metric, .cl__sessions { width: 100px; text-align: right; }
  .cl__status { width: 120px; color: #1fa15e; font-weight: 600; }
  .cl__row--me { background: #fffbea; font-weight: 600; }
  .cl__empty { padding: 40px; text-align: center; color: #333; background: #f6f6f8; border-radius: 8px; }
  .cl__me { margin-top: 12px; padding: 10px 12px; background: #fffbea; border: 1px solid #ffd201; border-radius: 8px; font-size: 13px; }
  .cl__me-label { font-weight: 600; margin-right: 8px; color: #1f2533; }

  @media (max-width: 749px) {
    .cl__title { font-size: 18px; }
    .cl__table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cl__table th, .cl__table td { padding: 8px 10px; font-size: 12px; }
    .cl__rank { width: 40px; }
    .cl__metric, .cl__sessions { width: 70px; }
  }
/* END_SECTION:challenge-leaderboard */

/* START_SECTION:challenge-strava-connect (INDEX:32) */
/* ── Strava Connect Card - recent redesign ─────────────────────────
   * Theme-aware light panel matching the challenge countdown above.
   * Gradient red+yellow hairline border, bigger padding (matches the
   * countdown's vertical rhythm), account row INSIDE the strip on a
   * second flex-wrap row so it inherits the panel chrome and stays
   * readable. */
  .csc {
    padding: 14px 0;
    font-family: 'Montserrat', sans-serif;
  }

  .csc__strip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 28px;
    /* Theme-aware: use Shopify's --color-foreground / --color-background
       CSS vars when available, falls back to brand-safe defaults. */
    background:
      rgb(var(--color-background, 255 255 255));
    border: 2px solid transparent;
    border-radius: 16px;
    font-size: 14px;
    color: rgb(var(--color-foreground, 33 33 33));
    flex-wrap: wrap;
    position: relative;
    background-image:
      linear-gradient(
        rgb(var(--color-background, 255 255 255)),
        rgb(var(--color-background, 255 255 255))
      ),
      linear-gradient(90deg, #ffd201 0%, #fc4c02 50%, #d70000 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    min-height: 84px;
  }

  .csc__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(252, 76, 2, 0.10);
    border: 1px solid rgba(252, 76, 2, 0.25);
    flex-shrink: 0;
  }
  .csc__icon--ok {
    background: rgba(252, 76, 2, 0.10);
    border-color: rgba(252, 76, 2, 0.25);
  }
  .csc__icon svg { width: 22px; height: 22px; }

  .csc__strip-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5;
    font-size: 15px;
    color: rgba(var(--color-foreground, 33 33 33), 0.75);
  }
  .csc__strip-text strong {
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    font-size: 26px;
    color: rgb(var(--color-foreground, 33 33 33));
    letter-spacing: 0.01em;
    margin-right: 6px;
  }

  .csc__hint {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    background: rgba(var(--color-foreground, 33 33 33), 0.08);
    color: rgba(var(--color-foreground, 33 33 33), 0.55);
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    cursor: help;
    vertical-align: middle;
  }
  .csc__hint::before { content: 'i'; font-style: italic; font-weight: 600; }

  .csc__sep {
    color: rgba(var(--color-foreground, 33 33 33), 0.25);
    margin: 0 4px;
  }
  .csc__muted { color: rgba(var(--color-foreground, 33 33 33), 0.55); }

  /* Connect button - Strava-branded gradient, prominent enough that
     un-connected customers can't miss it. This is the single highest
     value action on this surface (no Strava connect → zero progress). */
  .csc__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: linear-gradient(90deg, #fc4c02 0%, #d63f00 100%);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 8px;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, background .15s;
    flex-shrink: 0;
    box-shadow:
      0 8px 18px rgba(252, 76, 2, 0.35),
      inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  }
  .csc__btn:hover {
    transform: translateY(-2px);
    box-shadow:
      0 12px 24px rgba(252, 76, 2, 0.5),
      inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
  }
  .csc__btn:active { transform: translateY(0); }
  /* Pulse hint - draws the eye to the connect button on first paint */
  .csc__strip--disconnected .csc__btn {
    animation: csc-pulse 2.2s ease-in-out infinite;
  }
  @keyframes csc-pulse {
    0%, 100% { box-shadow: 0 8px 18px rgba(252, 76, 2, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.2); }
    50%      { box-shadow: 0 10px 22px rgba(252, 76, 2, 0.6),  inset 0 -1px 0 rgba(0, 0, 0, 0.2); }
  }
  @media (prefers-reduced-motion: reduce) {
    .csc__strip--disconnected .csc__btn { animation: none; }
  }

  /* Progress bar - gold-orange gradient on light strip background.
     Sits flush right of the text on wide screens, wraps to a full-width
     second row on narrow ones. */
  .csc__bar-wrap {
    flex: 0 0 180px;
    height: 10px;
    background: rgba(var(--color-foreground, 33 33 33), 0.08);
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.06);
  }
  .csc__bar {
    height: 100%;
    background: linear-gradient(90deg, #ffd201 0%, #fc4c02 100%);
    border-radius: 9999px;
    transition: width .4s ease;
    box-shadow: 0 0 14px rgba(252, 76, 2, 0.45);
  }

  /* Account binding row - INSIDE the strip on flex-wrap row 2.
     `flex-basis: 100%` forces a full-row break so it always sits below
     the main strip content regardless of leaderboard button width. */
  .csc__account {
    flex: 0 0 100%;
    margin: 8px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--color-foreground, 33 33 33), 0.08);
    font-size: 12.5px;
    color: rgba(var(--color-foreground, 33 33 33), 0.6);
    line-height: 1.5;
    text-align: center;
  }
  .csc__account a {
    color: rgba(var(--color-foreground, 33 33 33), 0.85);
    text-decoration: underline;
    text-decoration-color: rgba(var(--color-foreground, 33 33 33), 0.25);
    transition: color .12s;
  }
  .csc__account a:hover { color: #fc4c02; }
  .csc__disconnect { color: #d70000 !important; }
  .csc__disconnect:hover { color: #fc4c02 !important; text-decoration-color: #fc4c02; }

  /* Leaderboard CTA - theme-aware: brand red (#D70000) gradient with
     yellow (#FFD201) hover-stripe + trophy icon. Sits at the right end
     of the strip (after the progress bar). Sized to match the strip's
     vertical rhythm (26px tall, same as the disconnected Connect btn).
     Resets default <button> chrome explicitly so it doesn't inherit
     theme-wide button styles that would clash. */
  .csc__lb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 12px;
    background: linear-gradient(135deg, #D70000 0%, #B30000 100%);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(215, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform .08s, box-shadow .12s, background .12s;
    text-decoration: none;
  }
  .csc__lb-btn:hover {
    background: linear-gradient(135deg, #FFD201 0%, #FFB800 100%);
    color: #212121;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(255, 184, 0, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
  .csc__lb-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  }
  .csc__lb-btn:focus-visible {
    outline: 2px solid #FFD201;
    outline-offset: 2px;
  }
  .csc__lb-btn-icon { flex-shrink: 0; }

  /* ── Leaderboard modal ───────────────────────────────────────────
     Visual language matches /sections/campus-leaderboard-1.liquid:
     dark header bar, brand yellow accent, top-3 highlighted, "you"
     row in pink. Self-contained - doesn't depend on any global modal
     CSS that might exist elsewhere in the theme. */
  .csc-lb-bg {
    position: fixed; inset: 0;
    background: rgba(15, 22, 41, 0.65);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
  }
  .csc-lb-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%; max-width: 749px;
    max-height: 88vh; overflow: auto;
    padding: 28px 28px 20px;
    position: relative;
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  }
  .csc-lb-close {
    position: absolute; top: 12px; right: 16px;
    background: transparent; border: 0;
    font-size: 28px; line-height: 1; cursor: pointer;
    color: #333;
    padding: 4px 10px; border-radius: 8px;
  }
  .csc-lb-close:hover { background: #f1f5f9; color: #111; }
  .csc-lb-head { margin-bottom: 18px; padding-right: 32px; }
  .csc-lb-title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 32px; font-weight: 400;
    color: #212121;
    margin: 0 0 4px;
  }
  .csc-lb-sub {
    margin: 0;
    font-size: 13px;
    color: #333;
  }
  .csc-lb-tablewrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #ddd;
  }
  .csc-lb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }
  .csc-lb-table thead tr {
    background: #212121;
    color: #FFD201;
    text-align: left;
  }
  .csc-lb-table th,
  .csc-lb-table td { padding: 12px 16px; }
  .csc-lb-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
  }
  .csc-lb-table tbody tr:hover { background: #FFFBE6; }
  .csc-lb-table tbody tr.csc-lb-top3 { background: #FFF9D6; font-weight: 700; }
  .csc-lb-table tbody tr.csc-lb-me { background: #FFF0F0; font-weight: 700; }
  .csc-lb-table tbody tr.csc-lb-top3.csc-lb-me {
    background: linear-gradient(90deg, #FFF9D6 0%, #FFF0F0 100%);
  }
  .csc-lb-rank {
    font-size: 16px; font-weight: 700; color: #D70000;
    white-space: nowrap;
  }
  .csc-lb-medal { font-size: 14px; }
  .csc-lb-you {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background: #D70000; color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: 9999px;
    letter-spacing: 0.04em;
  }
  .csc-lb-loading,
  .csc-lb-empty {
    text-align: center;
    color: #94a3b8;
    padding: 32px !important;
  }
  .csc-lb-foot {
    margin: 12px 4px 0;
    font-size: 11px;
    color: #94a3b8;
    text-align: right;
  }

  @media (max-width: 640px) {
    .csc-lb-modal { padding: 22px 18px 16px; }
    .csc-lb-title { font-size: 24px; }
    .csc-lb-table th,
    .csc-lb-table td { padding: 10px 12px; }
  }

  /* "What counts" footnote - slim secondary line, sits below the main strip.
     Plain text rather than a card; visually subordinate to the strip itself. */
  .csc__footnote {
    margin: 8px 4px 0;
    font-size: 12px;
    color: #333;
    line-height: 1.5;
    display: flex;
    gap: 6px;
    align-items: flex-start;
  }
  .csc__footnote > span:first-child { color: #9ca3af; flex-shrink: 0; }

  /* Skeleton - same outer shape as .csc__strip so the swap is invisible.
     Uses a moving gradient for shimmer rather than opacity-pulse because
     shimmer reads as "data loading" while pulse reads as "disabled". */
  .csc__skeleton { gap: 16px; }
  .csc__sk {
    display: inline-block;
    border-radius: 8px;
    background: linear-gradient(
      90deg,
      rgba(var(--color-foreground, 33 33 33), 0.05) 0%,
      rgba(var(--color-foreground, 33 33 33), 0.12) 50%,
      rgba(var(--color-foreground, 33 33 33), 0.05) 100%
    );
    background-size: 200% 100%;
    animation: csc-shimmer 1.4s linear infinite;
  }
  .csc__sk--icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
  .csc__sk--text { flex: 1 1 auto; height: 20px; max-width: 360px; }
  .csc__sk--btn  { width: 140px; height: 36px; border-radius: 8px; flex-shrink: 0; }

  @keyframes csc-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
  }

  /* Respect reduced-motion: drop the shimmer, keep the placeholder shape */
  @media (prefers-reduced-motion: reduce) {
    .csc__sk { animation: none; background: #e2e8f0; }
  }

  @media (max-width: 640px) {
    .csc__bar-wrap { flex-basis: 100%; margin-top: 4px; }
    .csc__lb-btn { flex-basis: 100%; justify-content: center; padding: 12px 16px; min-height: 44px; }
  }

/* Mobile (≤ 749px) - added by mobile-spacing audit so this section
 * follows the project's standard 20px-vertical mobile rhythm. */
@media (max-width: 749px) {
  .csc {
    padding: 20px 0;
  }
}
/* END_SECTION:challenge-strava-connect */

/* START_SECTION:footer_custom (INDEX:43) */
.footer-section {
    background-color: #000;
    padding: 50px 0 0 0;
    color: #fff;
}
.footer-section .page-width {
    max-width: 1800px;
    padding: 0 40px;
}
.footer-row1 {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 80px;
    margin-bottom: 50px;
    overflow: hidden;
}

/* Footer row 2 - copyright on the left, legal links on the right
 * (Nutrition Warehouse pattern). Splits cleanly into stacked rows
 * on mobile. */
.footer-row2 {
    padding: 16px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #fff !important;
}

.footer-row2 p,
.footer-row2__copy {
    font-size: 14px;
    margin: 0;
}

.footer-row2__legal {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: center;
}
.footer-row2__legal a {
    font-size: 14px;
    margin: 0 auto;
    /* Override Dawn's default purple link colour. The footer sits on
     * a black background; pure white + subtle hover state reads as
     * a proper legal-row link without screaming for attention.
     * `:visited` is set too so the browser's purple-after-click
     * default doesn't kick in. */
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.footer-row2__legal a:visited {
    color: #fff;
}
.footer-row2__legal a:hover,
.footer-row2__legal a:focus {
    color: #ffd201;
    text-decoration-color: #ffd201;
}

.footer-column {
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.footer-column-categories {
    padding-right: 0;
}
.footer-column-brands {
    padding-left: 0;
}

.footer-column1, .footer-column2, .footer-column-products { width: auto; padding: 0; }

.menu_header {
    color: #FFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 1em;
    margin: 0 0 20px 0;
}

.categories-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: repeat(8, auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    column-gap: 40px;
    row-gap: 6px;
    max-width: 100%;
}

.categories-list li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
}
}

.categories-list li {
    line-height: 1.5em;
}

.categories-list li a {
    color: #9ca3af;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2em;
    transition: color 0.2s ease;
}

.categories-list li a:hover {
    color: #fff;
    text-decoration: none;
}

@media (max-width: 1023px) and (min-width: 750px) {
    .footer-row1 { gap: 28px; }
    .categories-list {
        grid-auto-columns: minmax(140px, max-content);
        column-gap: 24px;
    }
}

@media (max-width: 749px) {
    .footer-section {
        padding: 32px 0 0 0;
    }
    .footer-row1 {
        margin-bottom: 24px;
        gap: 32px;
        grid-template-columns: 1fr;
    }
    .footer-column,
    .footer-column-categories,
    .footer-column-brands,
    .footer-column1,
    .footer-column2 {
        width: 100%;
        padding: 0;
    }
    .menu_header {
        font-size: 18px;
        margin-bottom: 14px;
    }
    .categories-list {
        grid-template-rows: repeat(8, auto);
        grid-auto-columns: minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 8px;
    }
    .categories-list li {
        white-space: normal;
    }
    .categories-list li a {
        font-size: 14px;
        line-height: 1.4em;
    }
}

@media (max-width: 480px) {
    .categories-list {
        grid-template-rows: none;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        row-gap: 10px;
    }
    .footer-row2 p {
        font-size: 12px;
        text-align: center;
    }
}
/* END_SECTION:footer_custom */

/* START_SECTION:get_touch_1 (INDEX:44) */
/* FIRST content section - 80px top (banner above gives 0),
 * 40px bottom. Mobile 40/20. */
.get-in-touch-1 {
  width: 100%;
  padding-top: 80px;
  padding-bottom: 40px;
}
@media (max-width: 749px) {
  .get-in-touch-1 { padding-top: 40px; padding-bottom: 20px; }
}

.get-in-touch-1__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 905px;
  margin: 0 auto;
}

.get-in-touch-1__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.get-in-touch-1__subtitle {
  text-align: center;
  color: #000;
  font-size: 22px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin: 0;
}

.get-in-touch-1__title {
  text-align: center;
  color: var(--black, #212121);
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 46px;
  margin: 0;
}

.get-in-touch-1__description {
  text-align: center;
  color: #000;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  margin: 0;
  max-width: 938px;
}

/* Two-column row */
.get-in-touch-1__row {
  display: flex;
  align-items: center;
  gap: 150px;
  margin-top: 40px;
}

/* Left: Form */
.get-in-touch-1__form {
    width: 50%;
    flex-shrink: 0;
    padding: 40px;
    background: #fff;
    border-radius: 20px;
}

/* ── Loading skeleton ──────────────────────────────────────────────
 * Sits inside .get-in-touch-1__form alongside the Shopify Forms
 * embed. Mimics the shape of the actual form (4 fields + button)
 * so the column never reads as "empty white box" while the embed
 * boots. Auto-hides once the embed renders an iframe or form. */
.get-in-touch-1__form-skel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
}
.get-in-touch-1__form-skel-field {
  height: 44px;
  width: 100%;
  border-radius: 8px;
}
.get-in-touch-1__form-skel-field--tall {
  height: 120px;
}
.get-in-touch-1__form-skel-btn {
  height: 48px;
  width: 160px;
  border-radius: 999px;
  margin-top: 6px;
  align-self: flex-start;
}

/* Hide the skeleton the moment the Shopify Forms embed has
 * populated. The embed renders either an <iframe> (the standard
 * inline-form variant) or a fully-built <form>; match either. */
.get-in-touch-1__form:has([data-form-root] iframe) .get-in-touch-1__form-skel,
.get-in-touch-1__form:has([data-form-root] form) .get-in-touch-1__form-skel,
.get-in-touch-1__form:has(shopify-forms-embed:not(:empty)) .get-in-touch-1__form-skel {
  display: none;
}

/* Shared shimmer class - same definition used in student-portal-1
 * and ambassador-lounge-1. Declared here too in case this section
 * renders on a page that doesn't include those sections (the JS
 * injector in student-portal-1 only runs when that section is on
 * the page; CSS here makes the skeleton self-contained). */
.ssa-skel {
  position: relative;
  color: transparent !important;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.14) 50%, rgba(0, 0, 0, 0.06) 100%);
  background-size: 200% 100%;
  animation: ssa-skel-shimmer 1.4s ease-in-out infinite;
  user-select: none;
  pointer-events: none;
  display: block;
}
@keyframes ssa-skel-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* Right: Contact info */
.get-in-touch-1__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 50%;
}

.get-in-touch-1__contact-item {
  display: flex;
  align-items: center;
  gap: 0px;
}

.get-in-touch-1__image-wrap {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}

.get-in-touch-1__contact-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.get-in-touch-1__contact-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}

.get-in-touch-1__contact-label {
  color: #000;
  font-size: 22px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
}

.get-in-touch-1__contact-value {
  color: #000;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
    word-break: break-all;
    line-height: 1.2em;
}

/* Social */
.get-in-touch-1__social {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.get-in-touch-1__social-heading {
  color: #000;
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
}

.get-in-touch-1__social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.get-in-touch-1__social-link {
  /* Flex so smaller-than-box images (e.g. the TikTok PNG which is
   * scaled down via --tiktok modifier) centre both axes inside the
   * 41×41 box. Full-size images (LinkedIn / Instagram / etc.) still
   * fill the box because their inner img uses width: 100% / height: 100%. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.get-in-touch-1__social-link img,
.get-in-touch-1__social-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* TikTok fallback PNG is cropped tight to the shape, so it fills
 * the 41×41 box edge-to-edge. The other social icons (LinkedIn,
 * Instagram, etc.) ship with built-in padding inside their PNGs.
 * Shrink the TikTok PNG to ~78% of the box and centre it so all
 * five icons have matching optical weight. */
/* TikTok-modifier intentionally inherits the default width/height: 100%
 * - the gradient TikTok PNG now ships with built-in transparent padding
 * (~55% mark / ~45% padding), matching the other social icons. No
 * CSS scaling needed; the class is kept only as a future hook. */

/* Responsive */
@media (max-width: 990px) {
  .get-in-touch-1__row {
    flex-direction: column;
    gap: 40px;
    /* Desktop has align-items: center for the 2-col row. On mobile,
       stretch children so the form + info column fill viewport width
       instead of being centred at their desktop widths (50%). */
    align-items: stretch;
  }

  .get-in-touch-1__form {
    width: 100%;
    /* Desktop padding 40px is generous on phone - eats into form
       field width. Trim. */
    padding: 24px;
  }

  /* Info column was inheriting desktop `width: 50%` on mobile,
     leaving big empty space to the LEFT of the icons + text.
     Stretch to full width and left-align contents. */
  .get-in-touch-1__info {
    width: 100%;
    align-items: flex-start;
  }
  .get-in-touch-1__contact-item {
    gap: 14px;
    width: 100%;
  }
  .get-in-touch-1__contact-text {
    flex: 1;
    min-width: 0;
  }

  .get-in-touch-1__title {
    font-size: 36px;
    line-height: 38px;
  }
}

/* Phone widths - give the form + info columns slightly tighter
   internal padding so labels + input fields fill more of the
   available width. */
@media (max-width: 600px) {
  .get-in-touch-1 .page-width,
  .get-in-touch-1 > .page-width {
    padding-left: 14px;
    padding-right: 14px;
  }
  .get-in-touch-1__form { padding: 20px 16px; }
  .get-in-touch-1__contact-value { font-size: 16px; }
  .get-in-touch-1__contact-label { font-size: 18px; }
}
/* END_SECTION:get_touch_1 */

/* START_SECTION:get_touch_4 (INDEX:47) */
/* LAST content section - 40px top, 80px bottom (footer below
   * gives 0). Mobile 20/40. */
  .get_in_touch_4 {
    width: 100%;
    padding: 40px 0 80px;
  }
  @media (max-width: 749px) {
    .get_in_touch_4 { padding: 20px 0 40px; }
  }
  
  .get_in_touch_4__container {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  
  /* Left Column */
  .get_in_touch_4__left {
    flex: 0 0 50%;
    max-width: 656px;
    border-radius: 12px;
    overflow: hidden;
  }
  
  .get_in_touch_4__left img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  
  /* Right Column */
  .get_in_touch_4__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .get_in_touch_4__heading {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 46px;
    text-transform: capitalize;
    color: #000;
    margin: 0;
  }
  
  .get_in_touch_4__paragraph {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #000;
    margin: 0;
  }

  .get_in_touch_4__cta {
    width: 100%;
    max-width: 242px;
    min-height: 42px;
    padding: 10px 18px;
    margin: 0;
    border: none;
    background: linear-gradient(90deg, #ffd201 0%, #d70000 100%);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    font: inherit;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
  }

  .get_in_touch_4__cta:focus-visible {
    outline: 2px solid #212121;
    outline-offset: 2px;
  }

  .get_in_touch_4__cta-text {
    color: #fff;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    word-wrap: break-word;
  }
  
  /* List */
  .get_in_touch_4__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .get_in_touch_4__list-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .get_in_touch_4__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
  }
  
  .get_in_touch_4__icon-fallback {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: #D70000;
    border-radius: 50%;
  }
  
  .get_in_touch_4__list-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #000;
  }
  
  /* Bottom */
  .get_in_touch_4__bottom {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
  }
  
  .get_in_touch_4__bottom-image {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
  }
  
  .get_in_touch_4__bottom-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    color: #000;
    margin: 0;
    font-family: 'Racing Sans One', sans-serif;
  }
  
  /* Responsive */
  @media (max-width: 749px) {
    .get_in_touch_4__container {
      flex-direction: column;
    }
  
    .get_in_touch_4__left {
      flex: none;
      max-width: 100%;
      width: 100%;
    }
  
    .get_in_touch_4__heading {
      font-size: 30px;
      line-height: 38px;
    }
  
    .get_in_touch_4__bottom-text {
      font-size: 18px;
    }
  }
/* END_SECTION:get_touch_4 */

/* START_SECTION:giveaways-all-active (INDEX:48) */
.gag { padding: 24px 0; font-family: 'Montserrat', sans-serif; }
  .gag__header { margin-bottom: 14px; }
  .gag__title { margin: 0; font-size: 24px; font-weight: 700; }
  .gag__sub { margin: 4px 0 0; font-size: 14px; color: #333; }
  .gag__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
  .gag__card { background: #fff; border: 1px solid #e1e4ec; border-radius: 12px; padding: 16px; position: relative; }
  .gag__badge { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 9999px; background: #fef2c7; color: #8a6d00; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; margin-bottom: 8px; }
  .gag__name { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
  .gag__elig { margin: 0 0 10px; color: #333; font-size: 13px; }
  .gag__prizes { margin: 0 0 10px; padding-left: 18px; font-size: 13px; color: #2f384b; }
  .gag__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #333; margin-bottom: 12px; }
  .gag__meta b { color: #1f2533; }
  .gag__btn { width: 100%; background: #ffd201; color: #212121; border: 0; padding: 10px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 14px; }
  .gag__btn:hover { background: #e6bd00; }
  .gag__btn:disabled { opacity: .6; cursor: not-allowed; }
  .gag__empty { text-align: center; padding: 40px; color: #333; background: #f6f6f8; border-radius: 8px; }

  @media (max-width: 749px) {
    .gag__title { font-size: 18px; }
    .gag__grid { grid-template-columns: 1fr; gap: 10px; }
    .gag__card { padding: 14px; }
    .gag__btn { padding: 12px 14px; min-height: 44px; }
  }
/* END_SECTION:giveaways-all-active */

/* START_SECTION:giveaways_1 (INDEX:49) */
/* FIRST content section - 80px top (banner above gives 0),
 * 40px bottom. */
.giveaway_sec_1 {
    padding: 80px 0 40px;
}

/* --- Row 1 --- */
.giveaway_sec_1 .giveaway_sec_1_row {
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1320 / 631;
    display: flex;
    align-items: center;
}

.giveaway_sec_1 .giveaway_sec_1_content {
    width: 660px;
    /* `height: 100%` so the content column fills the row's full
     * height - then `justify-content: center` visibly centres the
     * children (subtitle + heading + description + bullets + CTA)
     * vertically. Without height: 100%, the content shrinks to fit
     * its children and justify-content has no effect, leaving the
     * text top-anchored in the row. */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-left: 30px;
}

.giveaway_sec_1 .giveaway_sec_1_text_group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.giveaway_sec_1 .giveaway_sec_1_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}

.giveaway_sec_1 .giveaway_sec_1_subtitle {
    align-self: stretch;
    color: white;
    font-size: 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    word-wrap: break-word;
    margin: 0;
}

.giveaway_sec_1 .giveaway_sec_1_title {
    align-self: stretch;
    color: white;
    font-size: 70px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 54px;
    word-wrap: break-word;
    margin: 0;
}

.giveaway_sec_1 .giveaway_sec_1_desc {
    align-self: stretch;
    color: white;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    margin: 0;
}

.giveaway_sec_1 .giveaway_sec_1_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 278px;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 4px;
    color: white;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.giveaway_sec_1 .giveaway_sec_1_btn {
    cursor: pointer;
    border: none;
}

.giveaway_sec_1 .giveaway_sec_1_btn.gw-btn--entered,
.giveaway_sec_1 .giveaway_sec_1_btn:disabled {
    opacity: 0.65;
    cursor: default;
}

/* --- CTA row + tier hint --- */
.giveaway_sec_1 .gw-cta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px; /* never let the hero touch the cards row below */
}

.giveaway_sec_1 .gw-tier-hint {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 9999px;
    background: rgba(20, 20, 20, 0.55);
    border: 1px solid rgba(255, 210, 1, 0.35);
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.giveaway_sec_1 .gw-tier-hint__mult {
    color: #FFD201;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 18px;
    line-height: 1;
}

.giveaway_sec_1 .gw-tier-hint__label {
    color: rgba(255, 255, 255, 0.85);
    text-transform: lowercase;
    letter-spacing: 0.2px;
}

/* --- Per-card entered badge (corner) --- */
.giveaway_sec_1 .giveaway_card {
    position: relative;
}

.giveaway_sec_1 .giveaway_card__entered-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 210, 1, 0.6);
    color: #FFD201;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    z-index: 2;
}

.giveaway_sec_1 .giveaway_card__entered-badge::before {
    content: '✓';
    font-size: 11px;
    font-weight: 900;
}

/* --- Picker modal --- */
.giveaway_sec_1 .gw-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Montserrat', sans-serif;
}

.giveaway_sec_1 .gw-modal[hidden] { display: none; }

.giveaway_sec_1 .gw-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.giveaway_sec_1 .gw-modal__panel {
    position: relative;
    background: #141414;
    border: 1px solid rgba(255, 210, 1, 0.25);
    border-radius: 12px;
    padding: 22px;
    width: 100%;
    max-width: 540px;
    max-height: 85vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.giveaway_sec_1 .gw-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.giveaway_sec_1 .gw-modal__title {
    color: white;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
}

.giveaway_sec_1 .gw-modal__close {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}

.giveaway_sec_1 .gw-modal__close:hover { color: #FFD201; }

.giveaway_sec_1 .gw-modal__hint {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    margin: 0 0 14px;
}

.giveaway_sec_1 .gw-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.giveaway_sec_1 .gw-modal__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.giveaway_sec_1 .gw-modal__item-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.giveaway_sec_1 .gw-modal__item-cadence {
    color: #111;
    background: linear-gradient(90deg, #FFD201 0%, #FFB000 100%);
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.giveaway_sec_1 .gw-modal__item-draws {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.giveaway_sec_1 .gw-modal__item-title {
    color: white;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 18px;
    margin: 0;
    line-height: 1.15;
}

.giveaway_sec_1 .gw-modal__item-prizes {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    line-height: 1.35;
    margin: 0;
}

.giveaway_sec_1 .gw-modal__item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}

.giveaway_sec_1 .gw-modal__item-entries {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
}

.giveaway_sec_1 .gw-modal__item-entries strong {
    color: #FFD201;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.giveaway_sec_1 .gw-modal__enter-btn {
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: white;
    border: 0;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.giveaway_sec_1 .gw-modal__enter-btn:disabled,
.giveaway_sec_1 .gw-modal__enter-btn--entered {
    background: transparent;
    border: 1px solid rgba(255, 210, 1, 0.55);
    color: #FFD201;
    cursor: default;
    opacity: 1;
}

/* Tier-locked variant - neutral grey, less inviting than yellow.
   Communicates "available but not for you yet" without being hostile. */
.giveaway_sec_1 .gw-modal__enter-btn--locked {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.55);
    cursor: not-allowed;
}
.giveaway_sec_1 .gw-modal__enter-btn--login {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    text-decoration: none;
}
.giveaway_sec_1 .gw-modal__enter-btn--login:hover { background: rgba(255, 255, 255, 0.08); }

/* Whole row dims when locked, but the title + prizes stay readable so
   the customer knows what they're aiming to unlock. */
.giveaway_sec_1 .gw-modal__item--locked { opacity: 0.78; }
.giveaway_sec_1 .gw-modal__item--locked .gw-modal__item-title,
.giveaway_sec_1 .gw-modal__item--locked .gw-modal__item-prizes { opacity: 1; }

.giveaway_sec_1 .gw-modal__item-lock {
    margin: 8px 0 0;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 2px solid rgba(255, 210, 1, 0.65);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 0 8px 8px 0;
}
.giveaway_sec_1 .gw-modal__item-lock a {
    color: #FFD201;
    text-decoration: underline;
}
.giveaway_sec_1 .gw-modal__item-lock a:hover { color: #fff; }

.giveaway_sec_1 .gw-modal__login {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    text-align: center;
    margin: 14px 0 0;
}

.giveaway_sec_1 .gw-modal__login a {
    color: #FFD201;
    text-decoration: underline;
}

/* --- Row 2 --- */
.giveaway_sec_1 .giveaway_sec_2_row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    max-width: 963px;
    margin: -95px auto 0 auto;
}

.giveaway_sec_1 .giveaway_card {
    flex: 1;
    min-height: 280px;
    padding: 22px 20px 18px;
    background-color: #212121;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    /* Three layered rows: icon (top) · title+paragraph (center) · draws (footer).
       margin-top:auto on the draws line pushes it to the bottom so all
       three cards line up regardless of paragraph length. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.giveaway_sec_1 .giveaway_card_paragraph {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.giveaway_sec_1 .giveaway_card_draws {
    margin: 8px 0 0 0;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.22);
    color: #FFD201;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 14px;
    letter-spacing: 0.5px;
    width: 100%;
}

.giveaway_sec_1 .giveaway_card_icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.giveaway_sec_1 .giveaway_card_label {
    color: white;
    font-size: 18px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    margin: 0;
    line-height: 1.1em;
}

/* Secondary heading line - sits below `.giveaway_card_label`, holds
   the specific prize name (e.g. "$100 SSS Voucher" under the
   "WEEKLY GIVEAWAY" parent heading). Same display family but lighter
   weight + reduced size so the visual hierarchy reads in order:
   cadence > prize > "Win: …" prize list. */
.giveaway_sec_1 .giveaway_card_sublabel {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    font-style: italic;
    word-wrap: break-word;
    margin: 4px 0 0;
    line-height: 1.15em;
}

.giveaway_sec_1 .giveaway_card_paragraph {
    color: white;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    line-height: 1.2em;
    word-wrap: break-word;
    margin: 0;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop hero is a 660px content panel inside a fixed 1320:631
 * aspect-ratio bg-image row, with a 70px Racing Sans heading and a
 * 278px-wide CTA. Below sits a row of 3 ticket cards floated up via
 * margin-top: -95px to overlap the hero. On mobile that overlap looks
 * broken - and the 70px heading wraps catastrophically. Stack vertical,
 * swap the bg-image hero for a contained one, drop card overlap, make
 * cards stack 1-col.
 */
@media (max-width: 749px) {
  .giveaway_sec_1 {
    padding: 40px 0 20px;
  }
  .giveaway_sec_1 .giveaway_sec_1_row {
    position: relative;
    aspect-ratio: auto;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    padding: 28px 16px;
  }
  /* Darken the hero bg on mobile only. The desktop layout anchors copy
   * in a 660px side panel with breathing room, but on mobile the white
   * hero text sits directly over the full-bleed giveaway image and can
   * wash out. An 80% black overlay restores contrast/legibility. */
  .giveaway_sec_1 .giveaway_sec_1_row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1;
  }
  .giveaway_sec_1 .giveaway_sec_1_content {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-left: 0;
    gap: 14px;
  }
  .giveaway_sec_1 .giveaway_sec_1_text_group { gap: 12px; }
  .giveaway_sec_1 .giveaway_sec_1_inner { gap: 8px; }
  .giveaway_sec_1 .giveaway_sec_1_subtitle { font-size: 14px; }
  .giveaway_sec_1 .giveaway_sec_1_title {
    font-size: 32px;
    line-height: 1.1;
  }
  .giveaway_sec_1 .giveaway_sec_1_desc { font-size: 14px; }
  .giveaway_sec_1 .giveaway_sec_1_btn {
    width: auto;
    align-self: stretch;
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
    white-space: normal;
  }
  .giveaway_sec_1 .gw-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 16px;
  }
  .giveaway_sec_1 .gw-tier-hint { align-self: flex-start; }

  /* Cards row: stack vertically, drop the negative margin overlap
   * (no longer needed when the hero isn't floating cards). */
  .giveaway_sec_1 .giveaway_sec_2_row {
    flex-direction: column;
    max-width: 100%;
    margin: 16px 0 28px 0;
    gap: 14px;
    padding: 0 16px;
    margin-bottom: 0;
  }
  .giveaway_sec_1 .giveaway_card {
    min-height: 180px;
    padding: 18px 16px;
  }
  .giveaway_sec_1 .giveaway_card_icon { width: 44px; height: 44px; }
  .giveaway_sec_1 .giveaway_card_label { font-size: 16px; }
  .giveaway_sec_1 .giveaway_card_sublabel { font-size: 13.5px; }
  .giveaway_sec_1 .giveaway_card_paragraph { font-size: 12px; }
  .giveaway_sec_1 .giveaway_card_draws { font-size: 12px; }

  .giveaway_sec_1 .gw-modal { padding: 12px; }
  .giveaway_sec_1 .gw-modal__panel { padding: 18px; }
  .giveaway_sec_1 .gw-modal__title { font-size: 18px; }
}

@media (max-width: 480px) {
  .giveaway_sec_1 .giveaway_sec_1_title { font-size: 28px; }
}
/* END_SECTION:giveaways_1 */

/* START_SECTION:giveaways_2 (INDEX:50) */
/* Middle content section - 80px between sections (40px each side). */
.giveaway_sec_2 {
  padding: 40px 0;
}
@media (max-width: 749px) {
  .giveaway_sec_2 { padding: 20px 0; }
}

.giveaway_sec_2_row1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  text-align: center;
}

.giveaway_sec_2__heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 46px;
  text-transform: capitalize;
  color: #212121;
  margin: 0;
}

.giveaway_sec_2__description {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  margin: 8px auto 0;
}

/* ── Wrapper ── */
.gvwy2-wrap {
  position: relative;
}

/* ── Card ──────────────────────────────────────────────────────
 * Redesigned per the brief "Inconsistencies in design
 * here." Originally each block could carry its own `bg_image`
 * setting that bled into the card surface, producing wildly
 * different looks per prize (one card read solid orange particle
 * texture, another read a deeper red gradient). Now every card
 * shares the same brand gradient base - admin-set bg_images are
 * still honoured but composited UNDER a brand-tinted overlay so
 * the final card reads uniformly across all blocks. */
/* Equal-height slides.
 *
 * Three things have to be true at once for Swiper slides to read
 * uniform regardless of per-card text length:
 *   1. The flex wrapper stretches its children (align-items: stretch)
 *   2. Each slide takes auto height (so it doesn't lock to the tallest
 *      single-slide measurement Swiper computed on init) AND uses
 *      `display: flex` so its single child (.gvwy2-card) can flex-fill
 *   3. The card sets `height: 100%` AND `flex: 1` - without an explicit
 *      `height: 100%` the card sometimes collapses to its content
 *      height inside a flex parent depending on the slide's computed
 *      sizing (Swiper writes inline width:; some browsers infer height
 *      from content when there's no explicit height directive).
 *
 * !important on the three load-bearing properties because Swiper
 * version-to-version sometimes injects inline `height: 0px` on
 * cloned loop slides which silently breaks the stretch chain. */
.giveaway_sec_2 .swiper-wrapper {
  align-items: stretch !important;
}
.giveaway_sec_2 .swiper-slide.gvwy2-slide {
  height: auto !important;
  display: flex !important;
  /* Defensive: kill any inline `height: 0px` Swiper might set on
   * cloned loop slides - `auto` above + this catch-all together
   * cover both pristine and cloned slides. */
  min-height: 0;
}

.gvwy2-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Uniform brand gradient as the base - the per-block bg_image
   * (if any) layers on top via inline style but is muted by the
   * pseudo-element overlay below. */
  background-color: #d94d00;
  background-image: linear-gradient(135deg, #FFD201 0%, #FF6B00 50%, #D70000 100%);
  min-height: 380px;
  /* Fill the slide vertically. The parent .swiper-slide is now
   * display: flex, so flex: 1 + explicit height: 100% on the card
   * together force it to stretch to match the tallest slide in the
   * visible row. height: 100% alone isn't enough (the slide is a
   * flex item with no explicit height) and flex: 1 alone isn't
   * enough either (some browsers don't propagate the implicit
   * stretch when the slide computes height: auto). Belt + braces. */
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Brand-tinted overlay sitting between the bg_image and the
 * card content. Semi-transparent gradient so any uploaded
 * image still shows as texture, but the dominant tone is the
 * SSA yellow→red gradient on every card regardless of source
 * image. Result: consistent look across the carousel. */
.gvwy2-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 210, 1, 0.55) 0%, rgba(255, 107, 0, 0.55) 50%, rgba(215, 0, 0, 0.55) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Lift the body above the overlay. */
.gvwy2-card > .gvwy2-card__body {
  position: relative;
  z-index: 1;
}

/* ── Card body ── */
.gvwy2-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 40px;
  /* Fill the card vertically so cards with shorter copy still
   * fill the slide; the image stays anchored to the top, text
   * sits below with the remaining space distributed naturally. */
  flex: 1;
  width: 100%;
}

.gvwy2-card__media {
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gvwy2-card__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
}

.gvwy2-card__img--ph {
  width: 260px;
  height: 260px;
  opacity: 0.4;
}

.gvwy2-card__text {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gvwy2-card__title {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: white;
  margin: 0;
  text-transform: capitalize;
  line-height: 1em;
  text-align: center;
}

.gvwy2-card__desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color: #fff;
    line-height: 1.5em;
    text-align: center;
    margin: 0 auto;
}

/* ── Arrow buttons ── */
.gvwy2-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: background 0.2s ease, border-color 0.2s ease;
  padding: 0;
  backdrop-filter: blur(4px);
}

.gvwy2-btn--prev { left: -30px; }
.gvwy2-btn--next { right: -30px; }

.gvwy2-btn:hover {
  background: rgba(0, 0, 0, 0.55);
  border-color: white;
}

.gvwy2-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Dot indicators ── */
.gvwy2-pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.gvwy2-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(33, 33, 33, 0.25);
  opacity: 1;
  transition: background 0.2s ease, transform 0.2s ease;
  margin: 0 !important;
}

.gvwy2-pagination .swiper-pagination-bullet-active {
  background: #212121;
  transform: scale(1.3);
}

.gvwy2-empty {
  text-align: center;
  color: #888;
  padding: 60px 20px;
  font-family: 'Montserrat', sans-serif;
}

/* ── Responsive ── */
@media (max-width: 749px) {
  .giveaway_sec_2__heading {
    font-size: 36px;
    line-height: 1.2;
  }

  .gvwy2-card__body {
    flex-direction: column;
    padding: 30px 20px;
    text-align: center;
    gap: 24px;
    min-height: unset;
  }

  .gvwy2-card__media {
    flex: unset;
    width: 100%;
  }

  /* Fix mismatched aspect ratios across cards: give the image a
   * fixed square frame on mobile and let `object-fit: contain`
   * scale each product image to fit without distortion or overflow. */
  .gvwy2-card__img {
    width: 220px;
    max-width: 80%;
    height: 220px;
    max-height: 50vw;
    object-fit: contain;
  }

  .gvwy2-card__title {
    font-size: 22px;
  }

  .gvwy2-card__desc {
    font-size: 14px;
  }

  .gvwy2-btn {
    width: 36px;
    height: 36px;
  }
}
/* END_SECTION:giveaways_2 */

/* START_SECTION:giveaways_3 (INDEX:51) */
/* Middle content section - 80px between sections (40px each side).
 * (giveaways_3 is reused on loyalty-program at a middle position too.) */
.giveaway_sec_3 {
    padding: 40px 0;
}

/* --- Row 1 --- */
.giveaway_sec_3 .giveaway_sec_3_row {
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1320 / 606;
    display: flex;
    align-items: center;
    border-radius: 20px;
}

.giveaway_sec_3 .giveaway_sec_3_content {
    width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-left: 30px;
}

.giveaway_sec_3 .giveaway_sec_3_text_group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.giveaway_sec_3 .giveaway_sec_3_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}

.giveaway_sec_3 .giveaway_sec_3_subtitle {
    align-self: stretch;
    color: white;
    font-size: 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    word-wrap: break-word;
    margin: 0;
}

.giveaway_sec_3 .giveaway_sec_3_title {
    align-self: stretch;
    color: white;
    font-size: 45px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1em;
    word-wrap: break-word;
    margin: 0;
}

.giveaway_sec_3_list~div {
    margin-bottom: -50px;
}

.giveaway_sec_3 .giveaway_sec_3_desc {
    align-self: stretch;
    color: white;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    margin: 0;
    line-height: 1.5em;
}

.giveaway_sec_3 .giveaway_sec_3_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 278px;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 4px;
    color: white;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.giveaway_sec_3_list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
    line-height: 1.3em;
    margin: 0;
}

.giveaway_sec_3_list_item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
}

div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU {
    width: 100%;
}

div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU shopify-forms-embed#app-embed {
    margin-left: -20%;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 1320:606 aspect-ratio bg-image hero with a 560px-wide
 * content panel margined 30px in. On mobile that aspect-ratio gives
 * a tiny ~190px image height, content gets crushed. Switch to a
 * natural min-height with full-width content + centered text.
 */
/* Desktop default - hide the mobile <img>; desktop uses the inline
   bg-image on the row. */
.giveaway_sec_3_mobile_img {
  display: none;
}

@media (max-width: 749px) {
  .giveaway_sec_3 { padding: 20px 0; }
  /* The row becomes a vertical flex column on mobile so the image
     stacks as a flush bottom strip directly under the form. With the
     row's overflow: hidden + border-radius, the image's edges get
     clipped to match - content + image read as ONE rounded card,
     not two separate sections with a gap between them. */
  .giveaway_sec_3 .giveaway_sec_3_row {
    aspect-ratio: auto;
    min-height: 0;
    border-radius: 16px;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    /* Suppress the bg-image on phones - content panel needs a clean
       dark background so the white text is readable. The image is
       rendered as a flush bottom strip inside this same row. */
    background-image: none !important;
    background-color: #15151b;
    overflow: hidden;
  }
  .giveaway_sec_3 .giveaway_sec_3_content {
    width: 100%;
    margin-left: 0;
    padding: 26px 20px 20px;
    gap: 14px;
  }
  /* Image - full row width, flush against the bottom of the dark
     content panel. The source image has a wide dark/black panel on
     the LEFT (the desktop design's content area) and the bright
     orange "Step into the arena" + 3 tier portraits on the RIGHT.
     On mobile we just want the right-hand visual content shown
     large, so we crop the left dark portion with object-fit cover
     + object-position right + a portrait-ish aspect ratio. */
  .giveaway_sec_3_mobile_img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    /* Frame the 3 tier portraits centred horizontally (source has them on
       the right). Nudge this % if they sit off — lower = shift left. */
    object-position: 94% center;
    margin: 0;
    vertical-align: bottom;
    /* Subtle separator between the form panel and the image strip */
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  /* Widen the Klaviyo / Shopify form embed + bigger button.
     The Shopify forms embed renders inside a shadow DOM in many
     versions, but the inline embed (used here) gives us regular
     child elements we can target. !important is needed because the
     embed sets its own inline width / height inline. */
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU,
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU shopify-forms-embed#app-embed {
    width: 100% !important;
    max-width: 100% !important;
  }
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU input[type='email'],
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU input[type='text'] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 52px !important;
    font-size: 16px !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
  }
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU button,
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU [type='submit'] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 56px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
  }
  .giveaway_sec_3 .giveaway_sec_3_title {
    font-size: 26px;
    line-height: 1.1;
  }
  .giveaway_sec_3 .giveaway_sec_3_desc {
    font-size: 14px;
    line-height: 1.45;
  }
  .giveaway_sec_3 .giveaway_sec_3_subtitle { font-size: 14px; }
  .giveaway_sec_3_list_item { font-size: 12px; }
  .giveaway_sec_3 .giveaway_sec_3_btn {
    width: auto;
    align-self: stretch;
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
    white-space: normal;
  }
  /* The Shopify forms embed has a hard-coded -20% left margin from
   * the desktop design - kills it on mobile so the form sits aligned
   * with the rest of the content. */
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU shopify-forms-embed#app-embed {
    margin-left: 0;
  }
  .giveaway_sec_3_list~div {
    margin-bottom: 0;
  }
}
/* END_SECTION:giveaways_3 */

/* START_SECTION:giveaways_4 (INDEX:52) */
/* LAST content section - 40px top, 80px bottom (footer below gives 0). */
.giveaway_sec_4 {
  padding: 40px 0 80px;
}

/* ── Row 1: heading / description ── */
.giveaway_sec_4_row1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  text-align: center;
}

.giveaway_sec_4__heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize;
  color: #212121;
  margin: 0;
}

.giveaway_sec_4__description {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  margin: 8px auto 0;
  max-width: 680px;
}

/* ── Slider wrapper ── */
.giveaway_sec_4_row2 {
  position: relative;
  padding-bottom: 48px;
}

.giveaway4-swiper {
  overflow: hidden;
}

/* ── Card ── */
.giveaway4-card {
  background: #212121;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  height: 100%;
}

/* Image */
.giveaway4-card__image-wrap {
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.giveaway4-card__image {
  width: 100%;
  height: 496px;
  object-fit: cover;
  display: block;
  border-radius: 20px 20px 0 0;
}

/* Body */
.giveaway4-card__body {
  width: calc(100% - 40px);
  padding: 20px;
}

.giveaway4-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.giveaway4-card__meta-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.giveaway4-card__name {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  display: block;
}

.giveaway4-card__location {
  display: flex;
  align-items: center;
  gap: 7px;
}

.giveaway4-card__icon {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.giveaway4-card__icon-placeholder {
  display: inline-block;
  width: 25px;
  height: 20px;
  background: #fff;
  flex-shrink: 0;
}

.giveaway4-card__icon-placeholder--state {
  width: 20px;
  height: 25px;
}

.giveaway4-card__city,
.giveaway4-card__state {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}

/* Gradient bar */
.giveaway4-card__bar {
    width: 100%;
    height: 66px;
    background: url(/cdn/shop/files/Rectangle_40067.png?v=1772923362);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    z-index: 2;
    bottom: 25px;
}

/* Prize label */
.giveaway4-card__prize {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
}

/* ── Swiper controls ── */
.giveaway4-pagination {
  bottom: 0 !important;
}

.giveaway4-pagination .swiper-pagination-bullet {
  background: #212121;
  opacity: 0.3;
}

.giveaway4-pagination .swiper-pagination-bullet-active {
  background: #d70000;
  opacity: 1;
}

.giveaway4-btn-prev,
.giveaway4-btn-next {
  color: #d70000;
}

.giveaway4-btn-prev::after,
.giveaway4-btn-next::after {
  font-size: 20px;
  font-weight: 700;
}

.swiper-button-next.giveaway4-btn-next,
.swiper-button-prev.giveaway4-btn-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .8);
    background: #00000040;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .2s ease, border-color .2s ease;
    padding: 0;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.swiper-button-prev.giveaway4-btn-prev {
    left: 0;
}

.swiper-button-next.giveaway4-btn-next {
    right: 0;
}

.swiper-button-next.giveaway4-btn-next:after, .swiper-button-prev.giveaway4-btn-prev:after {
    font-size: 20px;
}

.giveaway_sec_4 .swiper-slide.swiper-slide-next {
    transform: scale(1.1) !important;
}

.giveaway4-swiper .swiper-slide {
    transform-origin: top center;
    transform: scale(1);
    transition: all ease .3s;
}

.giveaway4-swiper .swiper-wrapper {
    padding-bottom: 70px;
}

.giveaway_sec_4_row3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.giveaway_sec_4 .giveaway_sec_4_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 278px;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 4px;
    color: white;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop card image is 496px tall. On mobile that dominates the
 * fold - shrink. Heading 52 → 28, button stretches.
 */
@media (max-width: 749px) {
  .giveaway_sec_4 { padding: 20px 0 40px; }
  .giveaway_sec_4_row1 { margin-bottom: 22px; }
  .giveaway_sec_4__heading {
    font-size: 26px;
    line-height: 1.1;
  }
  .giveaway_sec_4__description {
    font-size: 14px;
  }
  /* Tighten the gap between the winner-card carousel and the
     "Be the next winner" CTA - the desktop's 48px breathing room
     made the button look disconnected on mobile. */
  .giveaway_sec_4_row2 {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  /* Swiper reserves internal space for the pagination/arrows even
     when not visible - flatten that here so the card's bottom edge
     sits right above the button. */
  .giveaway_sec_4 .giveaway4-swiper,
  .giveaway_sec_4 .giveaway4-swiper .swiper-wrapper {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .giveaway4-card__image { height: 360px; }
  .giveaway4-card__body {
    width: calc(100% - 28px);
    /* Bumped from 14px → 20px top / 18px sides / 18px bottom so the
     * name + city/state row + ribbon-overlap area all have visible
     * breathing room from the card edges instead of pressing tight. */
    padding: 28px 18px 18px;
  }
  /* Gap between name row + city/state row bumped for vertical
   * breathing space inside the body. */
  .giveaway4-card__meta { gap: 14px; }
  .giveaway4-card__meta-left { gap: 12px; }
  .giveaway4-card__name { font-size: 18px; }
  .giveaway4-card__city,
  .giveaway4-card__state { font-size: 14px; }
  .giveaway4-card__prize { font-size: 12px; }
  /* Push the "Prize Won" gradient ribbon down so it sits at the
   * image-to-body seam instead of overlapping the "YOU COULD…"
   * heading text on the image. Also shrink it considerably - the
   * desktop's 66px height reads way too chunky on a 360px phone
   * card. 40px is enough for the ribbon shape + 12px label inside. */
  .giveaway4-card__bar {
    bottom: -22px;
    height: 40px;
  }
  .giveaway4-card__prize {
    height: 40px;
  }
  .swiper-button-next.giveaway4-btn-next,
  .swiper-button-prev.giveaway4-btn-prev {
    width: 36px;
    height: 36px;
  }
  .swiper-button-next.giveaway4-btn-next:after,
  .swiper-button-prev.giveaway4-btn-prev:after { font-size: 14px; }
  /* Featured slide scale-up looks weird at narrow viewport - bail */
  .giveaway_sec_4 .swiper-slide.swiper-slide-next {
    transform: scale(1) !important;
  }
  /* Row3 wrapper stretches the button to fill the card column.
     10px breathing room between the winner-card bottom and the
     "BE THE NEXT WINNER" CTA. */
  .giveaway_sec_4_row3 {
    align-self: stretch;
    align-items: stretch;
    margin-top: 10px;
  }
  /* Full-width chunky CTA so it reads as part of the same group as
     the card above it, not a floating mini-button. */
  .giveaway_sec_4 .giveaway_sec_4_btn {
    width: 100%;
    align-self: stretch;
    padding: 16px 20px;
    min-height: 56px;
    font-size: 16px;
    border-radius: 12px;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .giveaway_sec_4__heading { font-size: 24px; }
  .giveaway4-card__image { height: 280px; }
}
/* END_SECTION:giveaways_4 */

/* START_SECTION:header_custom (INDEX:54) */
.promo-banner {
  background: var(--promo-bg, #212121);
}

.promo-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 0 10px 0;
}

/* tighter than the old static headline - the banner is pinned now, so every
 * pixel here is permanently off the fold. The reward bar itself (headline,
 * track, tier badges) is the shared snippets/ssa-reward-progress.liquid -
 * same markup renders in the cart drawer, see that file for its CSS. */
.promo-banner__inner:has(.ssa-reward-progress) {
  padding: 8px 0 10px;
}

/* Main Header
 * ─────────────────────────────────────────────────────────────
 * The menu strip pins to the top of the viewport once the promo
 * banner + second banner scroll away. We can't use `position:
 * sticky` here because the natural sticky container is the
 * Shopify section wrapper (shopify-section-header_custom_*),
 * which is only as tall as its children - so the moment its
 * bottom edge clears the viewport, the sticky element un-sticks.
 *
 * Instead we toggle a `is-stuck` class via JS once the page has
 * scrolled past the bottom of `.second-banner`. The class swaps
 * the element to `position: fixed` and we render an inline
 * `.main-header__spacer` that holds the original height so the
 * page below doesn't jump.
 */
.main-header {
  background: #f0f0f0;
  z-index: 100;
  transition: box-shadow 0.2s ease;
}

/* --promo-stuck-h is set by the sticky JS: the promo banner pins above the
 * menu, so the menu has to sit below it rather than at 0. Falls back to 0
 * on phones, where the promo banner is display:none. */
.main-header.is-stuck {
  position: fixed;
  top: var(--promo-stuck-h, 0px);
  left: 0;
  right: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  animation: ssa-header-slidedown 0.2s ease-out;
}

.promo-banner.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* above .main-header's 100 - they briefly overlap during the slidedown */
  z-index: 101;
  animation: ssa-header-slidedown 0.2s ease-out;
}

@keyframes ssa-header-slidedown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* Spacer holds the document height when .main-header goes fixed
 * so the content below doesn't shift up. Sized via JS to match
 * the actual rendered height of the header. */
.main-header__spacer {
  display: none;
}
.main-header__spacer.is-active {
  display: block;
}

.main-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 0px;
}

.main-header__logo {
  flex-shrink: 0;
  text-decoration: none;
}

.main-header__logo-img {
  display: block;
  max-height: 90px;
  width: auto;
}

.main-header__shop-name {
  color: var(--main-text, #fff);
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}

.main-header__search {
  flex: 1;
  display: flex;
  align-items: center;
  border-radius: 74px;
  outline: 1px solid #cccccc;
  overflow: hidden;
  padding: 0 8px 0 24px;
  height: 46px;
}

.main-header__search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--main-text, #232222);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  outline: none !important;
  box-shadow: none !important;
}

.main-header__search-input::placeholder {
  color: rgba(35, 34, 34, 0.75);
}

.main-header__search-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--main-text, #fff);
}

.main-header__cart {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  color: var(--main-text, #fff);
  text-decoration: none;
}

.main-header__cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  /* Hardcoded brand yellow + dark text. Was inheriting from the
     header's --main-text/--main-bg vars, which on light-on-dark
     headers produced a near-black badge with near-black text - the
     count digit disappeared and visually read as a black dot. */
  background: #FFD201;
  color: #212121;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Crisp edge against the cart icon - the white outline keeps the
     badge legible on photo-heavy headers (sale banners etc.). */
  box-shadow: 0 0 0 2px var(--main-bg, #fff);
}

/* Second Banner */
.second-banner {
  background: var(--second-bg, #FFD201);
}

.second-banner__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px;
}

.second-banner__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

.second-banner__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--second-text, #212121);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.85;
}

.second-banner__check {
  flex-shrink: 0;
  color: var(--second-check, #2DBE60);
}

.second-banner__support {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--second-text, #212121);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.85;
  text-decoration: none;
}

.second-banner__support:hover {
  text-decoration: underline;
}

/* ── Mobile news ticker ────────────────────────────────────────────
 * Hidden on desktop - the two stacked banners above stay as-is there.
 * On phones (rules in the max-width:749px block) the banners are
 * hidden and this single thin strip replaces them, scrolling the
 * same messages on an infinite translateX loop. */
.promo-ticker {
  display: none;
  background: var(--promo-bg, #212121);
  overflow: hidden;
}

.promo-ticker__viewport {
  overflow: hidden;
  white-space: nowrap;
}

.promo-ticker__track {
  display: inline-flex;
  align-items: center;
  /* Two copies of the message list sit side by side; shifting the
   * track by exactly -50% lands copy 2 where copy 1 started, so the
   * loop is visually seamless. */
  animation: promo-ticker-scroll 26s linear infinite;
  will-change: transform;
}

.promo-ticker__item {
  flex-shrink: 0;
  padding: 0 14px;
  color: var(--promo-text, #fff);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.promo-ticker__accent {
  color: #ffd201;
}

.promo-ticker__sep {
  flex-shrink: 0;
  color: #ffd201;
  font-size: 7px;
  line-height: 1;
}

.promo-ticker__link {
  color: #ffd201;
  text-decoration: underline;
}

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

/* Honour reduced-motion preference - freeze the strip, show the
 * first copy of the messages static instead of scrolling. */
@media (prefers-reduced-motion: reduce) {
  .promo-ticker__track {
    animation: none;
  }
}

/* ===================== SIDEBAR PANELS ===================== */

/* Hamburger button */
.main-header__hamburger {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--main-text, #fff);
  padding: 0;
}

/* Sidebar overlay */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  display: block !important;
}

/* Sidebar drawer
 *
 * Background was `#f0f0f0e0` (88% opaque) + `backdrop-filter: blur(10px)`
 * for a frosted-glass effect. That let high-saturation page content -
 * notably the orange→red gradient "CHOOSE OPTIONS" CTAs on search-result
 * cards and active-state checkmark ticks - bleed through as visible
 * blobs INSIDE the drawer, reading like a z-index leak. The drawer
 * already sits at z-index 200 (well above everything else on the page),
 * so the fix isn't z-index: it's eliminating the see-through.
 * Use a fully opaque background and drop the backdrop-filter - the
 * blur was only doing visible work on the edges anyway. */
.sidebar-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 580px;
    max-width: 100vw;
    height: 100%;
    /* Belt + braces:
     *   `background-color` (not the `background` shorthand) so it's
     *     immune to any later `background-image` rule that might wipe
     *     a shorthand `background` declaration.
     *   `isolation: isolate` creates a new stacking context so the
     *     drawer + its children are sealed in. No element on the page
     *     - regardless of its own z-index or transform stacking
     *     context - can punch through. This is the actual fix for the
     *     "checkmarks bleed through" symptom from active-state
     *     facet ticks (which sit at z-index: 5 globally). */
    background-color: #f0f0f0;
    isolation: isolate;
    z-index: 200;
    transform: translate(-100%);
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-drawer.is-open {
  transform: translateX(0);
}

/* Close button */
.sidebar-drawer__close {
  flex-shrink: 0;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 20px 20px 0 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #212121;
}

/* Panel system */
.sidebar-panel {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 30px 30px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  transition: transform 0.3s ease, visibility 0.3s;
  visibility: hidden;
}

.sidebar-panel--main {
  transform: translateX(0);
}

.sidebar-panel--main:not(.is-active) {
  transform: translateX(-100%);
}

.sidebar-panel--sub {
  transform: translateX(100%);
}

.sidebar-panel.is-active {
  transform: translateX(0);
  visibility: visible;
}

/* Sub-panel header */
.sidebar-panel__header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.sidebar-panel__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: #212121;
  padding: 0;
  flex-shrink: 0;
}

.sidebar-panel__title {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  color: #000;
}

/* Quick action cards */
.sidebar-drawer__quick-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.sidebar-drawer__action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 15px;
  flex: 1;
  background: #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  transition: background 0.2s;
}

.sidebar-drawer__action-card:hover {
  background: #c8c8c8;
}

/* Menu lists */
.sidebar-drawer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
}

.sidebar-drawer__menu-link {
  color: #000;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.sidebar-drawer__menu-link.is-active {
  color: #D70000;
  text-decoration: underline;
  text-decoration-color: #FFD201;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.sidebar-drawer__menu-link:hover {
  opacity: 0.7;
}

.sidebar-drawer__divider {
  border: none;
  border-top: 2px solid #000;
  margin: 0;
  flex-shrink: 0;
}

/* ---- Best Seller panel ---- */
.sidebar-bestseller__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sidebar-bestseller__item {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #212121;
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 600;
}

.sidebar-bestseller__icon {
  width: 35px;
  height: 35px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ---- Categories panel ---- */
.sidebar-categories__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.sidebar-category__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(50% - 10px);
  padding: 15px 20px;
  background: #fff;
  border-radius: 12px;
  text-decoration: none;
  transition: box-shadow 0.2s;
}

.sidebar-category__card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.sidebar-category__label {
  color: #212121;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 22px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1.2;
}

.sidebar-category__img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ---- Brands panel ---- */
.sidebar-brands__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.sidebar-brand__card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50% - 10px);
  height: 110px;
  padding: 15px 20px;
  background: #fff;
  border-radius: 12px;
  text-decoration: none;
  transition: box-shadow 0.2s;
}

.sidebar-brand__card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.sidebar-brand__logo {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sidebar-brand__name {
  color: #212121;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  text-align: center;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Header layout: hamburger | logo | search input (flex:1) | cart
 * On a 430px iPhone the wide "SUPPLEMENT SUPERSTORE" logo + 24px
 * gaps + cart consume ~370px, leaving the search input no room - it
 * either invisibly squashes to <40px or pushes content off-screen.
 *
 * Fix: collapse the search to icon-only on phones. The form still
 * submits to /search (with no q= param) which lands on the search
 * results page where the user can type their query. Standard mobile
 * pattern. Also shrinks the logo a touch so cart + icon fit comfortably.
 */
@media (max-width: 749px) {
  /* The two stacked promo banners eat ~half the phone viewport - hide
   * them and surface the same messages through the scrolling ticker. */
  .promo-banner,
  .second-banner {
    display: none;
  }
  .promo-ticker {
    display: block;
  }

  .main-header__inner {
    gap: 12px;
    padding: 8px 0;
  }
  .main-header__logo-img {
    max-height: 56px;
  }
  /* Search collapses from a 46px-tall input field to a 44px clickable
   * icon - the form's button submits to /search either way, so users
   * tap the magnifying glass and land on the full search page. */
  .main-header__search {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 9999px;
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.04);
    margin-left: auto; /* push the icon + cart to the right edge */
  }
  .main-header__search-input {
    /* Keep the input in the DOM (for accessibility / search submit
     * via Enter on physical keyboards), but visually hidden so the
     * icon is the only mobile target. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .main-header__search-btn {
    width: 44px;
    height: 44px;
  }

  /* Expanded state: the form grows into a full-width inline pill that
   * overlays the header row, with the icon button anchored on the right
   * acting as the submit. Esc / outside-click closes it (see JS). */
  .main-header__search.main-header__search--open {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 44px;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    z-index: 50;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
  }
  .main-header__search--open .main-header__search-input {
    /* Restore visibility - undo the visually-hidden rule above. */
    position: static;
    width: 100%;
    height: 100%;
    padding: 0 48px 0 16px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
    background: transparent;
    font-size: 16px; /* >=16px prevents iOS zoom on focus */
    color: #212121;
    outline: none;
  }
  .main-header__search--open .main-header__search-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: transparent;
    border-radius: 9999px;
  }

  .main-header__cart {
    margin-left: 0;
  }
  /* Hamburger should not have the `margin-left: auto` from desktop
   * (if any) on phone - it sits on the far left next to the logo. */
  .main-header__hamburger {
    margin: 0;
  }

  /* ── Sidebar menu drawer (burger menu) mobile sizing ──────────────
   * Desktop sizes: nav items 24px Racing Sans One, action cards 16px,
   * panel titles 24px. On a 375px phone these wrap awkwardly:
   *   - "TRACK ORDER" + "LOG OUT" each break to two lines because
   *     the action card tile is only ~80px wide
   *   - "MONTHLY CHALLENGES" wraps but at 24px it's still huge
   * Drop sizes proportionally and tighten gaps so the whole drawer
   * fits more items per visible viewport without scrolling. */
  .sidebar-panel__title {
    font-size: 18px;
  }
  .sidebar-drawer__action-card {
    font-size: 12px;
    padding: 12px 8px;
    gap: 6px;
    line-height: 1.15;
  }
  .sidebar-drawer__quick-actions {
    gap: 8px;
  }
  .sidebar-drawer__menu {
    gap: 14px;
  }
  .sidebar-drawer__menu-link {
    font-size: 18px;
    line-height: 1.2;
  }

  /* ── Categories panel mobile fix ──────────────────────────────────
   * On phones the narrow ~50%-width card cannot fit the 22px label
   * and the 80px image side-by-side, so the product image spilled
   * outside the rounded card. Clip the card, shrink the label, and
   * constrain the image so it always stays inside the card bounds. */
  .sidebar-categories__grid {
    gap: 12px;
  }
  .sidebar-category__card {
    width: calc(50% - 6px);
    padding: 12px 12px;
    gap: 8px;
    overflow: hidden;
  }
  .sidebar-category__label {
    font-size: 16px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .sidebar-category__img {
    width: 56px;
    height: 56px;
    max-width: 56px;
    max-height: 56px;
    object-fit: contain;
  }
}

@media (max-width: 380px) {
  .main-header__inner { gap: 8px; }
  .main-header__logo-img { max-height: 44px; }
  .sidebar-drawer__action-card {
    font-size: 10px;
    padding: 10px 6px;
  }
  .sidebar-drawer__menu-link { font-size: 16px; }
}
/* END_SECTION:header_custom */

/* START_SECTION:home_sec_1 (INDEX:55) */
.collections-slider-section .page-width {
  position: relative;
  padding: 40px 30px;
}

.collections-swiper {
  overflow: hidden;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.collection-circle {
  display: block;
  text-decoration: none;
}

.collection-circle__inner {
  width: 115px;
  height: 115px;
  border-radius: 50%;
  /* Solid black base. Transparent areas of brand PNGs show through
     as black; non-transparent areas get covered by the overlay below. */
  background-color: #00000090;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  box-sizing: border-box;
  transition: transform 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* ── Universal black overlay ────────────────────────────
   Every circle gets the same heavy black overlay so the look is
   uniform regardless of what's in the brand PNG underneath. Yellow
   XTEND, pink AXE & SLEDGE, dark BUM/C4 - all knocked to near-black.
   The title text sits above this overlay (z-index: 1, text-shadow
   for extra contrast) so the category name reads crisp white on
   every tile.
   The :not() exclusion that used to keep the --first / --last
   "accent" tiles uncovered was removed: those accent classes apply
   to whichever brand happens to land first/last in your collection
   list (XTEND, AXE & SLEDGE in current data), and the accent
   pink/yellow background-colours just happened to match those
   brands' baked-in PNG backgrounds - so they read as "the brand
   showing through" when really they were the accent tile colour.
   Applying the overlay universally fixes both issues at once. */
/* The opacity is set per-tile via the --overlay-opacity CSS custom
   property (defined inline by the Liquid loop above based on which
   brands hit the keyword list). Fallback 0.82 if the variable isn't
   set for any reason. */
.collection-circle__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--overlay-opacity, 0.82));
  border-radius: 50%;
  pointer-events: none;
}

/* Legacy accent tile colours (#e8636a pink, #ffd201 yellow) removed
   Every circle now reads as a uniform dark tile via the
   universal black overlay above. The --first / --last classes still
   render in the Liquid but no longer do anything cosmetically; left
   in place so the markup is unchanged if accent tiles are revived
   later for a campaign. */

.collection-circle__title {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  position: relative; /* sits above the filtered brand image */
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* extra readability on busy logos */
}

/* Nav arrows */
.collections-slider-section .swiper-button-prev,
.collections-slider-section .swiper-button-next {
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(0,0,0,0.2);
  color: #212121;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}

.collections-slider-section .swiper-button-prev, .collections-slider-section .swiper-button-next {
    display: flex !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    color: #000 !important;
    background: #ffffff3d !important;
    z-index: 2;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.collections-slider-section .swiper-button-prev {
    left: 0 !important;
}

.collections-slider-section .swiper-button-next {
    right: 0 !important;
}

.collections-slider-section .collections-swiper {
    position: static !important;
}

.collections-slider-section .swiper-button-prev::after, .collections-slider-section .swiper-button-next::after {
    font-size: 20px !important;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Issues on phone:
 *  1. The 50x50 arrow buttons (positioned at left:0 / right:0) overlap
 *     the slider's first/last visible circles, causing the "BUNDLES &
 *     STACKS" / right-edge circles to render partly under the chrome.
 *  2. The .page-width has 30px horizontal padding which combined with
 *     the arrows leaves only ~315px on a 430px viewport for content.
 *  3. 115px circles are oversized for phones - 90px is plenty.
 */
@media (max-width: 749px) {
  .collections-slider-section .page-width {
    padding: 40px 12px 20px;
  }
  .collection-circle__inner {
    width: 92px;
    height: 92px;
    padding: 10px;
  }
  .collection-circle__title {
    /* Use clamp + tight line-height + hyphenation so long brand
     * names like "STRENGTH & PERFORMANCE" wrap inside the circle
     * instead of overflowing horizontally and getting cropped by
     * the circle's overflow:hidden. The clamp scales the text down
     * for narrow viewports where 11px is still too big. */
    font-size: clamp(8px, 2.6vw, 11px);
    line-height: 1.1;
    letter-spacing: 0.15px;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    /* Hard cap so nothing escapes the circle. The 14px subtraction
     * accounts for circle padding on each side. */
    max-width: calc(100% - 4px);
    /* Center text vertically + clip if it still overflows after
     * wrapping. With line-clamp, multi-line wraps look natural and
     * stay inside the circle. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Hide nav arrows on phones - they overlap the visible circles and
   * touch users swipe naturally. Swiper's loop:true means there's no
   * dead-end either direction. */
  .collections-slider-section .swiper-button-prev,
  .collections-slider-section .swiper-button-next {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .collection-circle__inner {
    width: 80px;
    height: 80px;
    padding: 8px;
  }
  .collection-circle__title {
    font-size: 10px;
  }
}
/* END_SECTION:home_sec_1 */

/* START_SECTION:home_sec_11 (INDEX:57) */
/* Homepage rhythm - 80px between content sections. */
.hs11 {
  padding: 40px 0;
}

.hs11__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-bottom: 50px;
}


.hs11__heading {
  color: var(--black, #212121);
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 56px;
  text-align: center;
  margin: 0;
}

.hs11__social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hs11__avatars {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hs11__avatar {
  border-radius: 9999px;
  object-fit: cover;
}

.hs11__avatar--md {
  width: 40px;
  height: 40px;
}

.hs11__avatar--sm {
  width: 30px;
  height: 30px;
}

.hs11__handle-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #fff;
  border-radius: 9999px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.hs11__handle {
  color: var(--black, #212121);
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
}

/* ── Mobile (< 750px) ─────────────────────────────────────────────
 * Desktop: 100px section padding + 22px handle text. On a 430px iPhone
 * the handle "@supplementsuperstore.com.au" (30 chars at 22px) blows
 * out the pill to ~640px - overflows viewport, looks broken.
 * Cap section padding, shrink the pill + handle text.
 */
@media (max-width: 749px) {
  .hs11 { padding: 20px 0; }
  .hs11__inner { margin-bottom: 22px; gap: 14px; }
  .hs11__avatar--md { width: 32px; height: 32px; }
  .hs11__avatar--sm { width: 24px; height: 24px; }
  .hs11__handle-pill {
    padding: 8px 18px;
    /* Let pill auto-size to content - no max-width constraint that
     * forces wrapping. The handle stays on one line via nowrap. */
    max-width: 100%;
  }
  .hs11__handle {
    /* No wrapping - keeps "@supplementsuperstore.com.au" on a single
     * line. Font shrinks instead. At 12px the 28-char handle is
     * ~155px wide, fits comfortably on a 375px viewport. */
    font-size: 12px;
    white-space: nowrap;
    word-break: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }
}

@media (max-width: 380px) {
  /* On the smallest phones, drop further - at 11px Montserrat 700 the
   * handle is ~140px wide. Pill keeps a comfortable 6/14 padding. */
  .hs11__handle { font-size: 11px; }
  .hs11__handle-pill { padding: 6px 14px; }
}
/* END_SECTION:home_sec_11 */

/* START_SECTION:home_sec_12 (INDEX:58) */
.hs12 {
  background-size: cover;
  background-position: center;
}

.hs12__row {
  display: flex;
  align-items: end;
    gap: 20px;
}

.hs12__col--content {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 40px 0;
}

.hs12__heading {
  color: white;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1em;
  word-wrap: break-word;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.hs12__subheading {
  max-width: 586px;
  color: white;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin: 0;
  line-height: 1.3em;
}

.hs12__benefits-section {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  height: 100%;
}

.hs12__benefits-card {
  align-self: stretch;
  padding: 20px;
  background: linear-gradient(270deg, rgba(248, 190, 0, 0.50) 0%, rgba(215, 2, 1, 0.50) 100%);
  border-radius: 12px;
  backdrop-filter: blur(15px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.hs12__benefits-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hs12__benefits-title {
  color: white;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 28px;
}

.hs12__benefits-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1em;
}

.hs12__benefit-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FEE2E2;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

.hs12__icon {
  display: inline-block;
  flex-shrink: 0;
  object-fit: contain;
}

.hs12__dot {
  display: inline-block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background: #FFD201;
}

.hs12__dot--lg {
  width: 30px;
  height: 30px;
}

.hs12__feature-cards {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: stretch;
}

.hs12__feature-card {
  flex: 1;
  padding: 12px;
  background: linear-gradient(270deg, rgba(248, 190, 0, 0.50) 0%, rgba(215, 2, 1, 0.50) 100%);
  border-radius: 12px;
  backdrop-filter: blur(15px);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.hs12__feature-icon {
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.hs12__feature-text {
  align-self: stretch;
  text-align: center;
  color: #FEE2E2;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin: 0;
  line-height: 1.3em;
}

.hs12__cta {
  width: 100%;
  /* Padding moved onto .hs12__cta-btn so the entire pill (gradient
     background + previously-dead padding) is part of the <a> click
     target. the previous structure only registered
     clicks on the text glyphs. */
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hs12__col--media {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.hs12__cta-btn {
  display: block;
  width: 100%;
  padding: 10px 18px;
  box-sizing: border-box;
  color: white;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * "Become A Supplement Superstore Ambassador" hero - desktop layout
 * is content + media side-by-side, with a 3-up feature-cards row at
 * the bottom (Invitation / Direct comm / Personal tracking dash).
 *
 * On a 430px iPhone the 3 feature cards each get ~120px which makes
 * the third card overflow viewport - that's the "Pers..." cut-off
 * symptom. Plus the 52px heading wraps awkwardly.
 *
 * Fix: stack the row vertically; collapse the 3-card row to a 2x2
 * grid so labels can breathe; then to a 1-column stack below 480px.
 */
@media (max-width: 749px) {
  /* Same treatment as hs16 - suppress the desktop background image
     entirely on mobile (it has decorative floating badges baked in
     that render unreadable at phone widths) and use a clean dark
     backdrop. The model image gets rendered as a real <img> below
     the content via .hs12__col--media for a focused mobile hero. */
  .hs12 {
    background-image: none !important;
    background-color: #15151b;
  }
  .hs12__row {
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
  }
  .hs12__col--content {
    width: 100%;
    padding: 24px 0;
  }
  .hs12__col--media {
    width: 100%;
    /* Bring the model image back - previously hidden because the
       desktop bg was bleeding through and showed a duplicate. Now
       that the bg is suppressed, this becomes the mobile hero
       image. Capped height + object-fit: contain to keep the
       model's head visible (no top-cropping). */
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 420px;
    overflow: hidden;
    margin-top: 4px;
  }
  .hs12__media-img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    display: block;
  }
  .hs12__heading {
    font-size: 32px;
    line-height: 1.05em;
    margin-bottom: 10px !important;
  }
  .hs12__subheading {
    font-size: 14px;
    line-height: 1.45em;
    max-width: 100%;
  }
  .hs12__benefits-card {
    padding: 16px;
  }
  .hs12__benefits-title { font-size: 16px; line-height: 22px; }
  .hs12__benefit-item { font-size: 14px; }
  .hs12__benefits-list { gap: 14px; }
  /* Feature cards: 2x2 grid instead of 3-across */
  .hs12__feature-cards {
    flex-wrap: wrap;
    gap: 10px;
  }
  .hs12__feature-card {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    padding: 12px 10px;
  }
  .hs12__feature-text { font-size: 12px; line-height: 1.3em; }
  .hs12__feature-icon { width: 32px; height: 32px; }

  .hs12__cta {
    min-height: 48px;
    text-align: center;
    justify-content: center;
  }
  .hs12__cta-btn {
    font-size: 14px;
    padding: 14px 18px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hs12__heading { font-size: 28px; }
  /* Below 480px, even 2x2 is cramped - full single column */
  .hs12__feature-card {
    flex: 1 1 100%;
  }
}
/* END_SECTION:home_sec_12 */

/* START_SECTION:home_sec_13 (INDEX:59) */
/* Homepage rhythm - 80px between content sections. Was 100px on
 * each side (200px gap to neighbours, too generous). */
.hs13-section {
  padding: 80px 0;
}

.hs13-header {
  text-align: center;
  margin-bottom: 40px;
}

.hs13-heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  color: #212121;
  text-transform: capitalize;
  line-height: 1.1;
  margin: 0;
}

.hs13-panel {
  display: block;
}

.hs13-slider {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hs13-track-wrapper {
  flex: 1;
  overflow: hidden;
}

.hs13-track {
  display: flex;
  align-items: stretch;
  gap: 20px;
  transition: transform 0.3s ease;
}

.hs13-card-wrap {
    flex: 0 0 calc((100% - (var(--slides-to-show, 5) - 1) * 20px) / var(--slides-to-show, 5));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 10px rgba(92, 96, 106, 0.2);
    padding: 20px 10px;
}

.hs13-card {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.hs13-card__image-wrap {
  position: relative;
  margin-bottom: 12px;
}

.hs13-card__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  aspect-ratio: 234 / 191;
}

.hs13-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(215, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.hs13-badge__text {
  color: #fff;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 8px;
  text-align: center;
  line-height: 1.3;
}

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

.hs13-card__vendor,
.hs13-card__sku {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #7c7c7c;
  margin: 0;
}

.hs13-card__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #212121;
  margin: 0;
}

.hs13-stars {
  color: #ffd201;
  font-size: 18px;
  letter-spacing: 2px;
}

.hs13-card__stock {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #D70000;
  margin: 0;
}

.hs13-card__price {
  margin-top: auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #D70000;
  margin-bottom: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Was/Now pricing on the Popular Products On Sale carousel.
 * `compare_at_price_max` renders as a strikethrough grey "was"
 * value; `product.price` renders as the bold red "now" value so
 * shoppers see the saving at a glance. */
.hs13-card__price-was {
  color: #7c7c7c;
  font-weight: 500;
  text-decoration: line-through;
  font-size: 15px;
}

.hs13-card__price-now {
  color: #D70000;
  font-weight: 700;
}

.hs13-quick-buy {
  font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #fff;
    line-height: 1em;
    padding: 10px 10px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all ease .3s;
}

.hs13-quick-buy:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* opens the variant-picker sheet, combined selector so the gradient always wins.
   width:auto too, or it stretched full width while the plain-button fallback stayed small */
button.hs13-quick-buy.quick-buy-sheet-trigger {
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  color: #fff;
  border: none;
  padding: 10px 10px;
  font-size: 18px;
  width: auto;
}

.hs13-quick-buy--soldout {
  background: #9a9a9a;
  cursor: default;
}

.hs13-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f0f0f054;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: background .2s ease;
    z-index: 10;
    position: absolute;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 30px;
}

button.hs13-arrow.hs13-arrow--prev {
    left: -30px;
}

button.hs13-arrow.hs13-arrow--next {
    right: -30px;
}

.hs13-panels {
    position: relative;
}

.hs13-arrow:hover {
  background: #f0f0f0;
}

.hs13-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * "You Might Also Like" / related products slider. Section padding
 * 100px desktop → tighten on mobile. Heading 52px capped via the
 * safety-net brand-heading rule but we add a section-specific one
 * for finer control.
 */
@media (max-width: 749px) {
  /* bottom padding bumped from 20px for clearer separation from the giveaway section below */
  .hs13-section { padding: 40px 0; }
  .hs13-header { margin-bottom: 22px; }
  .hs13-heading {
    font-size: 26px;
    line-height: 1.1;
  }

  /* dropped the forced full width, was making the two button paths mismatch on mobile */
  .hs13-quick-buy {
    box-sizing: border-box;
    padding: 12px 16px;
    text-align: center;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .hs13-heading { font-size: 24px; }
}
/* END_SECTION:home_sec_13 */

/* START_SECTION:home_sec_14 (INDEX:60) */
.hs14 {
  width: 100%;
}

.hs14_row {
  display: flex;
}

.hs14_col {
  display: flex;
  align-items: flex-start;
}

.hs14_col1 {
  width: 60%;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background-size: cover;
  background-position: center;
}

.hs14_col2 {
  width: 40%;
}

.hs14_content {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

.hs14_heading {
  width: 720px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--black, #212121);
  font-size: 44px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 56px;
  word-wrap: break-word;
  margin: 0;
}

.hs14_subheading {
  color: var(--black, #212121);
  font-size: 22px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  word-wrap: break-word;
  margin: 0;
}

.hs14_btn_wrap {
    width: 100%;
}

/* .hs14_btn_wrap>a {
  padding: 10px 18px;
  background: var(--1, #FFD201);
  border-radius: 4px;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
} */

.hs14_btn {
      display: inline-flex;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(13px, 1.25vw, 18px);
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    align-self: flex-start;
    transition: opacity 0.2s;
}

.hs14_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hs14_col1>* {
    max-width: 749px;
    margin: 0 auto;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 60/40 row with a fixed-width 720px heading on the left
 * and an image on the right. On a 430px iPhone the 720px heading
 * naturally overflows; the row should stack content above image
 * with the heading shrunk to fit.
 */
@media (max-width: 749px) {
  .hs14_row {
    flex-direction: column;
  }
  .hs14_col1,
  .hs14_col2 {
    width: 100%;
  }
  .hs14_col1 {
    /* Suppress the bg-image (group photo of people standing) - at phone
       widths it competes with the heading text and looked muddy even
       with the `contain` treatment. The 3-portrait side image in col2
       below carries the visual story instead. Solid dark background
       makes the heading + subheading + CTA pop cleanly. */
    background-image: none !important;
    background-color: #f0f0f0;
    /* min-height removed - column grows with content naturally. */
    /* 0 top (per design review — Thomas) so the content sits flush to the
     * column's top edge on mobile; 20px on the other three sides. */
    padding: 0 20px 20px;
    order: 1;
    /* Center the inner content block - without this `align-items:
     * flex-start` (inherited from desktop) keeps the heading +
     * subheading + button left-aligned in their column. */
    align-items: center;
    text-align: center;
  }
  .hs14_col2 {
    order: 2;
  }
  .hs14_col1 > * {
    max-width: 100%;
  }
  .hs14_content {
    align-items: center;
    text-align: center;
  }
  .hs14_btn_wrap {
    display: flex;
    justify-content: center;
  }
  .hs14_heading {
    width: 100%;
    font-size: 32px;
    line-height: 1.1em;
  }
  .hs14_subheading {
    font-size: 16px;
  }
  .hs14_btn {
    /* Don't stretch full-width - keep it pill-shaped + centered.
     * Original `align-self: stretch` was making the CTA look like a
     * giant bar. Centering with auto width reads as a clear CTA. */
    align-self: center;
    padding: 14px 24px;
    min-height: 48px;
    width: auto;
    max-width: 90%;
  }
  .hs14_img {
    /* Cap side image height so the 3-portrait composite doesn't
     * dominate the screen below the CTA. */
    max-height: 320px;
    width: 100%;
    object-fit: cover;
  }
}

@media (max-width: 480px) {
  .hs14_heading { font-size: 26px; }
  /* min-height removed - content drives the column height naturally
   * so cards don't have empty vertical space at small viewports. */
  .hs14_img { max-height: 260px; }
}
/* END_SECTION:home_sec_14 */

/* START_SECTION:home_sec_15 (INDEX:61) */
/* Homepage rhythm - 80px between content sections. */
.hs15-section {
    padding: 80px 0;
    overflow: hidden;
}
@media (max-width: 749px) {
    /* Bumped from 20px → 40px because this section sits adjacent to
     * a banner - extra breathing room keeps it from crowding the banner. */
    .hs15-section { padding: 40px 0; }
}

.hs15-header {
    text-align: center;
    margin-bottom: 40px;
}

.hs15-heading {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 52px;
    font-weight: 400;
    color: #212121;
    text-transform: capitalize;
    line-height: 1.1;
    margin: 0;
}

.hs15-slider-wrap {
    overflow: hidden;
}

.hs15-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    /* No internal padding - spaceBetween: 24 in Swiper already
       provides all the gap between slides. Removing the 24px left+right
       padding here prevents the double-spacing effect that was making
       some logos look like they had huge gaps around them. */
    padding: 0;
}

.hs15-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hs15-logo-img {
    max-width: 150px;
    height: 80px;
    object-fit: contain;
}

@media (max-width: 749px) {
    .hs15-heading {
        font-size: 36px;
    }
    .hs15-logo-img {
        max-width: 110px;
        height: 60px;
    }
}
/* END_SECTION:home_sec_15 */

/* START_SECTION:home_sec_16 (INDEX:62) */
/* ───────────────────────────────────────────────────────────────────
 * Section root - full composited banner background.
 *
 * Image is 1440 × 600 (aspect-ratio 2.4:1). Section's aspect-ratio
 * is locked to match so `background-size: cover` fits exactly with
 * zero cropping. Black bg-color is a fallback for any rendering
 * edge case (e.g. fetch failure on the banner).
 * ───────────────────────────────────────────────────────────────── */
.hs16 {
  width: 100%;
  /* Matches the new banner's native 1440 × 500 = 2.88:1 - no
   * cropping at any viewport. */
  aspect-ratio: 1440 / 500;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
}

.hs16__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* ── Content (left ~40% of the banner - the empty dark space) ────── */
.hs16__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 44%;
}

.hs16__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hs16__heading {
  color: #fff;
  font-size: clamp(28px, 3.2vw, 48px);
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1.05;
  margin: 0;
}

.hs16__subheading {
  color: #fff;
  font-size: clamp(13px, 1.1vw, 16px);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.hs16__description {
  color: #fff;
  font-size: clamp(12px, 0.95vw, 14px);
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  opacity: 0.92;
}

.hs16__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 4px;
  color: #fff;
  font-size: clamp(13px, 1vw, 15px);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.02em;
  min-height: 44px;
  margin-top: 4px;
}

/* ───────────────────────────────────────────────────────────────────
 * Tablet / mobile (≤ 1024px) - drop the aspect-ratio so the banner
 * doesn't squash content into an unreadable narrow column. Image
 * stays as cover; content stacks naturally with breathing room.
 * ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hs16 {
    aspect-ratio: auto;
    min-height: 0;
    padding: 36px 0;
    background-color: #000;
    background-image: none !important;  /* hide composite - too dense on narrow viewports */
  }
  .hs16__content {
    max-width: 100%;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  .hs16__cta-btn {
    width: 100%;
    padding: 14px 18px;
  }
}

@media (max-width: 600px) {
  .hs16__heading {
    font-size: 26px;
  }
}
/* END_SECTION:home_sec_16 */

/* START_SECTION:home_sec_17 (INDEX:63) */
/* Homepage rhythm - 80px between content sections. */
.hs17-section {
    padding: 80px 0;
}
@media (max-width: 749px) {
    .hs17-section { padding: 20px 0; }
}

.hs17-heading {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 52px;
    font-weight: 400;
    color: #212121;
    text-transform: capitalize;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

.linkedin_follow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 50px;
    justify-content: center;
}

.linkedin_follow p {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0;
    color: #212121;
}

.hs17-carousel {
    position: relative;
}

/* same swipe carousel at every size now, just 1/2/3 cards per view */
.hs17_blogs_wrap {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 16px;
    gap: 16px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.hs17_blogs_wrap::-webkit-scrollbar {
    display: none;
}

.hs17-blog-card {
    width: 100%;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #F3F3F3;
    scroll-snap-align: start;
}
/* fixed peek widths, not "N cards exactly" - next card always shows a sliver at the edge */
@media (max-width: 749px) {
    .hs17-blog-card { flex: 0 0 85%; }
}
@media (min-width: 750px) and (max-width: 989px) {
    .hs17-blog-card { flex: 0 0 45%; }
}
@media (min-width: 990px) {
    .hs17-blog-card { flex: 0 0 30%; }
}

.hs17-blog-card__image-wrap {
    width: 100%;
    aspect-ratio: 441 / 266;
    overflow: hidden;
    position: relative;
    background: rgba(35, 34, 34, 0.10);
}

.hs17-blog-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hs17-blog-card__image-placeholder {
    width: 100%;
    height: 100%;
    background: #ddd;
}

.hs17-blog-card__badge {
    display: inline-block;
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #E8590C;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* flex:1 so read-more sticks to the bottom instead of trailing the excerpt */
.hs17-blog-card__body {
    padding: 17px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.hs17-blog-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* !important - mobile-safety-net's heading clamp still wins without it, checked. */
.hs17-blog-card .hs17-blog-card__title {
    width: auto;
    color: #212121;
    font-size: 16px !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    word-wrap: break-word;
    text-decoration: none;
}

.hs17-blog-card__title:hover {
    text-decoration: underline;
}

.hs17-blog-card__date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #212121;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
}

.hs17-blog-card__date-icon {
    display: inline-block;
    flex-shrink: 0;
    color: #E8590C;
}

/* divider so meta and excerpt don't butt straight into each other */
.hs17-blog-card__excerpt {
    color: #212121;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    margin: 0;
    word-wrap: break-word;
    padding-top: 12px;
    border-top: 1px solid #e2e2e2;
}

.hs17-blog-card__readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
}
/* gradient text, same trick as everywhere else: gradient bg + clip to text */
.hs17-blog-card__readmore-text {
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hs17-blog-card__readmore:hover .hs17-blog-card__readmore-text {
    text-decoration: underline;
    text-decoration-color: #D70000;
}
/* arrow's a stroke not text, can't clip it, so just solid red instead */
.hs17-blog-card__readmore svg {
    color: #D70000;
    transition: transform 0.15s ease;
}
.hs17-blog-card__readmore:hover svg {
    transform: translateX(2px);
}

.hs17-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 160px; /* JS moves this near the image's bottom edge once cards render, this is just the pre-JS fallback */
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 12px;
    color: #212121;
    filter: drop-shadow(0 1px 4px rgba(255, 255, 255, 0.85));
    cursor: pointer;
    z-index: 2;
}
.hs17-arrow svg { width: 20px; height: 20px; display: block; }
.hs17-arrow--prev { left: 2px; }
.hs17-arrow--next { right: 2px; }
.hs17-arrow[disabled] {
    opacity: 0.35;
    cursor: default;
}

/* desktop: arrows sit outside the card row instead of overlaying the image -
   in-flow flex columns, not a negative offset, since page-width caps at
   1330px and plenty of real desktop widths (990-1329px) have no gutter to push into */
@media (min-width: 990px) {
    .hs17-carousel {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .hs17-arrow {
        position: static;
        transform: none;
        flex-shrink: 0;
    }
    .hs17_blogs_wrap {
        flex: 1;
        min-width: 0;
    }
}

.hs17-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}
.hs17-dot {
    width: 8px;
    height: 8px;
    /* min-height so the sitewide 44px tap-target rule can't stretch this into a pill */
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: #ddd;
    cursor: pointer;
}
.hs17-dot.is-active {
    background: #E8590C;
}
/* END_SECTION:home_sec_17 */

/* START_SECTION:home_sec_18 (INDEX:64) */
.hs18-section {
    padding-bottom: 50px;
    padding-top: 50px;
    background-color: #212121;
}

.hs18-paragraph {
    font-size: 12px;
    max-width: 868px;
    margin: 0 auto 50px auto;
    color: #fff;
    text-align: center;
    line-height: 1.5em;
}

.logo_wrapper img {
    margin: 0 auto 15px auto;
    display: block;
}

.payment_wrapper img {
    margin: 0 auto 50px auto;
    display: block;
}

.hs18-follow-head {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 30px;
    color: #fff;
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
}

.social_icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social_icon_link img,
.social_icon_link--svg svg {
    display: block;
    transition: opacity 0.2s ease;
}

.social_icon_link:hover img,
.social_icon_link--svg:hover svg {
    opacity: 0.75;
}

@media (max-width: 749px) {
  .hs18-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .hs18-paragraph {
    margin-bottom: 24px;
    font-size: 12px;
    padding: 0 16px;
  }
  .payment_wrapper img {
    margin-bottom: 24px;
    max-width: 280px;
  }
  .hs18-follow-head {
    font-size: 18px;
    margin-bottom: 18px;
  }
  .social_icons { gap: 14px; flex-wrap: wrap; }
  .social_icon_link img { max-width: 32px; }
}
/* END_SECTION:home_sec_18 */

/* START_SECTION:home_sec_19 (INDEX:65) */
.hs19 {
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
  }

  .hs19__background,
  .hs19__overlay {
    position: absolute;
    inset: 0;
  }

  .hs19__background-image {
    width: 100%;
    height: 100%;
    min-height: 600px;
    display: block;
    object-fit: cover;
  }

  .hs19__overlay {
    background: linear-gradient(90deg, #000 17%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
  }

  .hs19__container {
    position: relative;
    z-index: 1;
  }

  .hs19__content {
    min-height: 600px;
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
  }

  .hs19__text-wrap {
    width: 100%;
    max-width: 754px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .hs19__text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hs19__heading {
    margin: 0;
    color: #fff;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 56px;
    text-transform: capitalize;
  }

  .hs19__description,
  .hs19__description p {
    margin: 0;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
  }

  .hs19__button {
    min-width: 240px;
    padding: 16px 32px;
    border-radius: 8px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, #ffd201 0%, #ff6b00 50%, #d70000 100%);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow:
      0 10px 24px rgba(215, 0, 0, 0.35),
      inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .hs19__button:hover {
    transform: translateY(-2px);
    box-shadow:
      0 14px 30px rgba(215, 0, 0, 0.5),
      inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    color: #fff;
  }
  .hs19__button:active {
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .hs19__button { transition: none; }
  }

  .hs19__cards {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 15px;
    flex-wrap: wrap;
  }

  .hs19__card {
    flex: 1 1 calc(25% - 12px);
    padding: 10px 35px 10px 10px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #212121;
  }

  /* When the card renders as <a> (block.settings.link is set, or
     it's the featured card defaulting to /pages/never-run-out),
     the browser applies its default link styling:
       - text-decoration: underline
       - color: defaults to #0000EE / #551A8B (visited) - read as
         "purple lines" through the white text overlay.
     Suppress both so the card-as-link reads as a button, not a
     hyperlink. White text + brand backgrounds are already on the
     children - we just need to neutralise the anchor defaults. */
  .hs19__card--link,
  .hs19__card--link:link,
  .hs19__card--link:visited,
  .hs19__card--link:hover,
  .hs19__card--link:focus,
  .hs19__card--link:active {
    text-decoration: none;
    color: inherit;
  }
  .hs19__card--link * {
    text-decoration: none;
  }

  .hs19__card-inner {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }

  .hs19__icon {
    width: 32%;
    max-width: 100px;
    flex: 0 0 32%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hs19__icon-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .hs19__card-title {
    flex: 1 1 0;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
  }

  .hs19__card--featured {
    flex: 1 1 calc(25% - 12px);
    padding: 15px;
    background: linear-gradient(270deg, #d70000 0%, #ffd201 100%);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
  }

  .hs19__card-featured-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .hs19__badge {
    width: 24%;
    max-width: 87px;
    flex: 0 0 24%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hs19__badge-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .hs19__featured-icon {
    width: 28%;
    max-width: 100px;
    flex: 0 0 28%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hs19__featured-icon-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .hs19__featured-title {
    flex: 1 1 0;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .hs19__card:nth-child(2) .hs19__card-inner, 
    .hs19__card:nth-child(3) .hs19__card-inner {
        flex-direction: column;
    }

    .hs19__card:nth-child(2) .hs19__card-inner .hs19__icon, 
    .hs19__card:nth-child(3) .hs19__card-inner .hs19__icon {
        width: auto;
    }

  @media screen and (max-width: 1399px) {
    .hs19__cards {
      justify-content: flex-start;
    }

    .hs19__card,
    .hs19__card--featured {
      flex-basis: calc(50% - 8px);
    }
  }

  @media screen and (max-width: 990px) {
    .hs19__content {
      min-height: auto;
      gap: 35px;
    }

    .hs19__heading {
      font-size: 42px;
      line-height: 46px;
    }
  }

  @media screen and (max-width: 749px) {
    .hs19__content {
      padding-top: 40px;
      padding-bottom: 40px;
    }

    .hs19__text-wrap {
      gap: 24px;
    }

    .hs19__heading {
      font-size: 34px;
      line-height: 38px;
    }

    .hs19__description,
    .hs19__description p,
    .hs19__card-title {
      font-size: 16px;
    }

    .hs19__button {
      min-width: 100%;
    }

    .hs19__card,
    .hs19__card--featured {
      flex-basis: 100%;
      padding: 16px 20px;
    }

    .hs19__card-inner,
    .hs19__card-featured-inner {
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
    }

    .hs19__featured-title {
      flex-basis: 100%;
      font-size: 20px;
    }
  }

  /* Phone (theme breakpoint). The 767px rule above stacks each card
     full-width and wraps the inner row, so the icon sits on its own
     line. Cards 2 & 3 additionally inherit `flex-direction: column`
     + `width: auto` on the icon from the desktop nth-child rule, so
     the icon image renders at its natural width (~200px) - each card
     ends up roughly a full screen tall. Constrain the icon, keep the
     icon + title on one compact horizontal row, and tighten padding
     so each card is a sensible compact height. */
  @media screen and (max-width: 749px) {
    .hs19__card,
    .hs19__card--featured {
      padding: 12px 14px;
    }

    .hs19__card-inner,
    .hs19__card-featured-inner {
      flex-wrap: nowrap;
      flex-direction: row;
      justify-content: flex-start;
      text-align: left;
      gap: 12px;
    }

    .hs19__icon,
    .hs19__card:nth-child(2) .hs19__card-inner .hs19__icon,
    .hs19__card:nth-child(3) .hs19__card-inner .hs19__icon,
    .hs19__featured-icon {
      width: 56px;
      max-width: 56px;
      flex: 0 0 56px;
    }

    .hs19__badge {
      width: 48px;
      max-width: 48px;
      flex: 0 0 48px;
    }

    .hs19__card-title,
    .hs19__description,
    .hs19__description p {
      font-size: 14px;
    }

    .hs19__featured-title {
      flex-basis: auto;
      font-size: 16px;
    }
  }
/* END_SECTION:home_sec_19 */

/* START_SECTION:home_sec_2 (INDEX:66) */
/* Homepage section rhythm - 80px between content sections
 * (40px contributed each side). Banners stay full-bleed (0). */
.hs2-section {
    padding: 40px 0;
}
@media (max-width: 749px) {
    .hs2-section { padding: 20px 0; }
}

.hs2-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  min-height: 448px;
  padding: 105px 80px;
  box-sizing: border-box;
  background-color: #111;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
  margin-bottom: 20px;
}

.hs2-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 1;
  max-width: 420px;
}

.hs2-brand-logo {
  display: flex;
  align-items: center;
}

.hs2-brand-logo img {
  height: 65px;
  width: auto;
  object-fit: contain;
}

.hs2-product-title {
  font-size: 80px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
  color: #FFD001;
}

.hs2-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.4;
}

.hs2-btn,
.hs2-card__btn {
    align-self: flex-start;
    display: inline-block;
    margin-top: 1.39vw;
    padding: 0.69vw 1.25vw;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 0.35vw;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25vw;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
}

.hs2-product-image {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 1;
  pointer-events: none;
  width: 60%;
}

.hs2-product-image img {
  height: 100%;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom right;
  display: block;
}

.sec1-btn-wrapper {
  text-align: center;
  width: 100%;
}

/* Promo Cards Row */
.hs2-cards-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

.hs2-card {
  flex: 1;
  min-height: 334px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #E4E4E4;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  box-sizing: border-box;
  position: relative;
}

.hs2-card--has-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 50%);
}

.hs2-card__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 51px 30px 30px;
  box-sizing: border-box;
  z-index: 1;
}

.hs2-card__media {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px 2px 0 0;
}

.hs2-card__title {
  font-size: 52px;
  line-height: 46px;
  font-weight: 400;
  margin: 0;
  color: #fff;
  text-transform: capitalize;
}

.hs2-card__desc {
  font-size: 14px;
  line-height: 17px;
  font-weight: 300;
  color: #fff;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

/* .hs2-card__btn {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    display: inline-flex;
} */

.hs2-card__product-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
}

.hs2-card__product-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom right;
  display: block;
}

.hs2-card__desc strong {
    font-weight: 700;
}

@media (max-width: 749px) {
  .hs2-cards-row {
    flex-direction: column;
  }

  .hs2-card {
    min-height: 0;
  }

  /* Mobile re-layout:
       +----------------+
       | Title          |
       +--------+-------+
       | Desc   | Image |  (desc left, image right, vertically aligned)
       +--------+-------+
       | SHOP NOW       |  (button stretches full card width)
       +----------------+

     Done with CSS grid areas. The existing markup has title+desc+button
     wrapped inside `.hs2-card__content` (which sits as one grid column
     alongside `.hs2-card__media`). `display: contents` on the wrapper
     unwraps it - its children become direct grid items of the card and
     can be placed independently via grid-area.
  */
  .hs2-card--has-image {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 42%);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "title  title"
      "desc   image"
      "btn    btn";
    gap: 14px 18px;
    padding: 28px 22px;
  }
  .hs2-card--has-image .hs2-card__content {
    display: contents;
  }
  .hs2-card--has-image .hs2-card__title {
    grid-area: title;
    margin: 0;
    font-size: 52px;
    line-height: 48px;
  }
  .hs2-card--has-image .hs2-card__desc {
    grid-area: desc;
    margin: 0;
    align-self: center;
    font-size: 18px;
    line-height: 25px;
  }
  .hs2-card--has-image .hs2-card__btn {
    grid-area: btn;
    align-self: stretch;
    /* Full-width button */
    width: 100%;
    max-width: 100%;
  }
  .hs2-card--has-image .hs2-card__media {
    grid-area: image;
    padding: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hs2-card--has-image .hs2-card__product-image {
    align-items: center;
    justify-content: center;
  }
  .hs2-card--has-image .hs2-card__product-image img {
    object-position: center;
  }

  /* Fallback for cards WITHOUT image: keep the existing stacked layout */
  .hs2-card:not(.hs2-card--has-image) .hs2-card__title {
    font-size: 52px;
    line-height: 48px;
  }
  .hs2-card:not(.hs2-card--has-image) .hs2-card__desc {
    font-size: 18px;
    line-height: 25px;
  }
}

@media (max-width: 480px) {
  .hs2-card--has-image {
    grid-template-columns: minmax(0, 1fr) minmax(110px, 38%);
    gap: 12px 14px;
    padding: 24px 18px;
  }
  .hs2-card--has-image .hs2-card__title {
    font-size: 38px;
    line-height: 36px;
  }
  .hs2-card--has-image .hs2-card__desc {
    font-size: 15px;
    line-height: 21px;
  }
  .hs2-card:not(.hs2-card--has-image) .hs2-card__title {
    font-size: 38px;
    line-height: 36px;
  }
  .hs2-card:not(.hs2-card--has-image) .hs2-card__desc {
    font-size: 15px;
    line-height: 21px;
  }
  .hs2-card:not(.hs2-card--has-image) .hs2-card__content {
    padding: 28px 20px 24px;
    gap: 16px;
  }
}

/* ── Button mobile sizing override ─────────────────────
 * `.hs2-btn` and `.hs2-card__btn` both size in vw on desktop
 * (font-size 1.25vw, padding 0.69vw 1.25vw, margin-top 1.39vw). On a
 * 360px phone that evaluates to ~4-5px - the SHOP NOW button is
 * unreadable and barely tappable. Lock to px below the tablet
 * breakpoint so the button is legibly sized and meets the 44px
 * minimum tap target. */
@media (max-width: 749px) {
  .hs2-btn,
  .hs2-card__btn {
    margin-top: 18px;
    padding: 16px 28px;
    border-radius: 8px;
    font-size: 17px;
    letter-spacing: 0.06em;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 749px) {
  .hs2-banner {
    flex-direction: column;
    align-items: flex-start;
    /* Extra bottom padding to make room for BOTH the product image AND
       the now-absolute-positioned full-width SHOP NOW button under it. */
    padding: 48px 24px 110px;
    position: relative;
  }

  /* Larger brand mark on mobile - desktop is 65px which feels tiny
     in a phone hero. Bump to 88px for proper impact. */
  .hs2-brand-logo img {
    height: 88px;
  }

  /* Bigger OXYSHRED headline (was 36px) and bigger subtitle (desktop
     16px was inherited unchanged on mobile). */
  .hs2-product-title {
    font-size: 52px;
    line-height: 1;
  }

  .hs2-subtitle {
    font-size: 20px;
    line-height: 1.35;
  }

  /* Lift the product-image well clear of the bottom button + bump
     its height so the bottles read prominently in the hero. Also
     pulled in from the right edge so the bottles centre under the
     headline instead of being shoved off-screen. */
  .hs2-product-image {
    height: 48%;
    right: 8%;
    bottom: 140px;
  }

  .hs2-product-image img {
    max-width: 100%;
    height: 100%;
  }

  /* Pull the button out of the .hs2-content stack and pin it to the
     very bottom of the banner full-width - matches the cards below
     it which now have full-width buttons too. */
  .hs2-banner .sec1-btn-wrapper {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    width: auto;
    margin: 0;
    z-index: 2;
  }
  .hs2-banner .hs2-btn {
    width: 100%;
    box-sizing: border-box;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hs2-banner {
    padding: 40px 24px 200px;
  }

  .hs2-brand-logo img {
    height: 72px;
  }

  .hs2-product-title {
    font-size: 44px;
    line-height: 1;
  }

  .hs2-subtitle {
    font-size: 17px;
    line-height: 1.35;
  }

  .hs2-product-image {
    height: 40%;
  }
}
/* END_SECTION:home_sec_2 */

/* START_SECTION:home_sec_3 (INDEX:67) */
/* Homepage rhythm - 80px between content sections. */
.hs3-section {
  padding: 40px 0;
  padding-bottom: 80px;
}
@media (max-width: 749px) {
  .hs3-section { padding: 20px 0; }
}

.hs3-heading {
  font-size: 52px;
  line-height: 56px;
  font-weight: 400;
  color: #212121;
  text-align: center;
  margin: 0 0 40px;
  text-transform: capitalize;
}

.hs3-list-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}

.hs3-list {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  padding: 0 10px;
}

.hs3-list::-webkit-scrollbar {
  display: none;
}

.hs3-card {
    position: relative;
    flex: 0 0 254px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease;
}

/* Gradient background */
.hs3-card__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: var(--hs3-bg, none);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    display: block !important;
}

/* Bottom orange fade overlay */
.hs3-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(242,79,0,0) 86%, #f24f00 99%);
  z-index: 2;
  pointer-events: none;
}

.hs3-card__product {
    position: relative !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: 70px 20px 15px;
    box-sizing: border-box;
}

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

.hs3-card__label {
    position: relative;
    z-index: 3;
    color: #fff;
    font-size: 39px;
    line-height: normal;
    text-align: center;
    text-transform: capitalize;
    padding-bottom: 0px;
    width: 100%;
}

/* Nav arrows */
.hs3-arrow {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(240, 240, 240, 0.33);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: background 0.2s ease;
  /* Bumped from z-index: 10 → 20 so the arrows sit above any
   * swiper slide / overlay content that may otherwise occlude them. */
  position: relative;
  z-index: 20;
}

.hs3-arrow:hover {
  background: rgba(240, 240, 240, 0.6);
}

.hs3-arrow svg {
  width: 28px;
  height: 28px;
}

button.hs3-arrow {
    position: absolute;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

button.hs3-arrow.hs3-arrow--prev {
    left: -30px;
}

button.hs3-arrow.hs3-arrow--next {
    right: -30px;
}

@media (max-width: 749px) {
  .hs3-heading {
    font-size: 36px;
    line-height: 40px;
    margin-bottom: 20px;
  }

  /* Fixed 200px width left the card stranded inside its (wider) slide
     on phones when slides_mobile=1. Let the card fill 100% of its
     swiper-slide so it scales with viewport, and let aspect-ratio
     control height. Honours whatever slides_mobile is set to in
     index.json (now 2). */
  .hs3-card {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    /* Squarer than 4/5 - leaves more room for the product image
       without making the card feel "tall and skinny". */
    aspect-ratio: 1 / 1.05;
  }

  /* Why the image was cropped at the top:
     `.hs3-card__product img` is set to `width: 100%; height: 100%` in
     the desktop CSS. On mobile the card has `aspect-ratio: 1 / 1.05`
     and uses `flex-direction: column; justify-content: flex-end` - but
     the product container has no defined height, so `height: 100%` on
     the img resolves to its INTRINSIC height (the bottle's natural
     ~600px). The huge image gets pushed down by `flex-end`, and the
     card's `overflow: hidden` clips the top half.

     Fix: give the product container `flex: 1; min-height: 0;
     overflow: hidden` so it claims the remaining card space and
     clips its own overflow; constrain the image with
     `max-width/max-height: 100%` + `width/height: auto` so
     `object-fit: contain` has a real bounding box to fit inside. */
  .hs3-card__product {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 12px 14px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hs3-card__product img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* Label was 30px which made two-word labels ("Pre-Workout",
     "Fat Burn") wrap or hyphenate, with the orange overlay fade
     cutting through the broken word.
     `clamp(14px, 4.5vw, 22px)` scales the label with viewport width:
       - 320px (iPhone SE): 14px (single-line for "Pre-Workout")
       - 375px (iPhone 14): 17px
       - 480px+ (tablet):   capped at 22px
     `hyphens: none` + `word-break: keep-all` prevents the browser
     from splitting "Pre-Workout" mid-word. */
  .hs3-card__label {
    font-size: clamp(14px, 4.5vw, 22px);
    line-height: 1.1;
    padding: 0 8px 6px;
    box-sizing: border-box;
    hyphens: none;
    word-break: keep-all;
  }

  .hs3-arrow {
    display: none;
  }

  /* Single-card edge case: when only one collection block is added,
   * Swiper sets translate3d(0) on the wrapper and the slide sits
   * left-aligned with massive empty space on the right. Detect via
   * :only-child + override Swiper's flex layout to center. */
  .hs3-list .swiper-wrapper:has(.swiper-slide:only-child) {
    justify-content: center !important;
    transform: none !important;
  }
  .hs3-list .swiper-slide:only-child {
    margin: 0 auto;
  }
}
/* END_SECTION:home_sec_3 */

/* START_SECTION:home_sec_4 (INDEX:68) */
/* Trust ribbon - slim full-bleed strip. Tight 12px margin so it
 * reads as a divider between content sections without competing
 * for vertical space. */
.hs4-section {
    background: linear-gradient(90deg, var(--4, #D70000) 0%, #FFD201 100%);
    padding: 0 20px;
    overflow: hidden;
}
/* (Mobile overrides for .hs4-section live in the consolidated
   @media block further down - keeping them in one place so two
   conflicting rules don't fight over margin values.) */

.hs4-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: max-content;
    animation: hs4-marquee 30s linear infinite;
    will-change: transform;
}

.hs4-col {
    display: flex;
    margin: 22px 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    flex: 0 0 25vw;
    width: 25vw;
    min-width: 280px;
    /* border-right removed - dividers are now their own .hs4-divider
       elements so their position is locked by their own 1px box and
       not dependent on each col's intrinsic content width. */
}

/* Slim vertical separator between cols. Fixed 1px wide; height
   set in vw/px so it scales sensibly. flex-shrink: 0 prevents the
   marquee animation from squashing it. */
.hs4-divider {
    flex: 0 0 1px;
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.55);
    align-self: center;
}

.hs4-col-inner {
    padding: 0 0px;
}

.hs4-title {
    margin: 0;
    text-align: center;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

.hs4-section .page-width {
    max-width: 1600px;
}

@keyframes hs4-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (max-width: 990px) {
    .hs4-col {
        flex-basis: 33.3333vw;
        width: 33.3333vw;
        min-width: 240px;
    }
}

@media (max-width: 749px) {
    .hs4-section {
        /* Vertical spacing lives on MARGIN (not padding) so the
           marquee strip inside bleeds to the section edges. Horizontal
           12px stays as padding for breathing room from viewport edges.
           Section margin tightened 20px to 10px so the ribbon reads as
           a slim divider between sections, not a chunky standalone band. */
        padding: 0 12px;
        margin: 10px 0;
    }

    .hs4-col {
        flex-basis: 70vw;
        width: 70vw;
        min-width: 220px;
        /* Column inner margin tightened 18px to 10px so the ribbon
           strip itself is shorter on mobile. */
        margin: 10px 0;
    }

    .hs4-divider {
        height: 18px;
    }

    .hs4-title {
        font-size: 14px;
    }
}
/* END_SECTION:home_sec_4 */

/* START_SECTION:home_sec_5 (INDEX:69) */
/* Homepage rhythm - 80px between content sections. */
.hs5-section {
  padding: 80px 0;
}

.hs5-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.hs5-heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  color: #212121;
  text-transform: capitalize;
  line-height: 1.1;
  margin: 0;
}

.hs5-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hs5-tab {
  padding: 8px 16px;
  border-radius: 9999px;
  border: none;
  background: #fff;
  color: #212121;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.hs5-tab.is-active {
  background: #FFD201;
}

.hs5-panel {
  display: none;
}

.hs5-panel.is-active {
  display: block;
}

.hs5-slider {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hs5-track-wrapper {
  flex: 1;
  overflow: hidden;
}

.hs5-track {
  display: flex;
  align-items: stretch;
  gap: 20px;
  transition: transform 0.3s ease;
}

.hs5-card-wrap {
  flex: 0 0 calc((100% - (var(--slides-to-show, 5) - 1) * 20px) / var(--slides-to-show, 5));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 10px rgba(92, 96, 106, 0.2);
  padding: 20px 10px;
}

.hs5-card {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.hs5-card__image-wrap {
  position: relative;
  margin-bottom: 12px;
}

.hs5-card__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  aspect-ratio: 234 / 191;
}

.hs5-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(215, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.hs5-badge__text {
  color: #fff;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 8px;
  text-align: center;
  line-height: 1.3;
}

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

.hs5-card__vendor,
.hs5-card__sku {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #7c7c7c;
  margin: 0;
}

.hs5-card__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #212121;
  margin: 0;
}

.hs5-stars {
  color: #ffd201;
  font-size: 18px;
  letter-spacing: 2px;
}

.hs5-card__stock {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #D70000;
  margin: 0;
}

.hs5-card__price {
  margin-top: auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #D70000;
  margin-bottom: 0;
}

.hs5-quick-buy {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #fff;
    line-height: 1em;
    padding: 10px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all ease .3s;
}

.hs5-quick-buy:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* opens the variant-picker sheet, combined selector so the gradient always wins.
   width:auto too, or it stretched full width while the plain-button fallback stayed small */
button.hs5-quick-buy.quick-buy-sheet-trigger {
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  color: #fff;
  border: none;
  padding: 10px 10px;
  font-size: 18px;
  width: auto;
}

.hs5-quick-buy--soldout {
  background: #9a9a9a;
  cursor: default;
}

.hs5-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f0f0f054;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: background .2s ease;
    z-index: 10;
    position: absolute;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 30px;
}

button.hs5-arrow.hs5-arrow--prev {
    left: -30px;
}

button.hs5-arrow.hs5-arrow--next {
    right: -30px;
}

.hs5-panels {
    position: relative;
}

.hs5-arrow:hover {
  background: #f0f0f0;
}

.hs5-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Mirror home_sec_13's minimal mobile pattern: section padding,
 * header margin, heading font-size. The slider/card/arrow/badge
 * styling auto-adapts via the existing --slides-to-show CSS variable
 * (which the editor sets to 1 on mobile) and percentage-based widths.
 *
 * The only hs5-specific addition is the tabs-strip horizontal scroll -
 * hs13 has no tabs, but hs5 has 7 (All + 6 categories) which would
 * wrap to 3 rows on phones without a scroll container.
 */
@media (max-width: 749px) {
  /* 40px bottom adds extra breathing room before the next section
   * (which sits closer to a banner-style edge). */
  .hs5-section { padding: 20px 0 40px; }
  .hs5-header {
    margin-bottom: 22px;
    gap: 12px;
    flex-direction: column;
    align-items: flex-start;
  }
  .hs5-heading {
    font-size: 26px;
    line-height: 1.1;
  }

  /* Tab strip: scroll horizontally instead of wrapping to 3 rows. */
  .hs5-tabs {
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .hs5-tabs::-webkit-scrollbar { display: none; }
  .hs5-tab {
    font-size: 12px;
    padding: 8px 14px;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* dropped the forced full width, was making the two button paths mismatch on mobile */
  .hs5-quick-buy {
    box-sizing: border-box;
    padding: 12px 16px;
    text-align: center;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .hs5-heading { font-size: 24px; }
}
/* END_SECTION:home_sec_5 */

/* START_SECTION:home_sec_6 (INDEX:70) */
/*
  All fluid values derived from Figma canvas: 1440 × 608 px
  Formula: clamp(min, X / 1440 * 100vw, X)
  e.g. 85px → clamp(32px, 5.903vw, 85px)
*/

/* ─── Section ─────────────────────────────────────────── */
.hs6-section {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: #000;
    /* Homepage rhythm - was 4.93%/2.08% (viewport-relative). Fixed
     * 40px each side matches the rest of the page's content sections. */
    padding: 40px 30px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* ─── Diagonal gold gradient ──────────────────────────── */
/* clip: top-left 54%, bottom-left 39% (from Figma diagonal) */
.hs6-diagonal {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    151.54deg,
    #8C421D 26.66%,
    #FBE67B 46.28%,
    #F3F0B2 58.97%,
    #F7D14E 73.11%,
    #D4A041 86.99%
  );
  clip-path: polygon(54% 0%, 100% 0%, 100% 100%, 39% 100%);
  z-index: 0;
}

/* ─── Background image (right side) ──────────────────── */
.hs6-bg-image {
  position: absolute;
  inset: 0;
  background-image: var(--hs6-bg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  z-index: 1;
  display: block !important;
}

/* ─── Content panel ───────────────────────────────────── */
/* Figma: 990 / 1440 = 68.75% width, gap 35px → 2.43vw */
.hs6-content {
    position: relative;
    z-index: 2;
    width: calc(50% + 10vw);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(30px, 2.43vw, 80px);
}

/* ─── Heading + subheading group ─────────────────────── */
/* gap 18px → 1.25vw */
.hs6-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.25vw, 18px);
  width: 100%;
}

/* ─── Heading ─────────────────────────────────────────── */
/* 85px → 5.903vw, line-height 81px → 5.625vw */
.hs6-heading {
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    font-size: clamp(32px, 5.903vw, 85px);
    line-height: clamp(30px, 5.625vw, 81px);
    text-transform: capitalize;
    margin: 0;
    background: linear-gradient(151.54deg, #ffd201 46.28%, #f3f0b2 58.97%, #ffe25c 73.11%, #d70000 107%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── Subheading ──────────────────────────────────────── */
/* 16px → 1.111vw, max-width 846px → 58.75% */
.hs6-subheading {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(12px, 1.111vw, 16px);
    line-height: 1.5em;
    color: #fff;
    margin: 0;
}

/* ─── Prize grid ──────────────────────────────────────── */
/*
  Figma columns: 265px | 300px | auto
  265/1440 = 18.4vw  |  300/1440 = 20.83vw
  row-gap 24px → 1.667vw
*/
.hs6-prizes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: clamp(140px,18.4vw,350px) clamp(150px,20.83vw,350px) auto;
    row-gap: clamp(20px, 3.667vw, 44px);
    column-gap: 0;
    align-items: center;
}

/* Explicit placement: 3 | 2 | 2 | 1 */
.hs6-prize-item:nth-child(1) { grid-column: 1; grid-row: 1; }
.hs6-prize-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.hs6-prize-item:nth-child(3) { grid-column: 3; grid-row: 1; }
.hs6-prize-item:nth-child(4) { grid-column: 1; grid-row: 2; }
.hs6-prize-item:nth-child(5) { grid-column: 2; grid-row: 2; }
.hs6-prize-item:nth-child(6) { grid-column: 1; grid-row: 3; }
.hs6-prize-item:nth-child(7) { grid-column: 2; grid-row: 3; }
.hs6-prize-item:nth-child(8) { grid-column: 1; grid-row: 4; }

/* ─── Prize item ──────────────────────────────────────── */
/* gap 20px → 1.389vw */
.hs6-prize-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(10px, 1.389vw, 20px);
}

/* ─── Icon wrapper 56×56 ─────────────────────────────── */
/* 56px → 3.889vw */
.hs6-icon-wrap {
  position: relative;
  width: clamp(28px, 3.889vw, 56px);
  height: clamp(28px, 3.889vw, 56px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs6-icon-glow {
  position: absolute;
  inset: 0;
  background: #EDBD13;
  border-radius: 50%;
  filter: blur(clamp(6px, 1.042vw, 15px));
}

/* 50px → 3.472vw */
.hs6-icon {
  position: relative;
  z-index: 1;
  width: clamp(24px, 3.472vw, 50px);
  height: clamp(24px, 3.472vw, 50px);
  object-fit: contain;
}

.hs6-icon-placeholder {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(24px, 3.472vw, 50px);
  height: clamp(24px, 3.472vw, 50px);
  border-radius: 50%;
  background: rgba(237, 189, 19, 0.3);
}

/* ─── Prize label ─────────────────────────────────────── */
/* 18px → 1.25vw */
.hs6-prize-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 1.25vw, 18px);
  line-height: 1.22;
  color: #fff;
}

/* ─── CTA Button ──────────────────────────────────────── */
/*
  307px → 21.32vw  |  42px → 2.917vw
  font 18px → 1.25vw
*/
.hs6-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 0.694vw, 10px) clamp(10px, 1.25vw, 18px);
  width: clamp(180px, 21.32vw, 307px);
  height: clamp(28px, 2.917vw, 42px);
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: clamp(3px, 0.347vw, 4px);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1.25vw, 18px);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.hs6-btn:hover {
  color: #fff;
}

/* ─── Tablet ──────────────────────────────────────────── */
@media (max-width: 990px) {
  .hs6-section {
    aspect-ratio: unset;
    min-height: 520px;
    padding: 24px;  /* mobile content padding */
    align-items: center;
  }
  .hs6-content {
    width: 100%;
    gap: 20px;
  }
  .hs6-heading {
    font-size: 52px;
    line-height: 1;
  }
  .hs6-subheading {
    font-size: 14px;
    max-width: 100%;
  }
  .hs6-prizes {
    grid-template-columns: repeat(2, auto);
    row-gap: 16px;
  }
  .hs6-prize-label {
    font-size: 15px;
  }
  .hs6-bg-image {
    opacity: 0.2;
  }
}

/* ─── Mobile ──────────────────────────────────────────── */
@media (max-width: 560px) {
  .hs6-heading {
    font-size: 36px;
  }
  .hs6-prizes {
    /* 2-up grid on mobile (was 1fr - single column was too sparse) */
    grid-template-columns: repeat(2, 1fr);
    column-gap: 14px;
    row-gap: 14px;
  }
  /* Reset the desktop explicit grid-column/grid-row pins so all
     prize items auto-flow into the 2-column mobile grid in order. */
  .hs6-prize-item,
  .hs6-prize-item:nth-child(1),
  .hs6-prize-item:nth-child(2),
  .hs6-prize-item:nth-child(3),
  .hs6-prize-item:nth-child(4),
  .hs6-prize-item:nth-child(5),
  .hs6-prize-item:nth-child(6),
  .hs6-prize-item:nth-child(7),
  .hs6-prize-item:nth-child(8) {
    grid-column: auto;
    grid-row: auto;
  }
  .hs6-btn {
    width: 100%;
    font-size: 14px;
    height: 44px;
  }
}
/* END_SECTION:home_sec_6 */

/* START_SECTION:home_sec_7 (INDEX:71) */
/* Homepage rhythm - 80px between content sections. */
.hs7-section {
  padding: 80px 0;
}

.hs7-banner {
  position: relative;
  width: 100%;
  padding: 30px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.hs7-banner::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 23px;
  background: linear-gradient(90deg, #ffd201, #d70000);
  z-index: -1;
}

.hs7-banner:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    top: 0;
    left: 0;
    border-radius: inherit;
    z-index: -1;
}

.hs7-heading {
    text-align: center;
    color: #ffd201;
    font-size: 40px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    word-break: break-word;
    background: linear-gradient(90deg, #d70000, #ffd201);
    line-height: 1em;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hs7-countdown {
  display: flex;
  align-items: center;
  gap: 21px;
}

.hs7-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hs7-value {
  text-align: center;
  color: #D70000;
  font-size: 30px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: 0.6px;
  line-height: 1;
}

.hs7-label {
  text-align: center;
  color: #D70000;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 1;
}

.hs7-sep {
  color: #D70000;
  font-size: 26px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  line-height: 1;
  align-self: center;
  padding-bottom: 22px;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop: 40px heading + 30px countdown numbers + 21px gap, all on
 * one line. On a 430px iPhone the heading wraps to 3 lines ("HURRY!" /
 * "CHALLENGE" / "ENDS IN:") and the countdown numbers stay huge.
 * Whole banner ends up taking half the viewport for what's just a
 * countdown timer.
 *
 * Fix: shrink heading to 22px (single line "HURRY! CHALLENGE ENDS IN:"
 * mostly fits, wraps gracefully if not). Countdown numbers down to
 * 22px, labels to 11px, separator gaps tightened. Still readable,
 * roughly half the vertical real estate.
 */
@media (max-width: 749px) {
  .hs7-section {
    /* Symmetric padding on mobile - same breathing room above and
     * below the countdown card so it reads as a self-contained
     * accent between sections rather than leaning toward one side. */
    padding: 40px 0;
  }
  .hs7-banner {
    padding: 18px 14px;
    gap: 12px;
    border-radius: 16px;
    flex-direction: column;
  }
  .hs7-banner::before {
    border-radius: 16px;
  }
  .hs7-heading {
    font-size: 18px;
    line-height: 1.1em;
  }
  .hs7-countdown {
    gap: 8px;
  }
  .hs7-value {
    font-size: 18px;
  }
  .hs7-label {
    font-size: 12px;
    letter-spacing: 0.3px;
  }
  .hs7-sep {
    font-size: 18px;
    padding-bottom: 16px;
  }
}

@media (max-width: 380px) {
  .hs7-heading {
    font-size: 18px;
  }
  .hs7-value { font-size: 20px; }
  .hs7-label { font-size: 10px; }
  .hs7-countdown { gap: 4px; }
  .hs7-sep { font-size: 16px; padding-bottom: 14px; }
}
/* END_SECTION:home_sec_7 */

/* START_SECTION:home_sec_8 (INDEX:72) */
.hs8 {
  position: relative;
  width: 100%;
  /* banner aspect ratio matches the bg image, min-height floor stops content from clipping on narrower screens. mobile overrides this below */
  aspect-ratio: 1440 / 501;
  min-height: max(50vh, 560px);
  overflow: hidden;
}

/* Background - one image covers everything (left portrait, right hex images, dark bg) */
.hs8__bg {
  position: absolute;
  inset: 0;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block !important;
}

/*
  Content column placement
    left  - aligned to Figma row-1 position (359/1440 = 24.93%)
    width - matches benefit row width        (551/1440 = 38.26%)
    top + translateY  - vertically CENTRED inside the section.
            Previously `top: 5%` anchored content to the top, which
            on wide viewports (section height grows with aspect-ratio
            to 600-700px) left a huge empty zone below the CTA.
            Centring distributes the whitespace evenly above + below
            so the bottom buffer reads as intentional padding, not
            "dead space below the button".
*/
.hs8__content {
  position: absolute;
  left: 24.93%;
  top: 50%;
  transform: translateY(-50%);
  width: 38.26%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Title - clearance below the heading bumped from 8px → 24px
 * so there's visible breathing room between "The Vault Program"
 * and the first card (New Flavor Alert). */
.hs8__title {
  width: 100%;
  margin: 0 0 24px;
  text-align: center;
  color: #fff;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 2.92vw;   /* 42px @ 1440 */
  font-weight: 400;
  line-height: 1.06;
  text-transform: capitalize;
}

/* Benefit list */
.hs8__list {
  list-style: none;
  margin: 0;
  padding: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  /* Inter-card gap bumped ~1.5× from 0.45vw (~6.5px) → 0.7vw
   * (~10px @ 1440) so each card row reads as a distinct
   * separated block instead of a tightly-stacked list. */
  gap: 0.7vw;
}

/*
  Staircase: each row shifts 30px (2.08vw) left vs the row above.
  Original left positions: 359 → 328 → 300 → 271 → 241px
*/
.hs8__item:nth-child(2) { transform: translateX(-2.08vw); }
.hs8__item:nth-child(3) { transform: translateX(-4.17vw); }
.hs8__item:nth-child(4) { transform: translateX(-6.25vw); }
.hs8__item:nth-child(5) { transform: translateX(-8.33vw); }

/* Benefit row card */
.hs8__item-inner {
    display: flex;
    align-items: center;
    /* Horizontal padding bumped further so icon (left) + Locked
     * badge (right) sit comfortably inset from the card edges.
     * Vertical padding stays tight for compact rows. */
    gap: 0.7vw;        /* icon ↔ text */
    padding: 0.55vw 2.6vw 0.55vw 2.6vw;  /* ~8px V / ~37px H */
    background: url(/cdn/shop/files/Frame_2087329157.png?v=1772800664);
    border-radius: .69vw;
    border: 1px solid rgba(0, 0, 0, .2);
    position: relative;
    overflow: hidden;
    /* Stretch the parallelogram PNG to fully cover the card box.
     * Previously `contain` preserved the PNG's natural aspect ratio,
     * which left empty space on the right edge of every card - the
     * Locked badge then anchored to the container's right edge and
     * appeared to "hang outside" the orange shape. `100% 100%`
     * forces the bg to fill the entire box so the badge always sits
     * on top of the orange instead of past it. The minor distortion
     * on the slanted edge graphic is imperceptible at card-row size. */
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Icon - sized down further to ~26px for the compact card rows. */
.hs8__icon {
  flex-shrink: 0;
  width: 1.8vw;   /* 26px @ 1440 */
  height: 1.8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.hs8__icon img,
.hs8__icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Inline SVGs (built-in icon kinds) render with currentColor -
   * the path fills are already #fff but if any inherits from text
   * color this keeps them white on the orange card. */
  color: #fff;
}

/* Text */
.hs8__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* Text inside each card - shrunk to keep cards compact. */
.hs8__name {
  display: block;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1vw;     /* 14px @ 1440 (was 18px) */
  font-weight: 700;
  line-height: 1.35;
}

.hs8__desc {
  display: block;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.83vw;  /* 12px @ 1440 (was 16px) */
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Locked badge - smaller pill to match the smaller cards. */
.hs8__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.42vw;        /* 6px (was 10px) */
  padding: 0.42vw 0.83vw; /* 6px 12px (was 10px 16px) */
  background: #FFD201;
  border-radius: 20px;
  outline: 0.6px solid #d70000;
  outline-offset: -0.6px;
  position: relative;
  z-index: 1;
}

.hs8__badge span {
  color: #212121;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76vw;  /* 11px @ 1440 (was 14px) */
  font-weight: 700;
  text-transform: capitalize;
  white-space: nowrap;
}

.hs8__badge svg {
  flex-shrink: 0;
  width: 0.9vw;       /* 13px @ 1440 (was 18px) */
  height: 1vw;        /* 14.5px @ 1440 (was 20px) */
}

/* CTA button - desktop clearance above the button is 40px so
 * there's clear separation between the last feature card
 * (Bonus Rewards) and "UNLOCK THE VAULT". The mobile media query
 * below overrides to a tighter value to match phone rhythm. */
.hs8__cta {
  align-self: flex-start;
  display: inline-block;
  margin-top: 40px;
  padding: 0.69vw 1.25vw; /* 10px 18px */
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 0.35vw;  /* 5px */
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25vw; /* 18px */
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop layout uses absolute positioning + a "staircase" of
 * translateX offsets per item, all sized in vw. On a 430px iPhone
 * vw becomes too small and the absolute-positioned content column
 * (38.26% width, 24.93% left) gets pushed off-canvas.
 *
 * Fix: drop the absolute positioning, drop the staircase offsets,
 * stack everything in normal flow with px-based sizes.
 */
@media (max-width: 749px) {
  .hs8 {
    aspect-ratio: auto;
    min-height: 0;
    /* Horizontal padding added so cards + CTA + heading have
     * breathing room from the section's left/right edges instead
     * of pressing against them. */
    padding: 20px 16px;
  }
  .hs8__bg {
    background-position: center top;
  }
  /* Dim the background on mobile - the partial person image + red
     texture compete with the orange-gradient cards and the title.
     A semi-transparent black scrim mutes the bg without removing it
     completely (so it still feels textured and on-brand). */
  .hs8__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
  }
  .hs8__content {
    position: relative;
    left: auto;
    top: auto;
    transform: none;   /* reset desktop's translateY(-50%) centring */
    width: 100%;
  }
  .hs8__title {
    font-size: 32px;
    margin-bottom: 18px;
    text-align: left;
  }
  .hs8__list {
    gap: 10px;
  }
  /* Kill the staircase offsets - they put each row 2-8% off-screen */
  .hs8__item:nth-child(2),
  .hs8__item:nth-child(3),
  .hs8__item:nth-child(4),
  .hs8__item:nth-child(5) {
    transform: none;
  }
  .hs8__item-inner {
    gap: 10px;
    /* Left padding bumped to 32px so icons land well inside the orange
       region - the parallelogram PNG has a slanted left edge and the
       orange fill only begins ~28px from the card left at mobile widths. */
    padding: 10px 12px 10px 32px;
    border-radius: 8px;
    background-size: cover;
  }
  .hs8__icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
  }
  /* Row text */
  .hs8__name {
    font-size: 13px;
    line-height: 1.3;
  }
  .hs8__desc {
    font-size: 11px;
    line-height: 1.3;
    white-space: normal;
  }
  /* Locked badge - shrunk so it doesn't crowd the text column */
  .hs8__badge {
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    flex-shrink: 0;
  }
  .hs8__badge span {
    font-size: 10px;
  }
  .hs8__badge svg {
    width: 10px;
    height: 11px;
  }
  .hs8__cta {
    align-self: stretch;
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    justify-content: center;
    min-height: 48px;
  }
}

@media (max-width: 480px) {
  .hs8__title {
    font-size: 26px;
  }
}
/* END_SECTION:home_sec_8 */

/* START_SECTION:home_sec_9 (INDEX:73) */
/* Homepage rhythm - 80px between content sections. */
.hs9 {
  padding: 80px 0;
}

.hs9__header {
  text-align: center;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hs9__title {
  color: #212121;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: capitalize;
  margin: 0;
}

.hs9__subtitle {
  color: #212121;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
}

/* ── Carousel layout (full-width) ── */
.hs9__carousel-wrap {
  position: relative;
  width: 100%;
}

.hs9__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 4px;
  cursor: grab;
}

.hs9__track.is-dragging,
.hs9__track.is-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

.hs9__track::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari */
}

/* ── Cards: portrait aspect ratio ── */
.hs9__card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 355px;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.hs9__card:hover {
  transform: scale(1.02);
}

/* ── No overlay - clean image ── */

/* ── Card text ── */
.hs9__card-content {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  padding: 0 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hs9__card-label {
  color: #fff;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 36px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.5);
}

.hs9__card-sublabel {
  color: rgba(255, 255, 255, 0.85);
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 0, 0, 0.5);
}

/* ── Navigation arrows ── */
.hs9__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0;
}

.hs9__arrow:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: #fff;
}

.hs9__arrow--left {
  left: -22px;
}

.hs9__arrow--right {
  right: -22px;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .hs9__card {
    flex: 0 0 280px;
  }
}

@media (max-width: 900px) {
  .hs9__title {
    font-size: 36px;
  }

  .hs9__card {
    flex: 0 0 240px;
  }

  .hs9__card-label {
    font-size: 28px;
  }

  .hs9__arrow--left { left: 8px; }
  .hs9__arrow--right { right: 8px; }
}

@media (max-width: 749px) {
  .hs9 {
    /* Bumped from 20px → 40px because this section sits adjacent
     * to a banner - extra breathing room keeps it from crowding
     * the banner edge. */
    padding: 40px 0;
  }

  .hs9__header {
    margin-bottom: 18px;
  }

  .hs9__subtitle {
    font-size: 14px;
    line-height: 1.4;
  }

  .hs9__track {
    gap: 12px;
  }

  .hs9__card-label {
    font-size: 24px;
  }

  .hs9__card-sublabel {
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  .hs9__card {
    flex: 0 0 200px;
  }
}
/* END_SECTION:home_sec_9 */

/* START_SECTION:inner_page_banner (INDEX:76) */
.inner_banner_section {
    aspect-ratio: 1440/383;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.inner_banner_content>* {
    color: #FFF;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 70px;
    font-style: normal;
    font-weight: 400;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 1440:383 aspect-ratio bg-image hero with a 70px Racing
 * Sans page title. Tighten heading + use min-height instead of fixed
 * aspect-ratio so the title doesn't get squashed on phones.
 */
@media (max-width: 749px) {
  .inner_banner_section {
    aspect-ratio: auto;
    min-height: 180px;
    padding: 20px 0;
  }
  .inner_banner_content > * {
    font-size: 32px;
    line-height: 1.05;
  }
}

@media (max-width: 480px) {
  .inner_banner_section { min-height: 140px; }
  .inner_banner_content > * { font-size: 26px; }
}
/* END_SECTION:inner_page_banner */

/* START_SECTION:inner_page_banner2 (INDEX:77) */
.inner_banner_section {
    aspect-ratio: 1440/383;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.inner_banner_content>h1 {
    color: #FFF;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 70px;
    font-style: normal;
    font-weight: 400;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center;
    margin-top:0;
    margin-bottom:20px;
}

.page_desc {
    color: #FFF;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center;
    margin-top:0;
    margin-bottom:0;
}

@media (max-width: 749px) {
  .inner_banner_section {
    aspect-ratio: auto;
    min-height: 200px;
    padding: 20px 0;
  }
  .inner_banner_content > h1 {
    font-size: 32px;
    line-height: 1.05;
    margin-bottom: 12px;
  }
  .page_desc {
    font-size: 16px;
    line-height: 1.2;
  }
}

@media (max-width: 480px) {
  .inner_banner_section { min-height: 160px; }
  .inner_banner_content > h1 { font-size: 26px; }
  .page_desc { font-size: 14px; }
}
/* END_SECTION:inner_page_banner2 */

/* START_SECTION:login_1 (INDEX:78) */
.login-hub-section {
    padding: 100px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: transparent;
  }

  .login-hub-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    width: 100%;
  }

  .login-hub-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 800px;
  }

  .login-hub-subtitle {
    color: #000;
    font-size: 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
  }

  .login-hub-title {
    color: #212121;
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1.1;
    margin: 0;
  }

  .login-hub-actions {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 593px;
  }

  .login-hub-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 42px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 4px;
    color: #fff;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .login-hub-button:hover {
    transform: translateY(-1px);
  }

  .login-hub-footer {
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #000;
  }

  .login-hub-footer a {
    font-weight: 600;
    text-decoration: underline;
    color: #000;
    margin-left: 4px;
  }

  .login-hub-logged-in { width: 100%; max-width: 600px; }
  .login-hub-links { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
  .login-hub-logout { font-size: 13px; color: #333; text-align: center; text-decoration: underline; cursor: pointer; }
  .login-hub-logout:hover { color: #d43131; }

  /* Responsive Adjustments */
  @media screen and (max-width: 749px) {
    .login-hub-section {
      padding: 60px 20px;
    }
    .login-hub-title {
      font-size: 36px;
    }
    .login-hub-subtitle {
      font-size: 18px;
    }
  }
/* END_SECTION:login_1 */

/* START_SECTION:loyalty_program_2 (INDEX:80) */
/* FIRST content section - 80px top (the loyalty_program_1 hero
 * banner above is full-bleed, gives 0), 40px bottom. */
.loyalty-program-section {
  padding: 80px 0 40px;
  background-color: transparent;
}

.loyalty-program-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.loyalty-header { text-align: center; max-width: 800px; }

.loyalty-subheading {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.loyalty-main-heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.1;
  margin: 0 0 15px 0;
  text-transform: capitalize;
}

.loyalty-description {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
      margin: 0;
}

.loyalty-cards-container2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  width: 100%;
}

.loyalty-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-visual-header {
  padding: 15px 15px 0;
  height: 180px;
}

.card-img-fit {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.card-body { 
  padding: 20px 30px 30px; 
}

.card-body--accelerators {
    padding-top: 35px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

ul.accelerator-list {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-accent-text {
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 15px;
  margin-top: 0px;
}

.card-separator {
  border: none;
  border-top: 1px solid #541B76;
  margin-bottom: 20px;
  margin-top: 0px;
}

.card-title-racing {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 26px;
  margin-bottom: 15px;
  margin-top: 0px;
  font-weight: 400;
}

.progression-list, .accelerator-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color:#000;
}

.progression-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.progression-list li {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  margin-bottom: 0px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
}

.accelerator-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.acc-icon-wrapper {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.acc-custom-icon {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.acc-icon-placeholder {
  width: 20px;
  height: 20px;
  background: #eee;
  border-radius: 4px;
}

.acc-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 16px;
}

.btn-loyalty {
  display: inline-block;
  background-color: #541B76;
  color: #fff;
  padding: 16px 40px;
  border-radius: 4px;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  transition: opacity 0.2s;
}

@media (max-width: 749px) {
  .loyalty-card { max-width: 100%; }
}
/* END_SECTION:loyalty_program_2 */

/* START_SECTION:loyalty_program_3 (INDEX:81) */
/* Middle content section - 80px between sections (40px each side). */
  .lp-container {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }
  .lp-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .lp-subheading {
    margin: 0;
    color: black;
    font-size: 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .lp-main-heading {
    margin: 0;
    color: #212121;
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1.1;
  }
  .lp-description {
    margin: 8px 0 0 0;
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
  }
  .lp-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 100%;
  }
  .lp-card {
    width: 100%;
    max-width: 430px;
    padding: 30px 20px;
    background: white;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    transition: transform 0.3s ease;
  }
  .lp-icon-wrapper {
    width: 80px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
  .lp-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .lp-card-title {
    margin: 0;
    color: black;
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-align: center;
  }
  .lp-card-text {
    margin: 0;
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-align: center;
  }
  .lp-footer {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
        margin-top: 5px;
  }
  .lp-button {
    width: 100%;
    max-width: 406px;
    height: 52px;
    background: #888; /* Match the grey background from image */
    background: linear-gradient(180deg, #b0b0b0 0%, #888888 100%);
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    border-radius: 4px;
    color: white;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  @media screen and (max-width: 749px) {
    .lp-main-heading {
      font-size: 32px;
      line-height: 1.2;
    }
    .lp-container {
      padding: 20px 15px;
    }
    /* Tier CTA - was capped at 406px with no horizontal padding,
       so text could touch the left edge when wrapping. Stretch
       full width + add comfortable padding so the label breathes. */
    .lp-button {
      max-width: 100%;
      height: auto;
      min-height: 56px;
      padding: 14px 24px;
      font-size: 16px;
      line-height: 1.2;
      text-align: center;
      box-sizing: border-box;
    }
  }
/* END_SECTION:loyalty_program_3 */

/* START_SECTION:loyalty_program_4 (INDEX:82) */
/* Middle content section - 80px between sections (40px each side). */
  .lp4-container {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }
  .lp4-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .lp4-subheading {
    margin: 0;
    color: black;
    font-size: 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .lp4-main-heading {
    margin: 0;
    color: #212121;
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1.1;
  }
  .lp4-description {
    margin: 8px 0 0 0;
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
  }
  .lp4-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 100%;
  }
  .lp4-card {
    width: 100%;
    max-width: 430px;
    padding: 30px 20px;
    background: white;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease;
  }
  .lp4-icon-wrapper {
    width: 60px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
  .lp4-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .lp4-card-title {
    margin: 0;
    color: black;
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-align: center;
  }
  .lp4-card-text {
    margin: 0;
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-align: center;
  }
  .lp4-footer {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
        margin-top: 5px;
  }
  .lp4-button {
    width: 100%;
    max-width: 406px;
    height: 52px;
    background: linear-gradient(99deg, #FEFEF1 -11.35%, #ffd201 -6.41%, #FCBC01 1.98%, #EE8F00 9.26%, #D67A00 19.18%, #C76C00 26.95%, #B75E00 37.21%, #B15800 41.23%, #AA5300 45.34%, #933E00 60.8%, #411B00 86.67%, #110700 107.6%);
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    border-radius: 4px;
    color: white;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  @media screen and (max-width: 749px) {
    .lp4-main-heading {
      font-size: 32px;
      line-height: 1.2;
    }
    .lp4-container {
      padding: 20px 15px;
    }
    .lp4-button {
      max-width: 100%;
      height: auto;
      min-height: 56px;
      padding: 14px 24px;
      font-size: 16px;
      line-height: 1.2;
      text-align: center;
      box-sizing: border-box;
    }
  }
/* END_SECTION:loyalty_program_4 */

/* START_SECTION:loyalty_program_5 (INDEX:83) */
/* Middle content section - 80px between sections (40px each side). */
  .lp5-container {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }
  .lp5-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .lp5-subheading {
    margin: 0;
    color: black;
    font-size: 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .lp5-main-heading {
    margin: 0;
    color: #212121;
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1.1;
  }
  .lp5-description {
    margin: 8px 0 0 0;
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
  }
  .lp5-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 100%;
  }
  .lp5-card {
    width: 100%;
    max-width: 430px;
    padding: 30px 20px;
    background: white;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease;
  }
  .lp5-icon-wrapper {
    width: 60px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
  .lp5-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .lp5-card-title {
    margin: 0;
    color: black;
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-align: center;
  }
  .lp5-card-text {
    margin: 0;
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-align: center;
  }
  .lp5-footer {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
        margin-top: 5px;
  }
  .lp5-button {
    width: 100%;
    max-width: 406px;
    height: 52px;
    background: url(/cdn/shop/files/Background_1523233f-3b75-4c39-9837-696fc2f6fd35.png);
    background-size: cover;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    border-radius: 4px;
    color: #fff;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  @media screen and (max-width: 749px) {
    .lp5-main-heading {
      font-size: 32px;
      line-height: 1.2;
    }
    .lp5-container {
      padding: 20px 15px;
    }
    .lp5-button {
      max-width: 100%;
      height: auto;
      min-height: 56px;
      padding: 14px 24px;
      font-size: 16px;
      line-height: 1.2;
      text-align: center;
      box-sizing: border-box;
    }
  }
/* END_SECTION:loyalty_program_5 */

/* START_SECTION:loyalty_program_7 (INDEX:85) */
/* Middle content section - 80px between sections (40px each side). */
  .loyalty-program-7 {
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }
  @media (max-width: 749px) {
    .loyalty-program-7 { padding-top: 20px; padding-bottom: 20px; }
  }

  .loyalty-header2 {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    display: flex;
  }

  .loyalty-title {
    margin: 0;
    align-self: stretch;
    text-align: center;
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 46px;
    word-wrap: break-word;
  }

  .loyalty-subtitle {
    margin: 0;
    align-self: stretch;
    text-align: center;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    word-wrap: break-word;
  }

  .loyalty-cards-container {
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    gap: 34px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .vault-card2 {
    width: calc(50% - (34px/2));
    padding: 20px;
    background: rgba(255, 255, 255, 0.60);
    border-radius: 12px;
    border: 1px solid white;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .vault-card2-left {
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    display: flex;
  }

  .vault-main-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
  }

  .vault-icon-placeholder {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #ddd;
  }

  .vault-card2-title {
    color: black;
    font-size: 30px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    line-height: 39px;
    word-wrap: break-word;
  }

  .vault-right-icon {
    width: 55px;
    height: 55px;
    object-fit: contain;
  }

  .loyalty-cta {
    text-decoration: none;
    padding: 14px 25px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .loyalty-cta span {
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    word-wrap: break-word;
  }

  @media screen and (max-width: 749px) {
    .vault-card2 {
      width: 100% !important;
    }
    .loyalty-title {
      font-size: 32px !important;
    }
  }
/* END_SECTION:loyalty_program_7 */

/* START_SECTION:loyalty_program_8 (INDEX:86) */
/* "Talk to our team" section - 40px top, 80px bottom (extra gap
 * before the full-bleed purple Vault CTA band that follows). */
.loyalty-program-8 {
  padding-top: 40px;
  padding-bottom: 80px;
}
@media (max-width: 749px) {
  .loyalty-program-8 { padding-top: 20px; padding-bottom: 40px; }
}

.lp8-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}

/* Left Column Styling */
.lp8-left-col {
  width: 100%;
  max-width: 665px;
  height: 510px;
  padding: 40px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.10);
}

/* The Yellow Diagonal Shape */
.lp8-overlay-shape {
  position: absolute;
  width: 400px;
  height: 300px;
  right: -50px;
  bottom: -80px;
  background: #ffd201;
  transform: rotate(-15deg);
  z-index: 2;
}

.lp8-content-wrap {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.lp8-heading {
  color: white;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1.1;
  margin: 0 0 16px 0;
}

.lp8-subtext {
  color: white;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

.lp8-subtext a {
  color: white;
  text-decoration: underline;
  margin-right: 5px;
}

.lp8-button {
  display: inline-block;
  width: 100%;
  padding: 12px 25px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 4px;
  color: white;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.3s;
  text-align: center;
}

/* Right Column Styling */
.lp8-right-col {
  width: 100%;
  max-width: 595px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lp8-accordion-item {
  border-radius: 12px;
  outline: 1px solid #B8B8B8;
  background: white;
  overflow: hidden;
}

.lp8-accordion-header {
  width: 100%;
  padding: 20px;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
}

.lp8-q-text {
  color: black;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

.lp8-icon {
  width: 12px;
  height: 12px;
  position: relative;
  transition: transform 0.3s;
}

/* Plus/X Icon creation */
.lp8-icon::before, .lp8-icon::after {
  content: '';
  position: absolute;
  background: black;
  transition: transform 0.3s;
}
.lp8-icon::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); }
.lp8-icon::after { height: 100%; width: 2px; left: 50%; top: 0; transform: translateX(-50%); }

.lp8-accordion-header[aria-expanded="true"] .lp8-icon {
  transform: rotate(45deg);
}

.lp8-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.lp8-a-text {
  padding: 0 20px 20px 20px;
  color: #333;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .lp8-container { flex-direction: column; align-items: center; }
  .lp8-left-col, .lp8-right-col { max-width: 100%; }
}

/* The yellow rotated overlay shape is decorative only. At 400×300 + the
   -50px right offset it pokes ~350px past the viewport edge on phones,
   forcing a horizontal scrollbar. Shrink it on mobile so it stays
   inside the layout. Also clip overflow on the section so a future
   decorative bleed can't reintroduce the bug. */
@media (max-width: 749px) {
  .lp8-section { overflow-x: hidden; }
  .lp8-overlay-shape {
    width: 220px;
    height: 160px;
    right: -30px;
    bottom: -60px;
  }
  /* "Still Have Questions? / Talk To Our Team" - shorter on mobile.
     Desktop card is intentionally tall (~600px) because the bg
     image is a portrait of an athlete. On mobile that's too much
     vertical real-estate for a single CTA. Cut the card height to
     ~280px with tighter padding and reduce the spacing around the
     button. */
  .lp8-left-col {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    padding: 28px 22px !important;
  }
  .lp8-content-wrap {
    gap: 18px !important;
    min-height: 0 !important;
  }
  .lp8-heading {
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
  }
  .lp8-subtext {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .lp8-button {
    margin-top: 6px !important;
    padding: 12px 18px !important;
    min-height: 48px !important;
    font-size: 14px !important;
  }
}
/* END_SECTION:loyalty_program_8 */

/* START_SECTION:loyalty_program_9 (INDEX:87) */
/* Full-bleed purple Vault CTA band - last section. 80px internal
 * padding top + bottom gives the heading + buttons breathing room;
 * the band sits flush on the footer. */
.loyalty-vault-section {
  width: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Added image specific styles */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #541B76; /* Fallback color */
}

.loyalty-vault-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
}

.loyalty-vault-title {
  align-self: stretch;
  text-align: center;
  margin: 0;
  color: white;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 56px;
  word-wrap: break-word;
}

.loyalty-vault-button-group {
  width: 100%;
  max-width: 950px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.loyalty-vault-btn {
  padding: 14px 25px;
  background: white;
  border-radius: 4px;
  color: #541B76;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
  min-width: 200px;
  text-align: center;
  line-height: 1em;
}

@media screen and (max-width: 749px) {
  .loyalty-vault-title {
    font-size: 36px;
    line-height: 42px;
  }
  .loyalty-vault-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
/* END_SECTION:loyalty_program_9 */

/* START_SECTION:main-404 (INDEX:88) */
.ss404 {
    background:
      radial-gradient(ellipse at top right, rgba(215, 0, 0, 0.10), transparent 60%),
      radial-gradient(ellipse at bottom left, rgba(255, 210, 1, 0.10), transparent 60%),
      #0a0a0a;
    color: #fff;
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
    font-family: 'Montserrat', sans-serif;
  }
  .ss404__inner { max-width: 749px; text-align: center; }

  .ss404__eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #FFD201;
    margin: 0 0 20px;
  }

  .ss404__code {
    font-family: 'Racing Sans One', sans-serif;
    font-size: clamp(110px, 22vw, 220px);
    line-height: 0.9;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
  }
  .ss404__digit {
    background: linear-gradient(180deg, #FF3300 0%, #D70000 50%, #FFD201 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    text-shadow: 0 6px 30px rgba(215, 0, 0, 0.25);
  }
  /* Middle 0 spins playfully - the gym-floor wink. Respects reduced-motion. */
  .ss404__digit:nth-child(2) { animation: ss404-rotate 6s linear infinite; }
  @keyframes ss404-rotate { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .ss404__digit:nth-child(2) { animation: none; }
  }

  .ss404__title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 800;
    margin: 0 0 14px;
    line-height: 1.15;
  }
  .ss404__lede {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
    margin: 0 auto 36px;
    max-width: 540px;
  }

  .ss404__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 36px;
  }
  .ss404__cta {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.15s, background 0.15s, color 0.15s;
  }
  .ss404__cta--primary {
    background: linear-gradient(135deg, #D70000 0%, #B30000 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(215, 0, 0, 0.35);
  }
  .ss404__cta--primary:hover {
    background: linear-gradient(135deg, #FFD201 0%, #FFB800 100%);
    color: #212121;
    transform: translateY(-1px);
  }
  .ss404__cta--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
  }
  .ss404__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #FFD201;
    color: #FFD201;
  }

  .ss404__help {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
  }
  .ss404__help a {
    color: #FFD201;
    text-decoration: underline;
  }
  .ss404__help a:hover { color: #fff; }

  /* ── Mobile (< 750px) ────────────────────────────────────────── */
  @media (max-width: 749px) {
    .ss404 {
      padding: 48px 0;
      min-height: 60vh;
    }
    .ss404__inner { padding: 0 16px; }
    .ss404__eyebrow {
      font-size: 12px;
      margin-bottom: 14px;
    }
    .ss404__lede {
      font-size: 14px;
      margin-bottom: 24px;
    }
    .ss404__ctas {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      margin-bottom: 24px;
    }
    .ss404__cta {
      justify-content: center;
      padding: 14px 20px;
      min-height: 48px;
      font-size: 12px;
    }
  }
/* END_SECTION:main-404 */

/* START_SECTION:main-subscriptions (INDEX:108) */
/* Dark band on the NRO page - #212121 (the site-standard dark) so it
     matches the rest of the NRO page and the wider site palette.
     Overriding --color-foreground flips every var()-based text + border
     in this section to light-on-dark in a single declaration.
     80px top & bottom breathing room. */
  .ssa-subs-page {
    padding: 40px 0;
    background: #212121 !important;
    /* !important so this beats Dawn's .color-scheme-* declaration (same
       specificity) and every var(--color-foreground) text/border in the
       section resolves to white-on-dark. */
    --color-foreground: 255 255 255 !important;
  }
  @media (max-width: 749px) {
    .ssa-subs-page { padding: 20px 0; }
  }
  /* Guest-state - shown when this section is embedded on a public
     surface (e.g. /pages/never-run-out) and the visitor is logged out. */
  .ssa-subs-page--guest { padding: 40px 0; }
  /* Login gate - mirrors the design system from
   * `challenge-strava-connect.liquid` (.csc-gate*) so the
   * "Sign in to do X" pattern is identical across the storefront:
   * cream surface, brand eyebrow strip, shield icon, Racing Sans
   * heading, gradient CTA + signup line. */
  .ssa-subs-guest {
    max-width: 990px;
    margin: 0 auto;
    text-align: center;
    padding: 48px 56px 44px;
    background: #2a2a2a;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
  }
  .ssa-subs-guest__eyebrow {
    width: 64px;
    height: 6px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    margin: 0 auto 22px;
  }
  .ssa-subs-guest__icon {
    color: #D70000;
    margin-bottom: 14px;
  }
  /* Heading scale mirrors `.ssa-subs-intro-title` (the
   * "Everything Subscribers Get" heading lower on the same page)
   * so both NRO section titles feel like a matching pair. */
  .ssa-subs-guest__title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 0 0 12px;
    color: #fff;
    line-height: 1.05;
  }
  .ssa-subs-guest__sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 auto 24px;
    max-width: 560px;
  }
  .ssa-subs-guest__btn {
    display: inline-block;
    padding: 14px 38px;
    background: linear-gradient(90deg, #FFD201 0%, #FF6B00 50%, #D70000 100%);
    color: #fff !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 8px;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 10px 24px rgba(215, 0, 0, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  }
  .ssa-subs-guest__signup {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 18px 0 0;
  }
  .ssa-subs-guest__signup-link {
    color: #D70000;
    font-weight: 600;
    text-decoration: none;
  }
  .ssa-subs-guest__signup-link:hover { text-decoration: underline; }
  @media (max-width: 749px) {
    /* Heading auto-shrinks via the clamp() above - only adjust the
     * card frame and supporting text on mobile. */
    .ssa-subs-guest { padding: 36px 24px 30px; border-radius: 16px; }
    .ssa-subs-guest__sub { font-size: 14px; }
  }
  /* Section heading - mirrors `.nro-section__title` (the "Everything
     subscribers get" heading lower on the same page) so the two
     sections feel like a pair. Same Racing Sans family + size scale,
     but uses `--color-foreground` so it adapts to dark/light schemes
     instead of being hard-coded white like the NRO landing version. */
  .ssa-subs-intro-title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 400;
    letter-spacing: 0.005em;
    text-align: center;
    margin: 0 auto 12px;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.05;
  }
  .ssa-subs-intro-sub {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    max-width: 640px;
    margin: 0 auto 36px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    /* padding-top was 28px when this was the FIRST element in the
       section (the title now owns the top spacing). Drop to a small
       gap below the title. */
    padding-top: 0;
  }

  /* hidden override needed otherwise the wrappers flex beats the hidden attrs display none */
  .ssa-subs-skel[hidden] {
    display: none !important;
  }
  /* min-height matches where the cards will land so the spinner centers in roughly that space */
  .ssa-subs-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    min-height: 400px;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-style: italic;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
  }
  .ssa-subs-loading__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #FFD201;
    border-right-color: #D70000;
    border-radius: 50%;
    animation: ssa-subs-spin 0.9s linear infinite;
    flex-shrink: 0;
  }
  @keyframes ssa-subs-spin {
    to { transform: rotate(360deg); }
  }
  .ssa-subs-loading__dots {
    display: inline-flex;
    gap: 2px;
    font-style: normal;
    letter-spacing: -2px;
  }
  .ssa-subs-loading__dots > span {
    animation: ssa-subs-dot 1.4s ease-in-out infinite;
  }
  .ssa-subs-loading__dots > span:nth-child(2) { animation-delay: 0.18s; }
  .ssa-subs-loading__dots > span:nth-child(3) { animation-delay: 0.36s; }
  @keyframes ssa-subs-dot {
    0%, 80%, 100% { opacity: 0.25; }
    40%           { opacity: 1; }
  }

  /* ── Empty state ────────────────────────────────────────────── */
  .ssa-subs-empty {
    text-align: center;
    padding: 56px 24px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    border: 1.5px dashed rgba(255, 255, 255, 0.15);
  }
  .ssa-subs-empty__icon {
    color: #d70000;
    margin-bottom: 12px;
  }
  .ssa-subs-empty__title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 28px;
    font-weight: 400;
    margin: 0 0 10px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 1.1;
  }
  .ssa-subs-empty__sub {
    font-family: 'Montserrat', sans-serif;
    max-width: 440px;
    margin: 0 auto 20px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
  }
  .ssa-subs-empty__cta {
    display: inline-block;
    padding: 12px 22px;
    margin: 6px;
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 8px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  }
  .ssa-subs-empty__cta--secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    text-shadow: none;
  }

  /* ── Subscription card ──────────────────────────────────────── */
  .ssa-subs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .ssa-subs-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
  }
  /* Top-border red→yellow gradient stripe removed per direction -
     was too visually heavy on the dark NRO manage page background. */
  .ssa-subs-card--paused { opacity: 0.7; }
  .ssa-subs-card__header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
  }
  .ssa-subs-card__img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.08);
    flex: none;
  }
  .ssa-subs-card__body {
    flex: 1;
    min-width: 0;
  }
  .ssa-subs-card__title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 19px;
    font-weight: 400;
    margin: 0 0 6px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 1.15;
  }
  .ssa-subs-card__meta {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .ssa-subs-card__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .ssa-subs-card__status--active { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
  .ssa-subs-card__status--paused { background: rgba(255, 165, 0, 0.18); color: #fbbf24; }
  .ssa-subs-card__status--cancelled { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.65); }
  .ssa-subs-card__next {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 10px 0 0;
  }
  .ssa-subs-card__next strong {
    color: #fff;
  }

  /* Cadence row */
  .ssa-subs-card__cadence {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    flex-wrap: wrap;
  }
  .ssa-subs-card__cadence-label {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
  }
  .ssa-subs-card__cadence-select {
    padding: 6px 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    flex: 1;
    min-width: 140px;
  }

  /* Backup row */
  .ssa-subs-card__backup {
    margin-top: 10px;
    font-size: 12.5px;
    padding: 10px 12px;
    background: rgba(255, 210, 1, 0.06);
    border-left: 3px solid #ffd201;
    border-radius: 0 8px 8px 0;
  }
  .ssa-subs-card__backup strong {
    color: #fff;
  }

  /* Actions */
  .ssa-subs-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
  }
  .ssa-subs-card__btn {
    padding: 9px 16px;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
  }
  .ssa-subs-card__btn:hover { background: rgba(255, 255, 255, 0.08); }
  .ssa-subs-card__btn:active { transform: scale(0.97); }
  .ssa-subs-card__btn--primary {
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    border-color: transparent;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  }
  .ssa-subs-card__btn--danger {
    color: #d70000;
    border-color: rgba(215, 0, 0, 0.3);
  }
  .ssa-subs-card__btn--danger:hover {
    background: rgba(215, 0, 0, 0.06);
  }

  /* ── Recommended grid ───────────────────────────────────────── */
  .ssa-subs-recs {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1.5px solid rgba(255, 255, 255, 0.08);
  }
  .ssa-subs-recs__title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 30px;
    font-weight: 400;
    margin: 0 0 6px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 1.1;
  }
  .ssa-subs-recs__sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 20px;
  }
  .ssa-subs-recs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
  }
  .ssa-subs-rec {
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .ssa-subs-rec:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  }
  .ssa-subs-rec__img {
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.08);
    object-fit: cover;
    width: 100%;
    display: block;
  }
  .ssa-subs-rec__body {
    padding: 12px;
  }
  .ssa-subs-rec__title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
  }
  .ssa-subs-rec__price {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
  }

  @media (max-width: 749px) {
    .ssa-subs-intro-title { padding-top: 16px; }
    .ssa-subs-intro-sub { font-size: 14px; padding-top: 0; }
    .ssa-subs-card { padding: 16px; }
    .ssa-subs-card__img { width: 52px; height: 52px; }
    .ssa-subs-card__header { gap: 14px; }
    .ssa-subs-card__title { font-size: 18px; line-height: 1.3; }

    /* Cadence + status pill row stacks vertically below the title on
       narrow screens - avoids horizontal scroll on iPhone SE width. */
    .ssa-subs-card__meta {
      flex-wrap: wrap;
      gap: 6px 10px;
    }

    /* Cadence label + select share a row on desktop; on mobile the label
       takes a full line and the select expands so the touch target is
       comfortable (≥ 44px tall). */
    .ssa-subs-card__cadence {
      flex-wrap: wrap;
      gap: 6px 12px;
    }
    .ssa-subs-card__cadence-label {
      flex-basis: 100%;
    }
    .ssa-subs-card__cadence-select {
      flex: 1 1 auto;
      min-height: 44px;
    }

    /* Action buttons stack to full-width so each is reachable by thumb
       at the bottom edge - sub-44px targets are an a11y violation per WCAG. */
    .ssa-subs-card__actions {
      flex-wrap: wrap;
      gap: 10px;
    }
    .ssa-subs-card__btn {
      flex: 1 1 100%;
      min-height: 44px;
      padding: 12px 14px;
    }

    /* Confirm modal - make sure long bodies don't push the buttons off
       the visible viewport on small phones. */
    .ssa-subs-confirm {
      max-height: 86vh;
      overflow-y: auto;
      width: calc(100% - 32px);
      max-width: 420px;
    }
  }

  /* Reduced-motion respect - disable the .show transition on toast +
     modal overlay for users who prefer no motion. */
  @media (prefers-reduced-motion: reduce) {
    .ssa-subs-toast,
    .ssa-subs-confirm-overlay,
    .ssa-subs-card,
    .ssa-subs-card__btn {
      transition: none !important;
    }
  }

  /* ── "Build another bundle" CTA ─────────────────────────────────── */
  /* Sits at the end of the subscription cards list. Only rendered by JS
     when there's at least one card - never shown to customers with zero
     subscriptions (they see the existing empty-state CTAs instead). */
  .ssa-subs-add-another {
    list-style: none;
    margin-top: 16px;
  }
  /* gradient border via background-clip trick, both layers need to be gradients otherwise the colour gets treated as bg-color and the border-box layer doesnt clip right */
  .ssa-subs-add-another__btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 20px;
    border: 2px solid transparent;
    /* solid inner fill matches the section bg so only the gradient ring shows */
    background:
      linear-gradient(#212121, #212121) padding-box,
      linear-gradient(90deg, #FFD201 0%, #D70000 100%) border-box;
    border-radius: 16px;
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    transition: filter 0.15s, transform 0.15s;
    cursor: pointer;
  }
  .ssa-subs-add-another__btn:hover {
    /* hover: lighter inner fill, same gradient ring */
    background:
      linear-gradient(#2a2a2a, #2a2a2a) padding-box,
      linear-gradient(90deg, #FFD201 0%, #D70000 100%) border-box;
    transform: translateY(-2px);
    filter: brightness(1.08);
    color: #fff;
  }
  .ssa-subs-add-another__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(215, 0, 0, 0.3);
  }
  .ssa-subs-add-another__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ssa-subs-add-another__body strong {
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 1.1;
  }
  .ssa-subs-add-another__body small {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.3;
  }
  .ssa-subs-add-another__arrow {
    flex: 0 0 auto;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.15s, color 0.15s;
  }
  .ssa-subs-add-another__btn:hover .ssa-subs-add-another__arrow {
    transform: translateX(4px);
    color: #d70000;
  }
  @media (max-width: 480px) {
    .ssa-subs-add-another__btn { padding: 14px 14px; gap: 12px; }
    .ssa-subs-add-another__body strong { font-size: 16px; }
    .ssa-subs-add-another__body small { font-size: 12px; }
  }
/* END_SECTION:main-subscriptions */

/* START_SECTION:monthly_challenges_1 (INDEX:109) */
.mc1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  /* FIRST content section - 80px top (banner above gives 0),
   * 40px bottom. margin: 0 auto is horizontal centering only. */
  padding: 80px 0 40px;
  max-width: 1330px;
  margin: 0 auto;
}

/* ── Header ── */
.mc1__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 868px;
  text-align: center;
}

.mc1__tagline {
  color: #212121;
  font-size: 22px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin: 0;
}

.mc1__title {
  color: #212121;
  font-size: clamp(36px, 5vw, 52px);
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1.1;
  margin: 0;
}

.mc1__description {
  color: #212121;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  max-width: 812px;
  margin: 0;
}

/* ── Card ── */
.mc1__card {
  display: flex;
  align-items: center;
  width: 100%;
  background: #212121;
  border-radius: 20px;
  overflow: hidden;
  padding: 0px 60px 0px 60px;
  position: relative;
  aspect-ratio: 1320 / 631;
}

/* ── Card content ── */
.mc1__card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 1;
  max-width: 670px
}

.mc1__card-title {
  color: #fff;
  font-size: clamp(24px, 3vw, 32px);
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1.3;
  margin: 0;
}

.mc1__card-desc {
  color: #fff;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  margin: 0;
}

/* ── Challenge meta (points / end date / completion) ── */
.mc1__challenge-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.mc1__points-badge {
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  color: #fff;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
}

.mc1__points-badge:empty { display: none; }

/* Hide stale Liquid placeholders until the API fetch resolves (or 4s safety). */
.mc1[data-mc-loading="1"] .mc1__card-title,
.mc1[data-mc-loading="1"] .mc1__card-desc,
.mc1[data-mc-loading="1"] .mc1__challenge-meta,
.mc1[data-mc-loading="1"] .mc1__stat-value,
.mc1[data-mc-loading="1"] .mc1__stat-label { visibility: hidden; }
.mc1[data-mc-loading="1"] .mc1__stat-arc { opacity: 0; }


.mc1__completed-badge {
  background: rgba(0, 200, 100, 0.85);
  color: #fff;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}

/* ── Stats ── */
.mc1__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.mc1__stat {
  position: relative;
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}

.mc1__stat-ring {
  width: 100%;
  height: 100%;
}

.mc1__stat-track {
  fill: none;
  stroke: #3a3a3a;
  stroke-width: 10;
}

.mc1__stat-arc {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
}

.mc1__stat-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.mc1__stat-value {
  color: #fff;
  font-size: 22px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 1;
}

.mc1__stat-label {
  color: #fff;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
}

/* ── Card image ── */
.mc1__card-image {
    flex-shrink: 0;
    width: calc(100% - 670px);
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: end;
}

.mc1__card-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ── Responsive ── */
@media (max-width: 990px) {
  .mc1__card {
    flex-direction: column;
    padding: 32px 24px;
    /* CRITICAL: the desktop card has `aspect-ratio: 1320/631` (~2.09:1)
       which on a phone collapses the card to ~165px tall - only the
       title + first line of description fits, then `overflow: hidden`
       clips everything else (badge, 3 stat circles, photo). Reset to
       auto so the card grows to fit its content. */
    aspect-ratio: auto;
    gap: 28px;
  }

  .mc1__card-content {
    max-width: 100%;
    gap: 16px;
    /* Centre the headings + body on phones - desktop is two-column
       so left-aligned looks natural, but on a stacked mobile card a
       single full-width column reads better centred. */
    text-align: left;
  }

  .mc1__card-title {
    font-size: 28px;
    line-height: 1.15;
  }
  .mc1__card-desc {
    font-size: 15px;
    line-height: 1.55;
  }

  .mc1__points-badge {
    font-size: 14px;
    padding: 6px 14px;
  }

  /* Stats - desktop is 3 circles at 200×200 = 600px row width, would
     wrap awkwardly on phones. Shrink to 110px so all 3 fit in a row
     on every modern phone (3 × 110 + 2 gaps = 350px, fits at 360px+
     viewport). On the tiniest viewports (<360px) flex-wrap will let
     the third circle drop to a second row. */
  .mc1__stats {
    gap: 12px;
    justify-content: space-between;
    width: 100%;
  }
  .mc1__stat {
    width: 110px;
    height: 110px;
  }
  .mc1__stat-value {
    font-size: 18px;
  }
  .mc1__stat-label {
    font-size: 10px;
  }

  /* Card image - desktop is a tall figure with paint splash that
     sits as a 50% side column. On mobile it falls below the content;
     cap its height so it doesn't take over the whole screen. */
  .mc1__card-image {
    width: 100%;
    max-width: 360px;
    max-height: 320px;
    align-self: center;
    justify-content: center;
  }
  .mc1__card-image img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
  }
}

@media (max-width: 480px) {
  .mc1 {
    padding: 40px 16px 20px;
    gap: 32px;
  }
  .mc1__card {
    padding: 26px 18px;
    border-radius: 16px;
  }
  .mc1__tagline { font-size: 17px; }
  .mc1__description { font-size: 15px; }

  .mc1__stats {
    justify-content: center;
  }
  .mc1__stat {
    width: 100px;
    height: 100px;
  }
  .mc1__stat-value { font-size: 17px; }
  .mc1__stat-label { font-size: 9.5px; }
  .mc1__card-image { max-height: 280px; }
}


/* Mobile (≤ 749px) - added by mobile-spacing audit so this section
 * follows the project's standard 20px-vertical mobile rhythm. */
@media (max-width: 749px) {
  .mc1 {
    padding: 20px 0;
  }
}
/* END_SECTION:monthly_challenges_1 */

/* START_SECTION:monthly_challenges_2 (INDEX:110) */
/* Middle content section - 80px between sections (40px each side). */
.mc_sec_3 {
    padding: 40px 0;
}

/* --- Row 1 --- */
.mc_sec_3 .mc_sec_3_row {
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1320 / 450;
    display: flex;
    align-items: center;
    border-radius: 20px;
    /* Dark backdrop so the bg-image-at-0.2-opacity (via pseudo overlay)
     * doesn't expose a bright underlying canvas - text reads white
     * cleanly on top. */
    background-color: #212121;
    position: relative;
    isolation: isolate;
}

/* Dim the bg image to 20% via a pseudo-element overlay. Can't use
 * `opacity` on .mc_sec_3_row directly (would dim the content too).
 * Mix-blend `multiply` against a dark backdrop achieves the same
 * "image at 0.2 opacity" effect while keeping the heading + copy +
 * button at full brightness. */
.mc_sec_3 .mc_sec_3_row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(33, 33, 33, 0.8);
    z-index: 0;
    pointer-events: none;
}

.mc_sec_3 .mc_sec_3_row > * {
    position: relative;
    z-index: 1;
}

.mc_sec_3 .mc_sec_3_content {
    width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    margin-left: 30px;
}

.mc_sec_3 .mc_sec_3_text_group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.mc_sec_3 .mc_sec_3_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}

.mc_sec_3 .mc_sec_3_subtitle {
    align-self: stretch;
    color: white;
    font-size: 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    word-wrap: break-word;
    margin: 0;
}

.mc_sec_3 .mc_sec_3_title {
    align-self: stretch;
    color: white;
    font-size: 32px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1em;
    word-wrap: break-word;
    margin: 0;
}

.mc_sec_3 .mc_sec_3_desc {
    align-self: stretch;
    color: white;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    margin: 0;
    line-height: 1.5em;
}

.mc_sec_3 .mc_sec_3_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 278px;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 4px;
    color: white;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.mc_sec_3_list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
    line-height: 1.3em;
    margin: 0;
}

.mc_sec_3_list_item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
}

div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU {
    width: 100%;
}

div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU shopify-forms-embed#app-embed {
    margin-left: -20%;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Same pattern as giveaways_3 / partner_collab_1: 1320:450 aspect-
 * ratio bg-image hero with 560px content panel. Stack everything,
 * use min-height instead of aspect-ratio.
 */
@media (max-width: 749px) {
  .mc_sec_3 { padding: 20px 0; }
  .mc_sec_3 .mc_sec_3_row {
    aspect-ratio: auto;
    min-height: 280px;
    border-radius: 16px;
    padding: 22px 16px;
  }
  .mc_sec_3 .mc_sec_3_content {
    width: 100%;
    margin-left: 0;
    gap: 14px;
  }
  .mc_sec_3 .mc_sec_3_subtitle { font-size: 14px; }
  .mc_sec_3 .mc_sec_3_title {
    font-size: 18px;
    line-height: 1.1;
  }
  .mc_sec_3 .mc_sec_3_desc {
    font-size: 14px;
    line-height: 1.45;
  }
  .mc_sec_3 .mc_sec_3_btn {
    width: auto;
    align-self: stretch;
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
  }
  /* Widen the Klaviyo / Shopify form embed to fill its container,
     and stretch the email input + buttons (Continue with shop,
     Subscribe to Enter) to full width with bigger tap targets.
     !important is needed because the embed renders inline width /
     height attributes the stylesheet otherwise loses to. */
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU,
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU shopify-forms-embed#app-embed {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU input[type='email'],
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU input[type='text'] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 52px !important;
    font-size: 16px !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
  }
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU button,
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU [type='submit'] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 56px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
  }
}
/* END_SECTION:monthly_challenges_2 */

/* START_SECTION:monthly_challenges_3 (INDEX:111) */
/* Middle content section - 80px between sections (40px each side). */
.mc3c {
  padding: 40px 0;
}
@media (max-width: 749px) {
  .mc3c { padding: 20px 0; }
}

.mc3c__grid {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
}

/* --- Card --- */
.mc3c__card {
  position: relative;
  flex: 1;
  min-height: 560px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mc3c__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.mc3c__card-img--placeholder {
  background: #212121;
}

.mc3c__card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 20px;
}

.mc3c__card-content {
  position: relative;
  z-index: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Title --- */
.mc3c__card-title {
  color: #fff;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2em;
  margin: 0;
  word-wrap: break-word;
}

/* --- Feature List --- */
.mc3c__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mc3c__list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(15px);
  border-radius: 12px;
  padding: 12px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  min-height: 48px;
}

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

/* --- Button --- */
.mc3c__btn-wrap {
  display: flex;
  flex-direction: column;     /* button on top, badge below - was inline before */
  align-items: center;        /* center both horizontally */
  gap: 14px;                  /* breathing room between button and badge */
  margin-top: 30px;
}

.mc3c__btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 4px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.mc3c__btn {
  cursor: pointer;
  border: none;
}

.mc3c__btn.mc-btn--completed,
.mc3c__btn:disabled {
  opacity: 0.65;
  cursor: default;
}

.mc3c__points-notify {
  /* Sits in a column-flex parent now - gap handles vertical spacing,
     so margin-top is no longer needed. */
  text-align: center;
  color: #212121;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;            /* dialled back from 700 - was competing with the button */
  letter-spacing: 0.01em;
}

.mc_sec_3 .mc_sec_3_desc~div {
    margin-bottom: -40px;
}

.mc_sec_3 .mc_sec_3_text_group {
    gap: 10px !important;
}

/* --- Modal (manual session log) --- */
.mc3c-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px;
}
.mc3c-modal__panel {
  background: #fff; color: #212121;
  border-radius: 16px; padding: 28px;
  width: 100%; max-width: 460px;
  position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  font-family: 'Montserrat', sans-serif;
}
.mc3c-modal__close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; font-size: 28px; line-height: 1;
  cursor: pointer; color: #888;
}
.mc3c-modal__title { margin: 0 0 6px; font-family: 'Racing Sans One', sans-serif; font-size: 24px; line-height: 1.2; }
.mc3c-modal__hint { margin: 0 0 18px; font-size: 13px; color: #666; }
.mc3c-modal__form { display: flex; flex-direction: column; gap: 12px; }
.mc3c-modal__form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.mc3c-modal__form input,
.mc3c-modal__form textarea {
  font-family: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid #ddd; border-radius: 8px; background: #f0f0f0;
}
.mc3c-modal__form textarea { resize: vertical; }
.mc3c-modal__opt { font-weight: 400; color: #888; font-size: 11px; }
.mc3c-modal__msg { font-size: 13px; min-height: 18px; }
.mc3c-modal__msg--ok { color: #0a7d2e; }
.mc3c-modal__msg--err { color: #c0392b; }
.mc3c-modal__submit { margin-top: 6px; }

/* --- Responsive --- */
@media screen and (max-width: 990px) {
  .mc3c__grid {
    flex-direction: column;
  }

  .mc3c__card {
    min-height: 420px;
  }
}

@media (max-width: 749px) {
  .mc3c__card {
    min-height: 0;
    padding: 22px;
  }
  .mc3c__card-content {
    padding: 0;
    gap: 14px;
  }
  .mc3c__card-title {
    font-size: 18px;
    line-height: 1.15;
  }
  .mc3c__list-item {
    font-size: 12px;
    padding: 10px 12px;
    min-height: 44px;
  }
  .mc3c__btn-wrap { margin-top: 18px; gap: 10px; }
  .mc3c__btn {
    align-self: stretch;
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
    white-space: normal;
  }
  .mc3c__points-notify { font-size: 12px; }
  .mc3c-modal__panel {
    padding: 22px;
    border-radius: 16px;
  }
  .mc3c-modal__title { font-size: 18px; }
}
/* END_SECTION:monthly_challenges_3 */

/* START_SECTION:monthly_challenges_4 (INDEX:112) */
/* LAST content section - 40px top, 80px bottom (footer below gives 0). */
.mc4 {
  padding: 40px 0 80px;
}

.mc4__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ── Heading ── */
.mc4__heading {
  color: var(--black, #212121);
  font-size: clamp(36px, 4vw, 52px);
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1;
  text-align: center;
  margin: 0;
}

/* ── Slider wrapper (arrows + swiper) ── */
.mc4__slider-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.mc4__swiper {
  flex: 1;
  min-width: 0;
}

/* ── Arrow buttons ── */
.mc4__arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #ffffff94;
    color: #212121;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, opacity .2s;
    z-index: 2;
    position: absolute;
    backdrop-filter: blur(5px);
}

.mc4__inner button.mc4__arrow.mc4__arrow--prev {
    left: -25px;
}

.mc4__inner button.mc4__arrow.mc4__arrow--next {
    right: -25px;
}

.mc4__arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Hide arrows / dots based on settings */
[data-show-arrows="false"] .mc4__arrow { display: none; }
[data-show-dots="false"] .mc4__dots   { display: none; }

/* ── Swiper pagination dots ── */
.mc4__dots {
  margin-top: 20px;
  position: static;
  text-align: center;
}

/* Hide the swiper until Swiper finishes its mount pass so the
 * first slide doesn't flash at intrinsic full-width before
 * snapping down to per-view.
 * ──────────────────────────────────────────────────────────
 * Applied to the OUTER `.mc4__swiper` element only - NOT to
 * `.swiper-wrapper`. Swiper transforms `.swiper-wrapper` to
 * animate slides; any CSS transition declared on it overrides
 * Swiper's own transform transitions and breaks the carousel
 * (slides stop sliding). Fade is opacity-only on the outer
 * element so the inner wrapper is left to Swiper completely. */
.mc4__swiper:not(.swiper-initialized) {
  opacity: 0;
  visibility: hidden;
}
.mc4__swiper.swiper-initialized {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
}

/* ── Champion card ── */
.mc4__card {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 320 / 448;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  height: auto !important;
}

/* Background image */
.mc4__card-media {
  position: relative;
  inset: 0;
}

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

/* ── Card overlay ──────────────────────────────────────────────
 * Exact Figma gradient:
 *   • 2 stops only: #ffd201 (yellow) → #d70000 (red)
 *   • Linear 90deg (yellow left → red right)
 *   • 40% fill opacity
 *   • Background blur effect (8px) for legibility over photos
 * Translating Figma's "fill 40%" to CSS rgba - 0.4 alpha per stop. */
.mc4__card-overlay {
    z-index: 1;
    padding: 14px 18px 16px;
    background: linear-gradient(90deg, rgba(248, 190, 0, 0.4) 0%, rgba(215, 2, 1, 0.4) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}


.mc4__champion-name {
  color: #fff;
  font-size: 20px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
}

/* ── Location row ── */
.mc4__locations {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mc4__location {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mc4__location-svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #fff;
}

.mc4__location-text {
  color: #fff;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 749px) {
  .mc4 {
    padding: 20px 0 40px;
  }

  .mc4__arrow {
    width: 36px;
    height: 36px;
  }

  .mc4__location-text {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .mc4__inner {
    padding: 0 12px;
  }

  .mc4__slider-wrap {
    gap: 10px;
  }
}
/* END_SECTION:monthly_challenges_4 */

/* START_SECTION:nro-bundle-builder (INDEX:116) */
/* Content section on the NRO page - 40px top & bottom so each boundary
   with its neighbours (intro above, manage below) totals a clean 80px. */
.nro-bundle {
  background: #212121;
  padding: 40px 0;
  color: #fff;
}
.nro-bundle__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}
.nro-bundle__title {
  font-family: 'Racing Sans One', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 12px;
  color: #fff;
}
.nro-bundle__sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.nro-bundle__empty-state {
  padding: 48px 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-family: 'Montserrat', sans-serif;
}

.nro-bundle__layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}

.nro-bundle__grid {
  display: grid;
  /* 4 cards per row - a comfortable width for the title + price + add
     button. Variant selection happens in the Choose Options modal. */
  grid-template-columns: repeat(4, 1fr);
  /* 40px vertical gap between product-card rows; 14px between columns. */
  gap: 40px 14px;
}
/* Tablet - 2 per row (4 would be too cramped beside the bundle sidebar). */
@media (max-width: 990px) {
  .nro-bundle__grid { grid-template-columns: repeat(2, 1fr); }
}
.nro-bundle__card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, transform 0.15s;
  /* Whole card is clickable - the image and title are real anchors to
     the PDP; clicking any other empty area also navigates there.
     Buttons (Add to Bundle / Choose Options) do NOT navigate. */
  cursor: pointer;
}
/* The `display: flex` above has higher specificity than the browser's
   default `[hidden] { display: none }` user-agent rule, so toggling the
   `hidden` attribute on a card alone wouldn't actually hide it. Restore
   the intent explicitly - this is what makes the search filter visible. */
.nro-bundle__card[hidden] {
  display: none !important;
}
.nro-bundle__card:hover {
  border-color: rgba(255, 210, 1, 0.4);
  transform: translateY(-2px);
}
.nro-bundle__card-img-wrap {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* anchor for the decrement chip + the sale/sold-out badge */
  text-decoration: none;
}
.nro-bundle__card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

/* Sale / sold-out badge - small rounded pill, top-left over the image,
   gradient fill, white uppercase text. Mirrors Dawn's card badge. */
.nro-bundle__card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.nro-bundle__card-badge--sale {
  background: linear-gradient(90deg, #ffd201 0%, #ff6b00 50%, #d70000 100%);
  box-shadow: 0 3px 8px rgba(215, 0, 0, 0.3);
}
.nro-bundle__card-badge--soldout {
  background: rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, 0.85);
}

.nro-bundle__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.nro-bundle__card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 3px;
  color: #fff;
}
.nro-bundle__card-title-link {
  color: #fff;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  transition: color 0.15s;
}
.nro-bundle__card-title-link:hover {
  color: #ffd201;
}
.nro-bundle__card-vendor {
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 6px;
}
.nro-bundle__card-price {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #ffd201;
  margin: 0 0 12px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
/* Struck-through compare-at price (on-sale case). */
.nro-bundle__card-price-was {
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
}
.nro-bundle__card-price-now {
  color: #ffd201;
}
/* "From" prefix for price-varies products. */
.nro-bundle__card-price-from {
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.nro-bundle__card-add {
  margin-top: auto;
  width: 100%;
  background: linear-gradient(90deg, #ffd201 0%, #ff6b00 50%, #d70000 100%);
  color: #fff;
  border: 0;
  padding: 11px 12px;
  border-radius: 8px;
  font-family: Montserrat, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 10px rgba(215, 0, 0, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.nro-bundle__card-add:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 14px rgba(215, 0, 0, 0.4);
}
.nro-bundle__card-add--added {
  background: #1e7b1e;
  box-shadow: 0 4px 10px rgba(30, 123, 30, 0.4);
}

/* In-bundle state - card visibly reflects "this product is in your
   bundle" with a gold border + subtle inner glow. Persistent across
   page lifetime (sidebar removal also clears it). */
.nro-bundle__card.nro-bundle__card--in-bundle {
  border-color: rgba(255, 210, 1, 0.7);
  box-shadow:
    0 0 0 1px rgba(255, 210, 1, 0.35),
    0 10px 24px rgba(255, 210, 1, 0.08);
}

/* Sold-out fallback - applied at runtime when /cart/add.js returns 422
   "sold out" between page load and click. The Liquid filter already
   hides products that were oos at render, so this only fires for the
   between-state. Mute the card visually so it's clearly inactive but
   still informative (the customer can see what was sold out). */
.nro-bundle__card.nro-bundle__card--sold-out {
  opacity: 0.55;
  filter: grayscale(0.6);
}
.nro-bundle__card.nro-bundle__card--sold-out .nro-bundle__card-add {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  cursor: not-allowed;
  box-shadow: none;
  text-shadow: none;
}
.nro-bundle__card.nro-bundle__card--sold-out .nro-bundle__card-add:hover {
  /* No interactive feedback on a disabled button. */
  transform: none;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* Unified stepper - replaces .nro-bundle__card-add once a single-
   variant product is in the bundle (multi-variant cards keep "Choose
   Options" instead - see syncCardStates). Same footprint/position as
   the button it replaces. */
.nro-bundle__card-stepper {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 210, 1, 0.4);
  border-radius: 8px;
  padding: 4px;
}
.nro-bundle__card-stepper[hidden] { display: none; }
.nro-bundle__card-stepper-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
  /* Eliminate browser's ~300ms double-tap-zoom detection delay on
     touch devices, and iOS's grey tap-highlight flash. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nro-bundle__card-stepper-btn:hover {
  background: rgba(255, 210, 1, 0.25);
}
/* Pressed state fires instantly on mousedown/touchstart so the
   customer sees acknowledgement before the DOM rebuild completes. */
.nro-bundle__card-stepper-btn:active {
  background: rgba(255, 210, 1, 0.4);
  transform: scale(0.92);
  transition-duration: 0s;
}
.nro-bundle__card-stepper-count {
  flex: 1;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.nro-bundle__rate-banner {
  background: linear-gradient(90deg, #d70000 0%, #b30000 100%);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 18px;
  border-radius: 8px;
  text-align: center;
  margin: 0 auto 24px;
  max-width: 749px;
  box-shadow: 0 8px 24px rgba(215, 0, 0, 0.3);
}
.nro-bundle__card-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(60%);
}

.nro-bundle__grid-empty {
  padding: 36px 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  line-height: 1.55;
}

/* ── Sticky bundle sidebar ──────────────────────────────────────────
   --sticky-header-total-h is set by header_custom.liquid's sticky-menu
   JS to the real combined height of whatever's currently pinned to the
   viewport top (menu strip + promo/shipping-nudge banner, 0 when
   neither is stuck) - NOT Dawn's --header-height, which tracks the
   disabled stock header section and has no relationship to this site's
   actual (custom-built) sticky header. max-height is derived from the
   same value so the card can never extend past the viewport bottom,
   regardless of how tall the stuck stack currently is. */
.nro-bundle__cart {
  position: sticky;
  top: calc(var(--sticky-header-total-h, 0px) + 16px);
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 210, 1, 0.25);
  border-radius: 16px;
  padding: 20px;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - var(--sticky-header-total-h, 0px) - 32px);
  overflow-y: auto;
}
.nro-bundle__cart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nro-bundle__cart-title {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 22px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  color: #fff;
  line-height: 1;
}
.nro-bundle__cart-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.nro-bundle__cart-empty p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  margin: 18px 0;
}

.nro-bundle__cart-item {
  display: flex;
  gap: 10px;
  align-items: center;
  /* Vertical breathing room between items + a faint divider so the
     boundary between rows reads at a glance. Previously rows abutted
     each other directly which made multi-item bundles look cramped
     (see the "5150 + ABE" stacked screenshot Noted:). */
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nro-bundle__cart-item:first-child {
  padding-top: 4px;
}
.nro-bundle__cart-item:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}
.nro-bundle__cart-item-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  object-fit: contain;
  padding: 4px;
  flex-shrink: 0;
}
.nro-bundle__cart-item-body {
  flex: 1;
  min-width: 0;
}
.nro-bundle__cart-item-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nro-bundle__cart-item-price {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 6px;
  font-weight: 600;
}
.nro-bundle__cart-item-unit {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}
.nro-bundle__cart-item-qty {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  padding: 2px;
}
.nro-bundle__cart-item-qbtn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.12s, color 0.12s, transform 0.08s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nro-bundle__cart-item-qbtn:hover {
  background: rgba(255, 210, 1, 0.18);
  color: #ffd201;
}
.nro-bundle__cart-item-qbtn:active {
  background: rgba(255, 210, 1, 0.32);
  transform: scale(0.88);
  transition-duration: 0s;
}
.nro-bundle__cart-item-qval {
  min-width: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.nro-bundle__cart-item-remove {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s, color 0.15s, transform 0.08s;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nro-bundle__cart-item-remove:hover {
  background: rgba(215, 0, 0, 0.15);
  color: #ff7a7a;
}
.nro-bundle__cart-item-remove:active {
  background: rgba(215, 0, 0, 0.32);
  color: #ff7a7a;
  transform: scale(0.88);
  transition-duration: 0s;
}

.nro-bundle__cart-cadence {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Defeat `display: flex` overriding the [hidden] attribute. Without
   this, hiding via JS (`.hidden = true`) leaves the element visible
   because the cascaded `display: flex` wins. */
.nro-bundle__cart-cadence[hidden],
.nro-bundle__cart-totals[hidden] {
  display: none !important;
}
.nro-bundle__cart-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
}
.nro-bundle__cadence-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nro-bundle__cadence-pill {
  flex: 1 1 auto;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.nro-bundle__cadence-pill:hover {
  border-color: rgba(255, 210, 1, 0.4);
  color: #fff;
}
.nro-bundle__cadence-pill:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255, 210, 1, 0.25);
}
.nro-bundle__cadence-pill--active {
  background: #ffd201;
  border-color: #ffd201;
  color: #212121;
}
.nro-bundle__cadence-pill--active:hover {
  color: #212121;
}

.nro-bundle__cart-totals {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nro-bundle__cart-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}
.nro-bundle__cart-row--save {
  color: #ffd201;
}
.nro-bundle__cart-row--total {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.005em;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 4px;
}

.nro-bundle__cart-submit {
  width: 100%;
  background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
  color: #fff;
  border: 0;
  padding: 14px 16px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 8px 20px rgba(215, 0, 0, 0.35);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.nro-bundle__cart-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(215, 0, 0, 0.5);
}
.nro-bundle__cart-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nro-bundle__cart-fine {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* ── Handle, backdrop, close ─────────────────────────────────────── */
/* All three are mobile-only - hidden on desktop. The .nro-bundle__cart
   stays as a sticky sidebar on desktop and ignores the drawer state
   class. */
.nro-bundle__cart-handle,
.nro-bundle__cart-backdrop,
.nro-bundle__cart-close {
  display: none;
}

/* ── Mobile / tablet ─────────────────────────────────────────────── */
@media (max-width: 990px) {
  .nro-bundle__layout {
    grid-template-columns: 1fr;
  }
  /* The cart becomes a fixed slide-out drawer pinned to the right.
     Translated 100% off-screen by default; the .nro-bundle--drawer-open
     class on the section root slides it back to 0. */
  .nro-bundle__cart {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 92vw);
    max-height: 100vh;
    z-index: 10001;
    margin: 0;
    border-radius: 16px 0 0 16px;
    border-right: 0;
    background: #212121;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.55);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nro-bundle--drawer-open .nro-bundle__cart {
    transform: translateX(0);
  }

  /* Floating handle - always visible, pinned to right viewport edge,
     vertically centred. Shows a bag icon + "Bundle" label + a tiny
     badge with the live item count. */
  .nro-bundle__cart-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9998;
    padding: 14px 8px;
    background: linear-gradient(135deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    border: 0;
    border-radius: 12px 0 0 12px;
    box-shadow: -4px 6px 16px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .nro-bundle__cart-handle:hover {
    transform: translate(-2px, -50%);
    box-shadow: -8px 8px 20px rgba(0, 0, 0, 0.45);
  }
  /* Hide the handle when the drawer is open (drawer is now visible) */
  .nro-bundle--drawer-open .nro-bundle__cart-handle {
    opacity: 0;
    pointer-events: none;
  }
  .nro-bundle__cart-handle-icon {
    display: block;
  }
  .nro-bundle__cart-handle-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 2px;
  }
  .nro-bundle__cart-handle-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #212121;
    color: #ffd201;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 22px;
    text-align: center;
    border: 2px solid #ffd201;
    box-sizing: border-box;
  }
  .nro-bundle__cart-handle-badge[hidden] {
    display: none;
  }

  /* Backdrop dims the page behind the open drawer. Click-to-close. */
  .nro-bundle__cart-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .nro-bundle--drawer-open .nro-bundle__cart-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Close (×) button inside drawer header - only shown on mobile. */
  .nro-bundle__cart-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    transition: background 0.15s;
  }
  .nro-bundle__cart-close:hover {
    background: rgba(255, 255, 255, 0.18);
  }
  /* Lock body scroll while the drawer is open (prevents background
     scroll-jacking behind the drawer). The class is also set on the
     body by JS so it works regardless of which section instance
     opened the drawer. */
}
body.nro-bundle-drawer-noscroll {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .nro-bundle__card,
  .nro-bundle__card-add,
  .nro-bundle__cart-submit {
    transition: none;
  }
}

/* ── Duplicate-subscription warning modal ─────────────────────────── */
/* Lives outside .nro-bundle scope because it's appended to <body>.
   Same visual language as the section (dark card, gradient CTA) so it
   feels native to the bundle UX. */
.nro-dup-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: nro-dup-fade 0.18s ease-out;
}
@keyframes nro-dup-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.nro-dup-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 18, 0.55);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  cursor: pointer;
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .nro-dup-modal__backdrop { background: rgba(0, 0, 0, 0.75); }
}
.nro-dup-modal__card {
  position: relative;
  background: #212121;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  font-family: 'Montserrat', sans-serif;
}
.nro-dup-modal__title {
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: #fff;
}
.nro-dup-modal__list {
  list-style: disc;
  padding-left: 20px;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.45;
  color: #fff;
  font-weight: 600;
}
.nro-dup-modal__list li { margin-bottom: 4px; }
.nro-dup-modal__body {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
  margin: 0 0 24px;
}
.nro-dup-modal__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.nro-dup-modal__btn {
  flex: 1 1 auto;
  min-width: 140px;
  padding: 12px 18px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.nro-dup-modal__btn--primary {
  background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 8px 20px rgba(215, 0, 0, 0.35);
}
.nro-dup-modal__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(215, 0, 0, 0.5);
}
.nro-dup-modal__btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.nro-dup-modal__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
}
@media (max-width: 420px) {
  .nro-dup-modal__card { padding: 24px 20px; }
  .nro-dup-modal__title { font-size: 19px; }
  .nro-dup-modal__actions { flex-direction: column; }
  .nro-dup-modal__btn { width: 100%; }
}

/* ── Choose Options modal ──────────────────────────────────────────── */
/* Centered popup opened by a multi-variant card's "Choose Options"
   button. Styled after Dawn's quick-add modal - dark dimmed backdrop,
   centered card ~480px wide, scrollable. The modal element lives in the
   section markup; the JS toggles the `hidden` attribute. */
.nro-opt-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: nro-opt-modal-fade 0.16s ease-out;
}
.nro-opt-modal[hidden] {
  display: none;
}
@keyframes nro-opt-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.nro-opt-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 18, 0.6);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  cursor: pointer;
}
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .nro-opt-modal__backdrop { background: rgba(0, 0, 0, 0.78); }
}
.nro-opt-modal__card {
  position: relative;
  background: #212121;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 40px 44px 34px;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  font-family: Montserrat, -apple-system, sans-serif;
  animation: nro-opt-modal-rise 0.18s ease-out;
}
@keyframes nro-opt-modal-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nro-opt-modal__card:focus {
  outline: none;
}
.nro-opt-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nro-opt-modal__close:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Two-column body - image left, options right (mirrors the PDP
   quick-add layout). Stacks on narrow screens. */
.nro-opt-modal__body {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
.nro-opt-modal__media {
  flex: 0 0 300px;
  max-width: 300px;
}
.nro-opt-modal__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.nro-opt-modal__rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 2px 0 18px;
}
.nro-opt-modal__img-wrap {
  width: 120px;
  height: 120px;
  margin: 0 0 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nro-opt-modal__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  display: block;
}
/* Description under the image - clamped, with a View more/less toggle. */
.nro-opt-modal__desc {
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-height: 150px;
  overflow: hidden;
}
.nro-opt-modal__desc--expanded {
  max-height: none;
}
.nro-opt-modal__desc p,
.nro-opt-modal__desc ul,
.nro-opt-modal__desc ol {
  margin: 0 0 8px;
}
.nro-opt-modal__desc p:last-child,
.nro-opt-modal__desc ul:last-child,
.nro-opt-modal__desc ol:last-child {
  margin-bottom: 0;
}
.nro-opt-modal__desc ul,
.nro-opt-modal__desc ol {
  padding-left: 18px;
}
.nro-opt-modal__desc img {
  max-width: 100%;
  height: auto;
}
.nro-opt-modal__desc-toggle {
  margin-top: 8px;
  padding: 0;
  background: none;
  border: 0;
  color: #ffd201;
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nro-opt-modal__desc-toggle:hover {
  color: #fff;
}

.nro-opt-modal__heading {
  text-align: left;
  margin-bottom: 4px;
}
.nro-opt-modal__vendor {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
}
.nro-opt-modal__title {
  font-family: 'Racing Sans One', Impact, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: #fff;
}
.nro-opt-modal__price {
  font-family: 'Racing Sans One', Impact, sans-serif;
  font-size: 26px;
  color: #ffd201;
  letter-spacing: 0.02em;
}

/* Loading skeleton - shown while the product detail fetch is in flight. */
.nro-opt-modal__loading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 4px;
}
.nro-opt-modal__skel {
  display: block;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: nro-opt-skel 1.2s linear infinite;
}
.nro-opt-modal__skel--short { width: 60%; }
@keyframes nro-opt-skel {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.nro-opt-modal__error {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 12px 0;
}

/* ── Option pickers inside the modal ──────────────────────────────── */
/* One dark-pill <select> per product option (Size / Flavor / etc.). */
.nro-opt-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.nro-opt-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nro-opt-modal__field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.nro-opt-modal__select {
  width: 100%;
  padding: 11px 36px 11px 13px;
  background-color: rgba(255, 255, 255, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffd201' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.nro-opt-modal__select:hover {
  border-color: rgba(255, 210, 1, 0.45);
  background-color: rgba(255, 255, 255, 0.09);
}
.nro-opt-modal__select:focus-visible {
  outline: none;
  border-color: #ffd201;
  box-shadow: 0 0 0 3px rgba(255, 210, 1, 0.18);
}
.nro-opt-modal__select option {
  background: #2a2a2a;
  color: #fff;
  font-weight: 600;
  padding: 8px 10px;
}

.nro-opt-modal__add {
  width: 100%;
  background: linear-gradient(90deg, #ffd201 0%, #ff6b00 50%, #d70000 100%);
  color: #fff;
  border: 0;
  padding: 13px 16px;
  border-radius: 8px;
  font-family: Montserrat, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 16px rgba(215, 0, 0, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.nro-opt-modal__add:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(215, 0, 0, 0.45);
}
.nro-opt-modal__details {
  display: block;
  margin-top: 14px;
  text-align: left;
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nro-opt-modal__details:hover {
  color: #fff;
}
.nro-opt-modal__add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(60%);
}

@media (prefers-reduced-motion: reduce) {
  .nro-opt-modal,
  .nro-opt-modal__card,
  .nro-opt-modal__add {
    animation: none;
    transition: none;
  }
}

@media (max-width: 749px) {
  .nro-opt-modal { padding: 14px; }
  .nro-opt-modal__card { padding: 26px 20px 22px; }
  .nro-opt-modal__body { flex-direction: column; gap: 16px; }
  .nro-opt-modal__media { flex: none; width: 100%; max-width: 100%; }
  .nro-opt-modal__img-wrap { max-width: 220px; margin: 0 auto; }
  .nro-opt-modal__heading { text-align: center; }
  .nro-opt-modal__title { font-size: 23px; }
}

/* ── Toolbar (search + count) ─────────────────────────────────────── */
.nro-bundle__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.nro-bundle__search {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 12px;
  transition: background 0.15s;
  /* Two-layer background-clip trick: the inner padding-box fill is the
     translucent grey idle state; the outer border-box fill is the
     trademark red→orange→yellow gradient. On idle we hide the gradient
     by setting border-color transparent + a matching neutral border
     layer. On focus we swap in the gradient. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) padding-box,
    linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) border-box;
  border: 1.5px solid transparent;
}
.nro-bundle__search:focus-within {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) padding-box,
    linear-gradient(90deg, #d70000 0%, #ff6b00 50%, #ffd201 100%) border-box;
  box-shadow: 0 0 0 3px rgba(215, 0, 0, 0.12);
}
/* Suppress the browser's default focus outline on the input itself -
   the gradient border on the parent carries the focus signal now. */
.nro-bundle__search-input:focus {
  outline: none;
  box-shadow: none;
}
.nro-bundle__search-icon {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.5);
  flex: 0 0 auto;
}
.nro-bundle__search-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  padding: 2px 0;
}
.nro-bundle__search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.nro-bundle__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.3);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path fill='black' d='M7 5.6L11.2 1.4l1.4 1.4L8.4 7l4.2 4.2-1.4 1.4L7 8.4l-4.2 4.2-1.4-1.4L5.6 7 1.4 2.8l1.4-1.4z'/></svg>") center / contain no-repeat;
  cursor: pointer;
}
.nro-bundle__count {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  flex: 0 0 auto;
}
.nro-bundle__count [data-nro-bundle-count-rendered],
.nro-bundle__count [data-nro-bundle-count-total] {
  color: #fff;
  font-weight: 600;
}

/* ── Products layout: filter sidebar + main content ─────────────────── */
.nro-bundle__products-inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
}
.nro-bundle__main {
  min-width: 0;
}

/* ── Filters (Product type / Brand / Availability / Price) ───────────
   Left sidebar of native <details> cards, matching the section's own
   dark-card language (same treatment as .nro-bundle__no-results etc)
   instead of the earlier white-pill mockup - white text, subtle dark
   fill, minimal 5px rounding. Open state reveals its body in normal
   document flow (pushes the grid down, never a floating overlay). */
.nro-bundle__filter-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.nro-bundle__filter-bar-label {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}
.nro-bundle__filter-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nro-bundle__filter-pill {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.nro-bundle__filter-pill-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 22px;
  cursor: pointer;
  list-style: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.nro-bundle__filter-pill-summary::-webkit-details-marker,
.nro-bundle__filter-pill-summary::marker {
  display: none;
  content: '';
}
.nro-bundle__filter-summary-count {
  margin-left: 4px;
  color: #ffd201;
  font-weight: 700;
}
.nro-bundle__filter-pill-caret {
  flex-shrink: 0;
  color: #fff;
  transition: transform 0.15s;
}
.nro-bundle__filter-pill[open] .nro-bundle__filter-pill-caret {
  transform: rotate(180deg);
}
.nro-bundle__filter-pill[open] > .nro-bundle__filter-pill-summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nro-bundle__filter-pill-body {
  padding: 12px 22px 18px;
}
.nro-bundle__filter-list {
  list-style: none;
  margin: 0;
  padding: 0 10px 0 0;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
}
.nro-bundle__filter-showmore,
.nro-bundle__filters-clear {
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.nro-bundle__filter-showmore {
  margin-top: 8px;
  display: block;
  color: rgba(255, 255, 255, 0.55);
}
.nro-bundle__filters-clear {
  color: rgba(255, 255, 255, 0.55);
}
.nro-bundle__filter-showmore:hover,
.nro-bundle__filters-clear:hover {
  color: #ffd201;
}
.nro-bundle__facet-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin: 0 0 0 -8px;
  border-radius: 5px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.12s;
}
.nro-bundle__facet-option:hover {
  background: rgba(255, 255, 255, 0.06);
}
.nro-bundle__facet-option input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: #ffd201;
}
.nro-bundle__facet-option span:nth-child(2) {
  flex: 1;
  font-weight: 500;
}
.nro-bundle__facet-option-count {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.nro-bundle__price-fields {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.nro-bundle__price-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.nro-bundle__price-field input {
  padding: 8px 10px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  width: 100%;
}
.nro-bundle__price-sep {
  padding-bottom: 10px;
  color: rgba(255, 255, 255, 0.4);
}
.nro-bundle__price-apply {
  width: 100%;
  margin-top: 12px;
  padding: 9px;
  border-radius: 5px;
  border: 0;
  background: linear-gradient(90deg, #d70000 0%, #ff6b00 100%);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.nro-bundle__price-apply:hover {
  filter: brightness(1.08);
}
@media (max-width: 989px) {
  .nro-bundle__products-inner {
    grid-template-columns: 1fr;
  }
  /* Sidebar collapses above the grid, full-width - pills stay in the
     same single-column vertical stack as desktop. A row/wrap layout
     was tried here and reverted: flex-direction: row defaults every
     item in that row to align-items: stretch, so an expanded "Product
     type" pill stretched its collapsed neighbour to match its height -
     a large blank white shape, not a pill. */

  /* Reorder to search/count -> filters -> grid -> pagination on mobile
     (filters used to render first, above the search bar). .main has no
     styling of its own worth keeping at this width - display:contents
     drops its box so its own children (.toolbar/.grid/.pagination/
     .no-results) become direct items of .products-inner's grid,
     sitting alongside .filter-sidebar so `order` can interleave all of
     them. Desktop is untouched - this whole block is mobile-only. */
  .nro-bundle__main {
    display: contents;
  }
  .nro-bundle__toolbar {
    order: 1;
    /* Its own margin-bottom (1898) was spacing it from the grid in
       normal block flow. Now that it's a direct grid item, the grid's
       own 28px gap does that job too - both stacking left ~48px of
       dead air before "Filters". */
    margin-bottom: 0;
  }
  .nro-bundle__filter-sidebar {
    order: 2;
  }
  .nro-bundle__grid,
  .nro-bundle__no-results {
    order: 3;
  }
  .nro-bundle__pagination {
    order: 4;
  }
}

/* ── Pagination ─────────────────────────────────────────────────────
   Reuses Dawn's own .pagination__* markup/CSS (component-pagination.css,
   loaded by the pagination snippet) for real parity with /collections/all
   - same ellipsis/truncation logic, same classes. hz_custom.css restyles
   items into opaque white/gold circles sitewide; here we override shape
   + colour to sit inside NRO's own dark card treatment instead (rounded-
   square buttons on a dark bar, matching the rest of this section) -
   selectors are scoped under .nro-bundle__pagination and matched at
   equal-or-higher specificity than hz_custom.css so collections/all and
   every other paginated page keep the sitewide circle style untouched. */
.nro-bundle__pagination {
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
}
.nro-bundle__pagination[hidden] { display: none; }
.nro-bundle__pagination .pagination-wrapper { margin-top: 0; }
.nro-bundle__pagination ul.pagination__list > li > a.pagination__item {
  border-radius: 8px;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.06);
}
.nro-bundle__pagination .pagination__item {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}
.nro-bundle__pagination .pagination__item--current {
  color: #212121;
  font-weight: 700;
}
.nro-bundle__pagination a.pagination__item:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* ── No-results message ────────────────────────────────────────────── */
.nro-bundle__no-results {
  margin-top: 24px;
  padding: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}
.nro-bundle__no-results[hidden] { display: none; }
.nro-bundle__no-results p { margin: 0; }
.nro-bundle__no-results-clear {
  background: none;
  border: 0;
  color: #ffd201;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.nro-bundle__no-results-clear:hover { color: #fff; }

@media (max-width: 749px) {
  .nro-bundle { padding: 20px 0; }
  .nro-bundle__toolbar {
    gap: 10px;
  }
  .nro-bundle__count {
    width: 100%;
    text-align: left;
  }
  /* 2 cards per row, same as tablet - a single column at 20 cards/page
     made for a lot of scrolling before reaching pagination. Cards
     already work fine 2-up at tablet widths; phone width is narrower
     but the card content (image, title, price, one button) is compact
     enough to hold up. */
  .nro-bundle__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 10px;
  }
}
/* END_SECTION:nro-bundle-builder */

/* START_SECTION:nro-intro (INDEX:119) */
.nro-landing--intro-only {
    background: #212121 !important;
    color: #fff;
    /* !important so the shared .nro-landing rule (which now carries an
     * 80px bottom for the full landing variant) can't re-inflate this
     * intro-only band. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .nro-landing--intro-only .nro-intro {
    /* First section - 80px top absorbs the full gap from the banner
       (banner is full-bleed, 0 padding); 40px bottom pairs with the
       next section's 40px top for a standard 80px boundary. */
    padding: 80px 0 40px;
    text-align: center;
  }
  .nro-landing--intro-only .nro-intro__tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.55;
    margin: 0 auto 28px;
    max-width: 749px;
    color: rgba(255, 255, 255, 0.85);
  }
  .nro-landing--intro-only .nro-intro__cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .nro-landing--intro-only .nro-intro__cta {
    font-family: 'Montserrat', sans-serif;
    padding: 14px 28px;
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 12px;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .nro-landing--intro-only .nro-intro__cta--primary {
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 8px 20px rgba(215, 0, 0, 0.3);
  }
  .nro-landing--intro-only .nro-intro__cta--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(215, 0, 0, 0.4);
  }
  .nro-landing--intro-only .nro-intro__cta--ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
  }
  .nro-landing--intro-only .nro-intro__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  /* ── Mobile (< 750px) ──────────────────────────────────────────────
   * Tighten padding, stack CTAs full-width (instead of inline wrap
   * which looks ragged at narrow widths), bump tap target to 48px. */
  @media (max-width: 749px) {
    .nro-landing--intro-only .nro-intro {
      padding: 40px 0 20px;
    }
    .nro-landing--intro-only .nro-intro__tagline {
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 22px;
      max-width: 100%;
      padding: 0 4px;
    }
    .nro-landing--intro-only .nro-intro__cta-row {
      flex-direction: column;
      gap: 10px;
      align-items: stretch;
    }
    .nro-landing--intro-only .nro-intro__cta {
      width: 100%;
      padding: 14px 18px;
      min-height: 48px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
  }
/* END_SECTION:nro-intro */

/* START_SECTION:nro-landing (INDEX:120) */
/* Never Run Out Landing - Branded design
     Strong red→yellow gradient hero, racing-style typography,
     bold cards. No plain Amazon look anywhere. */

  .nro-landing,
  .nro-landing.color-scheme-1,
  .nro-landing.color-scheme-2,
  .nro-landing.color-scheme-3,
  .nro-landing.color-scheme-4,
  .nro-landing.color-scheme-5 {
    background: #212121 !important;
    color: #fff;
  }

  /* ── Intro (slim band under the brand banner) ─────────────── */
  .nro-intro {
    padding: 56px 0 40px;
    text-align: center;
  }
  .nro-intro__tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.55;
    margin: 0 auto 28px;
    max-width: 749px;
    color: rgba(255, 255, 255, 0.85);
  }
  .nro-intro__cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .nro-intro__cta {
    font-family: 'Montserrat', sans-serif;
    padding: 14px 28px;
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 12px;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .nro-intro__cta--primary {
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 8px 20px rgba(215, 0, 0, 0.3);
  }
  .nro-intro__cta--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(215, 0, 0, 0.4);
  }
  .nro-intro__cta--ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
  }
  .nro-intro__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  /* ── Generic section ──────────────────────────────────────── */
  /* Each block inside the landing section (pillars / how-it-works /
     FAQ) is its own sub-section. 40px top + 40px bottom → a clean
     80px between adjacent blocks (was 80px → 160px boundaries). */
  .nro-section {
    padding: 40px 0;
  }
  .nro-section--alt {
    background: #212121;
  }
  /* FAQ - the last dark block before the orange CTA band. 80px bottom
     gives a full dark gap before the colour change. */
  .nro-section--last {
    padding-bottom: 80px;
  }
  .nro-section__title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 400;
    letter-spacing: 0.005em;
    text-align: center;
    margin: 0 0 10px;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.05;
  }
  .nro-section__sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
    margin: 0 auto 40px;
    max-width: 540px;
    line-height: 1.55;
  }

  /* ── 5 pillars grid ───────────────────────────────────────── */
  .nro-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
  }
  .nro-pillar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px 22px;
    transition: transform 0.2s, border-color 0.2s;
  }
  .nro-pillar:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 210, 1, 0.4);
  }
  .nro-pillar__icon {
    font-size: 32px;
    margin-bottom: 14px;
    display: inline-block;
  }
  .nro-pillar__title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 10px;
    color: #fff;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .nro-pillar__body {
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
  }

  /* ── 3-step how-it-works ──────────────────────────────────── */
  .nro-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    align-items: start;
  }
  .nro-step {
    text-align: center;
    padding: 20px;
  }
  .nro-step__num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  }
  .nro-step__title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 10px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 1.1;
  }
  .nro-step__body {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── FAQ ──────────────────────────────────────────────────── */
  .nro-faq {
    max-width: 760px;
    /* 30px here + the title's 10px margin-bottom = 40px from the
       "Questions, answered" heading down to the first FAQ row
       (the FAQ block has no sub-heading to create that gap). */
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .nro-faq__item {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 18px;
    transition: border-color 0.2s;
  }
  .nro-faq__item[open] {
    border-color: rgba(255, 210, 1, 0.3);
  }
  .nro-faq__q {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    color: #fff;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nro-faq__a {
    font-family: 'Montserrat', sans-serif;
  }
  .nro-faq__q::-webkit-details-marker { display: none; }
  .nro-faq__q::after {
    content: '+';
    font-size: 20px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.2s;
  }
  .nro-faq__item[open] .nro-faq__q::after {
    content: '−';
    color: #ffd201;
  }
  .nro-faq__a {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.6;
  }

  /* ── Final CTA ────────────────────────────────────────────── */
  /* Trademark orange - same hue as the middle stop of the brand
     gradient (#ff6b00). Tonal sweep adds depth without leaning red or
     yellow: a touch lighter on the left (#ff8a4c), pure trademark
     orange in the middle (#ff6b00), and slightly deeper on the right
     (#e85a00). The yellow radial wash from before is kept - it
     warms the centre and ties back to the brand's yellow stop. */
  /* Final CTA - the last block on the NRO page. Full-bleed orange
   * band that sits flush on the footer. Its own 80px vertical
   * padding IS the section's bottom breathing room (no extra
   * .nro-landing padding needed). Was 64px. */
  .nro-final-cta {
    background:
      radial-gradient(ellipse at center, rgba(255, 210, 1, 0.32) 0%, transparent 70%),
      linear-gradient(90deg, #ff8a4c 0%, #ff6b00 50%, #e85a00 100%);
    /* Symmetric 80px top & bottom - the closing orange band. */
    padding: 80px 0;
    text-align: center;
  }
  .nro-final-cta__title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 400;
    letter-spacing: 0.005em;
    margin: 0 0 22px;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.05;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  .nro-final-cta__btn {
    font-family: 'Montserrat', sans-serif;
    display: inline-block;
    padding: 16px 36px;
    background: #fff;
    color: #e85a00;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .nro-final-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
  }

  @media (max-width: 749px) {
    .nro-section { padding: 20px 0; }
    .nro-section--last { padding-bottom: 40px; }
    .nro-final-cta { padding: 40px 0; }
  }
/* END_SECTION:nro-landing */

/* START_SECTION:nro-post-checkout-banner (INDEX:121) */
.nro-postco-banner {
  background: linear-gradient(90deg, #15151b 0%, #1f1f25 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 0;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  /* Smooth slide-in. Default state is fade-out; .is-visible flips it on. */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.nro-postco-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.nro-postco-banner[hidden] { display: none; }

.nro-postco-banner__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.nro-postco-banner__copy {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
}
.nro-postco-banner__icon {
  font-size: 24px;
  line-height: 1;
}
.nro-postco-banner__copy strong {
  display: block;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 2px;
}
.nro-postco-banner__sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.35;
}

.nro-postco-banner__actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.nro-postco-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.nro-postco-banner__btn--primary {
  background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 16px rgba(215, 0, 0, 0.32);
}
.nro-postco-banner__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(215, 0, 0, 0.48);
  color: #fff;
}
.nro-postco-banner__btn--secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.nro-postco-banner__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.nro-postco-banner__close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nro-postco-banner__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

@media (max-width: 749px) {
  .nro-postco-banner__inner {
    gap: 12px;
  }
  .nro-postco-banner__actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .nro-postco-banner__btn {
    flex: 1 1 140px;
  }
  .nro-postco-banner__close {
    position: absolute;
    top: 8px;
    right: 8px;
  }
  .nro-postco-banner__inner {
    position: relative;
    padding-right: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nro-postco-banner { transition: none; }
}
/* END_SECTION:nro-post-checkout-banner */

/* START_SECTION:nsc-dashboard-1 (INDEX:122) */
.nsc-dashboard {
    padding: 60px 0;
    font-family: 'Montserrat', sans-serif;
  }
  .nsc-dashboard__title {
    color: black;
    font-size: 40px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    margin: 0 0 8px 0;
  }
  .nsc-dashboard__subtitle {
    color: #4a4a4a;
    font-size: 16px;
    margin: 0 0 24px 0;
  }
  .nsc-dashboard__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
  }
  .nsc-dashboard__card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  .nsc-dashboard__card--highlight { background: #FFD201; }
  .nsc-dashboard__card-value { font-size: 24px; font-weight: 700; color: black; }
  .nsc-dashboard__card-label { font-size: 14px; font-weight: 600; color: black; }

  .nsc-dashboard__benefits {
    background: #f0f0f0;
    border-radius: 16px;
    padding: 24px;
  }
  .nsc-dashboard__benefits-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px 0;
  }
  .nsc-dashboard__benefits-list {
    list-style: disc;
    padding-left: 24px;
    margin: 0;
    color: #333;
  }
  .nsc-dashboard__benefit { margin-bottom: 6px; }

  .nsc-dashboard__denied {
    background: #f0f0f0;
    border: 1px dashed #ddd;
    border-radius: 16px;
    padding: 32px;
    max-width: 640px;
  }
  .nsc-dashboard__denied-msg { margin: 0 0 16px 0; font-size: 15px; line-height: 22px; }
  .nsc-dashboard__denied-link { color: black; font-weight: 600; text-decoration: underline; }

  @media screen and (max-width: 749px) {
    .nsc-dashboard__title { font-size: 28px; }
  }
/* END_SECTION:nsc-dashboard-1 */

/* START_SECTION:nsc-nominate-1 (INDEX:123) */
.nsc-nominate-section {
    padding: 60px 0;
    font-family: 'Montserrat', sans-serif;
  }
  .nsc-nominate__title {
    color: black;
    font-size: 40px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    margin: 0 0 12px 0;
  }
  .nsc-nominate__subtitle {
    color: #4a4a4a;
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 32px 0;
    max-width: 749px;
  }
  .nsc-nominate__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 640px;
  }
  .nsc-nominate__field { display: flex; flex-direction: column; gap: 6px; }
  .nsc-nominate__label { font-size: 14px; font-weight: 600; color: black; }
  .nsc-nominate__input,
  .nsc-nominate__textarea {
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
  }
  .nsc-nominate__input:focus,
  .nsc-nominate__textarea:focus { outline: 2px solid #FFD201; border-color: #FFD201; }
  .nsc-nominate__hint { font-size: 12px; color: #6b6b6b; }
  .nsc-nominate__submit {
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    background: #FFD201;
    color: black;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    width: fit-content;
    font-family: inherit;
  }
  .nsc-nominate__submit:disabled { opacity: 0.5; cursor: not-allowed; }
  .nsc-nominate__submit:hover:not(:disabled) { background: #e6bd00; }
  .nsc-nominate__status { font-size: 14px; margin: 8px 0 0 0; min-height: 20px; }
  .nsc-nominate__status--success { color: #1d7a1d; }
  .nsc-nominate__status--error   { color: #a32020; }

  .nsc-nominate__gated {
    padding: 24px;
    border: 1px dashed #ddd;
    border-radius: 12px;
    max-width: 640px;
    background: #f0f0f0;
  }
  .nsc-nominate__gated-msg { color: #333; font-size: 15px; line-height: 22px; margin: 0 0 12px 0; }
  .nsc-nominate__gated-link {
    color: black;
    font-weight: 600;
    text-decoration: underline;
  }

  @media screen and (max-width: 749px) {
    .nsc-nominate__title { font-size: 28px; }
  }
/* END_SECTION:nsc-nominate-1 */

/* START_SECTION:our_story_1 (INDEX:124) */
.our_story_sec_1_row1 {
    display: flex;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}

.our_story_sec_1_col1 {
    width: 60%;
}

.our_story_sec_1_col1>div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 626px;
    margin: 0 auto;
    padding: 30px 0;
}

.our_story_sec_1_col2 {
    width: 40%;
}

.our_story_sec_1_subtitle {
    color: black;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    word-wrap: break-word;
    line-height: 1em;
    margin: 0;
}

/* Section rhythm - FIRST content section on the page. The inner-page
 * banner above contributes 0, so this section carries the full 80px
 * on top. Bottom is the normal 40px (paired with the next section's
 * 40px top = 80px gap). Mobile: 40px top / 20px bottom. */
.our_story_sec_1 {
    padding: 80px 0 40px;
}

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

.our_story_sec_1_heading {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: var(--black, #212121);
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 46px;
    word-wrap: break-word;
    margin: 0;
}

.our_story_sec_1_body {
    width: 100%;
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    line-height: 1.5em;
    margin: 0;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 60/40 row - text on left, image on right. Stack
 * vertically and put image on top so the visual leads the story.
 */
@media (max-width: 749px) {
  .our_story_sec_1 { padding: 40px 0 20px; }
  .our_story_sec_1_row1 {
    flex-direction: column-reverse;
    border-radius: 16px;
  }
  .our_story_sec_1_col1,
  .our_story_sec_1_col2 {
    width: 100%;
  }
  .our_story_sec_1_col1 > div {
    max-width: 100%;
    padding: 22px 18px;
    gap: 10px;
  }
  .our_story_sec_1_col2 img {
    max-height: 240px;
  }
  .our_story_sec_1_subtitle { font-size: 14px; }
  .our_story_sec_1_heading {
    font-size: 26px;
    line-height: 1.1;
  }
  .our_story_sec_1_body {
    font-size: 14px;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .our_story_sec_1_heading { font-size: 24px; }
}
/* END_SECTION:our_story_1 */

/* START_SECTION:our_story_2 (INDEX:125) */
.our_story_sec_2_row1 {
        display: flex;
        overflow: hidden;
        align-items: center;
    }

    .our_story_sec_2_col1 {
        width: 60%;
    }

    .our_story_sec_2_col1>div {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        padding-left: 50px;
    }

    .our_story_sec_2_col2 {
        width: 40%;
    }

    .our_story_sec_2_col2>img {
        border-radius: 12px;
        overflow: hidden;
    }

    .our_story_sec_2_subtitle {
        color: #000;
        font-size: 18px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        word-wrap: break-word;
        line-height: 1em;
        margin: 0 0 12px 0;
    }

    /* Section rhythm - 40px each side (80px between sections).
     * gap: 40px is the SUBSECTION spacing between the 2/3/4
     * sub-blocks stacked inside this wrapper. */
    .our_story_sec_2_3_4_wrap {
        padding: 40px 0;
        display: flex;
        flex-direction: column;
        gap: 40px;
        position: relative;
    }

    .our_story_sec_2_3_4_wrap .our_story_sec_2_col2 img {
        width: 100%;
        object-fit: cover;
        height: 100%;
        display: block;
    }

    .our_story_sec_2_heading {
        width: 100%;
        justify-content: center;
        display: flex;
        flex-direction: column;
        color: var(--black, #212121);
        font-size: 52px;
        font-family: 'Racing Sans One', sans-serif;
        font-weight: 400;
        text-transform: capitalize;
        line-height: 46px;
        word-wrap: break-word;
        margin: 0 0 20px 0;
    }

    .our_story_sec_2_body {
        width: 100%;
        color: black;
        font-size: 16px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        word-wrap: break-word;
        line-height: 1.5em;
        margin: 0 0 20px 0;
    }

    .our_story_sec_2_body2, .our_story_sec_2_body3, .our_story_sec_2_body4 {
        max-width: unset;
    }

    .our_story_sec_2_body2 {
        margin: 0 0 12px 0;
    }

    .our_story_sec_2_body4 {
        margin: 0;
    }

    .our_story_sec_2_body4 ul {
        padding-left: 20px;
        margin: 0;
    }

    ul.our_story_sec_3_body_ul {
        padding-left: 0;
        list-style: none;
        margin-top: 0;
        margin-bottom: 15px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        color: #000
    }

    ul.our_story_sec_3_body_ul>li {
        line-height: 1em;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .our_story_sec_3_quote {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .our_story_sec_3_quote>p {
        margin: 0;
        font-size: 24px;
        color: #000;
        font-weight: 600;
    }

    .our_story_sec_4_body2 {
        font-size: 20px;
        font-weight: 600;
    }

    .our_story_sec_4_body_ul {
        margin-top: 0;
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        color: #000;
    }

    .our_story_sec_2_3_4_wrap:before {
        content: '';
        background-image: url(/cdn/shop/files/our_story_sec_2_3_4_wrap_bg.png?v=1772963715);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-repeat: no-repeat;
        background-position: 85% 10%;
        z-index: -1;
    }

    /* ── Mobile (< 750px) ────────────────────────────────────────
     * Three stacked 60/40 rows on desktop. On mobile each row stacks
     * vertically; gap between rows shrinks. The decorative background
     * image is faded to avoid clashing with stacked photos.
     */
    @media (max-width: 749px) {
      .our_story_sec_2_3_4_wrap {
        padding: 20px 0;
        gap: 20px;
      }
      .our_story_sec_2_3_4_wrap:before {
        opacity: 0.3;
        background-size: contain;
        background-position: center;
      }
      .our_story_sec_2_row1 {
        flex-direction: column-reverse;
        gap: 20px;
      }
      .our_story_sec_2_col1,
      .our_story_sec_2_col2 {
        width: 100%;
      }
      .our_story_sec_2_col1 > div {
        padding-left: 0;
      }
      .our_story_sec_2_subtitle { font-size: 14px; }
      .our_story_sec_2_heading {
        font-size: 26px;
        line-height: 1.1;
        margin-bottom: 14px;
      }
      .our_story_sec_2_body { font-size: 14px; }
      .our_story_sec_3_quote > p { font-size: 18px; }
      .our_story_sec_4_body2 { font-size: 16px; }
      ul.our_story_sec_3_body_ul,
      .our_story_sec_4_body_ul {
        gap: 14px;
      }
    }

    @media (max-width: 480px) {
      .our_story_sec_2_heading { font-size: 24px; }
    }
/* END_SECTION:our_story_2 */

/* START_SECTION:our_story_5 (INDEX:126) */
/* Section rhythm - LAST content section on the page. The footer
     * below contributes 0, so this section carries the full 80px on
     * the bottom. Top is the normal 40px. Margin replaced with
     * padding so it doesn't collapse. Mobile: 20px top / 40px bottom. */
    .our_story_sec_5 {
        padding: 40px 0 80px;
    }

    .our_story_sec_5_row1:before {
        content: '';
        background: #fff;
        position: absolute;
        width: 100%;
        height: 75%;
        bottom: 0;
        left: 0;
        z-index: -1;
        border-radius: 16px;
    }

    .our_story_sec_5_row1 {
        display: flex;
        align-items: end;
        overflow: hidden;
        position: relative;
        padding: 0 100px;
    }

    .our_story_sec_5_col1 img {
        margin-left: 0;
        margin-right: auto;
    }

    .our_story_sec_5_col2 img {
        margin-right: 0;
        margin-left: auto;
    }

    .our_story_sec_5_col1,
    .our_story_sec_5_col3 {
        width: 15%;
    }

    .our_story_sec_5_col1 img,
    .our_story_sec_5_col3 img {
        width: auto;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .our_story_sec_5_col2 {
        width: 70%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 20px 45px 20px;
    }

    .our_story_sec_5_heading {
        color: var(--black, #212121);
        font-size: 52px;
        font-family: 'Racing Sans One', sans-serif;
        font-weight: 400;
        text-transform: capitalize;
        line-height: 46px;
        word-wrap: break-word;
        margin: 0 0 24px 0;
    }

    .our_story_sec_5_btn_wrap {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .our_story_sec_5_btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 18px;
        background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
        border-radius: 4px;
        color: white;
        font-size: 20px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        text-transform: uppercase;
        text-decoration: none;
        word-wrap: break-word;
    }

    /* ── Mobile (< 750px) ────────────────────────────────────────
     * Desktop is a 3-column row: 15% photo / 70% text+CTA / 15% photo
     * with a `::before` pseudo-element creating a white card behind
     * the lower 75% of the row.
     *
     * On mobile the 15% side photos render at ~55px wide which is
     * useless - hide them. The pseudo-element's 75% height card looks
     * undersized too, so we hide it and promote col2 itself to a
     * proper rounded white card that owns the full width with
     * generous padding, big heading, and a full-width chunky CTA.
     */
    @media (max-width: 749px) {
      .our_story_sec_5 { padding: 20px 0 40px; }
      .our_story_sec_5_row1 {
        padding: 0 14px;
        flex-direction: column;
      }
      /* Suppress the 75%-height pseudo card - col2 below is the card. */
      .our_story_sec_5_row1::before {
        display: none;
      }
      .our_story_sec_5_col1,
      .our_story_sec_5_col3 {
        display: none;
      }
      .our_story_sec_5_col2 {
        width: 100%;
        padding: 52px 26px 44px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
        gap: 26px;
      }
      .our_story_sec_5_heading {
        font-size: 32px;
        line-height: 1.05;
        margin-bottom: 0;
        max-width: 100%;
      }
      .our_story_sec_5_btn {
        align-self: stretch;
        width: 100%;
        box-sizing: border-box;
        padding: 18px 24px;
        min-height: 56px;
        font-size: 18px;
        border-radius: 12px;
      }
    }

    @media (max-width: 480px) {
      .our_story_sec_5_col2 {
        padding: 44px 22px 36px;
        gap: 22px;
      }
      .our_story_sec_5_heading {
        font-size: 32px;
        line-height: 1.08;
      }
    }
/* END_SECTION:our_story_5 */

/* START_SECTION:partner_collab_1 (INDEX:128) */
/* Section vertical rhythm on /pages/partners-collabs:
 *   80px BETWEEN sections (40px contributed each side)
 *   40px BETWEEN subsections within a parent section (20px each side)
 *
 * partner_collab_1 contains TWO logical sections in one file:
 *   1. .vault-header - the "Powering People..." intro text block
 *   2. .pc_sec_3_row - the "Why Partner" hexagon row
 * Treat them as separate sections by adding 80px desktop / 48px
 * mobile gap between the header and the row below. */
/* FIRST section on the page - 80px top (banner above gives 0),
 * 40px bottom (pairs with partner_collab_2's 40px top = 80px gap,
 * not 120px). Mobile 40px top / 20px bottom. */
.pc_sec_3 {
    padding: 80px 0 40px;
}
.pc_sec_3 .vault-header {
    margin-bottom: 80px;
}
@media (max-width: 749px) {
    .pc_sec_3 { padding: 40px 0 20px; }
    .pc_sec_3 .vault-header { margin-bottom: 48px; }
}

/* --- Row 1 --- */
.pc_sec_3 .pc_sec_3_row {
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1320 / 590;
    display: flex;
    align-items: center;
    border-radius: 20px;
    align-items: center
}

.pc_sec_3 .pc_sec_3_content {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-left: 30px;
}

.pc_sec_3_image {
    width: 50%;
}

.pc_sec_3_image img {
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    max-width: 100%;
}

.pc_sec_3 .pc_sec_3_text_group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.pc_sec_3 .pc_sec_3_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}

.pc_sec_3 .pc_sec_3_subtitle {
    align-self: stretch;
    color: white;
    font-size: 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    word-wrap: break-word;
    margin: 0;
}

.pc_sec_3 .pc_sec_3_title {
    align-self: stretch;
    color: white;
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1em;
    word-wrap: break-word;
    margin: 0;
}

.pc_sec_3 .pc_sec_3_desc {
    align-self: stretch;
    color: white;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    margin: 0;
    line-height: 1.5em;
}

.pc_sec_3 .pc_sec_3_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 278px;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 4px;
    color: white;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.pc_sec_3_list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
    line-height: 1.3em;
    margin: 0;
}

.pc_sec_3_list_item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
}

div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU {
    width: 100%;
}

div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU shopify-forms-embed#app-embed {
    margin-left: -20%;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 1320:590 aspect-ratio bg-image hero with a 48%-wide
 * content panel + 50% image column. Stack vertically; switch
 * aspect-ratio to natural min-height; image moves below text.
 */
@media (max-width: 749px) {
  .pc_sec_3 .pc_sec_3_row {
    aspect-ratio: auto;
    min-height: 0;
    border-radius: 16px;
    flex-direction: column;
    padding: 24px 16px;
    gap: 18px;
    align-items: stretch;
    /* The row's `overflow: hidden` (from the desktop CSS) was
       clipping the lower hexagons of the inline <img>. Reset it so
       the image can spill into the row's natural growth. */
    overflow: visible;
    /* The bg-image has the hexagonal feature cards baked into the
       lower portion. Desktop's `background-size: cover` crops them
       off when the row gets shorter on mobile. Switch to `contain`
       + `background-position: bottom` so the full bg image is
       visible (no cropping) and aligns with the bottom of the row
       where the hexagons live. Solid dark backdrop fills the empty
       area above so the heading still reads cleanly. */
    background-color: #15151b;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
  .pc_sec_3 .pc_sec_3_content {
    width: 100%;
    margin-left: 0;
    gap: 14px;
  }
  .pc_sec_3_image {
    width: 100%;
    /* Was `max-height: 220px` - too restrictive. The source image
       has hexagonal feature badges baked into its LOWER portion
       (Elite Product Quality / Discipline & ... / Measurable ... /
       Consistency). At 220px max-height the row's overflow:hidden
       was clipping those hexagons off the bottom. Let the image
       render at its natural aspect ratio so all feature badges
       are visible. */
    max-height: none;
    overflow: visible;
  }
  .pc_sec_3_image img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
  .pc_sec_3 .pc_sec_3_subtitle { font-size: 14px; }
  .pc_sec_3 .pc_sec_3_title {
    font-size: 26px;
    line-height: 1.1;
  }
  .pc_sec_3 .pc_sec_3_desc {
    font-size: 14px;
    line-height: 1.45;
  }
  .pc_sec_3 .pc_sec_3_btn {
    width: auto;
    align-self: stretch;
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
  }
  .pc_sec_3_list_item { font-size: 12px; }
  /* Full-width Shopify forms embed - same pattern as giveaways_3 +
     monthly_challenges_2. Email input + "Continue with shop" +
     "Subscribe to Enter" all stretch to fill the column with
     chunky tap targets. */
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU,
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU shopify-forms-embed#app-embed {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU input[type='email'],
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU input[type='text'] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 52px !important;
    font-size: 16px !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
  }
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU button,
  div#AaDdJOUpMckFSR09ad__forms_inline_GhKqJU [type='submit'] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 56px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
  }
}
/* END_SECTION:partner_collab_1 */

/* START_SECTION:partner_collab_2 (INDEX:129) */
/* Section vertical rhythm - standalone section.
 * 80px between sections = 40px contributed each side. */
.partner-collab-2 {
  width: 100%;
  padding: 40px 0;
}
@media (max-width: 749px) {
  .partner-collab-2 { padding: 20px 0; }
}

.partner-collab-2__container {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* Left Column */
.partner-collab-2__left {
  flex: 0 0 50%;
  max-width: 656px;
  border-radius: 12px;
  overflow: hidden;
}

.partner-collab-2__left img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Right Column */
.partner-collab-2__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.partner-collab-2__heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 46px;
  text-transform: capitalize;
  color: #000;
  margin: 0;
}

.partner-collab-2__paragraph {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  margin: 0;
}

/* List */
.partner-collab-2__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.partner-collab-2__list-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.partner-collab-2__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

.partner-collab-2__icon-fallback {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: #D70000;
  border-radius: 50%;
}

.partner-collab-2__list-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #000;
}

/* Bottom */
.partner-collab-2__bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.partner-collab-2__bottom-image {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.partner-collab-2__bottom-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

/* Responsive */
@media (max-width: 749px) {
  .partner-collab-2__container {
    flex-direction: column;
  }

  .partner-collab-2__left {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  .partner-collab-2__heading {
    font-size: 36px;
    line-height: 38px;
  }

  .partner-collab-2__bottom-text {
    font-size: 18px;
  }
}
/* END_SECTION:partner_collab_2 */

/* START_SECTION:partner_collab_3 (INDEX:130) */
/* Section vertical rhythm - standalone section.
 * 80px between sections = 40px contributed each side. */
.vault-section {
  background-color: #f0f0f0;
  padding: 40px 0;
}
@media (max-width: 749px) {
  .vault-section { padding: 20px 0; }
}

.vault-header {
  text-align: center;
  max-width: 765px;
  margin: 0 auto 28px;
}

.vault-title {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 46px;
  text-transform: capitalize;
  color: #000;
  margin: 0 0 20px;
}

.vault-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  margin: 0;
}

.vault-cards {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
}

.vault-card {
  position: relative;
  flex: 1;
  min-height: 210px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vault-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vault-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  border-radius: 12px;
}

.vault-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 30px 20px;
  text-align: center;
}

.vault-card__icon {
  width: 50px;
  height: 50px;
}

.vault-card__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.vault-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.vault-quote__logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  flex-shrink: 0;
}

.vault-quote__text {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

@media (max-width: 749px) {
  .vault-title {
    font-size: 32px;
    line-height: 34px;
  }

  .vault-cards {
    flex-wrap: wrap;
  }

  .vault-card {
    flex: 1 1 calc(50% - 16px);
    min-height: 180px;
  }

  .vault-quote__text {
    font-size: 18px;
  }
}
/* END_SECTION:partner_collab_3 */

/* START_SECTION:partner_collab_4 (INDEX:131) */
/* Section vertical rhythm - "Partnership Designed Around You"
 * is the FIRST subsection of a 2-part parent (with partner_collab_5
 * "Our Partnership Promise" as the second subsection).
 *   - Top: 40px (80px gap to partner_collab_3 above)
 *   - Bottom: 20px (40px gap to partner_collab_5 below, the sibling sub). */
.partner-collab-4 {
  padding: 40px 0 20px;
}
@media (max-width: 749px) {
  .partner-collab-4 { padding: 24px 0 12px; }
}

.partner-collab-4__header {
  text-align: center;
  margin-bottom: 30px;
}

.partner-collab-4__heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1;
  color: #000;
  margin: 0 0 12px;
}

.partner-collab-4__subtitle {
  font-size: 18px;
  font-weight: 500;
  color: #000;
  margin: 0;
}

.partner-collab-4__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.partner-collab-4__card {
  position: relative;
  overflow: hidden;
}

.partner-collab-4__card-image {
  display: block;
  width: 100%;
  height: auto;
}

.partner-collab-4__card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.partner-collab-4__card-title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin: 0;
}

.partner-collab-4__card-text {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  margin: 0;
}

.partner-collab-4__card:nth-child(1)>.partner-collab-4__card-content {
    padding: 20px 40px 20px 10px;
}

.partner-collab-4__card:nth-child(2)>.partner-collab-4__card-content {
    padding: 20px 40px 20px 20px;
}

.partner-collab-4__card:nth-child(3)>.partner-collab-4__card-content {
    padding: 20px 50px 20px 10px;
}

.partner-collab-4__card:nth-child(4)>.partner-collab-4__card-content {
    padding: 20px 10px 20px 40px;
}

@media (max-width: 990px) {
  .partner-collab-4__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .partner-collab-4__heading {
    font-size: 36px;
  }
}

@media (max-width: 600px) {
  .partner-collab-4__grid {
    grid-template-columns: 1fr;
  }

  .partner-collab-4__heading {
    font-size: 28px;
  }
}
/* END_SECTION:partner_collab_4 */

/* START_SECTION:partner_collab_5 (INDEX:132) */
/* Section vertical rhythm - "Our Partnership Promise" is the
 * SECOND subsection of the same 2-part parent that includes
 * partner_collab_4 "Partnership Designed Around You" above it.
 *   - Top: 20px (40px gap to partner_collab_4 above, sibling sub)
 *   - Bottom: 40px (80px gap to partner_collab_6 below). */
.partner-promise {
  padding: 20px 0 40px;
}
@media (max-width: 749px) {
  .partner-promise { padding: 12px 0 24px; }
}

.partner-promise__header {
  text-align: center;
  margin-bottom: 30px;
}

.partner-promise__heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: #000;
  margin: 0 0 12px;
}

.partner-promise__subheading {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  margin: 0;
}

.partner-promise__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 33px;
}

.partner-promise__card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 277 / 233;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-promise__card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  border-radius: 12px;
  display: block !important;
}

.partner-promise__card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.10);
  border-radius: 12px;
}

.partner-promise__card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 30px 25px;
  text-align: center;
}

.partner-promise__icon {
  width: 65px;
  height: 65px;
  flex-shrink: 0;
}

.partner-promise__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.partner-promise__text {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

@media (max-width: 990px) {
  .partner-promise__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 575px) {
  .partner-promise__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .partner-promise__heading {
    font-size: 26px;
  }

  /* Half the card height + double the text size on mobile.
     Desktop aspect-ratio 277/233 (≈1.19:1) made each card ~300px
     tall on a 360px column - too dominant in the vertical scroll.
     Override to 2.4:1 (~150px tall) and bump text from 18px → 36px
     so the message reads big and bold in the shorter card. */
  .partner-promise__card {
    aspect-ratio: 2.4 / 1;
  }

  .partner-promise__card-content {
    gap: 12px;
    padding: 18px 20px;
  }

  .partner-promise__icon {
    width: 44px;
    height: 44px;
  }

  .partner-promise__text {
    font-size: 20px;
    line-height: 1.1;
  }
}
/* END_SECTION:partner_collab_5 */

/* START_SECTION:partner_collab_6 (INDEX:133) */
/* Section vertical rhythm - standalone section, last on page.
 * 80px between sections = 40px contributed each side.
 * Padding on the wrapper (not the card) to avoid margin-collapse
 * with sibling sections. */
/* LAST section on the partners-collabs page - 40px top (pairs with
 * partner_collab_5's 40px bottom = 80px gap), 80px bottom (footer
 * below gives 0). Mobile 20px top / 40px bottom. */
.partner-collab-6-wrap {
  padding: 40px 0 80px;
}
@media (max-width: 749px) {
  .partner-collab-6-wrap { padding: 20px 0 40px; }
}

.partner-collab-6 {
  display: flex;
  align-items: stretch;
  background: var(--black, #212121);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1320/467;
  /* No margin - the wrapper above handles the gap. */
  margin: 0;
}

.partner-collab-6__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 50px 40px;
}

.partner-collab-6__heading {
  color: #fff;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 46px;
  text-transform: capitalize;
  margin: 0;
}

.partner-collab-6__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.partner-collab-6__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.partner-collab-6__text {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.partner-collab-6__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 4px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  width: fit-content;
}

.partner-collab-6__button-icon {
  width: 24px;
  height: 24px;
}

.partner-collab-6__right {
  flex: 1;
}

.partner-collab-6__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.partner-collab-6__text>p {
    margin: 0;
}

@media (max-width: 749px) {
  .partner-collab-6 {
    flex-direction: column;
    /* CRITICAL: the desktop card has `aspect-ratio: 1320/467` (~2.83:1)
       which on a phone collapses the card to ~130px tall - the
       heading + benefit list + CTA all get clipped behind the
       overflow:hidden boundary. Reset to auto so the card grows to
       fit content (same bug pattern as monthly_challenges_1). */
    aspect-ratio: auto;
    /* Mobile margin removed - the .partner-collab-6-wrap parent
     * handles the section gap consistently with siblings. */
    margin: 0;
  }

  .partner-collab-6__left {
    padding: 30px 22px;
    gap: 16px;
  }

  .partner-collab-6__heading {
    font-size: 32px;
    line-height: 1.08;
  }

  .partner-collab-6__text {
    font-size: 15px;
  }

  .partner-collab-6__button {
    font-size: 16px;
    width: 100%;
    justify-content: center;
    padding: 16px 22px;
    min-height: 56px;
    border-radius: 12px;
  }

  .partner-collab-6__right {
    flex: 0 0 auto;
  }
  .partner-collab-6__image {
    height: auto;
    max-height: none;
    object-fit: cover;
  }
}

/* Reset native <button> styling so the trigger looks identical to the old <a> */
button.partner-collab-6__button { cursor: pointer; }

/* ── Partner-apply modal ──────────────────────────────────────────── */
.pn-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pn-modal[hidden] { display: none; }
/* Universal `[hidden]` defense for every descendant. Several elements
   below (.pn-modal__state, .pn-modal__submit, .pn-modal__form, .pn-modal__login-link)
   have explicit `display: flex/inline-flex/block` rules that win over
   the browser's default `[hidden] { display: none }` from the user-
   agent stylesheet. Without this override, the JS-controlled hidden
   state callout shows up empty (just the `-` placeholder) on first
   paint instead of being invisible until the inquiry-status fetch
   resolves. !important ensures it beats any explicit display rule. */
.pn-modal [hidden] { display: none !important; }
.pn-modal__backdrop { position: absolute; inset: 0; background: rgba(15,20,33,0.55); backdrop-filter: blur(2px); }
.pn-modal__panel {
  position: relative; max-width: 520px; width: 100%;
  background: #fff; border-radius: 20px; padding: 36px 32px 30px;
  box-shadow: 0 20px 60px rgba(15,20,33,0.35);
  font-family: 'Montserrat', sans-serif; max-height: 90vh; overflow-y: auto;
}
.pn-modal__close { position: absolute; top: 14px; right: 14px; background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: #333; padding: 4px 10px; border-radius: 8px; }
.pn-modal__close:hover { background: #f3f4f6; color: #212121; }
.pn-modal__title { font-family: 'Racing Sans One', sans-serif; font-weight: 400; font-size: 30px; color: #212121; margin: 0 0 6px; }
.pn-modal__lede { font-size: 14.5px; color: #333; margin: 0 0 20px; line-height: 1.5; }
.pn-modal__form { display: flex; flex-direction: column; gap: 12px; }
.pn-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .pn-modal__row { grid-template-columns: 1fr; } }
.pn-modal__form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: #212121; }
.pn-modal__form input, .pn-modal__form textarea {
  padding: 10px 12px; border: 1.5px solid #ddd; border-radius: 8px;
  font-family: inherit; font-size: 14px; color: #212121; background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box;
}
.pn-modal__form input:focus, .pn-modal__form textarea:focus { outline: none; border-color: #FFD201; box-shadow: 0 0 0 3px rgba(255,210,1,0.18); }
.pn-modal__form textarea { resize: vertical; min-height: 90px; }
.pn-modal__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%); color: #fff;
  padding: 12px 22px; border: 0; border-radius: 8px; font-weight: 700; font-size: 14.5px;
  cursor: pointer; text-decoration: none; margin-top: 6px;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.pn-modal__submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(215,0,0,0.25); }
.pn-modal__submit:disabled { opacity: 0.55; cursor: not-allowed; }
.pn-modal__status { min-height: 18px; font-size: 13px; margin: 4px 0 0; }
.pn-modal__status--ok { color: #0a6b3a; font-weight: 600; }
.pn-modal__status--err { color: #8a1c1c; font-weight: 600; }
.pn-modal__login-gate { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pn-modal__login-link { color: #212121; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.pn-modal__login-link:hover { color: #D70000; }
.pn-modal__state {
  background: linear-gradient(135deg, #fffbeb 0%, #fff5f5 100%);
  border: 1px solid #f1dd7a;
  border-left: 4px solid #FFD201;
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.pn-modal__state-msg {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #212121;
  font-weight: 500;
}
/* END_SECTION:partner_collab_6 */

/* START_SECTION:performance-network-1 (INDEX:134) */
.perf-network {
    padding: 80px 0 60px;
    font-family: 'Montserrat', sans-serif;
  }

  .pn-title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #212121;
    margin: 0 0 8px;
  }

  .pn-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 36px;
  }

  .pn-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
  }

  .pn-pill {
    background: #FFD201;
    border-radius: 12px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
  }

  .pn-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
  }

  .pn-card {
    background: #fff;
    border: 1px solid #7C7C7C;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .pn-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .pn-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
  }

  .pn-card-month {
    font-size: 13px;
    color: #888;
  }

  .pn-card-value {
    font-size: 32px;
    font-weight: 700;
    color: #D70000;
  }

  .pn-card-sub {
    font-size: 13px;
    color: #666;
  }

  .pn-action {
    display: flex;
    justify-content: center;
  }

  .pn-btn {
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 4px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 44px;
    display: inline-block;
    transition: opacity 0.2s;
  }

  .pn-access-denied {
    text-align: center;
    color: #888;
    padding: 60px 0;
    font-size: 16px;
  }

  @media (max-width: 1024px) {
    .pn-cards { grid-template-columns: 1fr; }
    .pn-title  { font-size: 32px; }
  }

  @media (max-width: 749px) {
    .perf-network { padding: 20px 0; }
    .pn-title { font-size: 26px; line-height: 1.1; }
    .pn-subtitle { font-size: 14px; margin-bottom: 22px; }
    .pn-pills { gap: 10px; margin-bottom: 22px; }
    .pn-pill { font-size: 12px; padding: 8px 14px; }
    .pn-cards { gap: 14px; margin-bottom: 28px; }
    .pn-card { padding: 18px; }
    .pn-card-value { font-size: 24px; }
    .pn-btn {
      align-self: stretch;
      width: 100%;
      text-align: center;
      padding: 14px 18px;
      min-height: 48px;
      font-size: 14px;
    }
    .pn-gate { padding: 40px 16px; }
    .pn-gate__card { padding: 32px 22px; border-radius: 16px; }
    .pn-gate__title { font-size: 24px; }
    .pn-gate__text { font-size: 14px; }
    .pn-gate__btn { padding: 12px 18px; min-height: 44px; }
  }

  /* ── Non-partner gate ─────────────────────────────────────────── */
  .pn-gate { padding: 80px 20px; font-family: 'Montserrat', sans-serif; }
  .pn-gate__card {
    max-width: 560px; margin: 0 auto; text-align: center;
    background: linear-gradient(135deg, #fffbeb 0%, #fff5f5 100%);
    border: 1px solid #f1dd7a; border-radius: 20px;
    padding: 56px 36px; box-shadow: 0 8px 28px rgba(15,20,33,0.08);
  }
  .pn-gate__icon { font-size: 56px; margin-bottom: 14px; }
  .pn-gate__title {
    font-family: 'Racing Sans One', sans-serif; font-weight: 400;
    font-size: 32px; line-height: 1.1; color: #212121; margin: 0 0 12px;
  }
  .pn-gate__text {
    font-size: 15.5px; line-height: 1.6; color: #333;
    margin: 0 auto 24px; max-width: 440px;
  }
  .pn-gate__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .pn-gate__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 8px; font-weight: 700;
    font-size: 14px; text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .pn-gate__btn--primary { background: linear-gradient(90deg, #FFD201 0%, #D70000 100%); color: #fff; }
  .pn-gate__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(215,0,0,0.25); }
  .pn-gate__btn--ghost { background: #fff; color: #212121; border: 1.5px solid #ddd; }
  .pn-gate__btn--ghost:hover { border-color: #212121; }
/* END_SECTION:performance-network-1 */

/* START_SECTION:performance-network-landing (INDEX:135) */
.pnl { font-family: 'Montserrat', sans-serif; color: #212121; max-width: 1180px; margin: 0 auto; padding: 60px 24px 80px; }
  .pnl__h2 { font-family: 'Racing Sans One', sans-serif; font-weight: 400; font-size: 36px; color: #212121; margin: 0 0 24px; letter-spacing: 0.01em; }

  /* Hero */
  .pnl__hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding-bottom: 64px; border-bottom: 1px solid #ddd; }
  .pnl__hero-inner { padding-right: 12px; }
  .pnl__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: #D70000; text-transform: uppercase; margin-bottom: 16px; padding: 4px 12px; background: linear-gradient(90deg, #fffbeb, #fff5f5); border-radius: 9999px; }
  .pnl__title { font-family: 'Racing Sans One', sans-serif; font-weight: 400; font-size: 56px; line-height: 1.05; margin: 0 0 18px; color: #212121; }
  .pnl__lede { font-size: 17px; line-height: 1.6; color: #333; margin: 0 0 28px; max-width: 540px; }
  .pnl__cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
  .pnl__partner-pill { margin: 18px 0 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: #e6f7ec; color: #0a6b3a; font-weight: 700; font-size: 13px; border-radius: 9999px; }

  .pnl__btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 8px; font-weight: 700; font-size: 14.5px; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; cursor: pointer; }
  .pnl__btn--primary { background: linear-gradient(90deg, #FFD201 0%, #D70000 100%); color: #fff; }
  .pnl__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(215,0,0,0.25); }
  .pnl__btn--ghost { background: #fff; color: #212121; border: 1.5px solid #ddd; }
  .pnl__btn--ghost:hover { border-color: #212121; }
  .pnl__btn--lg { padding: 16px 32px; font-size: 16px; }
  .pnl__btn-arrow { font-size: 17px; }

  .pnl__hero-art img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 28px rgba(15,20,33,0.12); object-fit: cover; }
  .pnl__hero-art-fallback { aspect-ratio: 4/3; border-radius: 16px; background: linear-gradient(135deg, #FFD201 0%, #D70000 100%); display: flex; align-items: center; justify-content: center; font-family: 'Racing Sans One', sans-serif; color: #fff; font-size: 96px; }

  /* Benefits grid */
  .pnl__benefits { padding: 64px 0; }
  .pnl__benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .pnl__benefit { background: #fff; border: 1px solid #ddd; border-radius: 16px; padding: 24px; box-shadow: 0 1px 2px rgba(15,20,33,0.04); transition: box-shadow 0.18s, transform 0.18s; }
  .pnl__benefit:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(15,20,33,0.08); }
  .pnl__benefit-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #fffbeb, #fff5f5); font-size: 22px; margin-bottom: 12px; }
  .pnl__benefit h3 { font-family: 'Racing Sans One', sans-serif; font-weight: 400; font-size: 19px; margin: 0 0 6px; color: #212121; letter-spacing: 0.01em; }
  .pnl__benefit p { font-size: 14px; line-height: 1.55; color: #333; margin: 0; }

  /* How it works */
  .pnl__how { padding: 32px 0 64px; border-top: 1px solid #ddd; }
  .pnl__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .pnl__steps li { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #fff; border: 1px solid #ddd; border-radius: 16px; }
  .pnl__step-num { width: 36px; height: 36px; border-radius: 9999px; background: linear-gradient(135deg, #FFD201, #D70000); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: 'Racing Sans One', sans-serif; font-size: 18px; }
  .pnl__steps h3 { font-family: 'Racing Sans One', sans-serif; font-weight: 400; font-size: 18px; margin: 0 0 4px; color: #212121; }
  .pnl__steps p { font-size: 13.5px; line-height: 1.55; color: #333; margin: 0; }

  /* Bottom CTA */
  .pnl__bottom-cta { background: linear-gradient(135deg, #fffbeb 0%, #fff5f5 100%); border: 1px solid #f1dd7a; border-radius: 20px; padding: 48px 32px; text-align: center; }
  .pnl__bottom-cta .pnl__h2 { margin-bottom: 12px; }
  .pnl__bottom-cta p { font-size: 16px; line-height: 1.6; color: #333; margin: 0 0 24px; max-width: 560px; margin-left: auto; margin-right: auto; }

  /* Responsive */
  @media (max-width: 990px) {
    .pnl__hero { grid-template-columns: 1fr; gap: 32px; }
    .pnl__title { font-size: 42px; }
    .pnl__benefit-grid { grid-template-columns: repeat(2, 1fr); }
    .pnl__steps { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 540px) {
    .pnl__title { font-size: 34px; }
    .pnl__benefit-grid, .pnl__steps { grid-template-columns: 1fr; }
    .pnl__bottom-cta { padding: 36px 22px; }
    .pnl__h2 { font-size: 28px; }
  }

/* Mobile (≤ 749px) - added by mobile-spacing audit so this section
 * follows the project's standard 20px-vertical mobile rhythm. */
@media (max-width: 749px) {
  .pnl {
    padding: 20px 0;
  }
}
/* END_SECTION:performance-network-landing */

/* START_SECTION:product-reviews (INDEX:138) */
/* ── Layout root ─────────────────────────────────────────────── */
  /* LAST section on the PDP - 40px top, 80px bottom so it sits on
     the footer with the standard 80px section gap above. */
  .product-reviews {
    padding: 40px 0 80px;
    color: rgb(var(--color-foreground, 33 33 33));
    font-family: 'Montserrat', sans-serif;
  }
  @media (max-width: 749px) {
    .product-reviews { padding: 20px 0 40px; }
  }
  .product-reviews__inner { position: relative; }
  .product-reviews__anchor { display: block; height: 0; visibility: hidden; }

  .product-reviews__heading {
    margin: 0 0 18px;
    font-family: 'Racing Sans One', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(24px, 3.5vw, 36px);
    line-height: 1.05;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  /* ── Aggregate grid ──────────────────────────────────────────── */
  .product-reviews__aggregate {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.3fr) minmax(220px, 1fr);
    gap: 32px;
    align-items: start;
    padding: 26px 28px;
    background: rgba(var(--color-foreground, 33 33 33), 0.03);
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.08);
    border-radius: 16px;
    margin-bottom: 28px;
  }
  .product-reviews__aggregate[hidden] { display: none; }
  @media (max-width: 990px) {
    .product-reviews__aggregate {
      grid-template-columns: 1fr 1fr;
    }
    .product-reviews__aggregate-right { grid-column: 1 / -1; }
  }
  @media (max-width: 600px) {
    .product-reviews__aggregate { grid-template-columns: 1fr; }
  }
  .product-reviews__aggregate-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .product-reviews__aggregate-mid {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .product-reviews__aggregate-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
  }

  /* Customer photo placeholder - for v2 photo uploads. Renders a
     light bordered tile with helper text so the right column has
     visible content even when photo uploads aren't shipped yet. */
  .product-reviews__photos-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 7;
    background: rgba(var(--color-foreground, 33 33 33), 0.04);
    border: 1px dashed rgba(var(--color-foreground, 33 33 33), 0.20);
    border-radius: 12px;
    color: rgba(var(--color-foreground, 33 33 33), 0.45);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .product-reviews__photos-placeholder[hidden] { display: none; }

  /* Big % would recommend block for the right column. */
  .product-reviews__recommend-big {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 12px;
    background: rgba(31, 122, 58, 0.06);
    border-radius: 12px;
  }
  .product-reviews__recommend-big[hidden] { display: none; }
  .product-reviews__recommend-big strong {
    font-family: 'Racing Sans One', sans-serif;
    font-style: italic;
    font-size: 32px;
    line-height: 1;
    color: #1f7a3a;
  }
  .product-reviews__recommend-big-label {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: #1f7a3a;
    font-weight: 700;
  }

  .product-reviews__avg-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
  }
  .product-reviews__avg {
    font-family: 'Racing Sans One', sans-serif;
    font-style: italic;
    font-size: 48px;
    line-height: 1;
    color: #ffd201;
  }
  .product-reviews__stars-svg { width: 110px; height: 22px; display: block; }
  .product-reviews__count {
    margin: 0 0 12px;
    font-size: 13px;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
  }
  .product-reviews__write-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background: rgb(var(--color-foreground, 33 33 33));
    color: rgb(var(--color-background, 255 255 255));
    border: 0;
    border-radius: 9999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.12s ease;
    background-image: none !important;
  }
  .product-reviews__write-btn:hover { transform: translateY(-1px); }

  /* ── Histogram ───────────────────────────────────────────────── */
  .product-reviews__hist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .product-reviews__hist-row {
    display: grid;
    grid-template-columns: 30px 1fr 30px;
    align-items: center;
    gap: 8px;
    font-size: 12px;
  }
  .product-reviews__hist-label {
    font-weight: 700;
    color: rgb(var(--color-foreground, 33 33 33));
  }
  .product-reviews__hist-bar {
    background: rgba(var(--color-foreground, 33 33 33), 0.10);
    border-radius: 9999px;
    height: 8px;
    overflow: hidden;
    position: relative;
  }
  .product-reviews__hist-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ffd201 0%, #d70000 100%);
    border-radius: 9999px;
    transition: width 0.4s ease;
  }
  .product-reviews__hist-count {
    text-align: right;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
  }

  /* ── Attribute summary rows ──────────────────────────────────── */
  .product-reviews__aggregate-attrs {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .product-reviews__attr-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    align-items: center;
  }
  .product-reviews__attr-label {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .product-reviews__attr-track {
    display: grid;
    grid-template-columns: minmax(40px, auto) 1fr minmax(40px, auto);
    gap: 8px;
    align-items: center;
  }
  .product-reviews__attr-scale-low,
  .product-reviews__attr-scale-high {
    font-size: 10px;
    color: rgba(var(--color-foreground, 33 33 33), 0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .product-reviews__attr-scale-high { text-align: right; }
  .product-reviews__attr-bar {
    position: relative;
    background: repeating-linear-gradient(90deg,
      rgba(var(--color-foreground, 33 33 33), 0.18) 0 2px,
      transparent 2px 12px);
    height: 12px;
    border-radius: 9999px;
  }
  .product-reviews__attr-marker {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: #d70000;
    border: 2px solid rgb(var(--color-background, 255 255 255));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: left 0.4s ease;
  }
  .product-reviews__recommend-pill {
    margin-top: 6px;
    padding: 8px 14px;
    background: rgba(31, 122, 58, 0.10);
    color: #1f7a3a;
    border-radius: 9999px;
    font-size: 13px;
    text-align: center;
  }
  .product-reviews__recommend-pill strong {
    font-size: 16px;
    margin-right: 6px;
  }

  /* ── Empty state ─────────────────────────────────────────────── */
  .product-reviews__empty {
    text-align: center;
    padding: 36px 20px;
    background: rgba(var(--color-foreground, 33 33 33), 0.03);
    border: 1px dashed rgba(var(--color-foreground, 33 33 33), 0.20);
    border-radius: 16px;
  }
  .product-reviews__empty-headline {
    margin: 0 0 6px;
    font-family: 'Racing Sans One', sans-serif;
    font-style: italic;
    font-size: 24px;
    text-transform: uppercase;
  }
  .product-reviews__empty-sub {
    margin: 0 0 16px;
    font-size: 14px;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
  }

  /* ── Filter chips ────────────────────────────────────────────── */
  .product-reviews__filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 14px;
    padding: 14px 0;
    border-top: 1px solid rgba(var(--color-foreground, 33 33 33), 0.10);
    border-bottom: 1px solid rgba(var(--color-foreground, 33 33 33), 0.10);
    margin-bottom: 14px;
  }
  .product-reviews__filter-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
  }
  .product-reviews__filter-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .product-reviews__chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 6px 12px;
    background: rgb(var(--color-background, 255 255 255));
    color: rgb(var(--color-foreground, 33 33 33));
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.18);
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s ease;
  }
  .product-reviews__chip-btn:hover { border-color: #d70000; }
  .product-reviews__chip-btn.is-active {
    background: #d70000;
    color: #fff;
    border-color: #d70000;
  }
  .product-reviews__chip-stars {
    color: #ffd201;
    line-height: 1;
    font-size: 11px;
  }
  .product-reviews__chip-btn.is-active .product-reviews__chip-stars { color: #fff; }
  .product-reviews__filter-empty {
    list-style: none;
    padding: 24px;
    text-align: center;
    color: rgba(var(--color-foreground, 33 33 33), 0.55);
    font-size: 13px;
  }

  /* ── List ────────────────────────────────────────────────────── */
  .product-reviews__list-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }
  .product-reviews__sort-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
  }
  .product-reviews__sort {
    padding: 6px 28px 6px 12px;
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.18);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: inherit;
    background: rgb(var(--color-background, 255 255 255));
  }
  .product-reviews__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .product-reviews__rev {
    padding: 22px 0;
    border-bottom: 1px solid rgba(var(--color-foreground, 33 33 33), 0.08);
  }
  /* Two-column row: author meta on left, review body + sliders + helpful + reply on right.
     Matches the Figma layout where SHABAN A. + verified + recommend
     stack vertically beside the review content. */
  .product-reviews__rev-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
  }
  @media (max-width: 749px) {
    .product-reviews__rev-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }
  /* Author column: 56px circular avatar (gradient + initial) on the
     left, name + verified-buyer badge stacked on the right. Mirrors
     the Figma design where SHABAN A. sits next to a photo bubble. */
  .product-reviews__rev-author-col {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    align-items: center;
  }
  .product-reviews__rev-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d70000 0%, #ffd201 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    overflow: hidden;
  }
  .product-reviews__rev-avatar-initial {
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .product-reviews__rev-author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .product-reviews__rev-author-badge { display: inline-flex; }
  .product-reviews__rev-main { min-width: 0; }
  .product-reviews__rev-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .product-reviews__inline-stars {
    display: inline-flex;
    gap: 1px;
  }
  .product-reviews__inline-stars svg { width: 14px; height: 14px; }
  .product-reviews__rev-author {
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(var(--color-foreground, 33 33 33));
  }
  .product-reviews__verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #d70000;
    font-weight: 700;
  }
  .product-reviews__verified-tick {
    flex: none;
    display: block;
  }
  @media (max-width: 480px) {
    .product-reviews__rev-author-col {
      grid-template-columns: 44px 1fr;
      gap: 10px;
    }
    .product-reviews__rev-avatar { width: 44px; height: 44px; }
    .product-reviews__rev-avatar-initial { font-size: 18px; }
    .product-reviews__rev-author { font-size: 13px; }
    .product-reviews__verified { font-size: 12px; }
  }
  .product-reviews__rev-recommend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    color: #d70000;
    background: rgba(215, 0, 0, 0.06);
    border-radius: 9999px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.6;
  }
  .product-reviews__rev-date {
    margin-left: auto;
    font-size: 12px;
    color: rgba(var(--color-foreground, 33 33 33), 0.50);
  }
  .product-reviews__rev-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 800;
  }
  .product-reviews__rev-body {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
    color: rgb(var(--color-foreground, 33 33 33));
  }

  /* ── Per-review attribute slider visualizations ────────────── */
  /* Mirrors the aggregate slider style - same dotted track + red
     marker - but compact (single-row per attribute). Matches the
     Figma design where each review's attribute scores are shown
     as horizontal yellow→red gradient bars with a marker. */
  .product-reviews__rev-attrs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 12px;
    max-width: 360px;
  }
  .product-reviews__rev-attr-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 10px;
    align-items: center;
  }
  .product-reviews__rev-attr-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(var(--color-foreground, 33 33 33), 0.85);
  }
  .product-reviews__rev-attr-bar {
    position: relative;
    background: linear-gradient(90deg, #ffd201 0%, #d70000 100%);
    height: 8px;
    border-radius: 9999px;
  }
  .product-reviews__rev-attr-marker {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid #d70000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  /* ── Merchant reply (Judge.me-style avatar + body) ──────────── */
  .product-reviews__reply {
    margin-top: 16px;
    padding-top: 14px;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: start;
    border-top: 1px solid rgba(var(--color-foreground, 33 33 33), 0.08);
  }
  .product-reviews__reply-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #d70000 0%, #ffd201 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 4px;
    box-sizing: border-box;
  }
  .product-reviews__reply-avatar-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  .product-reviews__reply-avatar-fallback {
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.02em;
  }
  .product-reviews__reply-content {
    min-width: 0;
    padding-top: 2px;
  }
  .product-reviews__reply-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
  }
  .product-reviews__reply-author {
    font-weight: 800;
    font-size: 14px;
    color: rgb(var(--color-foreground, 33 33 33));
  }
  .product-reviews__reply-date {
    margin-left: auto;
    font-size: 12px;
    color: rgba(var(--color-foreground, 33 33 33), 0.55);
    white-space: nowrap;
  }
  .product-reviews__reply-body {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgb(var(--color-foreground, 33 33 33));
  }
  @media (max-width: 480px) {
    .product-reviews__reply { grid-template-columns: 36px 1fr; gap: 10px; }
    .product-reviews__reply-avatar { width: 36px; height: 36px; padding: 3px; }
    .product-reviews__reply-avatar-fallback { font-size: 15px; }
    .product-reviews__reply-author { font-size: 13px; }
    .product-reviews__reply-date { font-size: 11px; }
  }
  .product-reviews__rev-helpful {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
  }
  .product-reviews__vote {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    color: inherit;
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.18);
    border-radius: 9999px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.12s ease;
  }
  .product-reviews__vote:hover { background: rgba(var(--color-foreground, 33 33 33), 0.06); }
  .product-reviews__vote:disabled { opacity: 0.5; cursor: not-allowed; }

  .product-reviews__loadmore {
    display: block;
    margin: 18px auto 0;
    padding: 10px 22px;
    background: transparent;
    color: rgb(var(--color-foreground, 33 33 33));
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.30);
    border-radius: 9999px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .product-reviews__loadmore:hover { border-color: rgb(var(--color-foreground, 33 33 33)); }

  /* ── Form panel ──────────────────────────────────────────────── */
  .product-reviews__form-panel {
    margin-top: 32px;
    padding: 22px 24px;
    background: rgba(var(--color-foreground, 33 33 33), 0.04);
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.10);
    border-radius: 16px;
  }
  .product-reviews__form-panel[hidden] { display: none; }
  .product-reviews__form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }
  .product-reviews__form-title {
    margin: 0;
    font-family: 'Racing Sans One', sans-serif;
    font-style: italic;
    font-size: 22px;
    text-transform: uppercase;
  }
  .product-reviews__form-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    color: inherit;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }
  .product-reviews__form-close:hover { background: rgba(var(--color-foreground, 33 33 33), 0.08); }
  .product-reviews__form-close svg { width: 16px; height: 16px; }

  .product-reviews__elig-msg {
    margin: 0;
    padding: 12px 14px;
    background: rgba(var(--color-foreground, 33 33 33), 0.04);
    border-radius: 8px;
    font-size: 14px;
  }
  .product-reviews__elig-link {
    color: #d70000;
    font-weight: 700;
  }

  .product-reviews__form { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
  .product-reviews__field { display: flex; flex-direction: column; gap: 6px; }
  .product-reviews__field-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground, 33 33 33), 0.75);
  }
  .product-reviews__req { color: #d70000; }
  .product-reviews__input,
  .product-reviews__textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgb(var(--color-background, 255 255 255));
    color: rgb(var(--color-foreground, 33 33 33));
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.18);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
  }
  .product-reviews__input:focus,
  .product-reviews__textarea:focus {
    outline: 2px solid #d70000;
    outline-offset: 1px;
    border-color: #d70000;
  }
  .product-reviews__textarea { resize: vertical; min-height: 90px; }
  .product-reviews__field-hint {
    margin: 0;
    font-size: 12px;
    color: rgba(var(--color-foreground, 33 33 33), 0.55);
  }
  .product-reviews__field-hint.is-error { color: #d70000; }

  .product-reviews__rating-input {
    display: inline-flex;
    gap: 4px;
  }
  .product-reviews__rating-star {
    background: transparent;
    color: rgba(var(--color-foreground, 33 33 33), 0.30);
    border: 0;
    padding: 4px;
    cursor: pointer;
    transition: color 0.12s ease, transform 0.12s ease;
  }
  .product-reviews__rating-star svg { width: 32px; height: 32px; }
  .product-reviews__rating-star.is-hover,
  .product-reviews__rating-star.is-filled {
    color: #ffd201;
  }
  .product-reviews__rating-star.is-filled svg { fill: #ffd201; stroke: #ffd201; }
  .product-reviews__rating-star.is-hover svg { fill: #ffd201; stroke: #ffd201; }
  .product-reviews__rating-hint {
    margin: 4px 0 0;
    font-size: 12px;
    color: rgba(var(--color-foreground, 33 33 33), 0.55);
  }

  .product-reviews__attrs-input {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .product-reviews__attr-input-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    align-items: center;
  }
  .product-reviews__attr-input-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .product-reviews__attr-input-track {
    display: grid;
    grid-template-columns: minmax(40px, auto) 1fr minmax(40px, auto);
    gap: 10px;
    align-items: center;
  }
  .product-reviews__attr-input-track input[type="range"] {
    width: 100%;
    accent-color: #d70000;
  }
  .product-reviews__attr-input-scale {
    font-size: 10px;
    color: rgba(var(--color-foreground, 33 33 33), 0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .product-reviews__field--recommend .product-reviews__recommend-toggle {
    display: inline-flex;
    gap: 8px;
  }
  .product-reviews__recommend-btn {
    padding: 8px 22px;
    background: transparent;
    color: rgb(var(--color-foreground, 33 33 33));
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.30);
    border-radius: 9999px;
    font: inherit;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.12s ease;
  }
  .product-reviews__recommend-btn.is-active {
    background: #d70000;
    color: #fff;
    border-color: #d70000;
  }

  /* ── Photo upload dropzone ─────────────────────────── */
  .product-reviews__photo-dropzone {
    display: block;
    padding: 22px 14px;
    background: rgba(var(--color-foreground, 33 33 33), 0.03);
    border: 1.5px dashed rgba(var(--color-foreground, 33 33 33), 0.30);
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  .product-reviews__photo-dropzone:hover {
    border-color: #d70000;
    background: rgba(215, 0, 0, 0.04);
  }
  .product-reviews__photo-dropzone.is-dragover {
    border-color: #d70000;
    background: rgba(215, 0, 0, 0.08);
    border-style: solid;
  }
  .product-reviews__photo-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .product-reviews__photo-dropzone-icon {
    width: 28px;
    height: 28px;
    color: rgba(var(--color-foreground, 33 33 33), 0.50);
  }
  .product-reviews__photo-dropzone-content strong {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: rgb(var(--color-foreground, 33 33 33));
  }
  .product-reviews__photo-dropzone-content span {
    font-size: 11px;
    color: rgba(var(--color-foreground, 33 33 33), 0.60);
  }
  /* Preview thumbnails grid below the dropzone - shown as the customer
     adds files. Spinner overlays the thumb while uploading; red border
     overlays on error. Remove button (X) is always present. */
  .product-reviews__photo-previews {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .product-reviews__photo-previews:empty { display: none; }
  .product-reviews__photo-preview {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 8px;
    overflow: visible;
  }
  .product-reviews__photo-preview-img-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.18);
    background: rgba(var(--color-foreground, 33 33 33), 0.04);
  }
  .product-reviews__photo-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .product-reviews__photo-preview.is-loading .product-reviews__photo-preview-img {
    opacity: 0.55;
  }
  .product-reviews__photo-preview-spinner {
    position: absolute;
    top: 50%; left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255,255,255,0.55);
    border-top-color: #d70000;
    border-radius: 50%;
    animation: pr-spin 0.7s linear infinite;
  }
  .product-reviews__photo-preview.is-error .product-reviews__photo-preview-img-wrap {
    border-color: #d70000;
  }
  .product-reviews__photo-preview-remove {
    position: absolute;
    top: -6px; right: -6px;
    width: 22px;
    height: 22px;
    background: #212121;
    color: #fff;
    border: 2px solid rgb(var(--color-background, 255 255 255));
    border-radius: 9999px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
  }
  .product-reviews__photo-preview-remove:hover { background: #d70000; }

  /* ── Per-review photo strip (display in the list) ─────────────── */
  .product-reviews__rev-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 12px;
  }
  .product-reviews__rev-photo {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.18);
    background: rgba(var(--color-foreground, 33 33 33), 0.04);
    cursor: zoom-in;
    transition: transform 0.12s ease, border-color 0.12s ease;
  }
  .product-reviews__rev-photo:hover {
    transform: translateY(-1px);
    border-color: #d70000;
  }
  .product-reviews__rev-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ── Aggregate customer photo gallery ─────────────────────────── */
  /* Replaces the "Customer photos coming soon" placeholder. Shown in
     the aggregate right column, capped at 6 visible thumbnails with a
     "+N more" overlay on the last when there are more than 6 photos. */
  .product-reviews__photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(var(--color-foreground, 33 33 33), 0.10);
    background: rgba(var(--color-foreground, 33 33 33), 0.02);
  }
  .product-reviews__photos-grid-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(var(--color-foreground, 33 33 33), 0.04);
    cursor: zoom-in;
    transition: transform 0.12s ease;
    border: 0;
    padding: 0;
  }
  .product-reviews__photos-grid-tile:hover { transform: scale(1.03); }
  .product-reviews__photos-grid-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .product-reviews__photos-grid-overflow {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
  }

  /* ── Lightbox (shared by per-review + aggregate photo clicks) ─── */
  .product-reviews__lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 5vw;
  }
  .product-reviews__lightbox[hidden] { display: none; }
  .product-reviews__lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
  }
  .product-reviews__lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    border: 0;
    border-radius: 9999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .product-reviews__lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
  .product-reviews__lightbox-close svg { width: 20px; height: 20px; }

  .product-reviews__form-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .product-reviews__form-error {
    margin: 0;
    padding: 8px 12px;
    background: rgba(179, 38, 30, 0.08);
    color: #d70000;
    border-radius: 8px;
    font-size: 13px;
  }
  .product-reviews__submit {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    background: linear-gradient(90deg, #ffd201 0%, #d70000 100%);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: filter 0.12s ease, transform 0.12s ease;
  }
  .product-reviews__submit:hover { filter: brightness(1.05); }
  .product-reviews__submit:disabled { opacity: 0.6; cursor: not-allowed; }
  .product-reviews__submit-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pr-spin 0.7s linear infinite;
  }
  .product-reviews__submit.is-loading .product-reviews__submit-spinner {
    display: inline-block;
  }
  @keyframes pr-spin { to { transform: rotate(360deg); } }

  .product-reviews__thanks {
    text-align: center;
    padding: 28px 20px;
  }
  .product-reviews__thanks-title {
    margin: 0 0 8px;
    font-family: 'Racing Sans One', sans-serif;
    font-style: italic;
    font-size: 28px;
    text-transform: uppercase;
    color: #1f7a3a;
  }
/* END_SECTION:product-reviews */

/* START_SECTION:progress-photo-submit (INDEX:139) */
.pps { padding: 24px 0; font-family: 'Montserrat', sans-serif; max-width: 620px; }
  .pps__header { margin-bottom: 16px; }
  .pps__title { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
  .pps__sub { margin: 0; color: #333; font-size: 14px; }
  .pps__form { background: #fff; border: 1px solid #e1e4ec; border-radius: 12px; padding: 18px; }
  .pps__field { margin-bottom: 14px; }
  .pps__field label { display: block; font-size: 13px; color: #1f2533; font-weight: 600; margin-bottom: 4px; }
  .pps__field small { display: block; margin-top: 4px; font-size: 12px; color: #333; }
  .pps__field input, .pps__field textarea {
    width: 100%; padding: 8px 10px; border: 1px solid #d0d4de; border-radius: 8px; font: inherit;
  }
  .pps__submit { background: #ffd201; color: #212121; border: 0; padding: 10px 16px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 14px; }
  .pps__submit:hover { background: #e6bd00; }
  .pps__status { margin: 10px 0 0; font-size: 13px; color: #333; }
  .pps__status--ok  { color: #1fa15e; font-weight: 600; }
  .pps__status--err { color: #d43131; font-weight: 600; }

  @media (max-width: 749px) {
    .pps { padding: 16px; }
    .pps__title { font-size: 18px; }
    .pps__form { padding: 14px; }
    .pps__submit {
      width: 100%;
      padding: 13px 16px;
      min-height: 44px;
    }
  }
/* END_SECTION:progress-photo-submit */

/* START_SECTION:scroll-coupon-popup (INDEX:144) */
.ssa-scroll-coupon {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: ssa-coupon-fade 0.25s ease-out;
}
@keyframes ssa-coupon-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ssa-scroll-coupon[hidden] { display: none; }

.ssa-scroll-coupon__backdrop {
  position: absolute;
  inset: 0;
  /* Lighter tint than before (was 0.75) so the blur effect reads
     clearly - too dark and the underlying page disappears entirely,
     defeating the point of blurring it. */
  background: rgba(15, 15, 18, 0.55);
  /* Frost the page content behind the modal. Vendor-prefixed for
     Safari (-webkit-) which still requires it as of iOS 17. */
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  cursor: pointer;
}
/* Browsers that don't support backdrop-filter (e.g. older Firefox)
   keep the original solid dim overlay so the modal still has contrast. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .ssa-scroll-coupon__backdrop {
    background: rgba(0, 0, 0, 0.75);
  }
}
.ssa-scroll-coupon__modal {
  position: relative;
  background: #212121;
  color: #fff;
  border-radius: 22px;
  max-width: 1040px;
  width: 100%;
  max-height: 92vh;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.ssa-scroll-coupon__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: background 0.15s;
  backdrop-filter: blur(4px);
}
.ssa-scroll-coupon__close:hover {
  background: rgba(255, 255, 255, 0.28);
}
.ssa-scroll-coupon__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 520px;
}
.ssa-scroll-coupon__media {
  position: relative;
  overflow: hidden;
  /* Background image is set via inline style on the element itself -
     `{% stylesheet %}` blocks don't process Liquid `| asset_url`. The
     inline style passes a real CDN URL; this stylesheet block only
     handles layout + the gradient fallback (which lives in the inline
     style too, as the second background-image layer). */
  background-color: #d70000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ssa-scroll-coupon__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ssa-scroll-coupon__product {
  position: absolute;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.55));
  pointer-events: none;
  user-select: none;
}
/* OXY WHEY - dominant, dropped lower (top 65%) per hand-tuning
   so the bottle sits visually anchored to the bottom of the panel. */
.ssa-scroll-coupon__product--left {
  top: 65%;
  left: 2%;
  height: 96%;
  width: auto;
  transform: translateY(-50%) rotate(-2deg);
  z-index: 2;
}
/* PRIDE - smaller than OXY, dropped lower (top 60%) so it sits flush
   alongside OXY WHEY's bottle silhouette, touching visually. */
.ssa-scroll-coupon__product--right {
  top: 60%;
  right: 4%;
  height: 76%;
  width: auto;
  transform: translateY(-50%) rotate(3deg);
  z-index: 1;
}

.ssa-scroll-coupon__copy {
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #212121;
}
.ssa-scroll-coupon__title {
  font-family: 'Racing Sans One', sans-serif;
  /* Keep "CONGRATS !" on a single line. Size clamped so that even at
     the narrowest desktop modal width (~520px right column), the
     12-character title fits horizontally without wrapping. */
  font-size: clamp(36px, 3.8vw, 56px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0 0 24px;
  color: #fff;
  white-space: nowrap;
}
.ssa-scroll-coupon__sub {
  /* Match the "beautiful text under CONGRATS" reference - larger, bold
     italic Montserrat in solid white, slightly more weight so it reads
     as a confident promise rather than fine print. */
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.3;
  color: #fff;
  margin: 0 0 36px;
  max-width: 380px;
  font-weight: 700;
  font-style: italic;
}
/* Match the site-wide button gradient (same as `.hs19__button` on the
   homepage Never Run Out section + BUILD MY BUNDLE CTA): yellow on
   the left, sliding through orange to red on the right. Padded
   slightly smaller than the homepage CTA so it doesn't dominate the
   modal - same visual language, modal-appropriate scale. */
.ssa-scroll-coupon__cta {
  display: inline-block;
  padding: 14px 36px;
  background: linear-gradient(90deg, #ffd201 0%, #ff6b00 50%, #d70000 100%);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 8px;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow:
    0 10px 24px rgba(215, 0, 0, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ssa-scroll-coupon__cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(215, 0, 0, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  color: #fff;
}
.ssa-scroll-coupon__cta:active { transform: translateY(0); }
.ssa-scroll-coupon__finea {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin: 18px 0 0;
  max-width: 280px;
}

@media (max-width: 749px) {
  .ssa-scroll-coupon__modal {
    /* Slightly less aggressive corner radius reads better at small
       widths where the modal nearly fills the viewport. */
    border-radius: 16px;
    max-height: 88vh;
  }
  .ssa-scroll-coupon__layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  /* Bigger header band on mobile - products were rendering small
     before. Bump min/max heights and pull the two products closer
     together so they read as a paired hero shot. */
  .ssa-scroll-coupon__media {
    min-height: 240px;
    max-height: 280px;
  }
  /* Larger product heights + tighter horizontal positions so the
     OxyWhey and Pride bottles sit close to each other in frame.
     Heights ratio'd so OXY stays visually dominant over PRIDE. */
  .ssa-scroll-coupon__product--left {
    top: 50%;
    left: 18%;
    height: auto;
    max-height: 300px;
    max-width: 56%;
    transform: translateY(-50%) rotate(-2deg);
  }
  .ssa-scroll-coupon__product--right {
    top: 50%;
    right: 18%;
    height: auto;
    max-height: 240px;
    max-width: 44%;
    transform: translateY(-50%) rotate(3deg);
  }
  .ssa-scroll-coupon__copy {
    padding: 28px 20px 32px;
  }
  .ssa-scroll-coupon__title {
    font-size: 32px;
    margin-bottom: 16px;
  }
  .ssa-scroll-coupon__sub {
    font-size: 16px;
    margin-bottom: 24px;
    max-width: 280px;
  }
  .ssa-scroll-coupon__cta {
    padding: 12px 28px;
    font-size: 12px;
  }
  .ssa-scroll-coupon__close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
}

/* Phones < 420px - tighten further so the band doesn't dominate the
   short viewport and the CTA stays comfortably above the keyboard /
   browser chrome. */
@media (max-width: 420px) {
  .ssa-scroll-coupon__media {
    min-height: 210px;
    max-height: 250px;
  }
  .ssa-scroll-coupon__product--left  {
    max-height: 260px;
    max-width: 56%;
    left: 14%;
  }
  .ssa-scroll-coupon__product--right {
    max-height: 210px;
    max-width: 44%;
    right: 14%;
  }
  .ssa-scroll-coupon__title { font-size: 28px; margin-bottom: 12px; }
  .ssa-scroll-coupon__sub   { font-size: 15px; margin-bottom: 20px; max-width: 260px; }
  .ssa-scroll-coupon__copy  { padding: 24px 16px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .ssa-scroll-coupon { animation: none; }
  .ssa-scroll-coupon__cta { transition: none; }
}
/* END_SECTION:scroll-coupon-popup */

/* START_SECTION:student-portal-1 (INDEX:148) */
/* FIRST content section - 80px top (banner above gives 0),
   * 40px bottom. */
  .student_portal_1 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 80px;
    padding-bottom: 40px;
  }
  @media (max-width: 749px) {
    .student_portal_1 { padding-top: 40px; padding-bottom: 20px; }
  }

  .student_portal_1__header { position: relative; }

  .student_portal_1__title {
    color: black;
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    line-height: 65px;
    word-wrap: break-word;
    margin: 0;
  }

  .student_portal_1__subtitle {
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 28px;
    word-wrap: break-word;
    margin: 10px 0 0 0;
  }
  .student_portal_1__subtitle[hidden] { display: none; }

  /* Status / Campus chips - small branded pills under the welcome heading.
     Stays inside the existing palette: #FFD201 (primary), #212121 (dark),
     #D70000 (alert). No new theme colours introduced. */
  .student_portal_1__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0 0;
  }
  .student_portal_1__chips[hidden] { display: none; }

  .student_portal_1__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid transparent;
    box-sizing: border-box;
    white-space: nowrap;
  }

  .student_portal_1__chip-label { letter-spacing: 0.2px; }

  /* Status states */
  .student_portal_1__chip--status {
    background: rgba(255, 210, 1, 0.18);
    color: #212121;
    border-color: rgba(255, 210, 1, 0.6);
  }
  .student_portal_1__chip--status[data-state="active"] {
    background: #FFD201;
    color: #212121;
    border-color: #FFD201;
  }
  .student_portal_1__chip--status[data-state="pending"] {
    background: #212121;
    color: white;
    border-color: #212121;
  }
  .student_portal_1__chip--status[data-state="suspended"],
  .student_portal_1__chip--status[data-state="inactive"] {
    background: rgba(215, 0, 0, 0.10);
    color: #D70000;
    border-color: rgba(215, 0, 0, 0.5);
  }
  .student_portal_1__chip--status[data-state="loading"] {
    background: rgba(33, 33, 33, 0.06);
    color: rgba(33, 33, 33, 0.6);
    border-color: rgba(33, 33, 33, 0.15);
  }

  /* The dot in the status chip - colour mirrors the chip's state */
  .student_portal_1__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #5BA300; /* default = "live"/active green */
    display: block;
    box-shadow: 0 0 0 2px rgba(91, 163, 0, 0.18);
  }
  .student_portal_1__chip--status[data-state="active"] .student_portal_1__status-dot {
    background: #2E7D00;
    box-shadow: 0 0 0 2px rgba(46, 125, 0, 0.28);
  }
  .student_portal_1__chip--status[data-state="pending"] .student_portal_1__status-dot {
    background: #FFD201;
    box-shadow: 0 0 0 2px rgba(255, 210, 1, 0.35);
  }
  .student_portal_1__chip--status[data-state="suspended"] .student_portal_1__status-dot,
  .student_portal_1__chip--status[data-state="inactive"] .student_portal_1__status-dot {
    background: #D70000;
    box-shadow: 0 0 0 2px rgba(215, 0, 0, 0.18);
  }
  .student_portal_1__chip--status[data-state="loading"] .student_portal_1__status-dot {
    background: rgba(33, 33, 33, 0.35);
    box-shadow: none;
  }

  /* Campus chip - dark with subtle yellow accent on the icon */
  .student_portal_1__chip--campus {
    background: #212121;
    color: white;
    border-color: #212121;
  }
  .student_portal_1__chip--campus[hidden] { display: none; }
  .student_portal_1__chip--campus .student_portal_1__chip-icon {
    color: #FFD201;
    flex-shrink: 0;
  }

  .student_portal_1__cards {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }

  .student_portal_1__card {
    flex: 1;
    padding: 20px;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }

  .student_portal_1__card--highlight {
    background: var(--1, #FFD201);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    min-height: 161px;
  }

  .student_portal_1__card--stat {
    background: white;
    min-height: 147px;
  }

  .student_portal_1__card-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .student_portal_1__card-icon { display: flex; align-items: center; }
  .student_portal_1__card-icon img { display: block; }

  .student_portal_1__card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .student_portal_1__card-value {
    color: black;
    font-size: 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    word-wrap: break-word;
  }

  .student_portal_1__card-label {
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    word-wrap: break-word;
  }

  @media screen and (max-width: 749px) {
    .student_portal_1__cards { flex-direction: column; }
    /* border-box so the 20px padding doesn't push the full-width
     * card past the viewport edge and cause horizontal overflow. */
    .student_portal_1__card { width: 100%; box-sizing: border-box; }
    .student_portal_1__title { font-size: 36px; line-height: 44px; }
  }
/* END_SECTION:student-portal-1 */

/* START_SECTION:student-portal-2 (INDEX:149) */
/* Middle content section - 80px between sections (40px each side). */
.student_portal_2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (max-width: 749px) {
  .student_portal_2 { padding-top: 20px; padding-bottom: 20px; }
  /* border-box so the 26px side padding stays inside the full-width
   * card and the table never forces a horizontal scrollbar. */
  .student_portal_2__earnings-card {
    padding: 20px 16px;
    box-sizing: border-box;
  }
  .student_portal_2__rewards-inner { padding: 16px; box-sizing: border-box; }
  /* Tighten the activity table so its four columns fit a phone
   * without overflowing or clipping numbers. */
  .student_portal_2__table-header .student_portal_2__table-col {
    height: auto;
    min-height: 44px;
    font-size: 12px;
    line-height: 1.3;
    padding: 8px 4px;
  }
  .student_portal_2__table-cell {
    font-size: 12px;
    line-height: 1.3;
    padding: 14px 4px 8px;
  }
}

.student_portal_2__earnings-card {
  flex: 1;
  padding: 20px 26px;
  background: var(--black, #212121);
  border-radius: 16px;
  outline: 2px #FFD201 solid;
  outline-offset: -2px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.student_portal_2__earnings-header { display: flex; flex-direction: column; gap: 16px; }

.student_portal_2__earnings-title {
  color: white;
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 32px;
  margin: 0;
}

.student_portal_2__earnings-subtitle {
  color: white;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 24px;
  margin: 0;
}

.student_portal_2__stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.student_portal_2__stat { display: flex; flex-direction: column; gap: 4px; }

.student_portal_2__stat-label {
  color: var(--1, #FFD201);
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 20px;
}

.student_portal_2__stat-pill {
  height: 39px;
  padding: 3px;
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.student_portal_2__stat-circle {
  width: 33px;
  height: 33px;
  border-radius: 9999px;
  background: rgba(255, 245, 0, 0.50);
  display: block !important;
  flex-shrink: 0;
}

.student_portal_2__stat-value {
  color: white;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 29.6px;
  text-align: center;
  padding-right: 14px;
}

.student_portal_2__table {
  border-radius: 12px;
  outline: 1px var(--1, #FFD201) solid;
  outline-offset: -1px;
  overflow: hidden;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.50);
}

.student_portal_2__table-header { display: flex; }

.student_portal_2__table-header .student_portal_2__table-col {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 30px;
}

.student_portal_2__table-col--gradient {
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  color: white;
}

.student_portal_2__table-col--white { background: white; color: black; }
.student_portal_2__table-col--date { flex: 0 0 20%; }
.student_portal_2__table-col--product { flex: 0 0 26%; border-left: 0.5px var(--1, #FFD201) solid; border-right: 0.5px var(--1, #FFD201) solid; }
.student_portal_2__table-col--sale { flex: 0 0 26%; }
.student_portal_2__table-col--commission { flex: 0 0 28%; }

.student_portal_2__table-row { display: flex; }

.student_portal_2__table-row + .student_portal_2__table-row .student_portal_2__table-cell {
  border-top: 0.5px var(--1, #FFD201) solid;
}

.student_portal_2__table-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 10px 10px;
  height: 50px;
  color: white;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}

.student_portal_2__table-cell--bordered { border-left: 0.5px var(--1, #FFD201) solid; border-right: 0.5px var(--1, #FFD201) solid; }
.student_portal_2__table-cell--bordered-left { border-left: 0.5px var(--1, #FFD201) solid; }

.student_portal_2__table-empty {
  padding: 20px;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  text-align: center;
}

.student_portal_2__earnings-footer {
  text-align: center;
  color: white;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin: 0;
  text-decoration: underline;
}

.student_portal_2__rewards-card {
  width: 419px;
  min-height: 457px;
  flex-shrink: 0;
  border-radius: 16px;
  outline: 2px #FFD201 solid;
  outline-offset: -2px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.student_portal_2__rewards-inner {
  width: 100%;
  height: 100%;
  min-height: 457px;
  padding: 20px;
  background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 100%);
  display: flex;
  align-items: center;
}

.student_portal_2__rewards-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 417px;
}

.student_portal_2__rewards-title {
  color: white;
  font-size: 20px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 28px;
  margin: 0;
}

.student_portal_2__giveaways { display: flex; flex-direction: column; gap: 16px; }
.student_portal_2__giveaways-title { color: white; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 700; margin: 0; }
.student_portal_2__giveaways-list { display: flex; flex-direction: column; gap: 8px; }
.student_portal_2__giveaway-item {
  color: white;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.student_portal_2__giveaway-item--placeholder,
.student_portal_2__giveaway-item--empty {
  display: block; /* placeholder/empty states are single-string */
  opacity: 0.85;
}
.student_portal_2__giveaway-name { flex: 1; min-width: 0; }
.student_portal_2__giveaway-meta {
  color: #FFD201;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.student_portal_2__merch-card {
  background: rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.student_portal_2__merch-title { color: white; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 600; }
.student_portal_2__merch-progress-row { display: flex; justify-content: space-between; align-items: center; }
.student_portal_2__merch-progress-label,
.student_portal_2__merch-progress-count { color: white; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 20px; }

.student_portal_2__merch-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.10);
  border-radius: 9999px;
  overflow: hidden;
}

.student_portal_2__merch-bar-fill {
  height: 8px;
  background: linear-gradient(270deg, rgba(248,190,0,0.80) 0%, rgba(215,2,1,0.80) 100%);
  border-radius: 9999px;
  display: block !important;
  transition: width 0.5s ease;
}

.student_portal_2__merch-description { color: white; font-size: 12px; font-family: 'Montserrat', sans-serif; font-weight: 600; }

.student_portal_2__rewards-footer { padding: 13px 12px; border-radius: 12px; backdrop-filter: blur(6px); }
.student_portal_2__rewards-footer-text { color: white; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; margin: 0; }

@media (max-width: 990px) {
  .student_portal_2 { flex-direction: column; }
  .student_portal_2__rewards-card { width: 100%; }
  .student_portal_2__stats-row { flex-wrap: wrap; }
  .student_portal_2__stat { flex: 1 1 45%; }
}

@media (max-width: 575px) {
  .student_portal_2__stat { flex: 1 1 100%; }
  .student_portal_2__table-header .student_portal_2__table-col,
  .student_portal_2__table-cell { font-size: 14px; padding: 10px 5px; }
}

/* ── Payout panel ───────────────────────────────────────────────── */
.student_portal_2__payout {
  border-radius: 12px;
  outline: 1px var(--1, #FFD201) solid;
  outline-offset: -1px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255,255,255,0.04);
}
.student_portal_2__payout-heading {
  color: white;
  font-size: 22px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  margin: 0;
}
.student_portal_2__payout-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.student_portal_2__payout-label {
  color: var(--1, #FFD201);
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
.student_portal_2__payout-balance {
  color: white;
  font-size: 28px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
.student_portal_2__payout-note {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
.student_portal_2__payout-pending,
.student_portal_2__payout-rejected {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 1.4;
}
.student_portal_2__payout-pending { background: rgba(255,210,1,0.15); color: #FFD201; }
.student_portal_2__payout-rejected { background: rgba(215,0,0,0.18); color: #ff8a80; }
.student_portal_2__payout-form { display: flex; flex-direction: column; gap: 12px; }
.student_portal_2__payout-fields { display: flex; gap: 12px; }
.student_portal_2__payout-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.student_portal_2__payout-field span {
  color: white;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
.student_portal_2__payout-field input {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.3);
  color: white;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
}
.student_portal_2__payout-field input::placeholder { color: rgba(255,255,255,0.45); }
.student_portal_2__payout-field input:focus { outline: 1px solid #FFD201; border-color: #FFD201; }
.student_portal_2__payout-btn {
  align-self: flex-start;
  padding: 12px 26px;
  border: 0;
  border-radius: 22px;
  cursor: pointer;
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  color: white;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
.student_portal_2__payout-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.student_portal_2__payout-msg {
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  /* Base colour was unset → inherited black → invisible on the dark card.
     Give it an explicit light colour; is-ok/is-err override below. */
  color: rgba(255,255,255,0.9);
}
.student_portal_2__payout-msg:empty { display: none; }
.student_portal_2__payout-msg.is-ok { color: #69f0ae; }
.student_portal_2__payout-msg.is-err { color: #ff8a80; }
@media (max-width: 575px) {
  .student_portal_2__payout-fields { flex-direction: column; }
}
/* END_SECTION:student-portal-2 */

/* START_SECTION:student-portal-3 (INDEX:150) */
/* Middle content section - 80px between sections (40px each side). */
.student_portal_3-section { padding: 40px 0; }
@media (max-width: 749px) {
  .student_portal_3-section { padding: 20px 0; }
}

.student_portal_3-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.student_portal_3-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 817px;
}

.student_portal_3-header { display: flex; flex-direction: column; gap: 16px; }

.student_portal_3-heading {
  color: #212121;
  font-size: 30px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 32px;
  margin: 0;
}

.student_portal_3-current-tier {
  color: #212121;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 24px;
  margin: 0;
}

.student_portal_3-progress-card {
  background: #212121;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.student_portal_3-progress-next-tier {
  color: white;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin: 0;
}

.student_portal_3-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.student_portal_3-progress-label { color: rgba(255,255,255,0.70); font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 20px; }
.student_portal_3-progress-count { color: white; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 20px; }

.student_portal_3-progress-bar-track {
  height: 12px;
  background: rgba(255,255,255,0.60);
  border-radius: 9999px;
  overflow: hidden;
}

.student_portal_3-progress-bar-fill {
  height: 100%;
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  border-radius: 9999px;
  transition: width 0.6s ease;
  display: block !important;
}

/* When next tier is invite-only (Partner→Director / Director→NSC), the
   numeric bar would be misleading - there's no quantitative metric to
   measure against. Hide the track and show the qualitative review badge
   instead. The card still keeps its Next-tier title at the top. */
.student_portal_3-progress-card[data-mode="review"] .student_portal_3-progress-info,
.student_portal_3-progress-card[data-mode="review"] .student_portal_3-progress-bar-track,
.student_portal_3-progress-card[data-mode="top"]    .student_portal_3-progress-info,
.student_portal_3-progress-card[data-mode="top"]    .student_portal_3-progress-bar-track {
  display: none;
}

/* Show the review badge only in those modes */
.student_portal_3-progress-review { display: none; }
.student_portal_3-progress-card[data-mode="review"] .student_portal_3-progress-review,
.student_portal_3-progress-card[data-mode="top"]    .student_portal_3-progress-review {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 9999px;
  background: rgba(255, 210, 1, 0.16);
  border: 1px solid rgba(255, 210, 1, 0.55);
}

.student_portal_3-progress-review-icon {
  color: #FFD201;
  font-size: 14px;
  line-height: 1;
}
.student_portal_3-progress-review-text {
  color: white;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 18px;
}

/* Loading state: keep bar at 0 with a subtle shimmer hint */
.student_portal_3-progress-card[data-mode="loading"] .student_portal_3-progress-bar-fill,
.student_portal_3-progress-card[data-mode="empty"]   .student_portal_3-progress-bar-fill {
  background: rgba(255, 255, 255, 0.25);
}

.student_portal_3-cards-row { display: flex; justify-content: space-between; gap: 20px; }

.student_portal_3-card {
  flex: 1;
  background: white;
  border-radius: 20px;
  border: 1px solid #ffd201;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.student_portal_3-card-title {
  color: #212121;
  font-size: 18px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 28px;
  margin: 0;
}

.student_portal_3-indicators-list { display: flex; flex-direction: column; gap: 8px; }

.student_portal_3-indicator-item { display: flex; align-items: center; gap: 12px; height: 24px; }

.student_portal_3-indicator-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block !important;
}

.student_portal_3-dot-active { background: #FFD201; }
.student_portal_3-dot-inactive { background: rgba(33,33,33,0.40); }

.student_portal_3-indicator-text { font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 24px; }
.student_portal_3-text-active { color: #212121; }
.student_portal_3-text-inactive { color: rgba(33,33,33,0.70); }

.student_portal_3-benefits-list { display: flex; flex-direction: column; gap: 11px; }

.student_portal_3-benefit-item { color: #212121; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; }
.student_portal_3-benefit-item::before { content: "\2022\00a0"; }

.student_portal_3-cta-banner {
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  border-radius: 12px;
  padding: 12px;
  margin-top: auto;
}

.student_portal_3-cta-text { color: white; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 700; }

/* Leaderboard */
.student_portal_3-leaderboard {
  width: 419px;
  flex-shrink: 0;
  padding: 20px;
  background: linear-gradient(180deg, rgba(248,190,0,0.76) 0%, rgba(215,2,1,0.76) 100%);
  border-radius: 16px;
  border: 2px solid #FFD201;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.student_portal_3-leaderboard-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 430px;
}

.student_portal_3-leaderboard-header { display: flex; align-items: center; gap: 12px; }

.student_portal_3-leaderboard-icon {
  width: 48px;
  height: 48px;
  background: #D70000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.student_portal_3-leaderboard-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }

.student_portal_3-leaderboard-title { color: white; font-size: 20px; font-family: 'Racing Sans One', sans-serif; font-weight: 400; line-height: 28px; margin: 0; }
.student_portal_3-leaderboard-subtitle { color: white; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 600; margin: 0; }

.student_portal_3-leaderboard-entries { display: flex; flex-direction: column; gap: 13px; }

.student_portal_3-lb-loading { color: rgba(255,255,255,0.7); font-size: 14px; font-family: 'Montserrat', sans-serif; text-align: center; padding: 20px 0; }

.student_portal_3-lb-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.10);
  border: 0.5px solid #FFD201;
}

.student_portal_3-lb-entry .student_portal_3-lb-name { color: white; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 600; }
.student_portal_3-lb-entry .student_portal_3-lb-amount { color: #FFD201; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 700; }

.student_portal_3-lb-first { background: #FFD201; border: none; }
.student_portal_3-lb-first .student_portal_3-lb-name { color: #212121; }
.student_portal_3-lb-first .student_portal_3-lb-amount { color: #D70000; }

.student_portal_3-lb-user { background: white; border: 0.5px solid #D70000; }
.student_portal_3-lb-user .student_portal_3-lb-name { color: #D70000; }
.student_portal_3-lb-user .student_portal_3-lb-amount { color: #D70000; }

.student_portal_3-leaderboard-note { padding: 13px 12px; border-radius: 12px; backdrop-filter: blur(6px); }
.student_portal_3-note-text { color: white; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; margin: 0; }

@media screen and (max-width: 990px) {
  .student_portal_3-main { flex-direction: column; align-items: stretch; }
  .student_portal_3-left { max-width: 100%; }
  /* border-box so the 20px padding + 2px border stay inside the
   * now full-width leaderboard rather than overflowing the viewport. */
  .student_portal_3-leaderboard { width: 100%; box-sizing: border-box; }
}

@media screen and (max-width: 749px) {
  .student_portal_3-cards-row { flex-direction: column; }
  .student_portal_3-heading { font-size: 24px; line-height: 28px; }
  /* Keep padded cards inside the viewport when stacked single-column. */
  .student_portal_3-card { box-sizing: border-box; }
  .student_portal_3-leaderboard-inner { min-height: 0; }
}
/* END_SECTION:student-portal-3 */

/* START_SECTION:student-portal-4 (INDEX:151) */
/* Middle content section - 80px between sections (40px each side). */
.student_portal_4-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  padding: 40px 0;
}
@media (max-width: 749px) {
  .student_portal_4-wrapper { padding: 20px 0; }
}

/* ===================== SPONSORSHIP CARD ===================== */
.student_portal_4-sponsorship-card {
  width: 419px;
  min-height: 408px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.student_portal_4-sponsorship-bg { position: absolute; inset: 0; z-index: 0; display: block !important; }
.student_portal_4-sponsorship-bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.student_portal_4-sponsorship-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,210,1,0.76) 0%, rgba(215,0,0,0.76) 100%);
  z-index: 1; display: block !important;
}

.student_portal_4-sponsorship-content {
  position: relative; z-index: 2;
  padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 408px; box-sizing: border-box;
}

.student_portal_4-sponsorship-header { display: flex; align-items: center; gap: 16px; }
.student_portal_4-sponsorship-icon-wrap { width: 48px; height: 48px; background: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.student_portal_4-sponsorship-icon-img { width: 25px; height: 28px; object-fit: contain; }
.student_portal_4-sponsorship-icon-placeholder { width: 25px; height: 20px; background: linear-gradient(270deg, #ffd201 0%, #d70000 100%); border-radius: 2px; display: block !important; }
.student_portal_4-sponsorship-label { color: white; font-size: 20px; font-family: 'Racing Sans One', sans-serif; font-weight: 400; line-height: 28px; }
.student_portal_4-sponsorship-body { display: flex; flex-direction: column; gap: 16px; }
.student_portal_4-sponsorship-heading { color: white; font-size: 18px; font-family: 'Montserrat', sans-serif; font-weight: 700; margin: 0; }
.student_portal_4-sponsorship-list { display: flex; flex-direction: column; gap: 8px; }
.student_portal_4-sponsorship-list-item { color: white; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 20px; }

.student_portal_4-sponsorship-cta {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.student_portal_4-sponsorship-btn {
  display: flex; align-items: center; justify-content: center; align-self: stretch;
  height: 42px; padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 4px; color: white;
  font-size: 20px; font-family: 'Montserrat', sans-serif; font-weight: 600;
  text-transform: uppercase; text-decoration: none; text-align: center;
  border: none; cursor: pointer; box-sizing: border-box;
  gap: 10px;
}
.student_portal_4-sponsorship-btn[hidden] { display: none; }
.student_portal_4-sponsorship-btn-icon { font-size: 18px; line-height: 1; }

/* Inert (disabled) variants - keep the shape of the eligible CTA but
   strip the gradient and lower contrast so the user can tell it's not
   actionable. State-specific colour is set below per data-state. */
.student_portal_4-sponsorship-btn--inert {
  cursor: not-allowed;
  text-transform: none;
  font-size: 16px;
}

/* State: locked (Associate) - neutral dark on yellow rim */
.student_portal_4-sponsorship-cta[data-state="locked"] .student_portal_4-sponsorship-btn--inert {
  background: rgba(33, 33, 33, 0.45);
  color: white;
  border: 1px dashed rgba(255, 210, 1, 0.65);
}

/* State: pending (under review) - soft yellow tint, dark text */
.student_portal_4-sponsorship-cta[data-state="pending"] .student_portal_4-sponsorship-btn--inert {
  background: rgba(255, 210, 1, 0.85);
  color: #212121;
  border: 1px solid #FFD201;
}

/* State: approved - solid yellow with checkmark */
.student_portal_4-sponsorship-cta[data-state="approved"] .student_portal_4-sponsorship-btn--inert {
  background: #FFD201;
  color: #212121;
  border: 1px solid #FFD201;
  opacity: 1;
}

/* State: loading - barely-visible placeholder so it doesn't flash bright */
.student_portal_4-sponsorship-cta[data-state="loading"] .student_portal_4-sponsorship-btn--inert {
  background: rgba(33, 33, 33, 0.18);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.student_portal_4-sponsorship-note {
  align-self: stretch; padding: 13px 12px;
  background: rgba(255,255,255,0.10); border-radius: 4px;
  display: flex; justify-content: center; align-items: center;
}

.student_portal_4-sponsorship-note-text {
  text-align: center; color: #FFD201;
  font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600;
}

/* ===================== CAMPUS CODE CARD ===================== */
.student_portal_4-campus-card {
  flex: 1; min-height: 408px; background: #212121;
  border-radius: 16px; padding: 48px 59px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-sizing: border-box; position: relative; overflow: hidden;
}

.student_portal_4-campus-card:before, .student_portal_4-campus-card:after {
  content: ''; background: #f0f0f0; position: absolute; top: 55%;
  transform: translateY(-50%); width: 80px; height: 80px;
}
.student_portal_4-campus-card:before { left: -40px; border-top-right-radius: 100%; border-bottom-right-radius: 100%; }
.student_portal_4-campus-card:after  { right: -40px; border-top-left-radius: 100%; border-bottom-left-radius: 100%; }

.student_portal_4-campus-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.student_portal_4-campus-text { display: flex; flex-direction: column; gap: 24px; max-width: 636px; flex: 1; }
.student_portal_4-campus-heading { color: white; font-size: 24px; font-family: 'Racing Sans One', sans-serif; font-weight: 400; margin: 0; }
.student_portal_4-campus-description { color: white; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 600; margin: 0; line-height: 1.5; }
.student_portal_4-campus-icon-wrap { flex-shrink: 0; }
.student_portal_4-campus-icon-img { width: 90px; height: 90px; object-fit: contain; border-radius: 30px; }
.student_portal_4-campus-icon-circle { width: 90px; height: 90px; background: #FFD201; border-radius: 30px; display: flex; align-items: center; justify-content: center; }
.student_portal_4-campus-icon-diamond { width: 47px; height: 42px; background: white; clip-path: polygon(50% 0%, 100% 35%, 80% 100%, 20% 100%, 0% 35%); display: block !important; }

.student_portal_4-campus-divider { border: none; border-top: 3px dashed rgba(255,255,255,0.4); margin: 0; display: block !important; }

.student_portal_4-campus-code-row { display: flex; flex-direction: column; gap: 20px; }

.student_portal_4-campus-code-box {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: #FFD201; border-radius: 12px;
}

.student_portal_4-campus-code-text {
  color: #212121; font-size: 22px;
  font-family: 'Racing Sans One', sans-serif; font-weight: 400;
  line-height: 36px; letter-spacing: 1px;
}

.student_portal_4-campus-copy-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 113px; height: 48px;
  background: linear-gradient(90deg, #ffd201 0%, #d70000 100%);
  border-radius: 16px; border: 1px solid #D30B0B;
  color: white; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 600;
  cursor: pointer; padding: 0;
  transition: opacity 0.2s ease;
}

.student_portal_4-campus-copy-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.student_portal_4-copy-icon { flex-shrink: 0; }

@media screen and (max-width: 990px) {
  .student_portal_4-wrapper { flex-direction: column; gap: 24px; }
  .student_portal_4-sponsorship-card { width: 100%; }
  .student_portal_4-campus-card { width: 100%; padding: 32px 24px; }
  .student_portal_4-campus-top { flex-direction: column; }
}

@media (max-width: 749px) {
  /* Trim oversized desktop padding on phones. */
  .student_portal_4-campus-card { padding: 24px 18px; }
  .student_portal_4-sponsorship-btn { font-size: 16px; }
  /* The code + Copy button row overflowed on narrow phones because the
   * 22px code text and the fixed 113px button could not fit side by
   * side. Allow the row to wrap and let the code shrink/break. */
  .student_portal_4-campus-code-box {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
  }
  .student_portal_4-campus-code-text {
    font-size: 18px;
    line-height: 1.4;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .student_portal_4-campus-copy-btn { flex-shrink: 0; }
  .student_portal_4-campus-icon-img {
    display: none !important;
  }
  .student_portal_4-campus-card:before, .student_portal_4-campus-card:after{
    background: transparent !important;
  }
}
/* END_SECTION:student-portal-4 */

/* START_SECTION:student-portal-5 (INDEX:152) */
/* Card-style section. 40px margin top+bottom = 80px gap to its
   * padding-based neighbours (no collapse - neighbours use padding).
   * 20px is the card's own internal content padding. */
  .student_portal_5-wrapper {
    width: 100%;
    padding: 20px;
    background: white;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .student_portal_5-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
  }

  .student_portal_5-heading {
    align-self: stretch;
    color: #212121;
    font-size: 30px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
  }

  .student_portal_5-subheading {
    color: rgba(33, 33, 33, 0.70);
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 24px;
    word-wrap: break-word;
  }

  .student_portal_5-cards-row {
    align-self: stretch;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .student_portal_5-card {
    width: 300px;
    height: 193px;
    padding: 12px 20px;
    background: white;
    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
  }

  .student_portal_5-card--highlighted {
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  }

  /* Linked variant - when an <a> is rendered, give it an obvious
     interactive affordance so users can tell it's clickable rather
     than purely decorative. */
  a.student_portal_5-card--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  a.student_portal_5-card--link:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.18);
  }
  a.student_portal_5-card--link:focus-visible {
    outline: 2px solid #D70000;
    outline-offset: 3px;
  }

  .student_portal_5-card__icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }

  .student_portal_5-card__title {
    align-self: stretch;
    color: #212121;
    font-size: 24px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
  }

  .student_portal_5-card--highlighted .student_portal_5-card__title {
    color: white;
  }

  .student_portal_5-card__desc {
    align-self: stretch;
    color: black;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 24px;
    word-wrap: break-word;
  }

  .student_portal_5-card--highlighted .student_portal_5-card__desc {
    color: white;
  }

  /* ── Mobile (< 750px) ────────────────────────────────────────────
   * Desktop is a wrap-flex of 4 fixed-300px cards. On mobile the
   * fixed width forces overflow / awkward wrapping. Drop fixed width
   * and let cards take full row, stacked.
   */
  @media (max-width: 749px) {
    .student_portal_5-wrapper {
      padding: 18px;
      gap: 22px;
      margin-top: 20px;
      margin-bottom: 20px;
      border-radius: 16px;
    }
    .student_portal_5-header { gap: 10px; }
    .student_portal_5-heading {
      font-size: 24px;
      line-height: 1.1;
    }
    .student_portal_5-subheading {
      font-size: 14px;
      line-height: 1.4;
    }
    .student_portal_5-cards-row {
      gap: 12px;
    }
    .student_portal_5-card {
      width: 100%;
      height: auto;
      min-height: 0;
      padding: 14px 18px;
      /* border-box so the side padding doesn't push the full-width
       * card past the row and cause horizontal overflow. */
      box-sizing: border-box;
    }
    .student_portal_5-card__title {
      font-size: 18px;
      line-height: 1.15;
    }
    .student_portal_5-card__desc {
      font-size: 12px;
      line-height: 1.4;
    }
  }
/* END_SECTION:student-portal-5 */

/* START_SECTION:student-program-1 (INDEX:153) */
/* ============================================================
   Student Program 1 - sp1
   ============================================================ */

/* Section vertical rhythm on /pages/campus-impact-circle:
 *   80px BETWEEN sections (40px contributed each side)
 *   40px BETWEEN subsections within a parent section (20px each)
 *
 * student-program-1 is a standalone section (intro/banner) → 40px
 * each side. Margins replaced with padding so they don't collapse
 * with sibling sections. */
.sp1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 80px 0;
  padding-bottom: 40px;
}
@media (max-width: 749px) {
  .sp1 { padding: 20px 0; }
}

/* ---- Header ---- */
.sp1__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.sp1__eyebrow {
  color: #212121;
  font-size: 22px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  margin: 0;
}

.sp1__title {
  max-width: 824px;
  color: #212121;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 46px;
  text-align: center;
  margin: 0;
}

.sp1__description {
  max-width: 1040px;
  color: #212121;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
  margin: 0;
  margin-bottom: 20px;
}

/* ---- Banner card ---- */
.sp1__banner {
    width: 100%;
    background-color: #212121;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 30px 50px;
    box-sizing: border-box;
}

/* Desktop default - hide the mobile-only image. Desktop uses the
   inline background-image on .sp1__banner. */
.sp1__banner-mobile-img {
  display: none;
}

/* ---- Banner left column ---- */
.sp1__banner-left {
  flex: 0 0 532px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp1__banner-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp1__banner-heading {
  color: #fff;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 46px;
  margin: 0;
}

.sp1__banner-subtext {
  color: #fff;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  margin: 0;
}

/* ---- Quote row ---- */
.sp1__quote-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sp1__quote-logo {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  object-fit: contain;
  flex-shrink: 0;
}

.sp1__quote-text {
  color: #fff;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin: 0;
}

/* ---- Claim area ---- */
.sp1__claim-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp1__claim-label {
  color: #fff;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin: 0;
}

.sp1__cards {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sp1__card {
  width: 151px;
  min-height: 130px;
  background: linear-gradient(135deg, #D70000 0%, #FFD201 100%);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 10px;
  box-sizing: border-box;
}

.sp1__card-icon {
  width: 40px;
  height: 32px;
  object-fit: contain;
}

.sp1__card-icon-placeholder {
  width: 40px;
  height: 32px;
  background: #fff;
}

.sp1__card-label {
    color: #fff;
    font-size: 16px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    line-height: 1em;
    text-align: center;
}

/* ---- Gallery (right column) ---- */
.sp1__gallery {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 160px);
  gap: 8px;
  align-self: center;
}

.sp1__gallery-item {
  border-radius: 8px;
  overflow: hidden;
}

.sp1__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp1__gallery-item:first-child {
  grid-row: span 2;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a header (52px Racing Sans) + a two-column banner -
 * 532px claim area on the left + a 3×2 image gallery on the right.
 * On mobile both columns get squashed to ~160px each and the imagery
 * obscures the text. Stack vertically; banner heading shrinks; cards
 * row becomes a 2x2 grid.
 */
@media (max-width: 749px) {
  .sp1 {
    gap: 24px;
    margin-top: 28px !important;
    margin-bottom: 28px !important;
  }
  .sp1__eyebrow { font-size: 14px; }
  .sp1__title {
    font-size: 26px;
    line-height: 1.1;
  }
  .sp1__description {
    font-size: 14px;
    line-height: 1.45;
  }
  .sp1__banner {
    flex-direction: column;
    gap: 22px;
    padding: 22px 18px 0;
    border-radius: 16px;
    /* Suppress the bg-image on mobile - the right portion (athlete
       grid) was bleeding through behind the text content and looking
       messy. Solid dark backdrop for the content; the mobile <img>
       below the content shows the full image instead. */
    background-image: none !important;
    background-color: #212121;
    overflow: hidden;
  }
  .sp1__banner-left {
    flex: none;
    width: 100%;
    gap: 14px;
  }
  /* Banner image rendered below the text content on mobile. Crop the
     left dark portion of the source (which was empty space the
     desktop layout filled with the content panel) so the athlete
     grid composition is what shows. */
  .sp1__banner-mobile-img {
    display: block;
    width: calc(100% + 36px);
    margin: 0 -18px;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: right center;
    vertical-align: bottom;
  }
  .sp1__banner-heading {
    font-size: 26px;
    line-height: 1.1;
  }
  .sp1__banner-subtext { font-size: 14px; }
  .sp1__quote-text { font-size: 14px; }
  .sp1__claim-label { font-size: 14px; }
  /* Cards: was a row of 3 × 151px wide. Two-up grid fits comfortably. */
  .sp1__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .sp1__card {
    width: 100%;
    min-height: 0;
    padding: 18px 16px;
    gap: 14px;
  }
  .sp1__card-icon { width: 44px; height: 44px; }
  .sp1__card-label {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
  }
  /* Gallery: 3×2 grid with 160px rows = 320px tall. Mobile reduces
   * to a 2-row × 2-col grid with shorter rows. */
  .sp1__gallery {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 100px);
    gap: 6px;
  }
  .sp1__gallery-item:first-child {
    grid-row: span 2;
  }
}

@media (max-width: 480px) {
  .sp1__title { font-size: 24px; }
  .sp1__banner-heading { font-size: 22px; }
  .sp1__cards { grid-template-columns: 1fr; }
  .sp1__gallery {
    grid-template-rows: repeat(2, 80px);
  }
}
/* END_SECTION:student-program-1 */

/* START_SECTION:student-program-10 (INDEX:154) */
/* Section rhythm - standalone, 80px between siblings. */
  .sp10-wrapper {
    padding: 40px 0;
    padding-bottom: 80px;
  }
  @media (max-width: 749px) {
    .sp10-wrapper { padding: 20px 0; }
  }

  .sp10-banner {
    display: flex;
    align-items: stretch;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #212121;
    overflow: hidden;
    min-height: 394px;
  }

  .sp10-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
    padding: 58px 40px 58px 60px;
    max-width: 626px;
  }

  .sp10-text-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .sp10-heading {
    color: #fff;
    font-size: 32px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 34px;
    margin: 0;
  }

  .sp10-subtitle {
    color: #fff;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin: 0;
  }

  .sp10-bullet-list {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .sp10-bullet-item {
    color: #fff;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
  }

  .sp10-description {
    color: #fff;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin: 0;
  }

  .sp10-cta-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 4px;
    color: #fff;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    width: fit-content;
    min-height: 42px;
  }

  .sp10-image-wrapper {
    display: flex;
    align-items: flex-end;
    margin-left: auto;
    flex-shrink: 0;
  }

  .sp10-image {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: bottom right;
    max-width: 100%;
}

  @media screen and (max-width: 990px) {
    .sp10-banner {
      flex-direction: column;
      min-height: auto;
    }

    .sp10-content {
      padding: 40px 30px;
      max-width: 100%;
    }

    .sp10-image-wrapper {
      justify-content: center;
    }

    .sp10-image {
      width: 100%;
      max-width: 449px;
      height: auto;
    }
  }

  @media screen and (max-width: 575px) {
    .sp10-content {
      padding: 30px 20px;
    }

    .sp10-heading {
      font-size: 26px;
      line-height: 30px;
    }

    .sp10-subtitle,
    .sp10-description {
      font-size: 16px;
    }

    .sp10-bullet-item {
      font-size: 14px;
    }

    .sp10-cta-button {
      font-size: 16px;
      width: 100%;
    }
  }
/* END_SECTION:student-program-10 */

/* START_SECTION:student-program-2 (INDEX:155) */
/* Section rhythm - standalone, 80px between siblings. */
.sp2-section {
  background-color: #f0f0f0;
  padding: 40px 0;
}
@media (max-width: 749px) {
  .sp2-section { padding: 20px 0; }
}

.sp2-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.sp2-image-wrap {
  flex: 0 0 auto;
  width: 55%;
  max-width: 694px;
  padding: 20px;
}

.sp2-image {
  width: 100%;
  height: auto;
  border-radius: 20px;
  display: block;
  object-fit: cover;
}

.sp2-content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp2-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp2-heading {
  color: var(--black, #212121);
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 46px;
  margin: 0;
  word-wrap: break-word;
}

.sp2-subheading {
  color: #212121;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  margin: 0;
  word-wrap: break-word;
}

.sp2-benefits {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp2-benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp2-benefit-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp2-benefit-text {
  color: var(--black, #212121);
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
}

.sp2-tagline {
  color: #d70000;
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  margin: 0;
  word-wrap: break-word;
  line-height: 1.1em;
}

@media screen and (max-width: 749px) {
  .sp2-container {
    flex-direction: column;
    gap: 24px;
  }

  .sp2-image-wrap {
    width: 100%;
    max-width: 100%;
    padding: 12px;
  }

  .sp2-heading {
    font-size: 36px;
    line-height: 34px;
  }

  .sp2-tagline {
    font-size: 20px;
  }
}
/* END_SECTION:student-program-2 */

/* START_SECTION:student-program-3 (INDEX:156) */
/* === Student Program 3 === */

/* Section rhythm - TIER 1 (sp-3) is the FIRST subsection of a
 * 2-part parent (the TIER 1 detail block sp-4 follows below).
 *   - Top: 40px (80px gap to sp-2 above)
 *   - Bottom: 20px (40px gap to sp-4 sibling sub below). */
.sp3 {
  padding: 40px 0;
}
@media (max-width: 749px) {
  .sp3 { padding: 20px 0 10px; }
}

.sp3__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ── Header ── */

.sp3__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sp3__titles {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sp3__tagline {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #212121;
  text-transform: capitalize;
  text-align: center;
  margin: 0;
}

.sp3__title {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  color: #212121;
  text-align: center;
  margin: 0;
}

.sp3__subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  text-align: center;
  margin: 0;
}

/* ── Cards Grid ── */

.sp3__cards {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 30px;
  width: 100%;
}

.sp3__card {
  flex: 1;
  padding: 20px 30px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp3__card--gradient {
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
}

.sp3__card--white {
  background: #fff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  outline: 4px solid #ffd201;
  outline-offset: -4px;
}

/* ── Icon Box ── */

.sp3__icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 4px;
  width: fit-content;
}

.sp3__icon-box--white {
  background: #fff;
}

.sp3__icon-box--gradient {
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
}

.sp3__icon-box img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.sp3__icon-box--wide img {
  width: 30px;
  height: 24px;
}

/* ── Card Heading ── */

.sp3__card-heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 24px;
  font-weight: 400;
  margin: 0;
}

.sp3__card-heading--white { color: #fff; }
.sp3__card-heading--dark  { color: #212121; }

/* ── Card 1 ── */

.sp3__card-body {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.sp3__badge {
  padding: 19px 20px;
  background: #fff;
  border-radius: 12px;
  text-align: center;
  color: #000;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.sp3__bullet-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp3__bullets {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp3__bullet {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp3__bullet-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp3__bullet-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.sp3__bullet-icon--fallback {
  width: 16px;
  height: 16px;
  background: #FFD201;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

.sp3__bullet-text {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.sp3__from-wrapper {
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp3__from-heading {
  color: #FFD201;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  margin: 0;
}

.sp3__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp3__action {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp3__action-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp3__action-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.sp3__action-icon--fallback {
  width: 18px;
  height: 15px;
  background: #FFD201;
  display: block;
}

.sp3__action-text {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

/* ── Card 2 ── */

.sp3__benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp3__benefit {
  padding: 12px;
  background: #fff;
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.sp3__benefit-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp3__benefit-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.sp3__benefit-icon--fallback {
  width: 35px;
  height: 35px;
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  display: block;
}

.sp3__benefit-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.sp3__benefit-title {
  color: #212121;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
}

.sp3__benefit-desc {
  color: #212121;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.62px;
  font-weight: 700;
  margin: 0;
}

/* ── Card 3 ── */

.sp3__card-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp3__card-subheading {
  color: #212121;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.sp3__card-lower {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: 1;
}

.sp3__unlock-badge {
  padding: 20px;
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  border-radius: 12px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.sp3__merch-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  flex: 1;
}

.sp3__apparel-text {
  color: #212121;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.sp3__quote {
  border-left: 4px solid #ffd201;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
}

.sp3__quote-line1 {
  color: #000;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin: 0;
}

.sp3__quote-line2 {
  color: #FFD201;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  margin: 0;
}

.sp3__incentives {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp3__incentives-heading {
  color: #000;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-transform: capitalize;
  margin: 0;
}

.sp3__incentive-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp3__incentive {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp3__incentive-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp3__incentive-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.sp3__incentive-icon--fallback {
  width: 20px;
  height: 20px;
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sp3__incentive-icon--fallback::after {
  content: '';
  width: 7.5px;
  height: 7.5px;
  background: #fff;
}

.sp3__incentive-text {
  color: #000;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Two-card row at desktop (gradient + white). Stack vertically on
 * mobile, shrink padding + heading sizes.
 */
@media (max-width: 749px) {
  .sp3 { padding: 20px 0 10px; }
  .sp3__wrapper { gap: 24px; }
  .sp3__header { gap: 12px; }
  .sp3__tagline { font-size: 16px; }
  .sp3__title {
    font-size: 26px;
    line-height: 1.1;
  }
  .sp3__subtitle { font-size: 14px; }
  .sp3__cards {
    flex-direction: column;
    gap: 16px;
  }
  .sp3__card {
    padding: 18px;
    gap: 14px;
  }
  .sp3__card-heading { font-size: 18px; }
  .sp3__card-body { gap: 16px; }
  .sp3__badge {
    padding: 14px 16px;
    font-size: 14px;
  }
  .sp3__bullet-group { gap: 14px; }
  .sp3__bullets { gap: 10px; }
  .sp3__bullet-text {
    font-size: 12px;
    line-height: 1.4;
  }
  .sp3__from-heading { font-size: 14px; }
  .sp3__action-text { font-size: 12px; }
}

@media (max-width: 480px) {
  .sp3__title { font-size: 24px; }
}
/* END_SECTION:student-program-3 */

/* START_SECTION:student-program-4 (INDEX:157) */
/* Section rhythm - TIER 1 detail (sp-4) is the SECOND subsection
 * of TIER 1's 2-part parent (sp-3 above).
 *   - Top: 20px (40px gap to sp-3 sibling sub above)
 *   - Bottom: 40px (80px gap to sp-5 below)
 * Margin (which caused collapse) replaced with padding-y; horizontal
 * 48px padding preserved for the dark card's inner content gutter. */
.sp4-section {
    background-color: #212121;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 20px 48px 40px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto !important;
}
@media (max-width: 749px) {
    /* Note: a second (canonical) mobile override lives further down
     * in this stylesheet and wins via source order. Keep this rule
     * lightweight - values intentionally not duplicated. */
}

.sp4-inner {
  width: 100%;
  max-width: 896px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sp4-heading {
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 28px;
  margin: 0;
}

.sp4-banner {
  width: 100%;
  min-height: 122px;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  outline: 2px solid #FFD201;
  outline-offset: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp4-banner-overlay {
  width: 100%;
  min-height: 122px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.sp4-banner-title-row {
  display: flex;
  align-items: center;
  gap: 17px;
}

.sp4-icon {
  width: 18px;
  height: 24px;
  object-fit: contain;
}

.sp4-banner-title {
  text-align: center;
  color: #FFD201;
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 32px;
}

.sp4-banner-subtitle {
  text-align: center;
  color: #FFD201;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin: 0;
}

.sp4-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 438px;
}

.sp4-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 4px;
  color: #fff;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.sp4-footer-text {
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 24px;
  margin: 0;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a dark CTA panel with banner + button (60/48 padding).
 * Tighten padding and button + banner sizes for phones.
 */
@media (max-width: 749px) {
  .sp4-section {
    padding: 20px 18px;
    margin: 20px auto !important;
    border-radius: 16px;
    background-image: none !important;
  }
  .sp4-inner { gap: 16px; }
  .sp4-heading {
    font-size: 14px;
    line-height: 1.45;
  }
  .sp4-banner-overlay {
    padding: 16px;
    gap: 8px;
  }
  .sp4-banner-title {
    font-size: 18px;
    line-height: 1.2;
  }
  .sp4-banner-subtitle { font-size: 12px; }
  .sp4-btn {
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
    white-space: normal;
  }
  .sp4-footer-text {
    font-size: 12px;
    line-height: 1.4;
  }
}
/* END_SECTION:student-program-4 */

/* START_SECTION:student-program-5 (INDEX:158) */
/* ============================================
   SP5 - Student Program 5 (Tier 2 Campus Partner)
   ============================================ */

/* Section rhythm - standalone, 80px between siblings. */
.sp5-section {
  padding: 40px 0;
  padding-top: 80px;
}
@media (max-width: 749px) {
  .sp5-section { padding: 20px 0; }
}

/* Container */
.sp5-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ---- Header ---- */

.sp5-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sp5-title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sp5-eyebrow {
  text-align: center;
  color: var(--black, #212121);
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  word-wrap: break-word;
  margin: 0;
}

.sp5-title {
  text-align: center;
  color: var(--black, #212121);
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  word-wrap: break-word;
  margin: 0;
}

.sp5-subtitle {
  text-align: center;
  color: #212121;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
}

/* ---- Content Row ---- */

.sp5-content {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 30px;
  width: 100%;
}

/* ---- Left Column ---- */

.sp5-left {
  flex: 0 0 46%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* How You Unlock It */

.sp5-unlock {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sp5-unlock-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp5-unlock-heading {
  color: var(--black, #212121);
  font-size: 32px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  word-wrap: break-word;
  margin: 0;
}

.sp5-unlock-description {
  color: var(--black, #212121);
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
}

.sp5-unlock-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp5-unlock-item {
  padding: 15px;
  background: white;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp5-unlock-icon {
    width: 20px;
    height: 20px;
    background-image: url(/cdn/shop/files/Vector_9fdb6475-6836-4ba9-8d3d-07fe0be082fc.png?v=1775577848);
    border-radius: 50%;
    flex-shrink: 0;
}

.sp5-unlock-item-text {
  color: var(--black, #212121);
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  margin: 0;
}

/* Cash & Incentives Card */

.sp5-incentives-card {
  padding: 20px;
  background: white;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp5-incentives-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp5-incentives-heading {
  color: var(--black, #212121);
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  word-wrap: break-word;
  margin: 0;
}

.sp5-incentive-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp5-incentive-bar {
  height: 37px;
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  border-radius: 4px;
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp5-incentive-badge {
  width: 37px;
  height: 37px;
  flex-shrink: 0;
  background: white;
  border-radius: 5.44px;
  outline: 1px #ffd201 solid;
  outline-offset: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp5-incentive-badge img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.sp5-incentive-badge-icon {
  width: 13.88px;
  height: 13.88px;
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  display: block;
}

.sp5-incentive-bar-text {
  color: white;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
  margin: 0;
}

/* Incentives Tagline */

.sp5-incentives-tagline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp5-brand-logo {
  width: 31px;
  height: 31px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.sp5-brand-logo-fallback {
  width: 31px;
  height: 31px;
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  border-radius: 9999px;
  flex-shrink: 0;
  display: block;
}

.sp5-brand-image {
  width: 31px;
  height: 31px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.sp5-incentives-tagline-text {
  color: #212121;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  word-wrap: break-word;
  margin: 0;
}

/* ---- Right Column - What You Get ---- */

.sp5-right {
  flex: 1;
  border-radius: 20px;
  background-color: #212121;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.sp5-right-overlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.sp5-wyg-card {
  padding: 20px;
  background: rgba(0, 0, 0, 0.50);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp5-wyg-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp5-wyg-heading {
  color: white;
  font-size: 32px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  word-wrap: break-word;
  margin: 0;
}

.sp5-wyg-subtitle {
  color: white;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 28px;
  word-wrap: break-word;
  margin: 0;
}

/* Benefits List */

.sp5-benefits {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp5-benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp5-benefit-arrow {
  width: 12px;
  height: 14px;
  background: #FFD201;
  flex-shrink: 0;
  display: block;
  clip-path: polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%, 40% 50%);
}

.sp5-benefit-text {
  color: white;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 24px;
  word-wrap: break-word;
  margin: 0;
}

.sp5-wyg-quote {
  color: white;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  word-wrap: break-word;
  margin: 0;
}

/* ---- Footer ---- */

.sp5-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sp5-footer-text {
  text-align: center;
  color: #212121;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  white-space: pre-line;
  margin: 0;
}

.sp5-cta-btn {
  display: inline-block;
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 4px;
  color: white;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  min-width: 358px;
}

.sp5-cta-btn:hover {
  color: white;
  text-decoration: none;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a header + 2-column content row (left 46% / right 54%).
 * On mobile stack vertically, shrink heading from 52px → 28px,
 * unlock-heading + incentives-heading 32→20, body sizes from 18→14.
 */
@media (max-width: 749px) {
  .sp5-section { padding: 20px 0; }
  .sp5-container { gap: 22px; }
  .sp5-header { gap: 12px; }
  .sp5-eyebrow { font-size: 16px; }
  .sp5-title {
    font-size: 26px;
    line-height: 1.1;
  }
  .sp5-subtitle { font-size: 14px; }
  .sp5-content {
    flex-direction: column;
    gap: 18px;
  }
  .sp5-left {
    flex: none;
    width: 100%;
    gap: 18px;
  }
  .sp5-unlock-heading {
    font-size: 18px;
    line-height: 1.15;
  }
  .sp5-unlock-description { font-size: 14px; }
  .sp5-unlock-item { padding: 12px; }
  .sp5-unlock-item-text { font-size: 12px; }
  .sp5-incentives-card {
    padding: 16px;
    gap: 14px;
  }
  .sp5-incentives-heading {
    font-size: 18px;
    line-height: 1.15;
  }
  /* Desktop forces a 358px min-width on the CTA which causes
     horizontal scroll on phone viewports < 358px (iPhone SE).
     Stretch to fill column instead. */
  .sp5-cta-btn {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .sp5-title { font-size: 24px; }
}
/* END_SECTION:student-program-5 */

/* START_SECTION:student-program-6 (INDEX:159) */
/* Section rhythm - standalone, 80px between siblings. */
.sp6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (max-width: 749px) {
  .sp6 { padding-top: 24px; padding-bottom: 24px; }
}

/* ── Header ── */

.sp6__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 766px;
}

.sp6__title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.sp6__subtitle {
  color: var(--black, #212121);
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-align: center;
  text-transform: capitalize;
  margin: 0;
}

.sp6__heading {
  color: var(--black, #212121);
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}

.sp6__description {
  color: #000;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  text-align: center;
  margin: 0;
}

/* ── Body ── */

.sp6__body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  width: 100%;
}

.sp6__quote {
  color: #000;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  padding: 8px 10px;
  margin: 0;
}

/* ── Cards Row ── */

.sp6__cards-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* ── Base Card ── */

.sp6__card {
  flex: 1;
  min-height: 371px;
  padding: 20px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

/* ── Card 1: Unlock ── */

.sp6__card--unlock {
  background-image:
    linear-gradient(180deg, rgba(255, 210, 1, 0.76) 0%, rgba(215, 0, 0, 0.76) 100%),
    var(--sp6-card1-bg, none);
  background-color: rgba(215, 0, 0, 0.76);
  background-size: cover;
  background-position: center;
}

.sp6__card-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.sp6__card-title {
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  margin: 0;
  color: #000;
}

.sp6__card-title--light {
  color: #fff;
}

.sp6__card-desc {
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin: 0;
  color: #000;
}

.sp6__card-desc--light {
  color: #fff;
}

/* Card 1 Checklist */

.sp6__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.sp6__checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp6__checklist-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp6__checklist-item span:last-child {
  color: #fff;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

/* ── Card 2: Incentives ── */

.sp6__card--incentives {
  background: var(--1, #FFD201);
}

.sp6__card--incentives .sp6__card-top {
  gap: 20px;
}

.sp6__badge-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.sp6__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(215, 2, 1, 0.50);
  border-radius: 4px;
  backdrop-filter: blur(10px);
  min-height: 37px;
}

.sp6__badge-icon-wrap {
  flex-shrink: 0;
  width: 37px;
  height: 37px;
  background: #d70000;
  border-radius: 4px;
  outline: 1px solid #d70000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp6__badge-icon-wrap img,
.sp6__badge-icon-wrap svg {
  display: block;
}

.sp6__badge-text {
  color: #fff;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  padding-right: 8px;
}

.sp6__card-footer {
  color: #000;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin: 0;
  width: 100%;
}

/* ── Card 3: Benefits ── */

.sp6__card--benefits {
  background: #d70000;
  gap: 20px;
  justify-content: flex-start;
}

.sp6__benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.sp6__benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp6__benefit-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp6__benefit-item span:last-child {
  color: #fff;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 24px;
}

/* ── Arrow connector ── */

.sp6__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── CTA ── */

.sp6__cta-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.sp6__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  min-width: 502px;
  height: 42px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 4px;
  color: #fff;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 3-card row (each ~371px tall, ~33% wide). On mobile
 * stack vertically. Heading 52 → 28, card titles 24 → 20.
 */
@media (max-width: 749px) {
  .sp6 {
    padding-top: 28px;
    padding-bottom: 28px;
    gap: 22px;
  }
  .sp6__header {
    gap: 12px;
    max-width: 100%;
  }
  .sp6__subtitle { font-size: 16px; }
  .sp6__heading {
    font-size: 26px;
    line-height: 1.05;
  }
  .sp6__description {
    font-size: 14px;
    line-height: 1.45;
  }
  .sp6__cards-row {
    flex-direction: column;
    gap: 14px;
  }
  .sp6__card {
    min-height: 0;
    padding: 18px;
  }
  .sp6__card-top { gap: 12px; }
  .sp6__card-title {
    font-size: 18px;
    line-height: 1.15;
  }
  .sp6__card-desc { font-size: 14px; }
  .sp6__checklist { gap: 10px; }
  .sp6__checklist-item span:last-child { font-size: 12px; }
  .sp6__cta-btn {
    /* Override desktop `min-width: 502px` which would force a horizontal
       scrollbar on every phone viewport. Stretch to fill the column
       instead. */
    align-self: stretch;
    width: 100%;
    min-width: 0;
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .sp6__heading { font-size: 24px; }
}
/* END_SECTION:student-program-6 */

/* START_SECTION:student-program-9 (INDEX:162) */
/* Section rhythm - standalone, 80px between siblings.
   * Margin replaced with padding (on the parent .page-width via
   * the .sp9-section-pad class added below) to avoid collapse with
   * sibling sections. The .sp9-wrapper card itself gets no margin. */
  .sp9-wrapper {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #ffd201;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
  }
  .sp9-section-pad {
    padding: 40px 0;
  }
  @media (max-width: 749px) {
    .sp9-section-pad { padding: 20px 0; }
  }

  .sp9-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .sp9-table th,
  .sp9-table td {
    padding: 20px 10px;
    border-bottom: 0.5px solid #ffd201;
    border-right: 1px solid #ffd201;
    font-size: 18px;
    line-height: 20px;
    color: #212121;
    text-align: center;
    vertical-align: middle;
    word-wrap: break-word;
  }

  .sp9-table th:last-child,
  .sp9-table td:last-child {
    border-right: none;
  }

  .sp9-table thead th {
    padding: 20px 10px;
    height: 75px;
    color: white;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    border-bottom: 1px solid #ffd201;
  }

  .sp9-header--gradient {
    background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  }

  .sp9-header--dark {
    background: #212121;
  }

  .sp9-table thead th:first-child {
    font-size: 24px;
    text-align: left;
    padding-left: 37px;
  }

  .sp9-table tbody td:first-child {
    text-align: left;
    padding-left: 37px;
    font-weight: 600;
  }

  .sp9-table tbody td {
    font-weight: 500;
  }

  .sp9-table tbody tr:first-child td {
    padding-top: 20px;
  }

  .sp9-table tbody .sp9-icon-row td:not(:first-child) {
    font-weight: 400;
  }

  @media screen and (max-width: 749px) {
    .sp9-wrapper {
      overflow-x: auto;
      border-radius: 12px;
    }

    .sp9-table {
      table-layout: auto;
      min-width: 990px;
    }
  }
/* END_SECTION:student-program-9 */

/* START_SECTION:the-ambassador-lounge-1 (INDEX:163) */
.ambassador-lounge {
    /* FIRST content section - the banner above is full-bleed (0 padding),
       so this absorbs the whole 80px section gap on top; 40px bottom. */
    padding-top: 80px;
    padding-bottom: 40px;
    font-family: 'Montserrat', sans-serif;
  }

  .lounge-title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 52px;
    font-weight: 400;
    color: #212121;
    margin: 0 0 10px 0;
    text-transform: capitalize;
  }

  .lounge-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 40px;
  }

  .stats-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
  }

  .stats-pill {
    background: #FFD201;
    border-radius: 12px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .pill-label {
    font-weight: 700;
    font-size: 18px;
    color: black;
  }

  .pill-value {
    font-weight: 500;
    font-size: 18px;
    color: black;
  }

  .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 50px;
  }

  .lounge-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #7C7C7C;
    padding: 20px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .card-title {
    font-size: 18px;
    font-weight: 500;
    color: black;
  }

  .card-date {
    font-size: 18px;
    color: #535353;
  }

  .card-body2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 20px;
  }

  .card-value {
    font-size: 30px;
    font-weight: 600;
    color: black;
  }

  .commission-list ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
  }

  .commission-list li {
    font-size: 20px;
    font-weight: 600;
    color: black;
    line-height: 1.2em;
  }

  .card-graph {
    width: 110px;
    height: auto;
    object-fit: contain;
  }

  /* Replicating the gradient placeholder from the original style */
  .graph-placeholder {
    width: 110px;
    height: 80px;
    background: linear-gradient(180deg, #DE2501 0%, rgba(233, 96, 1, 0.08) 100%);
    /* Use a mask or clip-path if you want to mimic the wave shape without an image */
    clip-path: polygon(0% 70%, 20% 80%, 40% 60%, 60% 85%, 80% 40%, 100% 10%, 100% 100%, 0% 100%);
  }

  .action-container {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .share-button {
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 4px;
    color: white;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 40px;
    display: inline-block;
    transition: opacity 0.3s ease;
  }

  /* Responsive Adjustments */
  @media (max-width: 1024px) {
    .cards-grid {
      grid-template-columns: 1fr;
    }
    .lounge-title {
      font-size: 40px;
    }
  }

  /* Mobile - halve the first-section spacing (40px top / 20px bottom)
     and tighten the dashboard: smaller heading, full-width stat pills,
     reduced card type so nothing overflows the viewport. */
  @media (max-width: 749px) {
    .ambassador-lounge {
      padding-top: 40px;
      padding-bottom: 20px;
    }
    .lounge-title {
      font-size: 32px;
    }
    .lounge-subtitle {
      font-size: 14px;
      margin-bottom: 26px;
    }
    .stats-pills-container {
      gap: 12px;
      margin-bottom: 24px;
    }
    .stats-pill {
      width: 100%;
      padding: 10px 16px;
      justify-content: space-between;
    }
    .pill-label,
    .pill-value {
      font-size: 14px;
    }
    .cards-grid {
      gap: 14px;
      margin-bottom: 32px;
    }
    .lounge-card {
      padding: 16px;
    }
    .card-title,
    .card-date {
      font-size: 14px;
    }
    .card-value {
      font-size: 24px;
    }
    .commission-list li {
      font-size: 16px;
    }
    .share-button {
      font-size: 16px;
      padding: 12px 28px;
      text-align: center;
    }
  }
/* END_SECTION:the-ambassador-lounge-1 */

/* START_SECTION:the-ambassador-lounge-11 (INDEX:165) */
/* Middle content section - 80px between sections (40px each side). */
  .tal11-section {
    padding: 40px 0;
    font-family: 'Montserrat', sans-serif;
  }
  @media (max-width: 749px) {
    .tal11-section { padding: 20px 0; }
  }

  .tal11-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 32px 32px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  .tal11-header {
    margin-bottom: 24px;
  }

  .tal11-title {
    font-family: 'Racing Sans One', sans-serif;
    font-style: italic;
    font-size: 28px;
    color: #212121;
    margin-bottom: 6px;
  }

  .tal11-subtitle {
    font-size: 14px;
    color: #333;
  }

  /* Balance row */
  .tal11-balance-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #fff;
    padding: 24px 28px;
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .tal11-balance-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.9;
    margin-bottom: 6px;
  }
  .tal11-balance-value {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 44px;
    line-height: 1.1;
  }
  .tal11-balance-meta {
    font-size: 13px;
    opacity: 0.9;
    margin-top: 4px;
  }

  .tal11-balance-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  .tal11-request-btn {
    background: #212121;
    color: #fff;
    border: 0;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
  }
  .tal11-request-btn:hover:not(:disabled) {
    transform: translateY(-1px);
  }
  .tal11-request-btn:disabled {
    background: rgba(15, 22, 41, 0.4);
    cursor: not-allowed;
  }

  .tal11-balance-method {
    font-size: 12px;
    opacity: 0.9;
  }

  /* Stripe Connect block */
  .tal11-stripe {
    margin-bottom: 18px;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: #f0f0f0;
  }
  .tal11-stripe__inner {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
  }
  .tal11-stripe__title { font-size: 14px; font-weight: 700; color: #212121; }
  .tal11-stripe__sub   { font-size: 12px; color: #333; margin-top: 2px; line-height: 1.4; }
  .tal11-stripe__btn {
    border: 0;
    background: #635BFF;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s, transform 0.15s;
  }
  .tal11-stripe__btn:hover:not(:disabled) { transform: translateY(-1px); }
  .tal11-stripe__btn:disabled             { opacity: 0.55; cursor: not-allowed; }
  .tal11-stripe--action {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fcd34d;
  }
  .tal11-stripe--ok {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #6ee7b7;
  }
  .tal11-stripe--ok .tal11-stripe__btn {
    background: transparent;
    color: #065f46;
    border: 1px solid #6ee7b7;
  }
  @media (max-width: 600px) {
    .tal11-stripe__inner {
      grid-template-columns: 36px 1fr;
      grid-row-gap: 12px;
    }
    .tal11-stripe__action {
      grid-column: 1 / -1;
    }
    .tal11-stripe__btn { width: 100%; }
  }

  /* Status banner */
  .tal11-status {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 20px;
  }
  .tal11-status--info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
  .tal11-status--success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
  .tal11-status--error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

  /* History */
  .tal11-history {
    margin-top: 20px;
  }
  .tal11-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .tal11-history-title {
    font-size: 15px;
    font-weight: 700;
    color: #212121;
  }

  .tal11-history-table {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
  }
  .tal11-history-header-row,
  .tal11-history-row {
    display: grid;
    grid-template-columns: 110px 110px 120px 100px 1fr;
    align-items: center;
    padding: 12px 14px;
    font-size: 13px;
  }
  .tal11-history-header-row {
    background: #f0f0f0;
    color: #333;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
  }
  .tal11-history-row + .tal11-history-row,
  .tal11-history-header-row + .tal11-history-row {
    border-top: 1px solid #ddd;
  }
  .tal11-history-cell--amount { font-weight: 700; color: #212121; }
  .tal11-history-cell--ref    { font-family: monospace; font-size: 11px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .tal11-history-empty {
    padding: 28px 14px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
  }

  /* Status badges */
  .tal11-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .tal11-badge--paid     { background: #d1fae5; color: #065f46; }
  .tal11-badge--approved { background: #dbeafe; color: #1e40af; }
  .tal11-badge--pending  { background: #fef3c7; color: #92400e; }
  .tal11-badge--rejected { background: #fee2e2; color: #991b1b; }

  @media (max-width: 749px) {
    .tal11-card { padding: 22px 18px 26px; }
    .tal11-balance-row {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 20px;
    }
    .tal11-balance-action { align-items: flex-start; }
    .tal11-request-btn { width: 100%; }
    .tal11-balance-value { font-size: 32px; }
    /* History table: 5 fixed columns overflow a phone. Drop the
       Reference column and shrink the rest so it fits without a
       horizontal scrollbar. */
    .tal11-history-header-row,
    .tal11-history-row {
      grid-template-columns: 72px 80px 1fr 76px;
      gap: 6px;
      font-size: 12px;
      padding: 10px 10px;
    }
    .tal11-history-cell--ref { display: none; }
    .tal11-history-cell--method {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:the-ambassador-lounge-11 */

/* START_SECTION:the-ambassador-lounge-2 (INDEX:166) */
/* ─────────────────────────────────────────────────
   OUTER SHELL
───────────────────────────────────────────────── */
.amb-outer {
  width: 100%;
  padding: 60px 100px;
  background: var(--black, #212121);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  /* Middle card section. The 80px section gap is built from this card's
     margin - neighbours (lounge-1 / lounge-3) use padding, so margin and
     padding do NOT collapse: 40px margin + 40px neighbour padding = 80px.
     The 60/100 padding above is the card's own internal content inset. */
  margin-top: 40px;
  margin-bottom: 40px;
}

.amb-inner {
  width: 100%;
  max-width: 1054px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ─────────────────────────────────────────────────
   HEADING
───────────────────────────────────────────────── */
.amb-heading {
  width: 100%;
  text-align: center;
  color: white;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 56px;
  margin: 0;
}

/* ─────────────────────────────────────────────────
   MAIN CONTENT COLUMN
───────────────────────────────────────────────── */
.amb-body-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ─────────────────────────────────────────────────
   TOP ROW - tier progress (left) + hero image (right)
───────────────────────────────────────────────── */
.amb-top-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
}

.amb-progress-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─────────────────────────────────────────────────
   TIER ICONS ROW
───────────────────────────────────────────────── */
.amb-tiers-icons-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.amb-tier-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 72px;
}

.amb-tier-circle {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.amb-tier-circle--active {
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
}

.amb-tier-circle--inactive {
  background: white;
  box-shadow:
    0px 1px 2px rgba(0,0,0,0.44),
    0px 5px 5px rgba(0,0,0,0.38),
    0px 10px 6px rgba(0,0,0,0.23),
    0px 18px 7px rgba(0,0,0,0.07),
    0px 28px 8px rgba(0,0,0,0.01),
    0px -6px 4px rgba(0,0,0,0.25) inset;
}

.amb-tier-circle img,
.amb-tier-circle svg {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

.amb-tier-name {
  text-align: center;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.amb-tier-name--active   { color: #FFD201; }
.amb-tier-name--inactive { color: white; }

.amb-tier-price {
  text-align: center;
  color: white;
  font-size: 12px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

/* ─────────────────────────────────────────────────
   PROGRESS BAR
───────────────────────────────────────────────── */
.amb-bar-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.amb-bar-track {
  width: 100%;
  height: 16px;
  background: white;
  border-radius: 9999px;
  overflow: visible;
  position: relative;
}

.amb-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 9999px;
  position: relative;
  /* Smooth slide from 0 → hydrated width when ambassador-api.js sets
     the real value. Without this, the bar snaps. */
  transition: width 0.6s ease-out;
}

.amb-bar-thumb {
  width: 16px;
  height: 16px;
  background: white;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.10), 0px 4px 6px rgba(0,0,0,0.10);
  border-radius: 9999px;
  border: 4px solid #FFD201;
  position: absolute;
  right: -8px;
  top: 0;
  box-sizing: border-box;
  display: block !important;
}

.amb-bar-labels {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.amb-bar-label {
  color: white;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 16px;
}

/* ─────────────────────────────────────────────────
   HERO IMAGE
───────────────────────────────────────────────── */
.amb-hero-img {
  width: 330px;
  height: 330px;
  object-fit: cover;
  border-radius: 16px;
  flex-shrink: 0;
  display: block;
}

/* ─────────────────────────────────────────────────
   STAT CARDS ROW
───────────────────────────────────────────────── */
.amb-cards-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: -40px;
}

.amb-card {
  flex: 1 1 0;
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 130px;
  box-sizing: border-box;
}

.amb-card__tier-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.amb-card__tier-badge {
  width: 48px;
  height: 48px;
  background: #FFD201;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.amb-card__tier-badge img,
.amb-card__tier-badge svg {
  width: 22px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.amb-card__tier-name {
  color: #FFD201;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 28px;
}

.amb-card__value {
  text-align: center;
  font-size: 30px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.amb-card__value--black { color: black; }
.amb-card__value--red   { color: #D70000; }

.amb-card__label {
  text-align: center;
  color: black;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}

/* ─────────────────────────────────────────────────
   MOTIVATION BANNER
───────────────────────────────────────────────── */
.amb-banner {
  width: 100%;
  background: linear-gradient(90deg, rgba(255,210,1,0.10) 0%, rgba(215,0,0,0.10) 100%);
  border-radius: 16px;
  outline: 1px solid rgba(255,210,1,0.30);
  outline-offset: -1px;
  padding: 32px 33px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.amb-banner__top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.amb-banner__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.amb-banner__title {
  color: #FFD201;
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 32px;
}

.amb-banner__sub {
  text-align: center;
  color: white;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 28px;
  margin: 0;
}

/* ─────────────────────────────────────────────────
   CTA BUTTON
───────────────────────────────────────────────── */
.amb-cta {
  display: inline-flex;
  padding: 10px 18px;
  min-width: 287px;
  height: 42px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.amb-cta__text {
  color: white;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a 60/100 padded shell with heading + 2-col top row
 * (tier-progress meter on left + hero image on right). Mobile stacks
 * everything single-column and shrinks the tier circles.
 */
@media (max-width: 749px) {
  .amb-outer {
    padding: 28px 18px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 16px;
  }
  .amb-inner { gap: 22px; max-width: 100%; }
  .amb-heading {
    font-size: 26px;
    line-height: 1.15;
  }
  .amb-top-row {
    flex-direction: column;
    gap: 18px;
  }
  .amb-progress-col {
    width: 100%;
    flex: none;
    gap: 12px;
  }
  /* Tier icons row - 4-5 circles on a phone need to shrink hard */
  .amb-tier-item { width: 56px; }
  .amb-tier-circle {
    width: 44px;
    height: 44px;
  }
  .amb-tier-circle img,
  .amb-tier-circle svg {
    width: 18px;
    height: 18px;
  }
  .amb-tier-name {
    font-size: 12px;
    line-height: 1.15;
  }
  .amb-tier-price { font-size: 10px; }
  .amb-bar-track { height: 12px; }
  /* Stat cards: 3-across is too cramped on a phone. Stack them and
     drop the desktop -40px overlap (no top row to tuck under here). */
  .amb-cards-row {
    flex-direction: column;
    margin-top: 0;
    gap: 12px;
  }
  .amb-card {
    flex: none;
    width: 100%;
    padding: 18px;
    min-height: 0;
  }
  .amb-card__value { font-size: 24px; }
  .amb-banner {
    padding: 22px 18px;
  }
  .amb-banner__title { font-size: 18px; line-height: 1.2; }
  .amb-banner__sub { font-size: 14px; line-height: 1.5; }
  .amb-hero-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .amb-cta {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 12px 18px;
  }
  .amb-cta__text {
    font-size: 14px;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 380px) {
  .amb-tier-circle { width: 38px; height: 38px; }
  .amb-tier-name { font-size: 10px; }
  .amb-tier-price { display: none; } /* too tight on small phones */
}
/* END_SECTION:the-ambassador-lounge-2 */

/* START_SECTION:the-ambassador-lounge-3 (INDEX:167) */
/* =============================================
   THE AMBASSADOR LOUNGE 3 - COMMISSIONS SECTION
   ============================================= */

.tal3-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 0;
}

/* --- Page Title --- */
.tal3-page-title {
  /* Reset the browser-default h2 margin (0.83em ≈ 43px at 52px font).
     Section spacing is handled by .tal3-section padding + flex gap. */
  margin: 0;
  align-self: stretch;
  text-align: center;
  color: black;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 56px;
  word-wrap: break-word;
}

/* --- Top Row (Breakdown card + Right panel) --- */
.tal3-top-row {
  align-self: stretch;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

/* --- Commission Breakdown Card --- */
.tal3-breakdown-card {
  flex: 1 1 560px;
  background: white;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.10), 0px 4px 6px rgba(0, 0, 0, 0.10);
  border-radius: 20px;
  border-left: 4px solid #FFD201;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.tal3-breakdown-card__title {
  color: #111827;
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 32px;
}

/* Commission tiles row */
.tal3-commission-tiles {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.tal3-tile {
  flex: 1 1 180px;
  padding: 24px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tal3-tile--yellow {
  background: linear-gradient(90deg, #FFD201 0%, #FDE047 100%);
}

.tal3-tile--red {
  background: linear-gradient(90deg, #D70000 0%, #DC2626 100%);
}

.tal3-tile__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.tal3-tile__label {
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 28px;
}

.tal3-tile--yellow .tal3-tile__label {
  color: #111827;
}

.tal3-tile--red .tal3-tile__label {
  color: white;
}

.tal3-tile__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}

.tal3-tile__icon--dark {
  filter: brightness(0);
}

.tal3-tile__icon--light {
  filter: brightness(0) invert(1);
}

.tal3-tile__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tal3-tile__amount {
  font-size: 30px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

.tal3-tile--yellow .tal3-tile__amount {
  color: #111827;
}

.tal3-tile--red .tal3-tile__amount {
  color: white;
}

.tal3-tile__rate {
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  opacity: 0.80;
}

.tal3-tile--yellow .tal3-tile__rate {
  color: #111827;
}

.tal3-tile--red .tal3-tile__rate {
  color: white;
  font-weight: 500;
}

/* Total commission dark bar */
.tal3-total-bar {
  padding: 24px;
  background: #111827;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tal3-total-bar__label {
  text-align: center;
  color: #FFD201;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  width: 100%;
}

.tal3-total-bar__amount {
  text-align: center;
  color: white;
  font-size: 36px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  width: 100%;
}

.tal3-total-bar__change {
  text-align: center;
  color: #FFD201;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  width: 100%;
}

/* --- Right panel: image + insights --- */
.tal3-right-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  flex: 0 0 390px;
  max-width: 390px;
}

.tal3-feature-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  object-fit: cover;
  display: block;
}

.tal3-insights {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tal3-insights__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tal3-insights__title {
  color: black;
  font-size: 20px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 28px;
}

.tal3-insights__arrow-btn {
  width: 50px;
  height: 50px;
  background: rgba(240, 240, 240, 0.33);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tal3-insights__arrow-btn svg {
  width: 20px;
  height: 20px;
}

.tal3-insights__rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tal3-insights__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tal3-insights__row-label {
  color: black;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 24px;
}

.tal3-insights__row-value {
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 24px;
}

.tal3-insights__row-value--red {
  color: #D70000;
}

.tal3-insights__row-value--yellow {
  color: #FFD201;
}

/* --- Bottom Row (Products + Customers) --- */
.tal3-bottom-row {
    align-self: stretch;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Shared panel card */
.tal3-panel-card {
  flex: 1 1 300px;
  background: white;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.10), 0px 4px 6px rgba(0, 0, 0, 0.10);
  border-radius: 20px;
  padding: 32px 52px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tal3-panel-card__title {
  color: #111827;
  font-size: 24px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 32px;
}

.tal3-panel-card__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- List Row (shared by products + customers) --- */
.tal3-list-row {
  background: #f0f0f0;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 80px;
}

.tal3-list-row__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Product icon badge */
.tal3-product-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tal3-product-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Customer avatar */
.tal3-customer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.tal3-list-row__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tal3-list-row__name {
  color: #111827;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 24px;
}

.tal3-list-row__sub {
  color: #333;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 20px;
}

.tal3-list-row__value {
  color: #D70000;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  white-space: nowrap;
  margin-left: auto;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop is a wrap-flex top row with a 560px breakdown card +
 * sidebar panel, with a 2-tile commission row inside the card.
 * On mobile collapse to single column, stack the tiles too.
 */
@media (max-width: 749px) {
  .tal3-section {
    padding: 20px 0;
    gap: 22px;
  }
  .tal3-page-title {
    font-size: 26px;
    line-height: 1.1;
  }
  .tal3-top-row { gap: 16px; }
  .tal3-breakdown-card {
    flex-basis: 100%;
    padding: 22px;
    gap: 22px;
    border-radius: 16px;
  }
  .tal3-breakdown-card__title {
    font-size: 18px;
    line-height: 1.15;
  }
  .tal3-commission-tiles {
    flex-direction: column;
    gap: 12px;
  }
  .tal3-tile {
    padding: 18px;
    gap: 12px;
    border-radius: 16px;
  }
  .tal3-tile__label { font-size: 14px; }
  .tal3-tile__amount {
    font-size: 24px;
  }
  .tal3-tile__rate { font-size: 12px; }
  .tal3-list-row__value { font-size: 14px; }
  /* Right panel has a fixed 390px basis that would overflow narrow
     phones - let it go full width and shrinkable. */
  .tal3-right-panel {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .tal3-insights { padding: 18px 0; }
  .tal3-total-bar__amount { font-size: 26px; }
  /* Panel cards: 52px side padding is far too heavy for a phone. */
  .tal3-panel-card {
    flex-basis: 100%;
    padding: 22px;
    gap: 18px;
    border-radius: 16px;
  }
  .tal3-panel-card__title {
    font-size: 18px;
    line-height: 1.15;
  }
  .tal3-bottom-row { gap: 16px; }
}

@media (max-width: 480px) {
  .tal3-page-title { font-size: 24px; }
}
/* END_SECTION:the-ambassador-lounge-3 */

/* START_SECTION:the-ambassador-lounge-4 (INDEX:168) */
/* Subsection of the Commissions area - sits directly below
     "Your Commissions" (lounge-3). NO top padding: lounge-3 already
     contributes 40px below it, which is the full subsection gap.
     40px bottom keeps the standard 80px section gap to the next
     section ("Your Ambassador Tools"). */
  .tal4-section {
    padding: 0 0 40px 0;
  }
  @media (max-width: 749px) {
    .tal4-section { padding: 0 0 20px 0; }
  }

  .tal4-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px 28px 28px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  .tal4-card__title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 22px;
    font-style: italic;
    color: #212121;
    margin-bottom: 18px;
  }

  .tal4-chart-wrap {
    background: #ddd;
    border-radius: 12px;
    padding: 22px 18px 24px;
  }

  .tal4-chart-title {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 14px;
  }

  .tal4-chart {
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tal4-chart svg {
    width: 100%;
    height: auto;
    max-height: 380px;
    display: block;
  }

  .tal4-chart__empty {
    color: #333;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    text-align: center;
    padding: 40px 20px;
  }

  @media (max-width: 749px) {
    .tal4-card { padding: 18px 14px 20px; }
    .tal4-chart-wrap { padding: 14px 8px 16px; }
    .tal4-card__title { font-size: 18px; }
    .tal4-chart-title { font-size: 14px; }
    /* The SVG scales with viewBox, so its in-chart font-size attributes
       shrink to a few px on phones. Bump axis/label text up so the
       dates and values stay legible. */
    .tal4-chart { min-height: 220px; }
    .tal4-chart svg text { font-size: 24px; }
  }
/* END_SECTION:the-ambassador-lounge-4 */

/* START_SECTION:the-ambassador-lounge-5 (INDEX:169) */
/* Middle content section - 80px between sections (40px each side). */
  .amb-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
    box-sizing: border-box;
  }

  .amb-headingg {
    /* Reset the browser-default h2 margin (0.83em ≈ 43px at 52px font).
       Section spacing is handled by .amb-section padding + flex gap. */
    margin: 0;
    text-align: center;
    color: #000;
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 56px;
    word-wrap: break-word;
  }

  .amb-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .amb-row {
    width: 100%;
    max-width: 1320px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
  }

  /* ── Left column ── */
  .amb-left {
    flex: 0 0 640px;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
  }

  /* Shared card styles */
  .amb-card2 {
    background: #212121;
    border-radius: 20px;
    outline: 2px #ffd201 solid;
    outline-offset: -2px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .amb-card2-header {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .amb-icon-circle {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .amb-icon-circle svg {
    width: 20px;
    height: 20px;
    fill: #fff;
  }

  .amb-card2-title {
    color: #FFD201;
    font-size: 24px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    line-height: 32px;
    word-wrap: break-word;
  }

  .amb-card2-inner {
    background: rgba(255, 255, 255, 0.20);
    border-radius: 16px;
    outline: 1px rgba(255, 210, 1, 0.20) solid;
    outline-offset: -1px;
    padding: 24px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  .amb-code-value {
    color: #FFD201;
    font-size: 30px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
  }

  .amb-code-label {
    color: #fff;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 24px;
    margin-top: 7px;
  }

  .amb-link-value {
    color: #FFD201;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    word-break: break-all;
    word-wrap: break-word;
  }

  .amb-link-label {
    color: #ddd;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    line-height: 24px;
    margin-top: 7px;
  }

  .amb-copy-btn {
    flex-shrink: 0;
    height: 48px;
    padding: 0 20px;
    background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
    border-radius: 16px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    white-space: nowrap;
  }

  .amb-copy-btn svg {
    width: 16px;
    height: 16px;
    fill: #fff;
    flex-shrink: 0;
  }

  /* Stats row */
  .amb-stats {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .amb-stat-card {
    flex: 1;
    padding: 20px;
    background: #212121;
    border-radius: 20px;
    outline: 1px #ffd201 solid;
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .amb-stat-value {
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
  }

  .amb-stat-value--yellow { color: #FFD201; }
  .amb-stat-value--red    { color: #D70000; }

  .amb-stat-label {
    width: 100%;
    text-align: center;
    color: #ddd;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
  }

  /* ── Right column – hero image ── */
  .amb-right {
    max-width: 640px;
    height: 706px;
    border-radius: 20px;
    outline: 4px #ffd201 solid;
    outline-offset: -4px;
    overflow: hidden;
    position: relative;
  }

  .amb-hero-imgg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .amb-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 210, 1, 0.30) 0%, rgba(215, 0, 0, 0.30) 100%);
    border-radius: 20px;
  }

  .amb-hero-caption {
    position: absolute;
    bottom: 44px;
    left: 44px;
    right: 44px;
  }

  .amb-hero-title {
    color: #fff;
    font-size: 24px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    line-height: 32px;
    word-wrap: break-word;
  }

  .amb-hero-subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #fff;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    line-height: 24px;
  }

  .amb-hero-subtitle svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: #fff;
  }

  /* ── Share button ── */
  .amb-share-btn {
    height: 42px;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 4px;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.05em;
  }

  /* ── Mobile (< 750px) ────────────────────────────────────────────
   * Desktop is a 640px-wide left column (cards) + 640x706 hero on
   * the right. On mobile stack everything; shrink the hero; collapse
   * code+copy rows so the long URL doesn't push the copy button off.
   */
  @media (max-width: 749px) {
    .amb-section { padding: 20px 16px; gap: 24px; }
    .amb-headingg {
      font-size: 26px;
      line-height: 1.1;
    }
    .amb-body { gap: 22px; }
    .amb-row {
      flex-direction: column;
      gap: 18px;
      max-width: 100%;
    }
    .amb-left {
      flex: none;
      max-width: 100%;
      gap: 18px;
    }
    .amb-card2 {
      padding: 22px;
      gap: 16px;
      border-radius: 16px;
    }
    .amb-card2-title {
      font-size: 18px;
      line-height: 1.15;
    }
    /* Code + copy row stacks instead of side-by-side, keeping the
     * full URL on its own line and the copy button as a wide tap
     * target below. */
    .amb-card2-inner {
      flex-direction: column;
      align-items: stretch;
      padding: 18px;
      gap: 14px;
    }
    .amb-code-value { font-size: 18px; }
    .amb-link-value { font-size: 12px; }
    .amb-code-label, .amb-link-label { font-size: 12px; }
    .amb-copy-btn {
      align-self: stretch;
      justify-content: center;
      height: 44px;
    }
    .amb-stats {
      gap: 10px;
    }
    .amb-stat-card { padding: 14px 8px; }
    .amb-stat-value { font-size: 18px; }
    .amb-stat-label { font-size: 12px; }
    .amb-right {
      max-width: 100%;
      height: 360px;
    }
    .amb-hero-caption {
      bottom: 24px;
      left: 20px;
      right: 20px;
    }
    .amb-hero-title {
      font-size: 18px;
      line-height: 1.2;
    }
    .amb-hero-subtitle { font-size: 12px; }
    .amb-share-btn {
      align-self: stretch;
      width: 100%;
      height: 48px;
      font-size: 14px;
    }
  }

  @media (max-width: 480px) {
    .amb-headingg { font-size: 24px; }
    .amb-stats { flex-wrap: wrap; }
    .amb-stat-card { flex: 1 1 30%; }
    .amb-right { height: 280px; }
  }
/* END_SECTION:the-ambassador-lounge-5 */

/* START_SECTION:the-ambassador-lounge-6 (INDEX:170) */
/* Middle content section - 80px between sections (40px each side).
   * NOTE: tal6 sits directly ABOVE tal7, whose margin-bottom of 40px is
   * collapsed against tal6's margin-top (sibling-sibling margin
   * collapse). To preserve the 80px gap below tal6, tal6 compensates
   * by adding the full 80px to its own padding-bottom. Padding-top
   * stays 40px so the previous neighbour pair still composes to 80px. */
  .tal6-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 40px 20px 80px;
    box-sizing: border-box;
  }

  .tal6-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .tal6-title {
    align-self: stretch;
    text-align: center;
    color: black;
    font-size: 52px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 46px;
    word-wrap: break-word;
  }

  .tal6-subtitle {
    align-self: stretch;
    text-align: center;
    color: black;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
  }

  .tal6-body {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .tal6-cards-row {
    align-self: stretch;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }

  .tal6-card {
    height: 361px;
    overflow: hidden;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    flex-grow: 1;
}

  .tal6-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    background: linear-gradient(270deg, rgba(248, 190, 0, 0.70) 0%, rgba(215, 2, 1, 0.70) 100%);
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    justify-content: flex-start;
    transform: translateY(100%);
    transition: all 0.35s ease;
    opacity: 0;
  }

  .tal6-card:hover .tal6-card-content {
    transform: translateY(0);
    opacity: 1 !important;
  }

  .tal6-card-title {
    color: white;
    font-size: 24px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    line-height: 1em;
  }

  .tal6-card-desc {
    color: #fff;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    flex: 1 1 0;
    line-height: 1.4em;
}

  .tal6-btn-wrap {
    display: flex;
    justify-content: center;
  }

  .tal6-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    min-width: 255px;
    height: 42px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 4px;
    text-decoration: none;
    border: none;
    cursor: pointer;
  }

  .tal6-btn-text {
    color: white;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    word-wrap: break-word;
    white-space: nowrap;
  }

  /* ── Mobile (< 750px) ────────────────────────────────────────────
   * Desktop is a 5-card row of 361px-tall hover-reveal cards. On
   * mobile the row crushes each card to ~70px wide. Switch to a
   * scroll-snap horizontal scroller so cards keep their natural
   * size, AND make the hover-reveal-on-tap behaviour by showing
   * the title overlay always (mobile users can't hover).
   */
  @media (max-width: 749px) {
    .tal6-section { padding: 20px 16px; gap: 22px; }
    .tal6-title {
      font-size: 26px;
      line-height: 1.1;
    }
    .tal6-subtitle {
      font-size: 14px;
      line-height: 1.45;
    }
    .tal6-body { gap: 18px; }
    /* Horizontal scroll for cards, with snap so each card lands
     * neatly when user swipes. */
    .tal6-cards-row {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      gap: 12px;
      justify-content: flex-start;
      padding-bottom: 8px;
    }
    .tal6-card {
      flex: 0 0 220px;
      height: 280px;
      scroll-snap-align: start;
    }
    /* Always show overlay on mobile (no hover capability) */
    .tal6-card-content {
      transform: translateY(0);
      opacity: 1;
      min-height: auto;
      padding: 12px;
    }
    .tal6-card-title { font-size: 18px; }
    .tal6-card-desc { font-size: 12px; line-height: 1.35; }
    .tal6-btn {
      align-self: stretch;
      width: 100%;
      min-width: 0;
      height: 48px;
    }
    .tal6-btn-text {
      font-size: 14px;
      white-space: normal;
    }
  }

  @media (max-width: 480px) {
    .tal6-title { font-size: 24px; }
    .tal6-card { flex: 0 0 180px; height: 240px; }
  }
/* END_SECTION:the-ambassador-lounge-6 */

/* START_SECTION:the-ambassador-lounge-7 (INDEX:171) */
/* Card-style section. 40px margin top+bottom = 80px gap to its
 * padding-based neighbours (no collapse - neighbours use padding).
 * 65px is the card's own internal content padding. */
.tal7-section {
    background: var(--black, #212121);
    border-radius: 20px;
    padding: 65px;
    font-family: inherit;
    margin-top: 40px;
    margin-bottom: 40px;
}

.tal7-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* Heading */
.tal7-heading {
  color: #fff;
  font-family: 'Racing Sans One', sans-serif;
  font-size: 52px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1;
  text-align: center;
  margin: 0;
}

/* Slider wrapper - holds arrows + swiper */
.tal7-slider-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.tal7-swiper {
  width: 100%;
  overflow: hidden;
}

/* Cards */
.tal7-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
  aspect-ratio: 209 / 297;
  background: #fff;
}

.tal7-card__image-wrap {
  width: 100%;
  height: 100%;
  display: block;
}

.tal7-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

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

/* Non-active slides */
.swiper-slide:not(.swiper-slide-active) .tal7-card {
  opacity: 0.8;
}

.swiper-slide.swiper-slide-active .tal7-card {
  opacity: 1;
  filter: none;
}

/* Hover content overlay */
.tal7-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 60%);
}

.tal7-card:hover .tal7-card__content {
  opacity: 1;
}

.tal7-card__title {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.tal7-card__btn {
  display: inline-block;
  padding: 10px 18px;
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
  border-radius: 4px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

/* Arrows */
.tal7-arrow {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(240, 240, 240, 0.50);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 10;
  transition: background 0.2s ease;
  position: absolute;
}

.tal7-arrow:hover {
  background: rgba(240, 240, 240, 0.75);
}

.tal7-arrow svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.tal7-arrow--prev {
  left: -30px;
}

.tal7-arrow--next {
  right: -30px;
}

/* Pagination dots */
.tal7-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.tal7-pagination .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  background: linear-gradient(270deg, rgba(248, 190, 0, 0.30) 0%, rgba(215, 2, 1, 0.30) 100%);
  border-radius: 9999px;
  opacity: 1;
  margin: 0;
}

.tal7-pagination .swiper-pagination-bullet-active {
  width: 21px;
  height: 21px;
  background: linear-gradient(270deg, #ffd201 0%, #d70000 100%);
}

/* Responsive */
@media (max-width: 1100px) {
  .tal7-section {
    padding: 40px 30px;
  }
  .tal7-heading {
    font-size: 40px;
  }
  .tal7-arrow--prev { left: -20px; }
  .tal7-arrow--next { right: -20px; }
}

@media (max-width: 749px) {
  .tal7-section {
    padding: 30px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .tal7-heading {
    font-size: 30px;
  }
  .tal7-arrow {
    width: 38px;
    height: 38px;
  }
  .tal7-arrow--prev { left: -15px; }
  .tal7-arrow--next { right: -15px; }
}

.tal7-slider-wrapper .swiper-slide {
    scale: 0.9 0.9;
    transition: all ease .3s;
}

.tal7-slider-wrapper .swiper-slide.swiper-slide-active {
    scale: 1 1;
}
/* END_SECTION:the-ambassador-lounge-7 */

/* START_SECTION:vault-2 (INDEX:175) */
/* Middle content section - 80px between sections (40px each side). */
.vault2 {
  width: 100%;
  padding: 40px 0;
}

.vault2__container {
  padding: 32px;
  display: flex;
  flex-direction: column;
  background: white;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 20px;
}

.vault2__heading {
  color: #212121;
  font-size: 30px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  word-wrap: break-word;
  margin: 0 0 40px 0;
}

/* ── Progress Bar ── */

.vault2__progress-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.vault2__progress-track {
  width: 100%;
  height: 16px;
  background: #F0F0F0;
  border-radius: 9999px;
  position: relative;
}

.vault2__progress-fill {
  height: 16px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 9999px;
  position: relative;
  min-width: 16px;
  transition: width 0.6s ease-out;
}

.vault2__progress-indicator {
  width: 16px;
  height: 16px;
  background: white;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.10), 0px 4px 6px rgba(0, 0, 0, 0.10);
  border-radius: 9999px;
  border: 4px solid #FFD201;
  box-sizing: border-box;
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
}

/* ── Tier Milestones ── */

.vault2__tiers {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

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

.vault2__tier-badge {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vault2__tier-badge img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Inline tick + lock SVGs share the badge slot. Visibility is driven
   by classes set on the parent badge from vault-api.js. Default state
   (the SSR'd HTML before JS hydrates) is "locked" - see the comment
   in the section markup. */
.vault2__tier-icon { display: none; }
.vault2__tier-badge--achieved .vault2__tier-icon--tick { display: block; }
.vault2__tier-badge--locked   .vault2__tier-icon--lock { display: block; }
.vault2__tier-badge--locked {
  /* Slightly muted so the visual difference between locked + achieved
     is obvious at a glance even before reading the icon. */
  filter: grayscale(0.35) opacity(0.8);
}

.vault2__tier-badge--silver {
  background: linear-gradient(135deg, #ddd 0%, #9CA3AF 100%);
  box-shadow:
    0px 1px 3px rgba(156, 163, 175, 0.44),
    0px 5px 5px rgba(156, 163, 175, 0.38),
    0px 11px 7px rgba(156, 163, 175, 0.23),
    0px 20px 8px rgba(156, 163, 175, 0.07),
    0px 32px 9px rgba(156, 163, 175, 0.01),
    0px -4px 4px rgba(0, 0, 0, 0.25) inset;
}

.vault2__tier-badge--gold {
  background: linear-gradient(135deg, #FFD201 0%, #FBBF24 100%);
  box-shadow:
    0px 1px 2px rgba(216, 8, 1, 0.34),
    0px 4px 4px rgba(216, 8, 1, 0.30),
    0px 9px 5px rgba(216, 8, 1, 0.18),
    0px 16px 6px rgba(216, 8, 1, 0.05),
    0px 25px 7px rgba(216, 8, 1, 0.01),
    0px -4px 4px rgba(0, 0, 0, 0.25) inset;
}

.vault2__tier-badge--platinum {
  background: #ddd;
  box-shadow:
    0px 1px 3px rgba(0, 0, 0, 0.10),
    0px 5px 5px rgba(0, 0, 0, 0.09),
    0px 12px 7px rgba(0, 0, 0, 0.05),
    0px 21px 8px rgba(0, 0, 0, 0.01),
    0px 33px 9px rgba(0, 0, 0, 0),
    0px -4px 4px rgba(0, 0, 0, 0.25) inset;
}

.vault2__tier-name {
  text-align: center;
  color: #212121;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
}

.vault2__tier-points {
  text-align: center;
  color: #333;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}

/* ── Info Cards ── */

.vault2__cards {
  display: flex;
  gap: 24px;
  margin-bottom: 30px;
}

.vault2__card {
  flex: 1;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vault2__card--maintenance {
  background: #F0F0F0;
}

/* ── Pace card: status-driven colour ──
   data-pace-status:
     "ok"   → green (default - customer is on track / ahead)
     "warn" → amber (slightly behind, but recoverable)
     "crit" → red   (real risk of demotion - needs action)
   JS that knows the customer's actual progress can flip the attribute
   value at runtime; the static "on track" copy keeps it green by default. */
.vault2__card--pace {
  background: rgba(15, 157, 88, 0.08);
  outline: 1px solid #0f9d58;
  outline-offset: -1px;
}
.vault2__card--pace[data-pace-status="warn"] {
  background: rgba(184, 134, 11, 0.10);
  outline-color: #b8860b;
}
.vault2__card--pace[data-pace-status="crit"] {
  background: rgba(215, 0, 0, 0.10);
  outline-color: #D70000;
}

.vault2__card-label {
  color: #333;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}

.vault2__card-value {
  color: #212121;
  font-size: 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
}

.vault2__pace-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vault2__pace-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.vault2__pace-label {
  color: #0f9d58;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}
.vault2__card--pace[data-pace-status="warn"] .vault2__pace-label { color: #b8860b; }
.vault2__card--pace[data-pace-status="crit"] .vault2__pace-label { color: #D70000; }

.vault2__pace-value {
  color: #0a6b3a;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
}
.vault2__card--pace[data-pace-status="warn"] .vault2__pace-value { color: #6e5400; }
.vault2__card--pace[data-pace-status="crit"] .vault2__pace-value { color: #8a1c1c; }

/* ── CTA Button ── */

.vault2__cta-wrapper {
  display: flex;
  justify-content: center;
}

.vault2__cta-button {
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 4px;
  color: white;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  word-wrap: break-word;
}

/* ── Mobile (< 750px) ────────────────────────────────────────────── */
@media (max-width: 749px) {
  .vault2 {
    padding: 20px 0;
  }
  .vault2__container {
    padding: 20px 16px;
    border-radius: 16px;
  }
  .vault2__heading {
    font-size: 24px;
    margin-bottom: 24px;
  }
  /* Tier milestones can crowd on phone widths - let them wrap if
   * there are 4+ tiers and shrink badge size for the row to fit. */
  .vault2__tiers {
    gap: 4px;
  }
  .vault2__tier-badge {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .vault2__heading {
    font-size: 22px;
  }
  .vault2__tier-badge {
    width: 32px;
    height: 32px;
  }
}
/* END_SECTION:vault-2 */

/* START_SECTION:vault-3 (INDEX:176) */
.vault3__container {
    padding-top: 40px;
    padding-bottom: 80px;
  }
  
  .vault3__inner {
    display: flex;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* History Section */
  .vault3__history {
    flex: 1;
    padding: 32px;
    width: calc(100% - 430px);
  }
  
  .vault3__history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
  }
  
  .vault3__history-title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 30px;
    color: #212121;
    margin: 0;
  }
  
  .vault3__history-view-all {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #D70000;
    text-decoration: none;
  }

  .vault3__orders {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .vault3__order-card {
    display: flex;
    align-items: center;
    background: #F0F0F0;
    padding: 16px;
    border-radius: 12px;
    gap: 16px;
  }

  .vault3__order-icon-box {
    width: 64px;
    height: 64px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }

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

  .vault3__img-icon {
    width: 24px;
    height: auto;
    object-fit: contain;
  }

  .vault3__order-extras {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: #f1f3f7;
    color: #333;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
  }

  .vault3__order-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .vault3__order-id {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    margin: 0;
    color: #212121;
  }

  .vault3__order-date {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #333;
    margin: 4px 0 0 0;
  }

  .vault3__order-total {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-align: right;
    margin: 0;
  }

  .vault3__order-points {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #D70000;
    text-align: right;
    margin: 4px 0 0 0;
  }

  .vault3__order-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 100px;
  }

  .vault3__status-badge {
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 12px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
  }

  .vault3__details-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #D70000;
    text-decoration: none;
  }

  /* Benefits Section */
  .vault3__benefits {
    width: 424px;
    padding: 32px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    color: #fff;
    background-color: #000;
    border-radius: 20px;
    overflow: hidden;
  }

  .vault3__benefits-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
  }

  .vault3__header-icon {
    width: 34px;
    height: auto;
  }

  .vault3__benefits-title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 24px;
    margin: 0;
    color: #fff;
  }

  .vault3__benefits-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
  }

  .vault3__benefit-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .vault3__check-icon {
    width: 18px;
    height: 18px;
  }

  .vault3__benefit-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
  }

  .vault3__next-tier {
    margin-top: auto;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
  }

  .vault3__next-tier-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.05em;
    margin: 0 0 8px 0;
  }

  .vault3__next-tier-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 4px 0;
    color: #fff;
  }

  .vault3__next-tier-progress {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    margin: 0 0 12px 0;
  }

  .vault3__next-tier-details {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
  }

  @media (max-width: 990px) {
    .vault3__inner {
      flex-direction: column;
    }
    .vault3__benefits {
      width: 100%;
    }
    /* The desktop calc(100% - 430px) becomes a negative width once the
       sidebar stacks below - purchase-history column was unusably narrow. */
    .vault3__history {
      width: 100%;
    }
    .vault3__order-content {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
    .vault3__order-total, .vault3__order-points {
      text-align: left;
    }
  }

  /* Mobile (≤ 749px) - purchase-history was rough on phones: the section
   * heading collided with the "View All Orders" link, long order numbers
   * like #XSHRD8210006 wrapped mid-string ("XSHRD821000" + "06" on the
   * next line), and the actions column squeezed the content. Stack the
   * header, break the order id cleanly, shrink the actions. */
  @media (max-width: 749px) {
    .vault3__history {
      padding: 22px 18px;
    }
    .vault3__history-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 18px;
    }
    .vault3__history-title {
      font-size: 18px;
      line-height: 1.15;
    }
    .vault3__history-view-all {
      font-size: 14px;
    }
    .vault3__order-card {
      padding: 12px;
      gap: 12px;
      align-items: flex-start;
    }
    .vault3__order-icon-box {
      width: 52px;
      height: 52px;
      border-radius: 12px;
    }
    .vault3__order-content {
      min-width: 0;
      flex: 1 1 auto;
    }
    .vault3__order-id {
      font-size: 14px;
      line-height: 1.25;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .vault3__order-date {
      font-size: 12px;
      overflow-wrap: anywhere;
    }
    .vault3__order-total {
      font-size: 14px;
    }
    .vault3__order-points {
      font-size: 12px;
      margin-top: 2px;
    }
    .vault3__order-actions {
      min-width: 0;
      gap: 6px;
    }
    .vault3__status-badge {
      font-size: 12px;
      padding: 3px 9px;
    }
    .vault3__details-link {
      font-size: 12px;
    }
  }
/* END_SECTION:vault-3 */

/* START_SECTION:vault-4 (INDEX:177) */
/* Card-style section. The 80px section gap lives on the
   * .the-vault-4-pad wrapper as padding (not margin on the card)
   * so it never collapses against the adjacent vault-redeem card. */
  .the-vault-4-pad {
    padding: 40px 0;
    padding-top: 80px;
  }
  @media (max-width: 749px) {
    .the-vault-4-pad { padding: 20px 0; }
  }
  .the-vault-4 {
    position: relative;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: space-between;
    padding: 32px;
    margin: 0;
  }

  .the-vault-4__content {
    width: calc(100% - 288px); /* Adjust based on image container width and gap */
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .the-vault-4__header {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .the-vault-4__header-icon {
    width: 40.5px;
    height: 36px;
  }

  .the-vault-4__header-text {
    color: white;
    font-size: 30px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    line-height: 36px;
    margin: 0;
  }

  .the-vault-4__details {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .the-vault-4__points-text {
    color: white;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    line-height: 28px;
    margin: 0;
  }

  .the-vault-4__points-count {
    color: #FFD201;
    font-weight: 700;
  }

  .the-vault-4__perks {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .the-vault-4__perk {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 4px;
    padding: 9px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .the-vault-4__perk-text {
    color: white;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-align: center;
  }

  .the-vault-4__button {
    width: fit-content;
    padding: 10px 18px;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
  }

  .the-vault-4__image-container {
    width: 256px;
    height: 256px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .the-vault-4__main-image {
    max-width: 96px;
    max-height: 98px;
  }

  /* ── Mobile (< 750px) ──────────────────────────────────────────
   * Desktop: content on left at calc(100% - 288px), image container
   * 256x256 fixed on right. On a 430px iPhone the calc subtracts
   * 288px from the available width - leaving content squeezed into
   * ~110px of room while the 256px image overflows. Stack vertically.
   */
  @media (max-width: 749px) {
    .the-vault-4 {
      flex-direction: column;
      padding: 22px;
      gap: 22px;
      margin: 0;
      border-radius: 16px;
    }
    .the-vault-4__content {
      width: 100%;
      gap: 18px;
    }
    .the-vault-4__header-text {
      font-size: 24px;
      line-height: 1.15em;
    }
    .the-vault-4__header-icon {
      width: 32px;
      height: auto;
    }
    .the-vault-4__points-text {
      font-size: 14px;
      line-height: 1.45em;
    }
    .the-vault-4__perks {
      gap: 8px;
    }
    .the-vault-4__perk {
      padding: 8px 12px;
    }
    .the-vault-4__perk-text {
      font-size: 12px;
    }
    .the-vault-4__button {
      align-self: stretch;
      width: auto;
      padding: 14px 18px;
      font-size: 14px;
      min-height: 48px;
    }
    .the-vault-4__image-container {
      align-self: center;
      width: 180px;
      height: 180px;
    }
    .the-vault-4__main-image {
      max-width: 72px;
      max-height: 74px;
    }
  }

  @media (max-width: 480px) {
    .the-vault-4__header-text { font-size: 20px; }
    .the-vault-4__image-container { width: 140px; height: 140px; }
  }
/* END_SECTION:vault-4 */

/* START_SECTION:vault-5 (INDEX:178) */
/* ========== Vault 5 Section ========== */

.vault5 {
  padding: 40px 0;
}

/* Grid Layout */
.vault5__grid {
  display: flex;
  gap: 24px;
}

/* Card Base */
.vault5__card {
  flex: 1;
  min-width: 0;
  border-radius: 20px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
}

/* Challenge Card (Left) */
.vault5__card--challenge {
  background: #fff;
  padding: 32px;
}

/* Giveaway Card (Right) */
.vault5__card--giveaway {
  background-size: cover;
  background-position: center;
  padding: 29px 32px 32px;
}

/* ---- Card Header ---- */
.vault5__card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vault5__header-icon {
  flex-shrink: 0;
  object-fit: contain;
}

.vault5__heading {
  font-family: 'Racing Sans One', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  color: #212121;
  margin: 0;
}

.vault5__heading--light {
  color: #fff;
}

/* ---- Card Body ---- */
.vault5__card-body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 40px;
}

/* Info Group (text block + preview/status) */
.vault5__info-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Text Block */
.vault5__text-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vault5__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: #212121;
  margin: 0;
}

.vault5__title--light {
  color: #fff;
}

.vault5__desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #333;
  margin: 0;
}

/* ---- Reward Preview Box (Challenge Card) ---- */
.vault5__preview {
  background: #F0F0F0;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vault5__preview-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.vault5__preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.vault5__preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vault5__preview-item-icon {
  flex-shrink: 0;
  object-fit: contain;
}

.vault5__preview-item-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #000;
}

/* ---- Benefits List (Giveaway Card) ---- */
.vault5__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vault5__benefit {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vault5__benefit-icon {
  flex-shrink: 0;
  object-fit: contain;
}

.vault5__benefit-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
}

/* ---- Status Advantage Box (Giveaway Card) ---- */
.vault5__status {
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 4px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vault5__status-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.vault5__tiers {
  display: flex;
  gap: 8px;
}

.vault5__tier {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 4px;
}

.vault5__tier--active {
  background: rgba(255, 210, 1, 0.30);
}

.vault5__tier-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.vault5__tier-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  text-align: center;
}

/* ---- CTA Button ---- */
.vault5__cta-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 4px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* Actions Row (Giveaway Card) */
.vault5__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ---- Responsive ---- */
@media screen and (max-width: 990px) {
  .vault5__grid {
    flex-direction: column;
  }

  .vault5__preview-grid {
    grid-template-columns: 1fr;
  }

  .vault5__actions {
    flex-wrap: wrap;
  }

  .vault5__cta-btn {
    font-size: 16px;
  }
}

@media (max-width: 749px) {
  .vault5 { padding: 20px 0; }
  .vault5__grid { gap: 16px; }
  .vault5__card--challenge,
  .vault5__card--giveaway {
    padding: 22px;
    border-radius: 16px;
  }
  .vault5__heading {
    font-size: 18px;
    line-height: 1.2;
  }
  .vault5__card-body {
    margin-top: 22px;
    gap: 22px;
  }
  .vault5__title {
    font-size: 18px;
    line-height: 1.2;
  }
  .vault5__desc { font-size: 14px; line-height: 1.5; }
  .vault5__preview { padding: 16px; }
  .vault5__preview-item-text { font-size: 12px; }
  .vault5__benefit-text { font-size: 14px; }
  .vault5__status { padding: 14px; }
}
/* END_SECTION:vault-5 */

/* START_SECTION:vault-6 (INDEX:179) */
.vault6-section {
  padding: 40px 0;
}

.vault6-section .page-width {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Header row */
.vault6-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vault6-heading {
  color: #212121;
  font-size: 30px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 36px;
  margin: 0;
}

.vault6-view-all {
  color: #D70000;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.vault6-view-all:hover {
  text-decoration: underline;
}

/* Cards row */
.vault6-cards {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* Individual card */
.vault6-card {
  flex: 1;
  min-height: 152px;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Icon circle */
.vault6-card__icon-wrap {
  width: 48px;
  height: 48px;
  background: #D70000;
  border-radius: 9999px;
  box-shadow:
    0px 1px 2px rgba(215, 0, 0, 0.29),
    0px 4px 4px rgba(215, 0, 0, 0.26),
    0px 9px 5px rgba(215, 0, 0, 0.15),
    0px 16px 6px rgba(215, 0, 0, 0.04),
    0px 25px 7px rgba(215, 0, 0, 0.01),
    inset 0px -4px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 12px;
  overflow: hidden;
}

.vault6-card__icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Card title */
.vault6-card__title {
  color: #212121;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 24px;
}

/* Card description */
.vault6-card__description {
  color: #333;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  margin: 0;
  line-height: 20px;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop renders the cards row as N cards × flex:1, so they share the
 * row equally. With 4+ cards on a 430px iPhone they get ~85px each
 * which can't fit "16px title + 14px desc + 48px icon". Switch to a
 * 2-column grid that lets each card breathe.
 */
@media (max-width: 749px) {
  .vault6-section { padding: 20px 0; }
  .vault6-section .page-width { gap: 22px; }
  .vault6-header {
    align-items: flex-start;
    gap: 12px;
  }
  .vault6-heading {
    font-size: 24px;
    line-height: 1.15em;
  }
  .vault6-view-all {
    font-size: 14px;
  }
  .vault6-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .vault6-card {
    min-height: 0;
    padding: 16px;
  }
  .vault6-card__icon-wrap {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }
  .vault6-card__icon-img { width: 20px; height: 20px; }
  .vault6-card__title { font-size: 14px; line-height: 20px; }
  .vault6-card__description { font-size: 12px; line-height: 18px; }
}

@media (max-width: 380px) {
  .vault6-cards {
    grid-template-columns: 1fr;
  }
}
/* END_SECTION:vault-6 */

/* START_SECTION:vault-7 (INDEX:180) */
.vault7__container {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .vault7__inner {
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* ─── Left Panel ─── */
  .vault7__left {
    flex: 1;
    background: #212121;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center right;
}

  .vault7__left-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    box-sizing: border-box;
  }

  .vault7__left-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
  }

  .vault7__title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    margin: 0;
    max-width: 510px;
  }

  .vault7__points-badge {
    background: #FFD201;
    color: #212121;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ─── Subscription Cards ─── */
  .vault7__subscriptions {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* the [hidden] attribute is display:none by default, but a more
     specific display rule (like display:flex above) wins. force it
     so JS toggling .hidden actually hides the element. */
  .vault7 [hidden] { display: none !important; }

  .vault7__sub-card {
    display: flex;
    align-items: center;
    /* Dark semi-opaque so card content stays readable regardless of the
       brand yellow/orange gradient bleeding through from the parent
       Vault section background. Previously rgba(255,255,255,0.30)
       washed out into the gradient and dropped contrast on every
       text colour. */
    background: rgba(0, 0, 0, 0.45);
    border-radius: 12px;
    padding: 20px;
    gap: 16px;
  }

  .vault7__sub-icon-box {
    width: 64px;
    height: 64px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }

  .vault7__sub-icon {
    width: 24px;
    height: auto;
    object-fit: contain;
  }

  .vault7__sub-info {
    flex: 1;
    min-width: 0;
  }

  .vault7__sub-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    margin: 0;
  }

  .vault7__sub-frequency {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    margin: 4px 0 0 0;
  }

  .vault7__sub-multiplier {
    text-align: center;
    min-width: 300px;
  }

  .vault7__sub-mult-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    margin: 0;
    text-align: center;
  }

  .vault7__sub-mult-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #fff;
    margin: 4px 0 0 0;
    text-align: center;
  }

  .vault7__sub-next {
    min-width: 110px;
    text-align: right;
  }

  /* amount is the bold one, "Next:" is just a label */
  .vault7__sub-next-date {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    text-align: right;
  }

  .vault7__sub-next-price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
    margin: 4px 0 0 0;
    text-align: right;
  }

  /* ─── Subscription loading line (spinner + italic + pulsing dots) ─── */
  /* min-height matches roughly where the cards will be so the spinner centers in the same area */
  .vault7__subs-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    min-height: 280px;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-style: italic;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.02em;
  }
  .vault7__subs-loading__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #FFD201;
    border-right-color: #D70000;
    border-radius: 50%;
    animation: vault7-spin 0.9s linear infinite;
    flex-shrink: 0;
  }
  @keyframes vault7-spin {
    to { transform: rotate(360deg); }
  }
  .vault7__subs-loading__dots {
    display: inline-flex;
    gap: 2px;
    font-style: normal;
    letter-spacing: -2px;
  }
  .vault7__subs-loading__dots > span {
    animation: vault7-dot 1.4s ease-in-out infinite;
  }
  .vault7__subs-loading__dots > span:nth-child(2) { animation-delay: 0.18s; }
  .vault7__subs-loading__dots > span:nth-child(3) { animation-delay: 0.36s; }
  @keyframes vault7-dot {
    0%, 80%, 100% { opacity: 0.25; }
    40%           { opacity: 1; }
  }

  /* ─── Subscription empty-state copy ─── */
  /* Bumped from 14px to 17px so the value prop ("Start one to earn 2×")
     reads as a real selling line, not a footnote. line-height generous
     so the strong-tagged second sentence breathes. */
  .vault7__subs-empty {
    color: #cbd2db;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    line-height: 1.55;
    padding: 24px 0 8px;
    margin: 0;
    max-width: 540px;
  }
  .vault7__subs-empty strong {
    color: #fff;
  }

  /* ─── CTA Button ─── */
  /* margin-top: auto pins this to the bottom of .vault7__left-content
     (which is a flex column), filling the empty space below the empty
     state on customers without subscriptions. Full-width + bumped font
     for a stronger primary action. */
  .vault7__cta {
    display: block;
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 18px 24px;
    border-radius: 8px;
    text-align: center;
    letter-spacing: 0.5px;
    margin-top: auto;
    box-shadow: 0 6px 20px rgba(215, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .vault7__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(215, 0, 0, 0.35);
  }

  /* ─── Right Panel ─── */
  .vault7__right {
    width: 424px;
    flex-shrink: 0;
    background-color: #212121;
    background-size: cover;
    background-position: center;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-radius: 0 20px 20px 0;
  }

  .vault7__earn-title {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    margin: 0;
  }

  /* ─── Earn Way Rows ─── */
  .vault7__earn-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
  }

  .vault7__earn-row {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 12px;
    gap: 10px;
  }

  .vault7__earn-icon-wrap {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .vault7__earn-icon {
    width: 18px;
    height: auto;
    object-fit: contain;
  }

  .vault7__earn-label {
    flex: 1;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
  }

  .vault7__earn-points {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #FFD201;
    white-space: nowrap;
  }

  .vault7__see-all {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #FFD201;
    text-decoration: none;
    text-align: center;
    display: block;
  }

  /* ─── Responsive ─── */
  @media (max-width: 990px) {
    .vault7__inner {
      flex-direction: column;
    }

    .vault7__right {
      width: 100%;
      border-radius: 0 0 20px 20px;
    }

    .vault7__left {
      border-radius: 20px 20px 0 0;
    }

    /* mobile scrim, the yellow gradient was killing text contrast underneath */
    .vault7__left-content {
      padding: 32px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      height: 100%;
      box-sizing: border-box;
      background: #000000cc;
    }

    /* mobile - 2 row grid, hide the inner multiplier block coz the section already shows the 2x badge */
    .vault7__sub-card {
      display: grid;
      grid-template-columns: 60px 1fr;
      grid-template-areas:
        "img    info"
        "next   next";
      gap: 12px 14px;
      padding: 14px;
      align-items: center;
    }
    .vault7__sub-card .vault7__sub-icon-box {
      grid-area: img;
      width: 60px;
      height: 60px;
    }
    .vault7__sub-info {
      grid-area: info;
      min-width: 0;
    }
    .vault7__sub-multiplier {
      display: none; /* redundant with section-level 2× badge */
    }
    .vault7__sub-next {
      grid-area: next;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.10);
      text-align: left;
      min-width: 0;
    }
    .vault7__sub-next-date,
    .vault7__sub-next-price {
      text-align: left;
      margin: 0;
    }

    .vault7__cta {
      width: 100%;
      box-sizing: border-box;
    }
  }

  @media (max-width: 480px) {
    .vault7__title {
      font-size: 22px;
    }

    .vault7__cta {
      font-size: 16px;
    }
  }
/* END_SECTION:vault-7 */

/* START_SECTION:vault-8 (INDEX:181) */
.v8-section {
    padding: 40px 0;
  }

  .v8-wrapper {
    background: #fff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 32px;
  }

  .v8-heading {
    color: #212121;
    font-size: 30px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 40px 0;
  }

  .v8-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .v8-card {
    display: block;
    text-decoration: none;
    background: transparent;
    border-radius: 12px;
    outline: 2px solid #ddd;
    outline-offset: -2px;
    padding: 23px 22px 22px;
  }

  .v8-card--vip {
    background: rgba(255, 210, 1, 0.10);
    outline-color: #FFD201;
  }

  .v8-card__icon {
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .v8-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .v8-card__label {
    color: #212121;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
  }

  .v8-card__subtitle {
    color: #333;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    line-height: 1.33;
    margin: 4px 0 0 0;
  }

  @media screen and (max-width: 1024px) {
    .v8-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 480px) {
    .v8-grid {
      grid-template-columns: 1fr;
    }

    .v8-heading {
      font-size: 24px;
    }
  }

/* Mobile (≤ 749px) - added by mobile-spacing audit so this section
 * follows the project's standard 20px-vertical mobile rhythm. */
@media (max-width: 749px) {
  .v8-section {
    padding: 20px 0;
  }
}
/* END_SECTION:vault-8 */

/* START_SECTION:vault-9 (INDEX:182) */
/* Section rhythm - vault-9 is reused and is always the LAST section
 * on its pages. Padding lives on the .vault9-section-pad parent
 * (40px top / 80px bottom - footer below gives 0) instead of margin
 * on the card, so it never collapses against the prior section. */
.vault9-section-pad {
  padding: 40px 0 80px;
}
@media (max-width: 749px) {
  .vault9-section-pad { padding: 20px 0 40px; }
}
.vault9-wrapper {
  padding: 90px 48px;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  margin: 0;
}

.vault9-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 100%);
  z-index: 1;
}

.vault9-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.vault9-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.vault9-heading {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 52px;
  font-family: 'Racing Sans One', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  word-wrap: break-word;
  margin: 0;
}

.vault9-subheading {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 1.4;
  word-wrap: break-word;
  margin: 0;
}

.vault9-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.vault9-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
  border-radius: 4px;
  color: #fff;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  word-wrap: break-word;
  white-space: nowrap;
  cursor: pointer;
  border: none;
}

.vault9-btn:hover {
  color: #fff;
  text-decoration: none;
}

/* ── Mobile (< 750px) ──────────────────────────────────────────────
 * Desktop CTA section: 90px / 48px padding around a 52px heading +
 * 20px subheading + side-by-side buttons. On a 430px iPhone the
 * 52px heading wraps awkwardly, the 90px vertical padding wastes
 * the viewport, and inline buttons crowd each other.
 */
@media (max-width: 749px) {
  .vault9-wrapper {
    padding: 36px 18px;
    margin: 0;
    border-radius: 16px;
  }
  .vault9-content { gap: 22px; }
  .vault9-text-group { gap: 10px; }
  .vault9-heading {
    font-size: 32px;
    line-height: 1.1em;
  }
  .vault9-subheading {
    font-size: 14px;
    line-height: 1.45em;
  }
  /* Stack buttons full-width so each is a chunky 48px tap target */
  .vault9-buttons {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  .vault9-btn {
    width: 100%;
    padding: 14px 18px;
    font-size: 14px;
    min-height: 48px;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .vault9-heading { font-size: 26px; }
}
/* END_SECTION:vault-9 */

/* START_SECTION:vault-redeem (INDEX:183) */
/* Card-style section. 40px margin top+bottom = 80px gap to its
   * padding-based neighbours (margin only collapses against margin;
   * neighbours here use padding so no collapse). 32px is the card's
   * own internal content padding. */
  .the-vault-redeem {
    position: relative;
    background: #212121;
    border-radius: 20px;
    padding: 32px;
    margin-top: 40px;
    margin-bottom: 40px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    color: #fff;
  }

  .the-vault-redeem__header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    flex-wrap: wrap;
  }

  .the-vault-redeem__header-icon {
    width: 40px;
    height: 36px;
    flex: 0 0 auto;
  }

  .the-vault-redeem__header-text {
    flex: 1 1 320px;
    min-width: 0;
  }

  .the-vault-redeem__heading {
    color: #fff;
    font-size: 30px;
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    line-height: 36px;
    margin: 0 0 6px;
    letter-spacing: 0.5px;
  }

  .the-vault-redeem__subheading {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    line-height: 22px;
    margin: 0;
  }

  .the-vault-redeem__balance {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: rgba(255, 210, 1, 0.08);
    border: 1px solid rgba(255, 210, 1, 0.25);
    border-radius: 9999px;
    padding: 8px 16px;
    font-family: 'Montserrat', sans-serif;
    flex: 0 0 auto;
  }

  .the-vault-redeem__balance-label {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
  }

  .the-vault-redeem__balance-value {
    color: #FFD201;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }

  .the-vault-redeem__balance-suffix {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    font-weight: 600;
  }

  .the-vault-redeem__signed-out {
    text-align: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
  }

  .the-vault-redeem__signed-out p {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
  }

  .the-vault-redeem__signed-out-cta {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #FFD201 0%, #FFB800 100%);
    color: #212121;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .the-vault-redeem__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .the-vault-redeem__card {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  }

  .the-vault-redeem__card--unlocked {
    border-color: rgba(255, 210, 1, 0.45);
    background: rgba(255, 210, 1, 0.06);
  }

  .the-vault-redeem__card--unlocked:hover {
    transform: translateY(-2px);
    border-color: #FFD201;
    background: rgba(255, 210, 1, 0.1);
  }

  .the-vault-redeem__card--locked {
    opacity: 0.55;
  }

  .the-vault-redeem__card-icon {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
  }

  .the-vault-redeem__card--unlocked .the-vault-redeem__card-icon {
    background: #FFD201;
    color: #212121;
  }

  .the-vault-redeem__card-icon-tick { display: none; }
  .the-vault-redeem__card-icon-lock { display: block; }
  .the-vault-redeem__card--unlocked .the-vault-redeem__card-icon-tick { display: block; }
  .the-vault-redeem__card--unlocked .the-vault-redeem__card-icon-lock { display: none; }

  .the-vault-redeem__card-points {
    color: #FFD201;
    font-family: 'Racing Sans One', sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 6px;
    letter-spacing: 0.5px;
  }

  .the-vault-redeem__card-value {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
  }

  .the-vault-redeem__card-meta {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 16px;
  }

  .the-vault-redeem__card-cta {
    margin-top: auto;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 9999px;
    background: linear-gradient(90deg, #FFD201 0%, #FFB800 100%);
    color: #212121;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
  }

  .the-vault-redeem__card-cta:hover:not(:disabled) {
    filter: brightness(1.05);
    transform: translateY(-1px);
  }

  .the-vault-redeem__card-cta:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
  }

  .the-vault-redeem__fineprint {
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    line-height: 1.55;
    max-width: 749px;
  }

  .the-vault-redeem__fineprint p { margin: 0; }

  /* ── Modal ─────────────────────────────────────────────────── */
  .the-vault-redeem-modal {
    position: fixed;
    inset: 0;
    background: rgba(11, 15, 26, 0.72);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
  }

  .the-vault-redeem-modal.is-open { display: flex; }

  .the-vault-redeem-modal__card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
    animation: the-vault-redeem-pop 0.18s ease-out;
    color: #212121;
  }

  @keyframes the-vault-redeem-pop {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }

  .the-vault-redeem-modal__close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #333;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
  }

  .the-vault-redeem-modal__close:hover {
    color: #212121;
    background: rgba(0, 0, 0, 0.05);
  }

  .the-vault-redeem-modal__heading {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 26px;
    font-weight: 400;
    margin: 0 0 12px;
    letter-spacing: 0.5px;
    color: #212121;
  }

  .the-vault-redeem-modal__body {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #1f2533;
    margin: 0 0 22px;
  }

  .the-vault-redeem-modal__error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 10px 14px;
    color: #991b1b;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 18px;
  }

  .the-vault-redeem-modal__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .the-vault-redeem-modal__btn {
    flex: 1 1 140px;
    padding: 12px 18px;
    border-radius: 9999px;
    border: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: filter 0.15s, background 0.15s, color 0.15s;
  }

  .the-vault-redeem-modal__btn--primary {
    background: linear-gradient(90deg, #FFD201 0%, #D70000 100%);
    color: #fff;
  }

  .the-vault-redeem-modal__btn--primary:hover:not(:disabled) { filter: brightness(1.05); }
  .the-vault-redeem-modal__btn--primary:disabled { opacity: 0.6; cursor: progress; }

  .the-vault-redeem-modal__btn--secondary {
    background: #f1f5f9;
    color: #212121;
  }

  .the-vault-redeem-modal__btn--secondary:hover { background: #e2e8f0; }

  /* Success state */
  .the-vault-redeem-modal__success-mark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFD201 0%, #FFB800 100%);
    color: #212121;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
    margin: 0 auto 14px;
  }

  .the-vault-redeem-modal__code {
    background: #212121;
    color: #FFD201;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .the-vault-redeem-modal__code code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 15px;
    letter-spacing: 0.06em;
    word-break: break-all;
    flex: 1 1 0;
    min-width: 0;
  }

  .the-vault-redeem-modal__copy {
    background: #FFD201;
    color: #212121;
    border: 0;
    border-radius: 8px;
    padding: 7px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    flex: 0 0 auto;
    transition: filter 0.15s;
  }

  .the-vault-redeem-modal__copy:hover { filter: brightness(1.05); }
  .the-vault-redeem-modal__copy--copied { background: #21682d; color: #fff; }

  /* ── Responsive ──────────────────────────────────────────── */
  @media screen and (max-width: 1024px) {
    .the-vault-redeem__grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media screen and (max-width: 749px) {
    .the-vault-redeem { padding: 20px 0; margin-top: 20px; margin-bottom: 20px; }
    .the-vault-redeem__heading { font-size: 24px; line-height: 30px; }
    .the-vault-redeem__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .the-vault-redeem__card { padding: 18px 16px 16px; }
    .the-vault-redeem__card-points { font-size: 18px; }
    .the-vault-redeem__card-value { font-size: 18px; }
    .the-vault-redeem-modal__card { padding: 28px 22px 22px; }
    .the-vault-redeem-modal__heading { font-size: 18px; }
  }

  @media screen and (max-width: 480px) {
    .the-vault-redeem__grid { grid-template-columns: 1fr; }
    .the-vault-redeem__balance { width: 100%; justify-content: center; }
  }
/* END_SECTION:vault-redeem */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:quick-buy-sheet-trigger (INDEX:226) */
.quick-buy-sheet-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: transparent;
    color: rgb(var(--color-foreground, 33 33 33));
    border: 1.5px solid rgba(var(--color-foreground, 33 33 33), 0.25);
    border-radius: 6px;
    cursor: pointer;
  }
  .quick-buy-sheet-trigger[aria-disabled="true"] {
    opacity: 0.6;
    cursor: default;
  }
/* END_SNIPPET:quick-buy-sheet-trigger */

/* START_SNIPPET:ssa-button-polish (INDEX:232) */
/* ── 1. Idle state (transition + base shadow + text shadow) ──────── */
.amb-apply__state-cta,
.amb-apply__submit,
.amb-cta,
.amb-share-btn,
.amb-state__btn--primary,
.ap1-btn-primary,
.ap6-cta-btn,
.bsn__btn,
.bsn .quick-add__submit.bsn__btn,
.campus-apply__state-cta,
.campus-apply__submit,
/* Shopify Dawn "Choose options" / quick-add button on product cards.
   Site-wide gradient applied in `theme/assets/hz_custom.css`. */
.card-wrapper.product-card-wrapper > .card .card__content .quick-add button,
.get_in_touch_4__cta,
.giveaway_sec_1 .giveaway_sec_1_btn,
.giveaway_sec_1 .gw-modal__enter-btn,
.giveaway_sec_3 .giveaway_sec_3_btn,
.giveaway_sec_4 .giveaway_sec_4_btn,
.hs2-btn,
.hs2-card__btn,
.hs5-quick-buy,
.hs6-btn,
.hs8__cta,
.hs10-btn,
.hs12__cta,
.hs13-quick-buy,
.hs14_btn,
.hs16__cta > a,
.login-hub-button,
.lp8-button,
.mc_sec_3 .mc_sec_3_btn,
.mc3c__btn,
.nro-bundle__card-add,
.nro-bundle__cart-submit,
.nro-dup-modal__btn--primary,
.nro-final-cta__btn,
.nro-intro__cta--primary,
.nro-landing--intro-only .nro-intro__cta--primary,
.nro-postco-banner__btn--primary,
.our_story_sec_5_btn,
.partner-collab-6__button,
.pc_sec_3 .pc_sec_3_btn,
.pn-btn,
.pn-gate__btn--primary,
.pn-modal__submit,
.pnl__btn--primary,
/* PDP Add to Cart + Shop Pay buttons (Dawn full-width primary). */
.product-form__submit.button.button--full-width.button--secondary,
button.shopify-payment-button__button.shopify-payment-button__button--unbranded,
.product-reviews__submit,
.share-button,
.sp1__card,
.sp4-btn,
.sp5-cta-btn,
.sp6__cta-btn,
.sp7-cta,
.sp10-cta-button,
.ss-cc__btn--primary,
.ss404__cta--primary,
.ssa-auth__card button,
.ssa-auth__card button[type='submit'],
.ssa-auth__card button:not([type]),
.ssa-btn-primary,
.ssa-guest button,
.ssa-notify-modal__submit,
.ssa-scroll-coupon__cta,
.ssa-subs-card__btn--primary,
.ssa-subs-empty__cta,
.ssa-subs-guest__btn,
.ssa-subsave-dup__btn--primary,
.student_portal_4-sponsorship-btn,
.tal6-btn,
.the-vault-4__button,
.the-vault-redeem__card-cta,
.the-vault-redeem__signed-out-cta,
.the-vault-redeem-modal__btn--primary,
.vault2__cta-button,
.vault5__cta-btn,
.vault7__cta,
.vault9-btn {
  /* Idle: only declare the transition so :hover animates smoothly.
   * - Note: idle state must not be modified by the polish.
   * Each button keeps its own rest-state look (red glow, bevel,
   * text shadow, etc.) defined in its own section file. The polish
   * ONLY layers the universal lift + shadow on hover. */
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* ── 2. Hover - the lift + stronger glow ─────────────────────────── */
.amb-apply__state-cta:hover,
.amb-apply__submit:hover,
.amb-cta:hover,
.amb-share-btn:hover,
.amb-state__btn--primary:hover,
.ap1-btn-primary:hover,
.ap6-cta-btn:hover,
.bsn__btn:hover,
.bsn .quick-add__submit.bsn__btn:hover,
.campus-apply__state-cta:hover,
.campus-apply__submit:hover,
.card-wrapper.product-card-wrapper > .card .card__content .quick-add button:hover,
.get_in_touch_4__cta:hover,
.giveaway_sec_1 .giveaway_sec_1_btn:hover,
.giveaway_sec_1 .gw-modal__enter-btn:hover,
.giveaway_sec_3 .giveaway_sec_3_btn:hover,
.giveaway_sec_4 .giveaway_sec_4_btn:hover,
.hs2-btn:hover,
.hs2-card__btn:hover,
.hs5-quick-buy:hover,
.hs6-btn:hover,
.hs8__cta:hover,
.hs10-btn:hover,
.hs12__cta:hover,
.hs13-quick-buy:hover,
.hs14_btn:hover,
.hs16__cta > a:hover,
.login-hub-button:hover,
.lp8-button:hover,
.mc_sec_3 .mc_sec_3_btn:hover,
.mc3c__btn:hover,
.nro-bundle__card-add:hover,
.nro-bundle__cart-submit:hover:not(:disabled),
.nro-dup-modal__btn--primary:hover,
.nro-final-cta__btn:hover,
.nro-intro__cta--primary:hover,
.nro-landing--intro-only .nro-intro__cta--primary:hover,
.nro-postco-banner__btn--primary:hover,
.our_story_sec_5_btn:hover,
.partner-collab-6__button:hover,
.pc_sec_3 .pc_sec_3_btn:hover,
.pn-btn:hover,
.pn-gate__btn--primary:hover,
.pn-modal__submit:hover,
.pnl__btn--primary:hover,
.product-form__submit.button.button--full-width.button--secondary:hover,
button.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover,
.product-reviews__submit:hover,
.share-button:hover,
.sp1__card:hover,
.sp4-btn:hover,
.sp5-cta-btn:hover,
.sp6__cta-btn:hover,
.sp7-cta:hover,
.sp10-cta-button:hover,
.ss-cc__btn--primary:hover,
.ss404__cta--primary:hover,
.ssa-auth__card button:hover,
.ssa-auth__card button[type='submit']:hover,
.ssa-auth__card button:not([type]):hover,
.ssa-btn-primary:hover,
.ssa-guest button:hover,
.ssa-notify-modal__submit:hover,
.ssa-scroll-coupon__cta:hover,
.ssa-subs-card__btn--primary:hover,
.ssa-subs-empty__cta:hover,
.ssa-subs-guest__btn:hover,
.ssa-subsave-dup__btn--primary:hover,
.student_portal_4-sponsorship-btn:hover,
.tal6-btn:hover,
.the-vault-4__button:hover,
.the-vault-redeem__card-cta:hover,
.the-vault-redeem__signed-out-cta:hover,
.the-vault-redeem-modal__btn--primary:hover,
.vault2__cta-button:hover,
.vault5__cta-btn:hover,
.vault7__cta:hover,
.vault9-btn:hover {
  transform: translateY(-2px) !important;
  /* Hover shadow intentionally removed - the heavy red glow + inner
   * bevel was visually noisy at scale (every CTA on the page lit up
   * on rollover). The lift alone gives sufficient "I'm interactive"
   * feedback; each button's own base box-shadow (if any) remains
   * untouched.
   *
   * Don't force a text colour on hover. Each button class declares its
   * own `color` in its base state - gradient buttons set #fff in base,
   * secondary/outline buttons set their dark text colour in base. The
   * previous `color: #fff !important` here turned secondary buttons
   * (white bg + dark text, e.g. .ssa-subs-empty__cta--secondary
   * "Browse products") into invisible white-on-white on hover. If a
   * specific link-based button picks up the theme's visited/hover link
   * colour, fix it in that button's own base CSS, not here. */
}

/* ── 3. Active (pressed) - snap back to baseline ─────────────────── */
.amb-apply__state-cta:active,
.amb-apply__submit:active,
.amb-cta:active,
.amb-share-btn:active,
.amb-state__btn--primary:active,
.ap1-btn-primary:active,
.ap6-cta-btn:active,
.bsn__btn:active,
.campus-apply__state-cta:active,
.campus-apply__submit:active,
.card-wrapper.product-card-wrapper > .card .card__content .quick-add button:active,
.get_in_touch_4__cta:active,
.giveaway_sec_1 .giveaway_sec_1_btn:active,
.giveaway_sec_1 .gw-modal__enter-btn:active,
.giveaway_sec_3 .giveaway_sec_3_btn:active,
.giveaway_sec_4 .giveaway_sec_4_btn:active,
.hs2-btn:active,
.hs2-card__btn:active,
.hs5-quick-buy:active,
.hs6-btn:active,
.hs8__cta:active,
.hs10-btn:active,
.hs12__cta:active,
.hs13-quick-buy:active,
.hs14_btn:active,
.hs16__cta > a:active,
.login-hub-button:active,
.lp8-button:active,
.mc_sec_3 .mc_sec_3_btn:active,
.mc3c__btn:active,
.nro-bundle__card-add:active,
.nro-bundle__cart-submit:active,
.nro-dup-modal__btn--primary:active,
.nro-final-cta__btn:active,
.nro-intro__cta--primary:active,
.nro-landing--intro-only .nro-intro__cta--primary:active,
.nro-postco-banner__btn--primary:active,
.our_story_sec_5_btn:active,
.partner-collab-6__button:active,
.pc_sec_3 .pc_sec_3_btn:active,
.pn-btn:active,
.pn-gate__btn--primary:active,
.pn-modal__submit:active,
.pnl__btn--primary:active,
.product-form__submit.button.button--full-width.button--secondary:active,
button.shopify-payment-button__button.shopify-payment-button__button--unbranded:active,
.product-reviews__submit:active,
.share-button:active,
.sp1__card:active,
.sp4-btn:active,
.sp5-cta-btn:active,
.sp6__cta-btn:active,
.sp7-cta:active,
.sp10-cta-button:active,
.ss-cc__btn--primary:active,
.ss404__cta--primary:active,
.ssa-auth__card button:active,
.ssa-auth__card button[type='submit']:active,
.ssa-auth__card button:not([type]):active,
.ssa-btn-primary:active,
.ssa-guest button:active,
.ssa-notify-modal__submit:active,
.ssa-scroll-coupon__cta:active,
.ssa-subs-card__btn--primary:active,
.ssa-subs-empty__cta:active,
.ssa-subs-guest__btn:active,
.ssa-subsave-dup__btn--primary:active,
.student_portal_4-sponsorship-btn:active,
.tal6-btn:active,
.the-vault-4__button:active,
.the-vault-redeem__card-cta:active,
.the-vault-redeem__signed-out-cta:active,
.the-vault-redeem-modal__btn--primary:active,
.vault2__cta-button:active,
.vault5__cta-btn:active,
.vault7__cta:active,
.vault9-btn:active {
  transform: translateY(0) !important;
}

/* ── 4. Reduced-motion users get no animation ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .amb-apply__state-cta,
  .amb-apply__submit,
  .amb-cta,
  .amb-share-btn,
  .amb-state__btn--primary,
  .ap1-btn-primary,
  .ap6-cta-btn,
  .bsn__btn,
  .campus-apply__state-cta,
  .campus-apply__submit,
  .card-wrapper.product-card-wrapper > .card .card__content .quick-add button,
  .get_in_touch_4__cta,
  .giveaway_sec_1 .giveaway_sec_1_btn,
  .giveaway_sec_1 .gw-modal__enter-btn,
  .giveaway_sec_3 .giveaway_sec_3_btn,
  .giveaway_sec_4 .giveaway_sec_4_btn,
  .hs2-btn,
  .hs5-quick-buy,
  .hs6-btn,
  .hs8__cta,
  .hs10-btn,
  .hs12__cta,
  .hs13-quick-buy,
  .hs14_btn,
  .hs16__cta > a,
  .login-hub-button,
  .lp8-button,
  .mc_sec_3 .mc_sec_3_btn,
  .mc3c__btn,
  .nro-bundle__card-add,
  .nro-bundle__cart-submit,
  .nro-dup-modal__btn--primary,
  .nro-final-cta__btn,
  .nro-intro__cta--primary,
  .nro-postco-banner__btn--primary,
  .our_story_sec_5_btn,
  .partner-collab-6__button,
  .pc_sec_3 .pc_sec_3_btn,
  .pn-btn,
  .pn-gate__btn--primary,
  .pn-modal__submit,
  .pnl__btn--primary,
  .product-form__submit.button.button--full-width.button--secondary,
  button.shopify-payment-button__button.shopify-payment-button__button--unbranded,
  .product-reviews__submit,
  .share-button,
  .sp1__card,
  .sp4-btn,
  .sp5-cta-btn,
  .sp6__cta-btn,
  .sp7-cta,
  .sp10-cta-button,
  .ss-cc__btn--primary,
  .ss404__cta--primary,
  .ssa-auth__card button,
  .ssa-auth__card button[type='submit'],
  .ssa-auth__card button:not([type]),
  .ssa-btn-primary,
  .ssa-guest button,
  .ssa-notify-modal__submit,
  .ssa-scroll-coupon__cta,
  .ssa-subs-card__btn--primary,
  .ssa-subs-empty__cta,
  .ssa-subs-guest__btn,
  .ssa-subsave-dup__btn--primary,
  .student_portal_4-sponsorship-btn,
  .tal6-btn,
  .the-vault-4__button,
  .the-vault-redeem__card-cta,
  .the-vault-redeem__signed-out-cta,
  .the-vault-redeem-modal__btn--primary,
  .vault2__cta-button,
  .vault5__cta-btn,
  .vault7__cta,
  .vault9-btn {
    transition: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
 * 5. Broad pattern-based catch-all
 * ──────────────────────────────────────────────────────────────────
 * Every CTA button on the site should get
 * the polish, not just the ones manually listed above. Rather than
 * hunting every new button class as it lands, we add an attribute
 * pattern layer that picks up the common naming conventions:
 *
 *   • `[class*="-cta"]`, `[class*="__cta"]`, `[class*="--cta"]`
 *   • `[class*="-btn"]`, `[class*="__btn"]`, `[class*="--btn"]`
 *   • `[class*="-button"]`, `[class*="__button"]`, `[class*="--button"]`
 *   • Dawn's `.button--primary`
 *   • form-submit inputs/buttons
 *
 * We DELIBERATELY EXCLUDE classes that signal secondary / outline /
 * ghost / link / cancel intent - these are not the gradient CTA
 * pattern and the red glow would look wrong on them. Use the
 * `:not()` chain below to add more if any sneak through.
 *
 * Same rules apply as before:
 *   • no `color` change on hover (would break white-bg secondaries)
 *   • `.no-ssa-polish` opts out
 *   • prefers-reduced-motion disables animation
 */

/* ──────────────────────────────────────────────────────────────────
 * Catch-all (5a/b/c) - SCOPED TO BUTTON ELEMENTS ONLY
 * ──────────────────────────────────────────────────────────────────
 * Note: "Seen this happening in a lot of places, I need the
 * hover effect to be on the button only" - the previous catch-all
 * matched ANY element with `-cta` / `-btn` / `-button` in its class,
 * including container divs/sections (e.g. `.nro-final-cta` wraps
 * the whole CTA section; hovering it would lift the entire orange
 * panel). Now we prefix every pattern with `:is(a, button, input)`
 * so only proper button tags can match. Divs/sections with the
 * same class keywords are ignored. */

/* ── 5a. Idle state ─────────────────────────────────────────────── */
:is(a, button, input)[class*="-cta"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not([class*="cancel"]):not([class*="--neutral"]):not([class*="--text"]):not([class*="--icon"]),
:is(a, button, input)[class*="__cta"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not([class*="cancel"]):not([class*="--neutral"]):not([class*="--text"]):not([class*="--icon"]),
:is(a, button, input)[class*="--cta"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not([class*="cancel"]):not([class*="--neutral"]):not([class*="--text"]):not([class*="--icon"]),
:is(a, button, input)[class*="-btn-primary"]:not(.no-ssa-polish),
:is(a, button, input)[class*="__btn--primary"]:not(.no-ssa-polish),
:is(a, button, input)[class*="--btn-primary"]:not(.no-ssa-polish),
:is(a, button, input)[class*="-button-primary"]:not(.no-ssa-polish),
:is(a, button, input)[class*="__button--primary"]:not(.no-ssa-polish),
:is(a, button, input)[class*="button--primary"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]),
:is(a, button, input)[class$="-btn"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not(.swiper-button-prev):not(.swiper-button-next):not(.slider-button):not(.product__share-copy-btn):not([class*="-close"]):not([class*="-back"]):not([class*="-skip"]),
:is(a, button, input)[class$="__btn"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not([class*="__close"]):not([class*="__back"]):not([class*="__skip"]),
:is(a, button, input)[class$="_btn"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]),
:is(a, button, input)[class$="-button"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not(.swiper-button-prev):not(.swiper-button-next):not(.slider-button):not(.pickup-availability-button):not(.password-button):not(.shopify-challenge__button):not([class*="-close"]):not([class*="-back"]):not([class*="-skip"]),
:is(a, button, input)[class$="__button"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not(.quantity__button):not(.password-button):not(.shopify-challenge__button):not([class*="__close"]):not([class*="__back"]):not([class*="__skip"]),
button[type="submit"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="cancel"]):not(.shopify-challenge__button):not(.password-button):not(.search-modal__close-button),
input[type="submit"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]) {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* ── 5b. Hover lift - button elements only, NO color change ───── */
:is(a, button, input)[class*="-cta"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not([class*="cancel"]):not([class*="--neutral"]):not([class*="--text"]):not([class*="--icon"]):hover,
:is(a, button, input)[class*="__cta"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not([class*="cancel"]):not([class*="--neutral"]):not([class*="--text"]):not([class*="--icon"]):hover,
:is(a, button, input)[class*="--cta"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not([class*="cancel"]):not([class*="--neutral"]):not([class*="--text"]):not([class*="--icon"]):hover,
:is(a, button, input)[class*="-btn-primary"]:not(.no-ssa-polish):hover,
:is(a, button, input)[class*="__btn--primary"]:not(.no-ssa-polish):hover,
:is(a, button, input)[class*="--btn-primary"]:not(.no-ssa-polish):hover,
:is(a, button, input)[class*="-button-primary"]:not(.no-ssa-polish):hover,
:is(a, button, input)[class*="__button--primary"]:not(.no-ssa-polish):hover,
:is(a, button, input)[class*="button--primary"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):hover,
:is(a, button, input)[class$="-btn"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not(.swiper-button-prev):not(.swiper-button-next):not(.slider-button):not(.product__share-copy-btn):not([class*="-close"]):not([class*="-back"]):not([class*="-skip"]):hover,
:is(a, button, input)[class$="__btn"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not([class*="__close"]):not([class*="__back"]):not([class*="__skip"]):hover,
:is(a, button, input)[class$="_btn"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):hover,
:is(a, button, input)[class$="-button"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not(.swiper-button-prev):not(.swiper-button-next):not(.slider-button):not(.pickup-availability-button):not(.password-button):not(.shopify-challenge__button):not([class*="-close"]):not([class*="-back"]):not([class*="-skip"]):hover,
:is(a, button, input)[class$="__button"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not(.quantity__button):not(.password-button):not(.shopify-challenge__button):not([class*="__close"]):not([class*="__back"]):not([class*="__skip"]):hover,
button[type="submit"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="cancel"]):not(.shopify-challenge__button):not(.password-button):not(.search-modal__close-button):hover,
input[type="submit"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):hover {
  transform: translateY(-2px);
  /* Hover shadow intentionally removed - see the named-list rule
   * above for rationale. Each button keeps its own base shadow. */
}

/* ── 5c. Active (pressed) snap-back ─────────────────────────────── */
:is(a, button, input)[class*="-cta"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not([class*="cancel"]):active,
:is(a, button, input)[class*="__cta"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not([class*="cancel"]):active,
:is(a, button, input)[class*="--cta"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):not([class*="--link"]):not([class*="cancel"]):active,
:is(a, button, input)[class*="-btn-primary"]:not(.no-ssa-polish):active,
:is(a, button, input)[class*="__btn--primary"]:not(.no-ssa-polish):active,
:is(a, button, input)[class*="--btn-primary"]:not(.no-ssa-polish):active,
:is(a, button, input)[class*="-button-primary"]:not(.no-ssa-polish):active,
:is(a, button, input)[class*="__button--primary"]:not(.no-ssa-polish):active,
:is(a, button, input)[class*="button--primary"]:not(.no-ssa-polish):active,
:is(a, button, input)[class$="-btn"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):active,
:is(a, button, input)[class$="__btn"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):active,
:is(a, button, input)[class$="_btn"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):active,
:is(a, button, input)[class$="-button"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):active,
:is(a, button, input)[class$="__button"]:not(.no-ssa-polish):not([class*="--secondary"]):not([class*="--ghost"]):not([class*="--outline"]):active,
button[type="submit"]:not(.no-ssa-polish):active,
input[type="submit"]:not(.no-ssa-polish):active {
  transform: translateY(0);
}

/* ──────────────────────────────────────────────────────────────────
 * 5e. Explicit add-ins - buttons that fall through the pattern net
 * ──────────────────────────────────────────────────────────────────
 * Some buttons can't be caught by the attribute-pattern selectors
 * because (a) the keyword sits at the START of the class name
 * (`btn-loyalty`), or (b) the element carries multiple classes and
 * the attribute string ends with a numeric suffix that
 * `[class$="_btn"]` can't match (`class="loyalty_program_1_btn
 * loyalty_program_1_btn1"`). Listing them by name here.
 *
 * Critically these are NOT gradient buttons (purple bg / yellow bg
 * / outline border), so we use the §5b NEUTRAL shadow on hover -
 * the red glow would clash with their actual button colours.
 */
.btn-loyalty,
.loyalty_program_1_btn,
.loyalty_program_1_btn1,
.loyalty_program_1_btn2 {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-loyalty:hover,
.loyalty_program_1_btn:hover,
.loyalty_program_1_btn1:hover,
.loyalty_program_1_btn2:hover {
  transform: translateY(-2px);
  /* Hover shadow intentionally removed - see the named-list rule
   * above for rationale. */
}

.btn-loyalty:active,
.loyalty_program_1_btn:active,
.loyalty_program_1_btn1:active,
.loyalty_program_1_btn2:active {
  transform: translateY(0);
}

/* ── 5d. Reduced-motion users get no animation ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  [class*="-cta"]:not(.no-ssa-polish),
  [class*="__cta"]:not(.no-ssa-polish),
  [class*="--cta"]:not(.no-ssa-polish),
  [class*="-btn-primary"]:not(.no-ssa-polish),
  [class*="__btn--primary"]:not(.no-ssa-polish),
  [class*="--btn-primary"]:not(.no-ssa-polish),
  [class*="button--primary"]:not(.no-ssa-polish),
  button[type="submit"]:not(.no-ssa-polish),
  input[type="submit"]:not(.no-ssa-polish),
  .btn-loyalty,
  .loyalty_program_1_btn,
  .loyalty_program_1_btn1,
  .loyalty_program_1_btn2 {
    transition: none;
  }
}

/* ── 6. Opt-out escape hatch ─────────────────────────────────────── */
/* Add `.no-ssa-polish` to any button's class list to disable the
   polish - useful for icon-only utility buttons that shouldn't lift,
   secondary/outline buttons that have their own visual language, or
   one-off design experiments. */
.no-ssa-polish,
.no-ssa-polish:hover,
.no-ssa-polish:active {
  transform: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* ──────────────────────────────────────────────────────────────────
 * 7. Defensive reset - non-button containers never lift
 * ──────────────────────────────────────────────────────────────────
 * Belt-and-braces: any container div/section/etc. whose class
 * happens to contain `-cta` / `-btn` / `-button` (e.g. some random
 * wrapper) has its transform + box-shadow reset on hover.
 *
 * Specificity trick: the entire selector
 * uses `:where()` which gives ZERO specificity. NO `!important` on
 * the declarations. This way:
 *   • Random divs with no competing rule → reset applies, they stay still ✓
 *   • Containers EXPLICITLY in the named polish list (like
 *     `.hs12__cta` which IS meant to lift) → their named-list rule
 *     with `!important` always wins, lift happens ✓
 *   • Inner buttons inside lifted containers → mark them with
 *     `no-ssa-polish` in the markup so they don't double-lift.
 */
:where(div, section, article, aside, header, footer, nav, main, ul, ol, li, p, span, h1, h2, h3, h4, h5, h6, figure, picture):where(
  [class*="-cta"],
  [class*="__cta"],
  [class*="--cta"],
  [class$="-cta"],
  [class$="__cta"],
  [class$="-btn"],
  [class$="__btn"],
  [class$="_btn"],
  [class$="-button"],
  [class$="__button"],
  [class*="-btn-primary"],
  [class*="__btn--primary"],
  [class*="--btn-primary"],
  [class*="button--primary"]
):hover {
  transform: none;
  box-shadow: none;
}
/* END_SNIPPET:ssa-button-polish */

/* START_SNIPPET:ssa-button-sizes (INDEX:233) */
/* ── Base reset shared by all three sizes ─────────────────────────── */
.ssa-btn--sm,
.ssa-btn--md,
.ssa-btn--lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  box-sizing: border-box;
  border-radius: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* ── Small ────────────────────────────────────────────────────────── */
.ssa-btn--sm {
  padding: 11px 18px;
  font-size: 13px;
  min-height: 42px;
}
@media (max-width: 749px) {
  .ssa-btn--sm {
    padding: 10px 16px;
    font-size: 12px;
    min-height: 40px;
  }
}

/* ── Medium (default) ─────────────────────────────────────────────── */
.ssa-btn--md {
  padding: 12px 24px;
  font-size: 14px;
  min-height: 44px;
}
@media (max-width: 749px) {
  .ssa-btn--md {
    padding: 12px 20px;
    font-size: 14px;
    min-height: 44px;
  }
}

/* ── Large (hero) ─────────────────────────────────────────────────── */
.ssa-btn--lg {
  padding: 16px 32px;
  font-size: 16px;
  min-height: 52px;
}
@media (max-width: 749px) {
  .ssa-btn--lg {
    padding: 14px 24px;
    font-size: 16px;
    min-height: 48px;
  }
}

/* ── Full-width modifier ──────────────────────────────────────────── */
.ssa-btn--full {
  width: 100%;
}
/* END_SNIPPET:ssa-button-sizes */

/* START_SNIPPET:ssa-section-spacing (INDEX:248) */
/* ═══════════════════════════════════════════════════════════════
 * 1. Spacing scale - CSS variables available everywhere
 * ═══════════════════════════════════════════════════════════════ */
:root {
  /* Atomic scale (8px base) */
  --ssa-space-xs:   8px;
  --ssa-space-sm:  16px;
  --ssa-space-md:  24px;
  --ssa-space-lg:  32px;
  --ssa-space-xl:  48px;
  --ssa-space-2xl: 64px;
  --ssa-space-3xl: 80px;
  --ssa-space-4xl: 96px;
  --ssa-space-5xl: 128px;

  /* Section rhythm tokens - resolve to a scale value per breakpoint.
   * Components reference --ssa-section-pad-y; the value changes at
   * each breakpoint without changing the variable name. */
  --ssa-section-pad-y: var(--ssa-space-3xl);  /* 80px desktop default */
  --ssa-section-pad-y-hero:    var(--ssa-space-4xl);  /* 96px */
  --ssa-section-pad-y-compact: var(--ssa-space-xl);   /* 48px */

  /* Internal rhythm */
  --ssa-heading-gap: var(--ssa-space-lg);  /* heading → content */
  --ssa-card-gap:    20px;                 /* between grid items */
}

@media (max-width: 1024px) {
  :root {
    --ssa-section-pad-y:         var(--ssa-space-2xl);  /* 64px tablet */
    --ssa-section-pad-y-hero:    var(--ssa-space-3xl);  /* 80px tablet */
    --ssa-section-pad-y-compact: var(--ssa-space-lg);   /* 32px tablet */
    --ssa-heading-gap:           var(--ssa-space-md);   /* 24px */
    --ssa-card-gap:              16px;
  }
}

@media (max-width: 749px) {
  :root {
    --ssa-section-pad-y:         var(--ssa-space-xl);   /* 48px mobile */
    --ssa-section-pad-y-hero:    var(--ssa-space-2xl);  /* 64px mobile */
    --ssa-section-pad-y-compact: var(--ssa-space-md);   /* 24px mobile */
    --ssa-card-gap:              14px;
  }
}


/* ═══════════════════════════════════════════════════════════════
 * 2. Catch-all - REMOVED
 * ═══════════════════════════════════════════════════════════════
 * The aggressive selector-list with `!important` clobbered legacy
 * per-section paddings that other sections depended on for their
 * internal layout (NRO bundle builder cards, hs14 multi-row flex
 * columns, etc.). Removed per the request.
 *
 * The spacing scale variables in §1 above remain available for
 * any section that WANTS to opt into the rhythm - just reference
 * `var(--ssa-section-pad-y)` etc. in the section's own stylesheet.
 * No global enforcement.
 */


/* ═══════════════════════════════════════════════════════════════
 * 3. Modifier classes - opt-in variations
 * ═══════════════════════════════════════════════════════════════
 * Apply on the section root to opt into a different rhythm.
 *
 *   <section class="home_sec_1 ssa-section--hero">    → 96/80/64
 *   <section class="home_sec_4 ssa-section--compact"> → 48/32/24
 *   <section class="home_sec_2 ssa-section--flush">   → 0/0/0
 */
.ssa-section--hero {
  padding-top:    var(--ssa-section-pad-y-hero) !important;
  padding-bottom: var(--ssa-section-pad-y-hero) !important;
}
.ssa-section--compact {
  padding-top:    var(--ssa-section-pad-y-compact) !important;
  padding-bottom: var(--ssa-section-pad-y-compact) !important;
}
.ssa-section--flush {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.ssa-section--flush-top {
  padding-top: 0 !important;
}
.ssa-section--flush-bottom {
  padding-bottom: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 4. Opt-out - `.no-ssa-spacing` disables the catch-all
 * ═══════════════════════════════════════════════════════════════
 * For one-off sections that genuinely need custom padding declared
 * inline in the section's own stylesheet. Wins over the catch-all
 * by resetting padding-block to `unset` (the section's own CSS then
 * takes over as if the catch-all never matched). */
.no-ssa-spacing {
  padding-top: unset !important;
  padding-bottom: unset !important;
}


/* ═══════════════════════════════════════════════════════════════
 * 5. Section gap helper - eliminates double-padding between siblings
 * ═══════════════════════════════════════════════════════════════
 * Shopify renders each section inside its own `<div id="shopify-
 * section-*">`. Adjacent sections both apply 80px top + 80px bottom
 * → 160px gap. That's twice what most layouts want.
 *
 * `--ssa-section-collapse` (default 0.5) tells the catch-all to
 * halve the doubled gap by reducing each side's contribution to
 * half. Result: 80px between sections instead of 160px.
 *
 * Implementation: target the bottom of a section that has a sibling
 * section right after, halving its padding-bottom.
 */
[id^="shopify-section-"] + [id^="shopify-section-"] > section,
[id^="shopify-section-"] + [id^="shopify-section-"] > [class] {
  /* Future enhancement - currently a no-op. Adjacent-section
   * detection works only on Shopify's wrapper, which we can't
   * always control from the section's own stylesheet. The 80px
   * default already feels balanced between most pairs; if you
   * want tighter gaps between specific sibling sections, add
   * `.ssa-section--flush-top` or `--flush-bottom` to one of them. */
}
/* END_SNIPPET:ssa-section-spacing */

/* START_SNIPPET:subscribe-save-toggle (INDEX:249) */
/* Never Run Out - Subscribe & Save toggle
     Branded design per CEO directive - gradient red→yellow accents,
     bold typography, clear visual hierarchy. Replaces Amazon's
     plain radio buttons. */
  .ssa-subsave {
    margin: 20px 0;
    padding: 16px 18px;
    background: rgba(0, 0, 0, 0.02);
    border: 1.5px solid rgba(var(--color-foreground, 33 33 33), 0.08);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
  }
  .ssa-subsave::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
  }
  .ssa-subsave__heading {
    font-family: 'Racing Sans One', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground, 33 33 33));
    margin-bottom: 12px;
    line-height: 1.1;
  }
  .ssa-subsave__heading-icon {
    display: inline-flex;
    align-items: center;
    color: #d70000;
  }
  .ssa-subsave__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ssa-subsave__opt {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 14px;
    background: #fff;
    border: 1.5px solid rgba(var(--color-foreground, 33 33 33), 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  }
  .ssa-subsave__opt:hover {
    border-color: rgba(var(--color-foreground, 33 33 33), 0.32);
  }
  .ssa-subsave__opt input[type="radio"] {
    flex: none;
    margin: 2px 0 0;
    accent-color: #d70000;
    width: 18px;
    height: 18px;
  }
  /* Selected state - trademark red → orange → yellow gradient fill,
     applied identically to BOTH One-time and Subscribe options so the
     selected card always reads as "the chosen one" with the same
     visual weight. Outer border is transparent + a slightly darker
     gradient via background-clip so the card has a clean edge against
     the page background regardless of theme palette. */
  .ssa-subsave__opt:has(input:checked) {
    border: 1.5px solid transparent;
    background:
      /* Inner fill - the vibrant gradient customers actually see */
      linear-gradient(90deg, #ffe9c2 0%, #ffd6a5 30%, #ffb273 60%, #ff8a4c 100%) padding-box,
      /* Outer edge - slightly darker version of the same gradient */
      linear-gradient(90deg, #d70000 0%, #ff6b00 50%, #ffd201 100%) border-box;
    box-shadow:
      0 8px 20px rgba(215, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  /* Keep text legible on the gradient fill. Both label + price stay
     dark - they already pop on the warm gradient without colour
     changes. The subtle sub-line gets a slight text-shadow on
     selected state so it stays readable. */
  .ssa-subsave__opt:has(input:checked) .ssa-subsave__opt-sub {
    color: rgba(33, 33, 33, 0.78);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  .ssa-subsave__opt--locked {
    opacity: 0.72;
    cursor: not-allowed;
  }
  .ssa-subsave__opt--locked .ssa-subsave__opt-badge {
    background: rgba(0, 0, 0, 0.55);
    text-shadow: none;
  }
  .ssa-subsave__opt-content {
    flex: 1;
    min-width: 0;
  }
  .ssa-subsave__opt-label {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: rgb(var(--color-foreground, 33 33 33));
    margin-bottom: 2px;
    flex-wrap: wrap;
  }
  .ssa-subsave__opt-badge {
    font-family: 'Montserrat', sans-serif;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  }
  .ssa-subsave__opt-price {
    font-family: 'Racing Sans One', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: rgb(var(--color-foreground, 33 33 33));
    margin-top: 2px;
    letter-spacing: 0.005em;
    line-height: 1;
  }
  .ssa-subsave__opt-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    color: rgba(var(--color-foreground, 33 33 33), 0.65);
    margin-top: 4px;
    line-height: 1.4;
  }
  .ssa-subsave__cadence {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    background:
      #fff padding-box,
      linear-gradient(90deg, #d70000 0%, #ff6b00 50%, #ffd201 100%) border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .ssa-subsave__cadence-label {
    font-weight: 700;
    font-size: 13px;
    color: rgb(var(--color-foreground, 33 33 33));
  }
  .ssa-subsave__cadence-select {
    flex: 1;
    min-width: 160px;
    padding: 9px 12px;
    border: 1.5px solid rgba(var(--color-foreground, 33 33 33), 0.2);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: rgb(var(--color-foreground, 33 33 33));
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212121'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 32px;
  }
  .ssa-subsave__cadence-select:focus {
    outline: 0;
    border-color: transparent;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212121'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"),
      linear-gradient(#fff, #fff),
      linear-gradient(90deg, #d70000 0%, #ff6b00 50%, #ffd201 100%);
    background-clip: padding-box, padding-box, border-box;
    background-origin: padding-box, padding-box, border-box;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: right 10px center, 0 0, 0 0;
    background-size: 14px, auto, auto;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
  }
  .ssa-subsave__learn {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #d70000;
    text-decoration: none;
    letter-spacing: 0.02em;
  }
  .ssa-subsave__learn:hover {
    text-decoration: underline;
  }

  /* Mobile (≤ 749px) - keep tap targets comfortable and avoid the
     price label overflowing on narrow product pages. */
  @media (max-width: 749px) {
    .ssa-subsave__opt {
      padding: 12px;
      min-height: 64px;
    }
    .ssa-subsave__opt-label {
      font-size: 14px;
      flex-wrap: wrap;
    }
    .ssa-subsave__opt-price {
      font-size: 18px;
    }
    .ssa-subsave__opt-badge {
      margin-top: 2px;
    }
    .ssa-subsave__cadence-select {
      min-height: 44px;
      font-size: 16px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ssa-subsave__opt,
    .ssa-subsave__opt-content,
    .ssa-subsave__cadence-select {
      transition: none !important;
    }
  }

  /* ── Duplicate-subscription warning modal (PDP toggle) ─────────── */
  /* Appended to <body> by subscribe-save.js when a customer tries to
     subscribe to a product they're already subscribed to. Matches the
     bundle builder's nro-dup-modal styling so the UX feels native
     whether the customer hits the warning from a PDP or the bundle. */
  .ssa-subsave-dup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: ssa-subsave-dup-fade 0.18s ease-out;
  }
  @keyframes ssa-subsave-dup-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .ssa-subsave-dup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 18, 0.55);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    cursor: pointer;
  }
  @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .ssa-subsave-dup__backdrop { background: rgba(0, 0, 0, 0.75); }
  }
  .ssa-subsave-dup__card {
    position: relative;
    background: #15151b;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px 28px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    font-family: 'Montserrat', sans-serif;
  }
  .ssa-subsave-dup__title {
    font-family: 'Racing Sans One', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: #fff;
  }
  .ssa-subsave-dup__body {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 24px;
  }
  .ssa-subsave-dup__body strong { color: #fff; font-weight: 700; }
  .ssa-subsave-dup__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .ssa-subsave-dup__btn {
    flex: 1 1 auto;
    min-width: 140px;
    padding: 12px 18px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  }
  .ssa-subsave-dup__btn--primary {
    background: linear-gradient(90deg, #d70000 0%, #ffd201 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 8px 20px rgba(215, 0, 0, 0.35);
  }
  .ssa-subsave-dup__btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(215, 0, 0, 0.5);
  }
  .ssa-subsave-dup__btn--secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ssa-subsave-dup__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }
  @media (max-width: 420px) {
    .ssa-subsave-dup__card { padding: 24px 20px; }
    .ssa-subsave-dup__title { font-size: 19px; }
    .ssa-subsave-dup__actions { flex-direction: column; }
    .ssa-subsave-dup__btn { width: 100%; }
  }
/* END_SNIPPET:subscribe-save-toggle */