@font-face {
  font-family: "Brega";
  src: url("../assets/fonts/Brega.ttf") format("truetype");
  font-display: block;
}

:root {
  --bsa-red: #ba172b;
  --rams-blue: #004f9e;
  --rams-yellow: #fdba31;
  --dark-blue: #0b2545;
  --wolves-red: #c8102e;
  --wolves-dark-red: #4b000c;
  --wolves-pink: #f0c9ce;
  --ink: #111418;
  --ink-2: #111827;
  --muted: #6b7280;
  --muted-2: #6b7380;
  --strike: #9aa0a9;
  --tile: #f4f6fa;
  --photo: #f4f4f4;
  --accent: var(--rams-blue);
  --accent-2: var(--rams-yellow);
  --number-stroke: var(--rams-yellow);
}

body.theme-wolves {
  --accent: var(--wolves-red);
  --accent-2: var(--wolves-red);
  --number-stroke: #d1d5db;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Figtree", system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
  min-width: 1440px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; }

.page { width: 1440px; margin: 0 auto; position: relative; }

.display {
  font-family: "Exo 2", sans-serif;
  font-weight: 900;
  font-style: italic;
  line-height: 0.9;
  white-space: nowrap;
}

.icon-24 { width: 24px; height: 24px; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 50; }

.util-banner { height: 16px; background: var(--bsa-red); }

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: #f4f4f4;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}


.primary-nav__left { display: flex; align-items: center; gap: 10px; padding: 6px 0; align-self: stretch; }
.primary-nav__logo img { width: 36px; height: 36px; }
.primary-nav__rule { width: 1px; align-self: stretch; background: rgba(0, 0, 0, 0.1); }
.primary-nav__menu { display: flex; align-items: center; gap: 10px; }
.primary-nav__menu button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 20.25px;
  color: #000;
  border-bottom: 2px solid transparent;
}
.primary-nav__menu img { width: 10px; height: 10px; }

.primary-nav__search { flex: 1 0 0; max-width: 540px; padding: 0 16px; }
.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border-radius: 999px;
  min-width: 48px;
}
.search-field img { width: 16px; height: 16px; }
.search-field input {
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 13.5px/20.25px "Figtree", sans-serif;
  color: var(--ink);
  width: 100%;
}
.search-field input::placeholder { color: #99a1af; }

.primary-nav__right { display: flex; align-items: center; gap: 20px; align-self: stretch; }
.account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 12px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 600;
  font-size: 13.5px;
  color: #364153;
}
.account-btn img, .cart-btn img { width: 22px; height: 22px; }
.role-pill {
  width: 48px;
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(204, 0, 51, 0.1);
  font-weight: 700;
  font-size: 8px;
  line-height: 1;
  color: #555;
  text-align: center;
}

.team-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: #fafafa;
}

.team-brand { display: flex; align-items: center; gap: 8px; padding: 14px 4px; width: 149px; }
.team-brand__logo { width: 44px; height: 32.285px; object-fit: contain; }
.team-brand__name {
  font-weight: 700;
  font-size: 26px;
  line-height: 26px;
  letter-spacing: -0.8px;
  color: var(--dark-blue);
  transform: translateY(-2px);
}

.team-nav__main { flex: 1 0 0; display: flex; align-items: center; justify-content: space-between; height: 68px; margin-left: 16px; min-width: 520px; }
.team-nav__tabs { display: flex; height: 100%; }
.team-nav__tabs a {
  display: flex;
  align-items: center;
  padding: 16px;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 20.25px;
  color: #000;
  text-transform: uppercase;
}
.team-nav__tabs a.is-active { padding-bottom: 10px; border-bottom: 6px solid #888; }

.team-nav__cta { display: flex; align-items: center; gap: 16px; height: 100%; }
.player-select { position: relative; }
.player-label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; font-weight: 600; font-size: 13.5px; line-height: 20.25px; color: #364153; }
.player-label:hover, .player-select.is-open .player-label { background: rgba(0, 0, 0, 0.05); }
.player-label img { width: 10px; height: 10px; transition: transform 0.15s ease; }
.player-select.is-open .player-label img { transform: rotate(180deg); }
.player-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  padding: 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px -8px rgba(11, 37, 69, 0.28);
  display: none;
  z-index: 60;
}
.player-select.is-open .player-menu { display: block; }
.player-menu__title { padding: 8px 10px 6px; font-weight: 600; font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.player-menu__list { max-height: 360px; overflow-y: auto; }
.player-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
}
.player-menu__item:hover { background: #f2f6fb; }
.player-menu__item.is-selected { font-weight: 700; }
.player-menu__name { flex: 1; }
.player-menu__check { width: 18px; height: 18px; fill: var(--rams-blue); }
.player-menu__all {
  display: block;
  margin-top: 6px;
  padding: 10px;
  border-top: 1px solid #eef0f3;
  font-weight: 600;
  font-size: 12px;
  color: var(--rams-blue);
}
.player-menu__all:hover { text-decoration: underline; }

.team-switcher { display: flex; align-items: center; }
.team-switcher__avatars { display: flex; isolation: isolate; }
.avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #fff;
  border: 2px solid #fff;
  overflow: hidden;
  display: block;
}
/* Order never changes (Rams, then Wolves); the current team just comes to the front with the red ring. */
.avatar:first-child { margin-right: -10px; }
.avatar { z-index: 1; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.12)); }
.avatar.is-selected { z-index: 2; border-color: var(--bsa-red); filter: none; }
.avatar--rams img { position: absolute; left: 3px; top: 6.99px; width: 30px; height: 22.012px; }
.avatar--wolves { overflow: visible; }
.avatar--wolves.is-selected { overflow: hidden; }
.avatar--wolves img { position: absolute; left: -1.08px; top: 4px; width: 38.16px; height: 28px; object-fit: contain; }
.avatar:hover { transform: translateY(-1px); }
.team-switcher__caret { width: 24px; height: 24px; display: flex; }
.team-switcher__caret img { width: 24px; height: 24px; transition: transform 0.15s ease; }
.team-switcher.is-open .team-switcher__caret img { transform: rotate(180deg); }

.choose-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 20px;
  border-radius: 999px;
  background: #111;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 20.25px;
  color: #fff;
}
.choose-player img { width: 24px; height: 24px; }

/* Wolves keeps its own white team nav; the top bar and right-hand team switcher match the Rams header */
.theme-wolves .team-nav { background: #fff; border-bottom: 1px solid #f3f4f6; }
.theme-wolves .team-brand { width: auto; gap: 0; }
.theme-wolves .team-brand__name { color: var(--wolves-red); width: 80px; margin-left: 8px; }
.theme-wolves .team-nav__tabs a.is-active { border-bottom-color: rgba(170, 170, 170, 0.67); }

/* ---------- Team stringout dropdown ---------- */
.stringout {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.25);
  display: none;
}
.stringout.is-open { display: block; }
.stringout__rows { padding: 8px 0; }
.stringout__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.team-badge { display: flex; align-items: center; gap: 8px; width: 257.672px; padding: 6px 4px; }
.team-badge__logo { position: relative; width: 40px; height: 40px; overflow: hidden; flex: none; }
.team-badge__logo img { position: absolute; max-width: none; }
.team-badge__text { width: 167.672px; display: flex; flex-direction: column; gap: 6px; }
.team-badge__name {
  font-weight: 800;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: 1.56px;
  text-transform: uppercase;
}
.team-badge__meta {
  font-weight: 500;
  font-size: 9px;
  line-height: 9px;
  letter-spacing: 1.62px;
  text-transform: uppercase;
  color: #6a7282;
  white-space: nowrap;
}
.team-badge__meta .dot { margin: 0 6px; }
.stringout__middle { flex: 1 0 0; display: flex; align-items: center; }
.player-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  font-size: 13.5px;
  line-height: 20.25px;
  color: #364153;
}
.player-pill strong { font-weight: 700; color: #101828; }
.player-pill:hover { border-color: rgba(0, 0, 0, 0.35); }
.player-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 48px;
  background: rgba(0, 0, 0, 0.05);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 12px;
}
.btn-black {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7.5px 18px;
  border: 2px solid #000;
  border-radius: 999px;
  background: #000;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  white-space: nowrap;
}
.btn-black[aria-disabled="true"] { cursor: default; }

.stringout__more {
  display: flex;
  gap: 60px;
  padding: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.stringout__add { width: 330px; display: flex; flex-direction: column; gap: 16px; }
.stringout__label { font-weight: 700; font-size: 11px; color: #000; }
.stringout__label--muted { color: #6b6b6b; }
.team-search {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 42px;
  padding: 6px 10px 6px 18px;
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 999px;
}
.team-search img { width: 14px; height: 14px; opacity: 0.7; }
.team-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 12.5px "Figtree", sans-serif;
  color: var(--ink);
}
.team-search input::placeholder { color: #6b6b6b; }
.team-search button {
  width: 60px;
  height: 30px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
}
.stringout__hint { width: 254px; display: flex; flex-direction: column; gap: 16px; font-size: 12px; line-height: 1.4; color: #6b6b6b; }
.stringout__list { width: 182px; display: flex; flex-direction: column; gap: 16px; }
.stringout__list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; color: #000; }

/* ---------- Buttons ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.pill--hero { height: 40px; padding: 10px 18px; font-size: 14px; letter-spacing: 0.14px; color: var(--ink); }
.pill--yellow { background: var(--rams-yellow); }
.pill--outline { background: #fff; border: 1px solid var(--rams-blue); }
.pill--sm { padding: 10px 16px; font-size: 13px; color: var(--ink); }
.pill--lg { padding: 14px 24px; font-size: 12px; letter-spacing: 1.8px; }
.pill--xs { padding: 10px 18px; font-size: 11px; letter-spacing: 0.11px; }
.pill--blue { background: var(--rams-blue); color: #fff; }
.pill--white { background: #fff; }
.pill--red { background: var(--wolves-red); color: #fff; }
.pill--red-outline { background: #fff; border: 1px solid var(--wolves-red); color: var(--wolves-red); }
.pill:hover { filter: brightness(0.96); }

/* ---------- Sport dropdown (school hero) ---------- */
.sport-select { position: relative; }
.sport-select__btn img { width: 20px; height: 20px; transition: transform 0.15s ease; }
.sport-select.is-open .sport-select__btn img { transform: rotate(180deg); }
.sport-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px -8px rgba(11, 37, 69, 0.28);
  display: none;
  z-index: 20;
}
.sport-select.is-open .sport-menu { display: block; }
.sport-menu__label {
  padding: 8px 12px 6px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.1px;
  color: var(--muted);
}
.sport-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.sport-menu a:hover { background: #f2f6fb; color: var(--rams-blue); }
.sport-menu a svg { width: 18px; height: 18px; fill: currentColor; opacity: 0; }
.sport-menu a:hover svg { opacity: 1; }

/* ---------- Hero ---------- */
.hero { position: relative; z-index: 3; height: 640px; background: #f4f4f4; }
.hero__copy {
  position: absolute;
  left: 40px;
  top: calc(50% + 0.22px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 5;
}
.hero__title { display: flex; flex-direction: column; gap: 16px; line-height: 0.88; color: var(--rams-blue); }
.hero__brand { font-family: "Brega", sans-serif; font-size: 64px; white-space: nowrap; }
.hero__sub { font-weight: 600; font-size: 18px; letter-spacing: 0.9px; text-transform: uppercase; white-space: nowrap; }
.hero__buttons { display: flex; gap: 10px; align-items: flex-start; }
.abs { position: absolute; }
.abs img, img.abs { max-width: none; }
.cover { width: 100%; height: 100%; object-fit: cover; }
.contain { width: 100%; height: 100%; object-fit: contain; }
.clip { overflow: hidden; }

.tile { position: absolute; width: 360px; height: 317px; overflow: hidden; left: 1080px; }
.tile__product { position: absolute; display: flex; align-items: center; justify-content: center; }
.tile__copy { position: absolute; left: 28px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tile__eyebrow { font-weight: 600; font-size: 11px; letter-spacing: 1.1px; white-space: nowrap; }
.tile__title { line-height: 0.92; white-space: nowrap; }
.tile__spacer { height: 6px; }

/* ---------- Sections ---------- */
.section { padding: 96px 80px; display: flex; flex-direction: column; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; }
.section__title { font-size: 72px; color: var(--accent); }
.eyebrow { font-weight: 600; font-size: 14px; letter-spacing: 2.1px; white-space: nowrap; }
.shop-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink);
}
.shop-all--plain { letter-spacing: 0; text-transform: none; }
.shop-all svg, .shop-link svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.shop-all:hover, .shop-link:hover { color: var(--accent); }
.arrow-swap { position: relative; display: inline-block; width: 16px; height: 16px; overflow: hidden; flex: none; }
.arrow-swap svg { position: absolute; inset: 0; width: 16px; height: 16px; fill: currentColor; transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); }
.arrow-swap svg:last-child { transform: translateX(-100%); }
a:hover > .arrow-swap svg:first-child, a:focus-visible > .arrow-swap svg:first-child { transform: translateX(100%); }
a:hover > .arrow-swap svg:last-child, a:focus-visible > .arrow-swap svg:last-child { transform: translateX(0); }


/* Team packs carousel: full-bleed row that scrolls sideways (trackpad/shift-wheel/arrows) */
.packs { gap: 48px; padding-left: 0; padding-right: 0; }
.packs .section__head { padding: 0 80px; align-items: center; }
.carousel { position: relative; }
.packs__row {
  display: flex;
  gap: 32px;
  padding: 0 80px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 80px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.packs__row::-webkit-scrollbar { display: none; }
.round-arrow { display: flex; padding: 12px; border-radius: 999px; background: #f5f5f5; }
.round-arrow img { width: 24px; height: 24px; }
.round-arrow:hover { background: #ebebeb; }
.carousel__arrow {
  position: absolute;
  top: 180px;
  z-index: 2;
  transform: translateY(-50%);
  background: #fff;
  box-shadow: 0 4px 16px rgba(11, 37, 69, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.carousel:hover .carousel__arrow, .carousel:focus-within .carousel__arrow { opacity: 1; pointer-events: auto; }
.carousel__arrow:hover { background: #f5f5f5; }
.carousel__arrow--prev { left: 24px; }
.carousel__arrow--next { right: 24px; }
.carousel .carousel__arrow.is-hidden { opacity: 0; pointer-events: none; }
.pack-card { flex: 0 0 324px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; scroll-snap-align: start; }
.pack-card__img { height: 360px; width: 100%; object-fit: cover; }
.pack-card__meta { display: flex; align-items: center; justify-content: space-between; }
.pack-card__text { display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: 14px; color: var(--accent); white-space: nowrap; }

/* Michael's pack banner */
.pack-banner-section { padding: 96px 80px; }
.pack-banner {
  position: relative;
  display: block;
  height: 360px;
  background: #eef1f6;
  overflow: hidden;
}
.pack-banner__copy {
  position: absolute;
  left: 64px;
  top: calc(50% - 0.5px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.pack-banner__title { font-size: 64px; line-height: 1; color: #fff; text-transform: uppercase; }
.pack-banner__sub { margin-top: 12px; font-weight: 500; font-size: 18px; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.pack-banner__items { position: absolute; left: 735px; top: 22px; width: 469px; height: 323px; }
.pack-banner__items .lift { filter: drop-shadow(0 8px 18px rgba(0, 26, 64, 0.2)); }
.pack-banner:hover .pack-banner__items { transform: translateY(-2px); transition: transform 0.2s ease; }

/* Game day */
.gameday { position: relative; height: 560px; background: var(--dark-blue); overflow: hidden; }
.theme-wolves .gameday { background: var(--wolves-dark-red); border: 1px solid #000; }
.gameday__copy { position: absolute; left: 80px; top: 124.5px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.theme-wolves .gameday__copy { left: 79px; top: 123.5px; }
.gameday__title { font-size: 84px; color: #fff; }
.gameday__body { width: 460px; font-size: 17px; color: #c9d3e3; }
.theme-wolves .gameday__body { color: var(--wolves-pink); }

/* Fan gear tiles */
.fangear { gap: 40px; }
.cat-tiles { display: flex; gap: 24px; }
.cat-tile { position: relative; flex: 1 0 0; min-width: 0; height: 380px; background: var(--tile); overflow: hidden; display: block; }
.cat-tile__num {
  position: absolute;
  top: -20px;
  font-size: 180px;
  color: var(--tile);
  -webkit-text-stroke: 6px var(--number-stroke);
  paint-order: stroke fill;
}
.cat-tile__img { position: absolute; left: 20px; top: 50px; width: 262px; height: 250px; object-fit: contain; transition: transform 0.25s ease; }
.cat-tile:hover .cat-tile__img { transform: scale(1.03); }
.cat-tile__label { position: absolute; left: 24px; top: 333px; width: 254px; display: flex; align-items: center; justify-content: space-between; }
.cat-tile__name { font-size: 26px; color: var(--accent); }
.shop-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 12px; letter-spacing: 1.8px; color: var(--ink); white-space: nowrap; }
.shop-link svg { width: 14px; height: 14px; }

/* Customize */
.customize { position: relative; height: 600px; background: #fff; overflow: hidden; }
.customize__copy { position: absolute; left: 920px; top: 144.5px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.customize__title { font-size: 84px; color: var(--accent); }
.customize__body { width: 440px; font-size: 17px; color: var(--muted); }

/* Equipment */
.equipment { gap: 40px; }
.equip-row { display: flex; gap: 16px; }
.equip-card { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.equip-card__img { position: relative; height: 360px; background: #f5f5f5; overflow: hidden; }
.equip-card__img img { position: absolute; left: 24px; top: 24px; width: 272px; height: 312px; object-fit: contain; }
.equip-card__img img.glove { left: calc(50% - 0.5px); top: calc(50% - 0.5px); width: 259px; height: 297px; transform: translate(-50%, -50%); }
.badge {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.88px;
  white-space: nowrap;
}
.badge--navy { background: var(--dark-blue); color: #fff; }
.badge--gold { background: var(--rams-yellow); color: var(--dark-blue); }
.badge--darkred { background: var(--wolves-dark-red); color: #fff; }
.badge--red { background: var(--wolves-red); color: #fff; }
.equip-card__meta { display: flex; align-items: flex-start; justify-content: space-between; white-space: nowrap; }
.equip-card__name, .equip-card__price { font-weight: 600; font-size: 17px; color: var(--ink); }
.equip-card__variant { margin-top: 2px; font-size: 14px; color: var(--muted-2); }

/* Brands */
.brands { gap: 40px; background: #fff; }
.brands .section__title { line-height: normal; }
.brand-grid { display: flex; flex-direction: column; gap: 24px; }
.brand-row { display: flex; gap: 24px; }
.brand-tile { position: relative; flex: 1 0 0; height: 160px; background: var(--tile); }
.brand-tile img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.brand-tile:hover { background: #ebeff6; }

/* Wolves team pack strip */
.wpacks { gap: 48px; }
.wpacks__head { display: flex; flex-direction: column; gap: 12px; color: var(--wolves-red); }
.wpack-row { display: flex; gap: 16px; }
.wpack-card { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.photo { position: relative; background: var(--photo); width: 100%; }
.photo img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.photo img.fit { object-fit: contain; mix-blend-mode: normal; }
.wpack-card .photo { height: 330px; }
.req-badge-sm {
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--wolves-red);
  font-weight: 600;
  font-size: 8px;
  letter-spacing: 0.8px;
  color: #fff;
}
.wpack-card__meta { display: flex; flex-direction: column; gap: 1px; font-size: 12px; white-space: nowrap; }
.name { font-weight: 600; color: var(--ink); }
.variant { color: var(--muted); }
.price { display: flex; gap: 6px; }
.price s { color: var(--strike); }
.price b { font-weight: 600; color: var(--ink); }

/* ---------- Footer ---------- */
.footer { display: flex; gap: 56px; align-items: flex-start; padding: 48px 64px 56px; background: var(--ink); }
.footer__col { display: flex; flex-direction: column; gap: 9px; font-size: 11px; white-space: nowrap; }
.footer__col h4 { margin: 0 0 4px; font-weight: 600; font-size: 11px; color: #fff; }
.footer__col a { color: #b8c0cc; }
.footer__col a:hover { color: #fff; }
.footer__spacer { flex: 1 0 0; }
.footer__news { display: flex; flex-direction: column; gap: 12px; }
.footer__news h4 { margin: 0; font-weight: 600; font-size: 11px; color: #fff; }
.email-field { display: flex; }
.email-field input {
  width: 240px;
  height: 38px;
  padding: 10px 12px;
  border: 0;
  outline: 0;
  font: 400 11px "Figtree", sans-serif;
}
.email-field input::placeholder { color: #9aa0a9; }
.email-field button {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d4d7dc;
}
.email-field svg { width: 18px; height: 18px; fill: var(--ink); }
.footer__fine { font-size: 9px; color: #8a919c; }
.footer__powered { display: flex; gap: 6px; padding-top: 12px; font-size: 10px; color: #8a919c; }
.footer__powered b { color: #fff; }

/* ---------- Products pages ---------- */
.plp-banner { position: relative; height: 340px; overflow: hidden; }
.plp-banner__copy {
  position: absolute;
  left: 80px;
  top: 50%;
  transform: translateY(-50%);
  width: 580px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #fff;
}
.plp-banner__eyebrow { font-weight: 600; font-size: 18px; line-height: 0.88; letter-spacing: 0.9px; text-transform: uppercase; }
.plp-banner__title { font-size: 72px; line-height: 1.1; letter-spacing: -0.72px; text-transform: uppercase; color: #fff; }
.plp-banner--fangear .plp-banner__eyebrow { font-size: 16px; line-height: 1; letter-spacing: 1.6px; }
.plp-banner--fangear .plp-banner__title { line-height: 1; }

.filter-bar { display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; }
.filter-bar--bordered { border-bottom: 1px solid #e5e5eb; }
.filter-tabs { display: flex; gap: 32px; align-items: center; }
.filter-bar--bordered .filter-tabs { gap: 28px; }
.filter-tabs button {
  padding: 8px 0;
  font-size: 15px;
  color: var(--muted-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.filter-tabs button.is-active { font-weight: 600; color: var(--ink); border-bottom-color: var(--ink); }
.filter-tabs button:hover { color: var(--ink); }
.pack-desc { flex-direction: column; align-items: flex-start; gap: 6px; }
.pack-desc__title { font-weight: 600; font-size: 15px; color: var(--ink); }
.pack-desc__body { font-size: 15px; line-height: 1.45; color: var(--muted-2); white-space: nowrap; }
.filter-controls { display: flex; align-items: center; gap: 12px; }
.filter-controls__count { font-size: 14px; color: var(--muted-2); }
.ctrl-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #d4d7dc;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
}
.ctrl-btn img { width: 20px; height: 20px; }
.ctrl-btn .muted { font-weight: 400; color: var(--muted-2); }
.ctrl-btn img.sm { width: 14px; height: 14px; }

.product-grid { display: flex; flex-direction: column; gap: 40px; padding: 0 32px 56px; }
.product-row { display: flex; gap: 16px; }
.product-card { position: relative; width: 332px; display: flex; flex-direction: column; gap: 10px; }
.product-card .photo { height: 420px; overflow: hidden; }
.product-card .photo img { transition: transform 0.25s ease; }
.product-card:hover .photo img { transform: scale(1.02); }
.product-card__meta { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.product-card__meta .name { font-size: 14px; }
.product-card__meta .variant, .product-card__meta .price { font-size: 13px; }
.req-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--rams-blue);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: #fff;
}
.product-grid .equipment { padding: 32px; }
.product-grid .equipment .section__title { font-size: 56px; }
.add-checked { display: flex; justify-content: center; padding-bottom: 80px; }
.add-checked button, .btn-dark {
  padding: 14px 24px;
  border-radius: 999px;
  background: #111;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
}

/* ---------- PDP ---------- */
.breadcrumb { display: flex; gap: 8px; padding: 20px 40px 0; font-size: 13px; color: #707072; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb .current { font-weight: 500; color: #111; }

.pdp { display: flex; gap: 40px; align-items: flex-start; padding: 40px; }

.pack-list { width: 280px; flex: none; display: flex; flex-direction: column; }
.pack-list__title { padding-bottom: 16px; font-weight: 500; font-size: 16px; color: #111; }
.pack-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border-top: 1px solid #e5e5e5;
  border-left: 3px solid transparent;
  text-align: left;
}
.pack-row:last-of-type { border-bottom: 1px solid #e5e5e5; }
.pack-row:hover { background: #f8fafc; }
.pack-row.is-active { background: #f2f6fb; }
.pack-row__img { position: relative; width: 56px; height: 64px; flex: none; border-radius: 4px; overflow: hidden; background: #f3f3f3; }
.pack-row__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pack-row__text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.pack-row__label { font-weight: 500; font-style: italic; font-size: 10px; letter-spacing: 0.08px; color: var(--rams-blue); }
.pack-row__name { color: #111; }
.pack-row__name--strong { font-weight: 500; }
.pack-row__price { color: #707072; }
.pack-row__check { width: 20px; height: 20px; flex: none; border-radius: 50%; }
.pack-row__check img { width: 20px; height: 20px; }
.pack-row__chevron { width: 20px; height: 20px; flex: none; transition: transform 0.15s ease; }
.pack-row.is-collapsed .pack-row__chevron { transform: rotate(180deg); }
.pack-group.is-active .pack-row--group { background: #f2f6fb; }
.pack-row--group { border-top: 0; }
.pack-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 12px 24px;
  border-left: 3px solid transparent;
}
.pack-group.is-active .pack-options { background: #f2f6fb; }
.pack-group.is-collapsed .pack-options { display: none; }
.pack-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e2e6ec;
  border-radius: 8px;
  text-align: left;
}
.pack-option.is-selected { border: 1.5px solid #1f4fd8; padding: 7.5px 9.5px; }
.pack-option__img { width: 40px; height: 46px; flex: none; background: #f4f4f4; }
.pack-option__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pack-option__text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
.pack-option__text b { font-weight: 500; color: #111; }
.pack-option__text span { color: #707072; }
.pack-option__radio { width: 18px; height: 18px; flex: none; }
.pack-option.is-selected .pack-option__radio { width: 20px; height: 20px; }
.pack-list .btn-dark { display: block; margin-top: 20px; width: 100%; padding: 14px 0; text-align: center; }

.gallery { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gallery__main { position: relative; width: 100%; height: 700px; background: #f4f4f4; overflow: hidden; }
/* Product cutouts sit inside a margin so the badge never overlaps them; lifestyle photos stay full-bleed. */
.gallery__main img { position: absolute; top: 80px; left: 64px; width: calc(100% - 128px); height: calc(100% - 144px); object-fit: contain; mix-blend-mode: multiply; }
.gallery__main img.is-photo { inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.gallery__badge {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  font-weight: 500;
  font-size: 13px;
  color: #111;
}
.thumbs { display: flex; gap: 8px; }
.thumb {
  position: relative;
  width: 64px;
  height: 76px;
  border-radius: 4px;
  background: #f3f3f3;
  overflow: hidden;
  border: 1.5px solid transparent;
}
.thumb.is-active { border-color: #111; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb img.is-photo { object-fit: cover; }

.details { width: 344px; flex: none; display: flex; justify-content: center; padding-bottom: 100px; }
.details__inner { width: 341px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.details__block { width: 100%; display: flex; flex-direction: column; }
.divider { width: 333px; height: 1px; background: #d9d9d9; }
.d-brand { font-weight: 700; font-size: 14px; line-height: 1.25; color: #000; text-transform: uppercase; }
.d-title { font-weight: 500; font-size: 32px; line-height: 1.25; color: var(--ink-2); }
.d-price-row { display: flex; align-items: center; gap: 12px; }
.d-price { font-weight: 700; font-size: 28px; line-height: 1.25; color: var(--ink-2); }
.d-muted { font-size: 14px; color: var(--muted); }
.d-small { font-size: 12px; color: var(--muted); }
.d-label-row { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 16px; line-height: 18px; color: var(--ink-2); }
.swatch { position: relative; width: 28px; height: 28px; margin: 4px 0; }
.swatch span { position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; }
.swatch img { position: absolute; inset: -3.1px; width: 34.2px; height: 34.2px; max-width: none; }
.size-guide { display: flex; align-items: center; gap: 4px; font-weight: 500; font-size: 14px; line-height: 20px; color: #0273ac; text-decoration: underline; }
.size-guide img { width: 12px; height: 12px; }
.fit-tip { display: flex; align-items: center; gap: 8px; }
.fit-tip b { padding: 2px 8px; border-radius: 4px; background: #1d4ed8; font-size: 12px; line-height: 16px; color: #fff; }
.fit-tip span { font-weight: 500; font-size: 14px; line-height: 20px; color: #0b0b0b; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  height: 40px;
  min-width: 52px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14px;
  color: var(--ink-2);
}
.chip.is-selected { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.chip:hover:not(.is-selected) { border-color: #9ca3af; }
.field-row { display: flex; gap: 12px; }
.text-field { position: relative; height: 40px; flex: 1 0 0; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; }
.text-field--num { flex: none; width: 84px; }
.text-field label {
  position: absolute;
  left: 11px;
  top: -7px;
  padding: 0 4px;
  background: #fff;
  font-size: 12px;
  line-height: 14px;
  color: var(--ink-2);
}
.text-field input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  text-transform: uppercase;
  font: 900 24px/16px "Barlow Condensed", sans-serif;
  color: #1d1f1f;
}
.text-field:focus-within { border-color: var(--ink-2); }
.purchase { display: flex; align-items: center; gap: 12px; }
.qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 132px;
  padding: 1px;
  border: 1px solid var(--ink-2);
  border-radius: 999px;
  background: #fff;
}
.qty button { width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.qty button:hover { background: #f3f4f6; }
.qty svg { width: 20px; height: 20px; fill: var(--ink-2); }
.qty output { font-weight: 600; font-size: 20px; line-height: 24px; color: var(--ink-2); }
.add-bag {
  width: 200px;
  height: 48px;
  border-radius: 999px;
  background: #111;
  font-weight: 500;
  font-size: 18px;
  color: #fff;
  white-space: nowrap;
}
.add-bag.is-added { background: #15803d; }
.decorated { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 12px; color: var(--muted); }
.decorated img { width: 20px; height: 20px; flex: none; }
.decorated b { font-weight: 600; color: var(--ink-2); }
.accordion { width: 100%; }
.acc-row { border-top: 1px solid #d9d9d9; }
.acc-row:last-child { border-bottom: 1px solid #d9d9d9; }
.acc-row button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-2);
}
.acc-row button img { width: 20px; height: 20px; transition: transform 0.15s ease; }
.acc-row.is-open button img { transform: rotate(180deg); }
.acc-row__body { display: none; padding: 0 0 16px; font-size: 14px; line-height: 1.5; color: #374151; }
.acc-row.is-open .acc-row__body { display: block; }