/* tokens.css — design tokens from Figma 'York Barbell Website 26' */
/* Source: file AvkyvrFVv3PmI2pUm2wy3o, collections 1. Primitives (VariableCollectionId:1997:2) + 2. Semantic (VariableCollectionId:2000:2) — Dark mode resolved */
/* Extracted via Figma Plugin API — 50 primitives + 17 semantic tokens */

:root {

  /* ── Color primitives ── */
  --color-red-base: #DA291C;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #DDDDDD;
  --color-neutral-200: #D9D9D9;
  --color-neutral-400: #B2B2B2;
  --color-neutral-500: #8A8A8A;
  --color-neutral-700: #5D5D5D;
  --color-neutral-1000: #101820;
  --color-cream-base: #FBF7EB;

  /* ── Spacing primitives ── */
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-44: 44px;
  --space-48: 48px;
  --space-64: 64px;
  --space-148: 148px;

  /* ── line height ── */
  --lh-normal: normal;
  --lh-1: 0.98;
  --lh-11: 1.1;
  --lh-1125: 1.125;
  --lh-12: 1.2;
  --lh-13: 1.3;
  --lh-14: 1.4;
  --lh-15: 1.5;

  /* ── Layout primitives ── */
  --layout-container-1920: 1856px;
  --layout-container-1440: 1376px;
  --layout-container-390: 358px;
  --layout-gutter-desktop: 32px;
  --layout-gutter-mobile: 24px;
  --layout-section-y-desktop: 148px;
  --layout-section-y-mobile: 64px;

  /* ── Typography primitives ── */

  /* Font families */
  --font-family-display: "Field Gothic No.85 Bold XWide", "Archivo", system-ui, sans-serif;
  --font-family-body: "Field Gothic No.62 Regular", "Archivo", system-ui, sans-serif;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 700;
  --font-weight-bold: 900;

  /* Font sizes */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-48: 48px;
  --font-size-64: 64px;
  --font-size-72: 72px;

  /* Line heights (unitless — 110 = 1.1, use as multiplier or %) */
  --font-leading-tight: 1.10;
  --font-leading-snug: 1.25;
  --font-leading-normal: 1.50;
  --font-leading-relaxed: 1.65;

  /* Letter spacing (converted from Figma em units: value/1000 * 1em) */
  --font-tracking-tight: -0.002em;
  --font-tracking-normal: 0em;
  --font-tracking-wide: 0.005em;
  --font-tracking-wider: 0.010em;
  --font-tracking-display: 0.03em;
  /* display + heading classes — opens up the tight Field Gothic caps */

  /* ── Semantic tokens — Dark mode resolved ── */
  /* Each token aliases the primitive it references in Figma */

  /* Surfaces */
  --surface-primary: var(--color-neutral-1000);
  /* neutral/1000 */
  --surface-raised: var(--color-neutral-700);
  /* neutral/700  */
  --surface-sunken: var(--color-neutral-1000);
  /* neutral/1000 */

  /* Text */
  --text-primary: var(--color-neutral-0);
  /* neutral/0   */
  --text-secondary: var(--color-neutral-200);
  /* neutral/200 */
  --text-muted: var(--color-neutral-400);
  /* neutral/400 */
  --text-inverse: var(--color-neutral-1000);
  /* neutral/1000 */
  --text-accent: var(--color-red-base);
  /* red/base    */
  --text-on-accent: var(--color-neutral-0);
  /* neutral/0   */

  /* Borders */
  --border-subtle: var(--color-neutral-700);
  /* neutral/700 */
  --border-default: var(--color-neutral-500);
  /* neutral/500 */
  --border-strong: var(--color-neutral-200);
  /* neutral/200 */
  --border-focus: var(--color-red-base);
  /* red/base    */

  /* Accents */
  --accent-default: var(--color-red-base);
  /* red/base */
  --accent-hover: var(--color-red-base);
  /* red/base */
  --accent-pressed: var(--color-red-base);
  /* red/base */
  --accent-subtle: var(--color-red-base);
  /* red/base */

}

main {
  margin: 0 auto;
}

/* base.css — reset + element defaults + type style classes */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

html {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
  color: var(--text-primary);
  background: var(--color-cream-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Always show the scrollbar so opening a <dialog> never shifts page content */
  overflow-y: scroll;
  /* Leave room above any in-page anchor target so it lands below the floating header */
  scroll-padding-top: 60px;
}

.grecaptcha-badge {
  visibility: hidden;
}

body {
  min-height: 100vh;
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

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

a:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}


.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--space-8) var(--space-16);
  background: var(--accent-default);
  color: var(--text-on-accent);
  z-index: 9999;
}

.skip-link:focus {
  left: 0;
}

/* Sections are full-width by default; pages.css scopes inner layout */
.page {
  width: 100%;
}

/* Hidden page sections must stay hidden even when page-specific CSS sets display:flex etc. */
.page[hidden],
.pdp-add-cart[hidden],
.pdp__soi-total[hidden] {
  display: none !important;
}

/* ── Type style classes ── */
/* Source strings stay readable; CSS applies casing via text-transform.
   Mapped to actual numeric font-size tokens since Figma uses --font-size-N
   (12, 14, 16, 20, 24, 32, 48, 64, 72) rather than semantic size names. */

.display-xl {
  font-family: var(--font-family-display);
  font-size: var(--font-size-72);
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-1);
  text-transform: uppercase;
}

.display-lg {
  font-family: var(--font-family-display);
  font-size: var(--font-size-64);
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-1);
  text-transform: uppercase;
}

.heading-xl {
  font-family: var(--font-family-display);
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-tight);
  text-transform: uppercase;
}

.heading-lg {
  font-family: var(--font-family-display);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-snug);
  text-transform: uppercase;
}

.heading-md {
  font-family: var(--font-family-display);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-snug);
  text-transform: uppercase;
}

.heading-sm {
  font-family: var(--font-family-display);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-snug);
  text-transform: uppercase;
}

.body-lg {
  font-family: var(--font-family-body);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-1);
}

.body-md {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-14);
}

.body-sm {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-normal);
}

.caption {
  font-family: var(--font-family-body);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-snug);
}

.label-md {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  /* No text-transform — label/md is title case per spec */
}

.label-sm {
  font-family: var(--font-family-body);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
}

.label-sm-uppercase {
  font-family: var(--font-family-body);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-wider);
}

.contact__faq-intro .label-sm-uppercase {
  font-size: 16px;
}

.contact__faq-desc {
  font-size: 24px;
}

.amp {
  font-size: 1.18em;
  line-height: 0;
  vertical-align: -0.04em;
}

/* Breadcrumb current-page item: bold across the site */
[aria-current="page"] {
  font-weight: var(--font-weight-regular);
}

/* Visually hidden utility (used for screen-reader-only labels) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* components.css — UI component styles for York Barbell prototype */
/* Tasks E1–E4: Buttons, Form Fields, Product Card, Badges, Breadcrumbs */
/* All tokens reference /css/tokens.css — no invented token names */

/* ── Buttons ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--space-48);
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition:
    filter 0.15s ease,
    opacity 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-tight);
  text-transform: none;
  letter-spacing: var(--font-tracking-wider);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

.btn:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--accent-default);
  color: var(--text-on-accent);
  border-color: var(--accent-default);
}

.btn--primary:hover {
  filter: brightness(0.92);
  box-shadow: 0 4px 12px rgba(218, 41, 28, 0.25);
  transform: translateY(-1px);
}

.btn--primary:active {
  filter: brightness(0.85);
  transform: translateY(0);
  box-shadow: none;
}

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn--secondary:hover {
  border-color: var(--accent-default);
  color: var(--accent-default);
  background: rgba(218, 41, 28, 0.04);
}

.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: transparent;
}

.btn--ghost:hover {
  color: var(--text-accent);
}

.btn[disabled],
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Card hover: applied site-wide to all product/feature cards ── */
/* Subtle lift + shadow + accent border. Card is the container; clickable
   children (CTAs, links) handle their own focus/hover. */
.plp__card,
.pdp-single__rec-card,
.pdp__rec-card,
.collections-product-card,
.product-card,
.about__timeline-card,
.pdp__featured-card,
.pdp-generic__feature-card,
.pdp-single__product {
  transition:
    transform 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out,
    border-color 0.3s ease-in-out;
}

/* "You May Also Like" recommendation cards (.pdp__rec-card / .pdp-single__rec-card)
   intentionally omitted — no lift/shadow on hover (they keep border + image zoom). */
.plp__card:hover,
.collections-product-card:hover,
.product-card:hover,
.about__timeline-card:hover,
.pdp__featured-card:hover,
.pdp-single__product:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 16px 0 rgba(16, 24, 32, 0.2);
}

/* Red border + image zoom on hover are consolidated at the END of pages.css —
   they must out-specify the page-scoped base borders defined there, so they
   can't live here in components.css (which loads first). */

/* ── Form Fields ── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.field__label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-tight);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-wider);
}

.field__input,
.field__textarea,
.field__select {
  padding: var(--space-12) var(--space-16);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-normal);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.field__textarea {
  resize: vertical;
  min-height: 120px;
}

.field__input:focus,
.field__textarea:focus,
.field__select:focus {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
  border-color: var(--accent-default);
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--text-muted);
}

.field__hint {
  font-family: var(--font-family-body);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  color: var(--text-muted);
  line-height: var(--font-leading-normal);
}

.field--error .field__input,
.field--error .field__textarea,
.field--error .field__select {
  border-color: var(--text-accent);
}

.field--error .field__hint {
  color: var(--text-accent);
}

/* ── Product Card ── */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  text-decoration: none;
  color: inherit;
}

/* Stretched link: title anchor expands to cover the card so the whole card
   navigates to the PDP. The Add to Cart button stays interactive via z-index. */
.product-card__title-link {
  color: inherit;
  text-decoration: none;
}

.product-card__title-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.product-card__cta {
  position: relative;
  z-index: 1;
}

.product-card__image-wrap {
  position: relative;
  overflow: hidden;
  background: var(--color-cream-base);
  aspect-ratio: 1 / 1;
  width: 100%;
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease;
}

.product-card__badge {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.product-card__title {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-14);
  text-transform: capitalize;
  color: var(--text-primary);
}

.product-card__price {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-normal);
  color: var(--text-muted);
}

/* Strike-through (original) sits on the left of the sale price — across every product card variant */
.product-card__price--original,
.collections-product-card__price--original,
.pdp-single__rec-price--original,
.pdp__rec-price--original {
  order: 0;
}

.product-card__price--sale,
.collections-product-card__price--sale,
.pdp-single__rec-price--sale,
.pdp__rec-price--sale {
  order: 1;
}

/* Product-card image zoom-on-hover is handled by the consolidated card-hover
   block at the end of pages.css (replaces the old opacity dim). */

/* ── Badges ── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-family-body);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-wider);
  border-radius: 0;
  white-space: nowrap;
}

.badge--new {
  background: var(--accent-default);
  color: var(--text-on-accent);
}

.badge--bestseller {
  background: var(--color-cream-base);
  color: var(--color-neutral-1000);
}

/* ── Breadcrumbs ── */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-normal);
  color: var(--text-muted);
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.breadcrumbs__link {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumbs__link:hover {
  color: var(--text-primary);
}

.breadcrumbs__sep {
  color: var(--text-muted);
  user-select: none;
}

.breadcrumbs__current {
  color: var(--text-primary);
}

/* ── Modals ── */

.modal {
  border: 0;
  padding: 0;
  background: var(--surface-primary);
  color: var(--text-primary);
  max-width: 720px;
  width: calc(100% - var(--space-32));
  /* Smooth open/close transitions */
  opacity: 0;
  transition:
    opacity 0.25s ease,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    display 0.3s allow-discrete,
    overlay 0.3s allow-discrete;
}

.modal[open] {
  opacity: 1;
}

@starting-style {
  .modal[open] {
    opacity: 0;
  }
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition:
    opacity 0.25s ease,
    display 0.3s allow-discrete,
    overlay 0.3s allow-discrete;
}

.modal[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .modal[open]::backdrop {
    opacity: 0;
  }
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-24) var(--space-8);
}

.modal__header h2 {
  margin: 0;
}

.modal__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: var(--space-8);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal__close:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

.modal__body {
  padding: var(--space-16) var(--space-24) var(--space-32);
}

.modal--gallery {
  max-width: 95vw;
  max-height: 95vh;
  width: 95vw;
}

/* Centered gallery image modal — swipeable carousel with dots */
.modal--gallery-image {
  background: transparent;
  border: 0;
  padding: 0;
  max-width: 720px;
  width: 720px;
  max-height: 90vh;
  height: auto;
  transform: scale(0.96);
}

.modal--gallery-image[open] {
  transform: scale(1);
}

@starting-style {
  .modal--gallery-image[open] {
    transform: scale(0.96);
    opacity: 0;
  }
}

.modal--gallery-image::backdrop {
  background: rgba(16, 24, 32, 0.85);
}

.modal--gallery-image__carousel {
  position: relative;
  width: 100%;
  outline: none;
  touch-action: pan-y;
  user-select: none;
}

.modal--gallery-image__carousel img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.modal--gallery-image__slides {
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 844;
}

.modal--gallery-image__slide {
  position: absolute;
  inset: 0;
}

.modal--gallery-image__slide[hidden] {
  display: none;
}

.modal--gallery-image__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal--gallery-image__dots {
  position: absolute;
  left: 50%;
  bottom: var(--space-16);
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-8);
  z-index: 5;
}

.modal--gallery-image__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.modal--gallery-image__dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.modal--gallery-image__dot[aria-selected="true"] {
  background: var(--accent-default);
  transform: scale(1.2);
}

.modal--gallery-image__dot:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 4px;
}

.modal__close--gallery {
  position: fixed;
  top: var(--space-24);
  right: var(--space-24);
  z-index: 2;
  color: var(--color-neutral-0);
}

/* Side panel modal — full-screen scrim with cream panel pinned to the right */
.modal--side {
  /* Pin to the right edge of the viewport explicitly so the dialog can't
     fall back to the browser's default centering at any breakpoint. */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  margin: 0;
  width: 708px;
  max-width: 100%;
  height: 100vh;
  max-height: 100vh;
  background: var(--color-cream-base);
  color: var(--color-neutral-1000);
  overflow: hidden;
  transform: translateX(100%);
}

.modal--side[open] {
  transform: translateX(0);
}

@starting-style {
  .modal--side[open] {
    transform: translateX(100%);
  }
}

.modal--side::backdrop {
  background: rgba(16, 24, 32, 0.7);
}

.modal--side__inner {
  height: 100%;
  overflow-y: auto;
  /* Top: 24 (X top offset) + 24 (X icon height) + 24 (gap below X) = 72px */
  padding: 72px var(--space-32) var(--space-48);
}

.modal__close--side {
  position: absolute;
  top: var(--space-24);
  right: var(--space-24);
  z-index: 2;
  color: var(--color-neutral-1000);
}

.modal--side__heading {
  margin: 0 0 var(--space-32);
  font-family: var(--font-family-display);
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  line-height: var(--font-leading-tight);
  color: var(--color-neutral-1000);
}

.modal--side__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.modal--side__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.modal--side__subheader {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-1000);
}

.modal--side__section p {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
  color: var(--color-neutral-1000);
}

/* ── Reading-progress highlight: dim words until the scroll position passes them ── */
[data-typewriter] .reading-word {
  opacity: 0.25;
  transition: opacity 0.35s ease;
}

[data-typewriter] .reading-word.is-read {
  opacity: 1;
}

/* chrome.css — announcement bar */

.announcement-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-32);
  background: var(--accent-default);
  color: var(--text-on-accent);
  position: relative;
  min-height: 48px;
}

.announcement-bar[hidden] {
  display: none;
}

.announcement-bar__messages {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  min-height: 24px;
}

.announcement-bar__message {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-tracking-wider);
  line-height: var(--lh-normal);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.announcement-bar__message[hidden] {
  display: none;
}

.announcement-bar__nav {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.announcement-bar__nav:hover {
  opacity: 0.7;
}

.announcement-bar__nav:focus-visible {
  outline: 2px solid var(--color-neutral-0);
  outline-offset: 2px;
}

.chrome-top {
  position: relative;
  z-index: 100;
}

.site-header {
  position: absolute;
  top: 72px;
  left: var(--space-32);
  right: var(--space-32);
  margin-top: 0;
  transform: translate(0, 0);
  background: var(--surface-primary);
  z-index: 100;
}

.site-header.is-fixed {
  position: fixed;
  top: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  padding: var(--space-16) var(--space-24);
  gap: var(--space-24);
}

.site-nav__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.site-nav__logo img {
  height: 26px;
  width: auto;
}

.site-nav__hamburger {
  display: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: var(--space-8);
}

/* Nav links — pushed right via margin-left: auto (logo stays left, links + icons cluster right) */
.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin: 0 0 0 auto;
}

.site-nav__links a {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide);
  color: var(--text-primary);
  white-space: nowrap;
}

.site-nav__links a:hover {
  color: var(--text-accent);
}

.site-nav__links a[aria-expanded="true"] {
  color: var(--text-accent);
}

.site-nav__links a[aria-current="page"] {
  color: var(--text-accent);
}

.site-nav__links a:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 4px;
}

/* Icons cluster */
.site-nav__icons {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
}

.site-nav__icon-btn {
  background: transparent;
  border: 0;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  position: relative;
}

.site-nav__icon-btn:hover {
  color: var(--text-accent);
}

.site-nav__icon-btn:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

/* Cart button: icon + price text side-by-side (matches Figma layout) */
.site-nav__icon-btn--cart {
  gap: var(--space-8);
  position: relative;
}

/* Red dot with item count, overlaid on the top-right corner of the bag SVG.
   Desktop: SVG sits at x=8–28 inside the 8px-padded button; mobile: SVG at x=0–20 (no padding). */
.site-nav__cart-badge {
  position: absolute;
  top: -4px;
  left: 22px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent-default);
  color: var(--text-on-accent);
  font-family: var(--font-family-body);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

.site-nav__cart-badge[hidden] {
  display: none;
}

.site-nav__cart-total {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
}

.site-nav__icon-btn--cart:hover .site-nav__cart-total {
  color: var(--text-accent);
}

/* ── Dropdown menus (base) ── */

.dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--surface-primary);
  border-top: 1px solid var(--border-subtle);
  z-index: 99;
  overflow-y: auto;
  max-height: calc(100vh - 130px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition:
    opacity 200ms ease,
    transform 200ms ease,
    visibility 200ms ease;
}

.dropdown[hidden] {
  display: block;
}

.dropdown:not([hidden]) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .dropdown {
    transition: none;
    transform: none;
  }
}

.dropdown__inner {
  padding: var(--space-32) var(--space-24) 24px;
}

/* ── Mega dropdown: Shop by Goals (3 image cards) ── */

.mega-goals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

.mega-goal-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  position: relative;
  /* containing block for the stretched __link */
  cursor: pointer;
  /* hint that the entire card is clickable */
  transition: opacity 0.15s ease;
}

.mega-goal-card:hover {
  opacity: 0.92;
}

.mega-goal-card:hover .mega-goal-card__title {
  color: var(--text-accent);
}

/* Stretched-link pattern: the title's anchor expands to cover the entire card so
   clicking anywhere on the card (image, title, description) navigates. The CTA
   button still works on top because it has its own z-index above the stretched link. */
.mega-goal-card__link {
  color: inherit;
  text-decoration: none;
}

.mega-goal-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

.mega-goal-card__link:hover {
  color: var(--text-accent);
}

.mega-goal-card__link:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 4px;
}

.mega-goal-card__cta {
  position: relative;
  z-index: 2;
  /* keep the CTA button clickable on top of the stretched link */
}

.mega-goal-card__media {
  position: relative;
  aspect-ratio: 587 / 273;
  overflow: hidden;
  background: var(--color-neutral-700);
}

.mega-goal-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

.mega-goal-card__body {
  padding: var(--space-16) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  flex: 1;
}

.mega-goal-card__title {
  margin: 0;
  color: var(--text-primary);
}

.mega-goal-card__desc {
  margin: 0;
  color: var(--text-muted);
}

.mega-goal-card__cta {
  width: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Mega dropdown: Equipment (5-column link list) ── */

.mega-equipment {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 86px 0;
}

.mega-equipment__col {
  display: flex;
  flex-direction: column;
  padding-right: 16px;
  gap: var(--space-24);
}

.shop-all {
  width: 100%;
  height: 48px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  background: var(--accent-default);
  color: var(--text-on-accent);
  border-color: var(--accent-default);
  grid-column: 1 / -1;
}

.mega-equipment__heading {
  margin: 0;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide);
}

.mega-equipment__heading a {
  font-size: 16px;
}

.mega-equipment__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin: 0;
  padding: 0;
}

.mega-equipment__list a {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
  white-space: normal;
  line-height: var(--font-leading-snug);
}

.mega-equipment__list a:hover {
  color: var(--text-accent);
}

.mega-equipment__list a:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

/* ── Search overlay ── */

.search-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--surface-primary);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 999;
  height: 548px;
  overflow-y: auto;
}

.search-overlay[hidden] {
  display: none;
}

.search-overlay__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-32) var(--space-32) var(--space-48);
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.search-overlay__form {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.search-overlay__field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  background: var(--color-neutral-0);
  height: 48px;
  padding: 0 var(--space-16);
  color: var(--color-neutral-1000);
  transition: box-shadow 0.15s ease;
}

.search-overlay__field:hover,
.search-overlay__field:focus-within {
  box-shadow: 0 0 0 2px var(--accent-default);
}

.search-overlay__field svg {
  flex-shrink: 0;
  color: var(--color-neutral-1000);
}

.search-overlay__input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--color-neutral-1000);
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  outline: none;
  min-width: 0;
  height: 100%;
}

.search-overlay__close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-neutral-0);
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.search-overlay__close:hover {
  color: var(--text-accent);
}

.search-overlay__close:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

.search-overlay__popular {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.search-overlay__popular-title {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-0);
}

.search-overlay__popular-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.search-overlay__popular-list a {
  color: var(--color-neutral-0);
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  text-decoration: none;
}

.search-overlay__popular-list a:hover {
  color: var(--text-accent);
}

/* Typeahead results */
.search-overlay__results[hidden] {
  display: none;
}

.search-overlay__results {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.search-overlay__results-title {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-0);
}

.search-overlay__results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.search-overlay__result {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-8);
  margin: calc(var(--space-8) * -1);
  border-radius: 2px;
  text-decoration: none;
  color: var(--color-neutral-0);
  transition: background 0.15s ease;
}

.search-overlay__result:hover {
  background: rgba(255, 255, 255, 0.08);
}

.search-overlay__result-image {
  width: 48px;
  height: 48px;
  object-fit: cover;
  display: block;
}

.search-overlay__result-name {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  color: var(--color-neutral-0);
}

.search-overlay__result-price {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--color-neutral-0);
  text-transform: uppercase;
}

.search-overlay__results-all {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-0);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: var(--space-8);
}

.search-overlay__results-all:hover {
  color: var(--text-accent);
}

.search-overlay__no-results {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  color: var(--color-neutral-0);
}

/* ── Mobile drawer ── */

.mobile-drawer {
  position: fixed;
  inset: 0;
  background: var(--surface-primary);
  color: var(--text-primary);
  padding: var(--space-32) var(--space-24);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 300ms ease,
    visibility 300ms ease;
}

/* Override the UA `[hidden] { display:none }` so the off-screen drawer stays
   rendered and can transition. The `hidden` attribute is still the open/closed
   hook (toggled by chrome.js); visibility:hidden keeps it out of the a11y tree. */
.mobile-drawer[hidden] {
  display: flex;
}

.mobile-drawer:not([hidden]) {
  transform: translateX(0);
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer {
    transition: none;
  }
}

/* Header row: title left, close button right */
.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.mobile-drawer__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide);
  color: var(--text-primary);
  white-space: nowrap;
}

.mobile-drawer__close {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-drawer__close:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

/* Horizontal rules used as dividers */
.mobile-drawer__rule {
  border: 0;
  border-top: 1px solid #fff;
  margin: 0;
}

/* Primary nav list */
.mobile-drawer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-drawer__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: 32px 0 var(--space-16) 0;
}

.mobile-drawer__item:first-child {
  padding: 24px 0 var(--space-16) 0;
}

/* Large display link labels — Field Gothic Bold XWide, 32px, red */
.mobile-drawer__link {
  font-family: var(--font-family-display);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-tight);
  line-height: 1;
  color: var(--text-accent);
  text-decoration: none;
  display: block;
}

.mobile-drawer__link:hover,
.mobile-drawer__link:focus-visible {
  opacity: 0.8;
}

.mobile-drawer__link:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 4px;
}

/* Expandable "Shop Equipment" item */
.mobile-drawer__item--expandable .mobile-drawer__rule {
  margin-top: var(--space-16);
}

.mobile-drawer__expand-btn {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-16);
  text-align: left;
}

.mobile-drawer__expand-btn:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 4px;
}

.mobile-drawer__expand-icon {
  flex-shrink: 0;
  color: var(--text-primary);
  margin-top: var(--space-8);
  transition: transform 0.2s ease;
}

.mobile-drawer__expand-btn[aria-expanded="true"] .mobile-drawer__expand-icon {
  transform: rotate(45deg);
}

/* Subnav items — Field Gothic body, 16px, white */
.mobile-drawer__subnav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.mobile-drawer__subnav[hidden] {
  display: none;
}

.mobile-drawer__subnav--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12) var(--space-24);
}

.mobile-drawer__subnav a {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
  text-decoration: none;
}

.mobile-drawer__subnav a:hover,
.mobile-drawer__subnav a:focus-visible {
  color: var(--text-accent);
}

.mobile-drawer__subnav a:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

/* Secondary links (About, Contact, Blog) */
.mobile-drawer__secondary {
  list-style: none;
  margin: 32px 0 0 !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.mobile-drawer__secondary .mobile-drawer__item {
  padding: 0;
}

.mobile-drawer__secondary a {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
  text-decoration: none;
  text-transform: capitalize;
}

.mobile-drawer__secondary a:hover,
.mobile-drawer__secondary a:focus-visible {
  color: var(--text-accent);
}

.mobile-drawer__secondary a:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

/* Drawer footer: logo left, socials right */
.mobile-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-16);
}

.mobile-drawer__footer-logo img {
  height: 19px;
  width: auto;
}

.mobile-drawer__socials {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.mobile-drawer__socials a {
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.mobile-drawer__socials a:hover {
  color: var(--text-accent);
}

.mobile-drawer__socials a:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

/* ── Cart drawer ── */

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 100%;
  background: var(--surface-primary);
  color: var(--text-primary);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
  overflow: auto;
}

.cart-drawer__loader {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: .2s ease;
  z-index: 10;
}


.cart-drawer.is-loading .cart-drawer__loader {
  opacity: 1;
  visibility: visible;
}

.cart-item__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.cart-item .pdp__quantity-input {
  display: flex;
  padding: 8px;
  border: 1px solid var(--color-neutral-500);
  width: 88px;
}

.cart-item .quantity input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  color: #fff;
  padding: 0 var(--space-8);
  appearance: textfield;
}

.cart-item .pdp__quantity-input button {
  background: transparent;
  padding: 0;
  outline: 0;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  min-width: 16px;
}

.cart-drawer__loader span {
  width: 32px;
  height: 32px;
  border: 3px solid #ddd;
  border-top-color: #000;
  border-radius: 50%;
  animation: cart-spin .7s linear infinite;
}


@keyframes cart-spin {

  to {
    transform: rotate(360deg);
  }

}

.cart-drawer[hidden] {
  display: none;
}

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-16) 0;
}

.mini-cart__upsell-title {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  padding: 0 16px 8px;
  text-transform: uppercase;
}

.mini-cart__upsell-content {
  display: flex;
  gap: 10px;
  width: 100%;
}

.mini-cart__upsell-content h4 {
  margin: auto 0;
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  display: block;
  text-transform: uppercase;
  width: 100%;
}

.mini-cart__upsell-card a {
  flex: 1 0 auto;
}

.mini-cart__upsell-content span {
  font-size: 20px;
}

.js-upsell-add {
  height: 48px;
  width: 100%;
  background: rgba(218, 41, 28, 1);
  border: 0;
  border-radius: 0;
  outline: 0;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: #fff;
  cursor: pointer;
}

.mini-cart__totals {
  padding: 16px;
  background: rgba(251, 247, 235, 1);
  color: var(--color-neutral-1000);
}

.mini-cart__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.mini-cart__subtotal span {
  font-size: 20px;
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
}

.mini-cart__subtotal strong {
  font-size: 20px;
  text-transform: uppercase;
  font-weight: var(--font-weight-regular);
}

.mini-cart__totals p {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
}

.mini-cart__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.pdp-single__rec-prices {
  margin: auto 0 0 0;
}

.mini-cart__upsell-content del {
  display: none;
}

.pdp-generic__features-row {
  width: 100%;
  padding: var(--space-48) var(--space-24);
  display: grid;
  grid-template-columns: repeat(var(--pdp-generic-features-count, 4), 1fr);
  gap: var(--space-48);
}

.pdp-generic__features-row--three {
  width: 100%;
  padding: var(--space-48) var(--space-24);
  display: grid;
  grid-template-columns: repeat(var(--pdp-generic-features-count, 3), 1fr);
  gap: var(--space-48);
}

.pdp-generic__features-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  text-align: center;
}

.pdp-single .pdp-single__product-text {
  height: 100%;
  flex: 1;
}

.pdp-single .pdp-single__product-text p {
  margin: auto 0 0 0;
}

.pdp-generic__features-item p {
  margin: auto 0 0 0;
}

.pdp-generic__features-item h1,
.pdp-generic__features-item h2,
.pdp-generic__features-item h3,
.pdp-generic__features-item h4,
.pdp-generic__features-item h5,
.pdp-generic__features-item h6 {
  margin: 0;
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  line-height: var(--lh-1);
}

.pdp__weight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 16px;
  background: transparent;
  gap: 16px 24px;
  border: 1px solid var(--color-neutral-1000);
}

.pdp__weight-stepper {
  display: flex;
  padding: 10px;
  width: 88px;
  border: 1px solid var(--color-neutral-500);
}

.pdp__weight-qty {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 0;
  background: transparent;
}

.pdp-page .pdp__soi .pdp__weight-grid {
  padding: 0;
  border: 0;
}

.beginners-page {
  overflow-x: clip !important;
}

.pdp__weight-price {
  color: #DA291C;
  font-weight: var(--font-weight-semibold);
  flex: 1 0 auto;
}

.beginners-page .plp__container {
  padding: var(--space-48) 32px !important;
}

.pdp__weight-stepper {
  margin: 0 0 0 auto;
}

.pdp-add-cart {
  margin-top: 8px;
}

.pdp__weight-btn {
  padding: 0;
  background: transparent;
  outline: 0;
  border: 0;
  cursor: pointer;
  padding: 0;
  color: rgba(16, 24, 32, 1);
}

.pdp__weight-selector {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pdp__weight-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.js-close-cart {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  height: 48px;
  border: 2px solid rgba(16, 24, 32, 1);
  outline: none;
  background: transparent;
  cursor: pointer;
  color: rgba(16, 24, 32, 1);
}

.button--red {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  height: 48px;
  border: 0;
  outline: none;
  background: rgba(218, 41, 28, 1);
  color: #fff;
}

.cart-drawer__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--text-primary);
}

.cart-drawer__close {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cart-drawer__close:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

.cart-drawer__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  overflow: auto;
  min-height: 150px;
  padding: 0 var(--space-16) var(--space-16);
}

.cart-item__image {
  aspect-ratio: 96/130;
  max-width: 96px;
}

.cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item__top {
  display: flex;
  gap: 10px;
}

.cart-item__top h3 {
  width: 100%;
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.mini-cart__footer {
  margin: auto 0 0 0;
}

.mini-cart__upsell {
  background: rgba(43, 50, 58, 1);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mini-cart__upsell-card {
  display: flex;
  gap: 16px;
}

.mini-cart__upsell-card img {
  aspect-ratio: 1/1;
  width: 96px;
  height: 96px;
  object-fit: cover;
}

.cart-item__top span {
  font-size: 20px;
}

.cart-item {
  display: flex;
  gap: 16px;
}

.cart-drawer__empty {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  color: var(--text-muted);
}

/* ── Site Footer ── */

.site-footer {
  position: relative;
  background: var(--surface-primary);
  color: var(--text-primary);
  padding: var(--space-32) 0;
}

.site-footer__inner {
  padding: 0 var(--space-32);
  display: grid;
  grid-template-columns: 518px 1fr;
  gap: 105px;
  align-items: start;
}

/* ── Left column ── */

.site-footer__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.site-footer__brand img {
  height: 26px;
  width: auto;
}

/* Newsletter */
.site-footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.site-footer__newsletter-heading {
  font-family: var(--font-family-body);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0;
  line-height: var(--font-leading-tight);
}

.site-footer__newsletter-body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
  margin: 0;
  line-height: var(--font-leading-normal);
  margin-bottom: 8px;
}

.site-footer__newsletter form label {
  gap: 16px;
  position: relative;
  font-weight: var(--font-weight-bold);
}

.site-footer__newsletter form {
  max-width: 360px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.site-footer__newsletter form input {
  background: transparent;
  border: 1px solid #5D5D5D;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  height: 48px;
  color: #B2B2B2;
}

.site-footer__newsletter .cf7-submit-custom {
  position: absolute;
  top: 54px;
  right: 18px;
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
  z-index: 9;
}

.site-footer__signup-form {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-8);
  gap: var(--space-16);
}

.site-footer__email-label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  text-transform: capitalize;
}

.site-footer__input-row {
  display: flex;
  align-items: center;
  border: 1px solid var(--text-primary);
  height: 48px;
  width: 361px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-footer__input-row:hover,
.site-footer__input-row:focus-within {
  border-color: var(--accent-default);
  box-shadow: 0 0 0 1px var(--accent-default);
}

.site-footer__email-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0 var(--space-16);
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--text-primary);
  height: 100%;
}

.site-footer__email-input::placeholder {
  color: var(--text-muted);
}

.site-footer__email-input:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: -2px;
}

.site-footer__submit-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-primary);
  padding: 0 var(--space-12);
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.site-footer__submit-btn:hover {
  color: var(--text-accent);
}

.site-footer__submit-btn:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

/* Address block */
.site-footer__address {
  margin-top: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.5;
}

.site-footer__address p {
  line-height: 1.5;
}

.site-footer__address strong {
  line-height: 1.5;
  font-weight: var(--font-weight-bold);
  display: block;
  margin-bottom: -20px;
}

.site-footer__contact {
  margin-top: var(--space-24);
}


/* Bottom row: copyright + socials */
.site-footer__bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-top: var(--space-24);
}

.site-footer__copyright {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.site-footer__social {
  display: flex;
  gap: var(--space-8);
  margin: 0;
}

.site-footer__social a {
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.site-footer__social a:hover {
  color: var(--text-accent);
}

.site-footer__social a:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

/* ── Right column ── */

.site-footer__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  align-items: stretch;
}

.site-footer__nav-columns {
  display: flex;
  gap: var(--space-24);
  align-items: flex-start;
  justify-content: flex-start;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  min-width: 120px;
}

.site-footer__col-heading {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0;
  line-height: var(--font-leading-snug);
}

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin: 0;
}

.site-footer__col a {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
  line-height: var(--font-leading-normal);
}

.site-footer__col a:hover {
  color: var(--text-accent);
}

.site-footer__col a:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

/* Back to top — anchored to the footer (full viewport width) so it sits at the
   right viewport edge, past where the Policies column ends. */
.site-footer__back-to-top {
  position: absolute;
  top: var(--space-32);
  right: var(--space-32);
  display: flex;
  justify-content: flex-end;
}

.site-footer__back-top-link {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer__back-top-link:hover {
  color: var(--text-accent);
}

.site-footer__back-top-link:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

/* pages.css — per-page styles, scoped under section IDs */

/* ── Non-home pages: clear the floating nav ──
   Nav floats 24px below the announcement bar, is ~58px tall.
   Pages without a hero need padding-top to keep content clear of the nav.
   Formula: nav-top-gap (24px) + nav-height (~58px) + breathing-room (24px) = 106px */
.page:not(#page-home) {
  padding-top: calc(var(--space-24) + 58px + var(--space-24));
}

/* Home page: hero fills edge-to-edge, nav floats on top — no extra padding needed.
   Background is cream so all sections below the hero sit on cream by default. */
#page-home {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-cream-base);
}

#page-home>.home__hero,
#page-home>section {
  width: 100%;
}

/* Vertical rhythm between sections — Figma uses 148px on desktop, 64px on mobile */
#page-home>*+* {
  margin-top: var(--space-148);
}

/* ── Home: Hero ── */

#page-home .home__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 636;
  min-height: 636px;
  /* fallback for browsers that don't support aspect-ratio */
  overflow: hidden;
  background: var(--color-neutral-1000);
  /* Hero is the first child — override the section spacing that would add margin-top */
  margin-top: 0 !important;
}

/* Slides — stacked absolute */
#page-home .home__hero-slides {
  position: absolute;
  inset: 0;
}

#page-home .home__hero-slide {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.5s ease;
}

#page-home .home__hero-slide[hidden] {
  opacity: 0;
  display: block;
  /* override hidden's display:none so opacity transition can happen */
  pointer-events: none;
}

/* picture must not create a new stacking context that pushes content out of flow */
#page-home .home__hero-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

#page-home .home__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
  /* override base.css img rule so image fills the hero */
}

/* Gradient overlay: transparent on right, darkening on left — matches Figma desktop */
#page-home .home__hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  pointer-events: none;
}

#page-home .home__hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-16);
  padding: 0 var(--space-32) var(--space-64);
  z-index: 4;
}

/* Dot indicators */
#page-home .home__hero-dots {
  position: absolute;
  bottom: var(--space-24);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-16);
  z-index: 5;
}

#page-home .home__hero-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-cream-base);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

#page-home .home__hero-dot:hover {
  opacity: 0.8;
}

#page-home .home__hero-dot[aria-selected="true"] {
  background: var(--accent-default);
}

#page-home .home__hero-dot:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 4px;
}

#page-home .home__hero-heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-tight);
  text-transform: uppercase;
  color: var(--text-primary);
  width: 100%;
  max-width: 699px;
  margin: 0;
  line-height: var(--lh-1);
}

#page-home .home__hero-subhead {
  width: 100%;
  max-width: 699px;
  color: var(--text-primary);
  margin: 0;
}

#page-home .home__hero-actions {
  display: flex;
  gap: var(--space-16);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}


/* ── Home: Goals ── */

#page-home .home__goals {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Override the global 148px home-section gap; the section uses its own internal padding */
  margin-top: 0;
}

#page-home .home__goals-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-32);
  background: var(--color-neutral-1000);
}

#page-home .home__goals-heading {
  margin: 0;
  flex: 1;
  max-width: 1100px;
  color: var(--text-accent);
  font-size: var(--font-size-72);
  line-height: var(--lh-1);
}


#page-home .home__goals-cta {
  flex-shrink: 0;
  margin-top: var(--space-16);
}

#page-home .home__goals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
}

#page-home .goal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-neutral-0);
  color: var(--color-neutral-1000);
  cursor: pointer;
}

#page-home .goal-card:nth-child(1):after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--color-neutral-100);
}

#page-home .goal-card:nth-child(3):after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--color-neutral-100);
}

#page-home .goal-card__header {
  padding: var(--space-24) var(--space-32) var(--space-44);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  flex: 1;
}

#page-home .goal-card__title {
  margin: 0;
  color: var(--color-neutral-1000);
  transition: color 0.2s ease;
  font-size: var(--font-size-32);
  line-height: var(--lh-1);
}

#page-home .goal-card:hover .goal-card__title {
  color: var(--text-accent);
}

#page-home .goal-card__desc {
  margin: 0;
  color: var(--color-neutral-1000);
}


#page-home .goal-card__media {
  display: flex;
  flex-direction: column;
  aspect-ratio: 640/391;
}

#page-home .goal-card__image-wrap {
  display: flex;
  padding: var(--space-0, 0);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-0, 0);
  flex: 1 0 0;
  align-self: stretch;
  overflow: hidden;
}

#page-home .goal-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
  transition: transform 0.4s ease;
  transform: scale(1.01);
}

#page-home .goal-card:hover .goal-card__image {
  transform: scale(1.05);
}

#page-home .goal-card__cta {
  width: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  text-transform: capitalize;
}

#page-home .goal-card:hover .goal-card__cta {
  filter: brightness(0.92);
  box-shadow: 0 4px 12px rgba(218, 41, 28, 0.25);
  transform: translateY(-1px);
}

#page-home .home__history {
  background: var(--color-cream-base);
  color: var(--color-neutral-1000);
  position: relative;
  overflow-x: clip;
}

#page-home .home__history-inner {
  position: relative;
  padding: 0 var(--space-32);
}

#page-home .home__history-content {
  position: relative;
  z-index: 2;
  max-width: 1091px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-bottom: var(--space-64);
}

#page-home .home__history-heading {
  margin: 0;
  color: var(--text-accent);
}

/* Year keeps a stable width while counting down so the line doesn't jitter */
#page-home .home__history-year {
  font-variant-numeric: tabular-nums;
}

/* Typing caret on the second line (added by JS only while it types itself on) */
#page-home .home__history-line2.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 0.82em;
  margin-left: 0.04em;
  background: currentColor;
  vertical-align: baseline;
}

#page-home .home__history-body {
  margin: 0;
  max-width: 815px;
  font-family: var(--font-family-body);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-1125);
  color: var(--color-neutral-1000);
}

#page-home .home__history-cta {
  align-self: flex-start;
  background: transparent;
  color: var(--color-neutral-1000);
  border-color: var(--color-neutral-1000);
  height: 43px;
}

#page-home .home__history-cta:hover {
  background: var(--color-neutral-1000);
  color: var(--color-neutral-0);
}

#page-home .home__history-decoration-frame {
  display: contents;
}

#page-home .home__history-decoration {
  position: absolute;
  left: 50%;
  margin-left: 334px;
  top: -103px;
  width: 743px;
  height: 743px;
  object-fit: cover;
  transform: rotate(-30deg);
  z-index: 1;
  pointer-events: none;
  max-width: none;
  animation: home-history-spin 40s linear infinite;
}

@keyframes home-history-spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-home .home__history-decoration {
    animation: none;
  }
}

/* Bottom divider */
#page-home .home__history-divider {
  border: 0;
  border-top: 1px solid var(--color-neutral-1000);
  margin: 0 var(--space-32);
  max-width: 815px;
  margin-bottom: 8px;
}

#page-home .home__bestsellers {
  position: relative;
  padding: var(--space-148) var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  color: var(--color-neutral-1000);
  margin-top: 0;
  overflow: hidden;
}

#page-home .home__bestsellers::before {
  content: "";
  position: absolute;
  top: 144px;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(/wp-content/uploads/2026/07/aa298318589bc1e363dde231ed33ce439e405a82-e17854252085522.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

#page-home .home__bestsellers>* {
  position: relative;
  z-index: 1;
}

#page-home .home__bestsellers-header {
  max-width: 1075px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

#page-home .home__bestsellers-heading {
  margin: 0;
  color: var(--color-neutral-1000);
}

#page-home .home__bestsellers-subhead {
  margin: 0;
  color: var(--color-neutral-1000);
  max-width: 801px;
}

#page-home .home__bestsellers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
  margin-top: 40px;
}

#page-home .home__bestsellers-grid .product-card {
  padding: var(--space-24);
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-1000);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

#page-home .home__bestsellers-grid .product-card__media {
  position: relative;
  aspect-ratio: 398 / 317;
  overflow: hidden;
}

#page-home .home__bestsellers-grid .product-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#page-home .home__bestsellers-grid .product-card__badge {
  position: absolute;
  top: 21px;
  right: 17px;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  background: var(--accent-default);
  color: var(--text-on-accent);
  padding: var(--space-8) var(--space-16);
  font-family: var(--font-family-body);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
}

#page-home .home__bestsellers-grid .product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 1;
}

#page-home .home__bestsellers-grid .product-card__title {
  margin: 0;
  color: var(--color-neutral-1000);
  font-weight: var(--font-weight-semibold);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#page-home .home__bestsellers-grid .product-card__prices {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  margin: auto 0 0 0;
}

#page-home .home__bestsellers-grid .product-card__price {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  color: var(--color-neutral-1000);
}

#page-home .home__bestsellers-grid .product-card__price--original {
  text-decoration: line-through;
}

.collections-product-card__price--sale,
.pdp-single__rec-price--sale {
  color: var(--accent-default) !important;
}

#page-home .home__bestsellers-grid .product-card__price--sale {
  color: var(--accent-default);
}

#page-home .home__bestsellers-grid .product-card__cta {
  width: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

#page-home .home__bestsellers-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
}

#page-home .home__bestsellers-shop-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  color: var(--color-neutral-1000);
}

#page-home .home__bestsellers-shop-all:hover {
  color: var(--text-accent);
}

#page-home .home__bestsellers-shop-all svg {
  transition: transform 0.15s ease;
}

#page-home .home__bestsellers-shop-all:hover svg {
  transform: translateX(4px);
}

/* ── Home: Blog ── */

#page-home .home__blog {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: var(--color-cream-base);
  margin-top: 0;
}

/* Right-half image fills its grid cell edge-to-edge. */
#page-home .home__blog-image-wrapper {
  order: 2;
  overflow: hidden;
  position: relative;
}

#page-home .home__blog-image {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border: 0;
}

/* Left-half red callout — heading + body + CTAs. */
#page-home .home__blog-callout {
  order: 1;
  background: var(--accent-default);
  color: var(--text-on-accent);
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-24);
}

#page-home .home__blog-heading {
  margin: 0;
  color: var(--text-on-accent);
}

#page-home .home__blog-copy {
  margin: 0;
  color: var(--text-on-accent);
}

#page-home .home__blog-ctas {
  display: flex;
  gap: 16px;
  margin-top: 104px;
  justify-content: space-between;
}

.home__blog-ctas--link {
  text-transform: uppercase;
  font-size: 16px;
  transition: .4s;
}

.home__blog-ctas--link:hover {
  opacity: 0.85;
}

#page-home .home__blog-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide);
  color: var(--text-on-accent);
  text-decoration: none;
}

#page-home .home__blog-cta:hover {
  opacity: 0.85;
}

#page-home .home__blog-cta svg {
  transition: transform 0.15s ease;
}

#page-home .home__blog-cta:hover svg {
  transform: translateX(4px);
}

/* White-outline secondary button on the red blog callout */
#page-home .home__blog-callout .btn--secondary {
  border-color: var(--color-neutral-0);
  color: var(--color-neutral-0);
  background: transparent;
}

#page-home .home__blog-callout .btn--secondary:hover {
  background: var(--color-neutral-0);
  color: var(--accent-default);
  border-color: var(--color-neutral-0);
}


#page-collections-beginner:not([hidden]) {
  padding-top: 0;
  background: var(--color-cream-base);
  display: flex;
  flex-direction: column;
}

/* Hero — exact same pattern as home hero: relative container → absolute media wrapper → normal-flow image */
#page-collections-beginner .collections-beginner__hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 1920 / 748;
  min-height: 748px;
  overflow: hidden;
  background: var(--color-neutral-1000);
}

/* Absolute wrapper fills the hero container — image lives in normal flow inside it.
   This mirrors home__hero-slides / home__hero-slide so the image reliably fills 100% width. */
#page-collections-beginner .collections-beginner__hero-media {
  position: absolute;
  inset: 0;
  display: block;
}

#page-collections-beginner .collections-beginner__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
  transform: scale(1.3);
  transform-origin: center;
}

#page-collections-beginner .collections-beginner__breadcrumbs {
  position: absolute;
  top: calc(var(--space-24) + 58px + var(--space-24) + var(--space-32));
  /* below the floating nav */
  left: var(--space-32);
  z-index: 2;
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--text-primary);
}

#page-collections-beginner .collections-beginner__breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

#page-collections-beginner .collections-beginner__breadcrumbs a {
  color: var(--text-primary);
  text-decoration: none;
}

#page-collections-beginner .collections-beginner__breadcrumbs a:hover {
  color: var(--text-accent);
}

#page-collections-beginner .collections-beginner__breadcrumbs [aria-current="page"] {
  font-weight: var(--font-weight-semibold);
}

#page-collections-beginner .collections-beginner__breadcrumbs [aria-hidden="true"] {
  opacity: 0.5;
}

#page-collections-beginner .collections-beginner__hero-slogan {
  position: absolute;
  bottom: var(--space-64);
  left: var(--space-32);
  right: var(--space-32);
  max-width: 898px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

#page-collections-beginner .collections-beginner__hero-heading {
  margin: 0;
  color: var(--text-primary);
  line-height: var(--font-leading-tight);
}

#page-collections-beginner .collections-beginner__hero-desc {
  margin: 0;
  color: var(--text-primary);
  max-width: 700px;
}

#page-collections-beginner .collections-beginner__hero-cta {
  align-self: flex-start;
  margin-top: var(--space-8);
}

/* Intro section — cream bg, centered heading + body, 148px top padding */
#page-collections-beginner .collections-beginner__intro {
  background: var(--color-cream-base);
  padding: var(--space-148) var(--space-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  text-align: center;
}

#page-collections-beginner .collections-beginner__intro-heading {
  margin: 0;
  color: var(--text-accent);
  max-width: 1200px;
}

#page-collections-beginner .collections-beginner__intro-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: 660px;
  color: var(--color-neutral-1000);
}

#page-collections-beginner .collections-beginner__intro-body p {
  margin: 0;
}


/* ── Beginner's Collection: Feature row ── */
#page-collections-beginner .collections-beginner__feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 648px;
  background: var(--accent-default);
}

#page-collections-beginner .collections-beginner__feature-media {
  position: relative;
  background: var(--color-neutral-1000);
  overflow: hidden;
}

#page-collections-beginner .collections-beginner__feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

#page-collections-beginner .collections-beginner__feature-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-24);
  padding: var(--space-48);
  color: var(--text-on-accent);
}

#page-collections-beginner .collections-beginner__feature-step {
  color: var(--text-on-accent);
  opacity: 0.85;
}

#page-collections-beginner .collections-beginner__feature-heading {
  margin: 0;
  color: var(--text-on-accent);
}

#page-collections-beginner .collections-beginner__feature-body {
  margin: 0;
  color: var(--text-on-accent);
  max-width: 700px;
}

/* ── Beginner's Collection: Products row ── */
#page-collections-beginner .collections-beginner__products {
  background: var(--color-cream-base);
  padding: var(--space-48) var(--space-32);
  display: grid;
  grid-template-columns: 293px 1fr;
  gap: var(--space-64);
  color: var(--color-neutral-1000);
}

#page-collections-beginner .collections-beginner__products-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

#page-collections-beginner .collections-beginner__products-category {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide);
}

#page-collections-beginner .collections-beginner__products-subcats {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

#page-collections-beginner .collections-beginner__products-subcats a {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--color-neutral-1000);
}

#page-collections-beginner .collections-beginner__products-subcats a:hover {
  color: var(--text-accent);
}

#page-collections-beginner .collections-beginner__products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

/* Product card */
#page-collections-beginner .collections-product-card {
  background: var(--color-neutral-0);
  display: flex;
  flex-direction: column;
}

#page-collections-beginner .collections-product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-neutral-0);
  padding: var(--space-16);
}

#page-collections-beginner .collections-product-card__badge {
  position: absolute;
  top: calc(var(--space-16) + var(--space-8));
  right: calc(var(--space-16) + var(--space-8));
  display: inline-flex;
  background: var(--accent-default);
  color: var(--text-on-accent);
  padding: var(--space-8) var(--space-16);
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

#page-collections-beginner .collections-product-card__body {
  padding: 0 var(--space-16) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 1;
}

#page-collections-beginner .collections-product-card__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-1000);
  line-height: var(--font-leading-snug);
}

#page-collections-beginner .collections-product-card__prices {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
}

#page-collections-beginner .collections-product-card__price {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--color-neutral-1000);
}

#page-collections-beginner .collections-product-card__price--sale {
  font-weight: var(--font-weight-semibold);
}

#page-collections-beginner .collections-product-card__price--original {
  color: var(--color-neutral-500);
  text-decoration: line-through;
}

#page-collections-beginner .collections-product-card__cta {
  width: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  margin-top: auto;
}

#page-collections-beginner .collections-beginner__feature--reverse .collections-beginner__feature-media {
  order: 2;
}

#page-collections-beginner .collections-beginner__feature--reverse .collections-beginner__feature-content {
  order: 1;
}

#page-collections-beginner .collections-beginner__closer {
  background: var(--color-cream-base);
}

#page-collections-beginner .collections-beginner__closer-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-64);
  padding: var(--space-148) var(--space-32) var(--space-64);
  color: var(--color-neutral-1000);
}

#page-collections-beginner .collections-beginner__closer-heading {
  margin: 0;
  color: var(--color-neutral-1000);
  max-width: 600px;
}

#page-collections-beginner .collections-beginner__closer-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
}

#page-collections-beginner .collections-beginner__closer-info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

#page-collections-beginner .collections-beginner__closer-info-heading {
  margin: 0;
  color: var(--color-neutral-1000);
  text-transform: none;
}

#page-collections-beginner .collections-beginner__closer-info-body {
  margin: 0;
  color: var(--color-neutral-1000);
}

#page-collections-beginner .collections-beginner__closer-photo {
  position: relative;
  width: 100%;
  height: 288px;
  overflow: hidden;
  background: var(--color-neutral-1000);
}

#page-collections-beginner .collections-beginner__closer-photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

.muscle-page {
  background: var(--color-cream-base);
  margin: 0;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.muscle-page .collections-muscle__hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 1920 / 748;
  min-height: 748px;
  overflow: hidden;
  background: var(--color-neutral-1000);
}

.muscle-page .collections-muscle__hero-media {
  position: absolute;
  inset: 0;
  display: block;
}

.muscle-page .collections-muscle__hero-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  z-index: 0;
  transform: scale(1.9);
  transform-origin: center;
}

/* Gradient overlay: dark on left fading to transparent on right — for text readability */
.muscle-page .collections-muscle__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}

.muscle-page .collections-muscle__breadcrumbs {
  position: absolute;
  top: calc(var(--space-24) + 58px + var(--space-24) + var(--space-32));
  left: var(--space-32);
  z-index: 2;
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--text-primary);
}

.muscle-page .collections-muscle__breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.muscle-page .collections-muscle__breadcrumbs a {
  color: var(--text-primary);
  text-decoration: none;
}

.muscle-page .collections-muscle__breadcrumbs a:hover {
  color: var(--text-accent);
}

.muscle-page .collections-muscle__breadcrumbs [aria-current="page"] {
  font-weight: var(--font-weight-semibold);
}

.muscle-page .collections-muscle__breadcrumbs [aria-hidden="true"] {
  opacity: 0.5;
}

.muscle-page .collections-muscle__hero-slogan {
  position: absolute;
  bottom: var(--space-64);
  left: var(--space-32);
  right: var(--space-32);
  max-width: 898px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.muscle-page .collections-muscle__hero-heading {
  margin: 0;
  color: var(--text-primary);
  line-height: var(--font-leading-tight);
}

.muscle-page .collections-muscle__hero-desc {
  margin: 0;
  color: var(--text-primary);
  max-width: 700px;
}

.muscle-page .collections-muscle__hero-cta {
  align-self: flex-start;
  margin-top: var(--space-8);
}

/* Intro section */
.muscle-page .collections-muscle__intro {
  background: var(--color-cream-base);
  padding: var(--space-148) var(--space-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}

.muscle-page .collections-muscle__intro-heading {
  margin: 0;
  color: var(--text-accent);
  max-width: 1200px;
}

.muscle-page .collections-muscle__intro-subhead {
  margin: 0;
  color: var(--color-neutral-1000);
  max-width: 700px;
}

.muscle-page .collections-muscle__intro-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: 1100px;
  color: var(--color-neutral-1000);
  margin-top: var(--space-12);
}

.muscle-page .collections-muscle__intro-body p {
  margin: 0;
}

/* Feature row */
.muscle-page .collections-muscle__feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 648px;
  background: var(--accent-default);
}

.muscle-page .collections-muscle__feature-media {
  position: relative;
  background: var(--color-neutral-1000);
  overflow: hidden;
}

.muscle-page .collections-muscle__feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

.muscle-page .collections-muscle__feature-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-24);
  padding: var(--space-48);
  color: var(--text-on-accent);
}

.muscle-page .collections-muscle__feature-step {
  color: var(--text-on-accent);
  opacity: 0.85;
}

.muscle-page .collections-muscle__feature-heading {
  margin: 0;
  color: var(--text-on-accent);
}

.muscle-page .collections-muscle__feature-body {
  margin: 0;
  color: var(--text-on-accent);
  max-width: 700px;
}

/* Products row */
.muscle-page .collections-muscle__products {
  background: var(--color-cream-base);
  padding: var(--space-48) var(--space-32);
  display: grid;
  grid-template-columns: 293px 1fr;
  gap: var(--space-64);
  color: var(--color-neutral-1000);
}

.muscle-page .collections-muscle__products-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.muscle-page .collections-muscle__products-category {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide);
}

.muscle-page .collections-muscle__products-subcats {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.muscle-page .collections-muscle__products-subcats a {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--color-neutral-1000);
}

.muscle-page .collections-muscle__products-subcats a:hover {
  color: var(--text-accent);
}

.muscle-page .collections-muscle__products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

/* Product cards */
.muscle-page .collections-product-card {
  position: relative;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-1000);
  display: flex;
  flex-direction: column;
}

/* Filtered cards: needed because display:flex above wins over [hidden]'s default display:none */
.muscle-page .collections-product-card[hidden] {
  display: none;
}

/* Stretched link: title anchor expands to cover the card (PDP link). CTA stays on top via z-index. */
.muscle-page .collections-product-card__title-link {
  color: inherit;
  text-decoration: none;
}

.muscle-page .collections-product-card__title-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.muscle-page .collections-product-card__cta {
  position: relative;
  z-index: 1;
}

.muscle-page .collections-muscle__products-subcats a.is-active {
  color: var(--text-accent);
  font-weight: var(--font-weight-semibold);
}

.muscle-page .collections-product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-neutral-0);
  padding: var(--space-16);
  overflow: hidden;
}

.muscle-page .collections-product-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

.muscle-page .collections-product-card__badge {
  position: absolute;
  top: calc(var(--space-16) + var(--space-8));
  right: calc(var(--space-16) + var(--space-8));
  display: inline-flex;
  background: var(--accent-default);
  color: var(--text-on-accent);
  padding: var(--space-8) var(--space-16);
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.muscle-page .collections-product-card__body {
  padding: 0 var(--space-16) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 1;
}

.muscle-page .collections-product-card__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-1000);
  line-height: var(--font-leading-snug);
}

.muscle-page .collections-product-card__prices {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
}

.muscle-page .collections-product-card__price {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--color-neutral-1000);
}

.muscle-page .collections-product-card__price--sale {
  font-weight: var(--font-weight-semibold);
}

.muscle-page .collections-product-card__price--original {
  color: var(--color-neutral-500);
  text-decoration: line-through;
}

.muscle-page .collections-product-card__cta {
  width: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  margin-top: auto;
}

.muscle-page .collections-muscle__feature--reverse .collections-muscle__feature-media {
  order: 2;
}

.muscle-page .collections-muscle__feature--reverse .collections-muscle__feature-content {
  order: 1;
}

.muscle-page .collections-muscle__footer-cta {
  background: var(--color-cream-base);
  padding: var(--space-148) var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  color: var(--color-neutral-1000);
}

.muscle-page .collections-muscle__footer-cta-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 1310px;
}

.muscle-page .collections-muscle__footer-cta-heading {
  margin: 0;
  color: var(--color-neutral-1000);
}

.muscle-page .collections-muscle__footer-cta-subhead {
  margin: 0;
  color: var(--color-neutral-1000);
  max-width: 800px;
}

.muscle-page .collections-muscle__footer-cta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
}

.muscle-page .collections-muscle__closer {
  background: var(--color-cream-base);
}

.muscle-page .collections-muscle__closer-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-64);
  padding: var(--space-148) var(--space-32) var(--space-64);
  color: var(--color-neutral-1000);
}

.muscle-page .collections-muscle__closer-heading {
  margin: 0;
  color: var(--color-neutral-1000);
  max-width: 600px;
}

.muscle-page .collections-muscle__closer-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
}

.muscle-page .collections-muscle__closer-info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.muscle-page .collections-muscle__closer-info-heading {
  margin: 0;
  color: var(--color-neutral-1000);
  text-transform: none;
}

.muscle-page .collections-muscle__closer-info-body {
  margin: 0;
  color: var(--color-neutral-1000);
}

.muscle-page .collections-muscle__closer-photo {
  position: relative;
  width: 100%;
  height: 288px;
  overflow: hidden;
  background: var(--color-neutral-1000);
}

.muscle-page .collections-muscle__closer-photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

.beginners-page {
  background: var(--color-cream-base);
  margin: 0;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.beginners-page .collections-beginner__hero {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 1920 / 748;
  min-height: 748px;
  overflow: hidden;
  background: var(--color-neutral-1000);
}

.beginners-page .collections-beginner__hero-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  z-index: 0;
  transform: scale(1);
  transform-origin: center;
}

/* Gradient overlay: dark on left, transparent on right — for text readability */
.beginners-page .collections-beginner__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}

.beginners-page .collections-beginner__breadcrumbs {
  position: absolute;
  top: calc(var(--space-24) + 58px + var(--space-24) + var(--space-32));
  left: var(--space-32);
  z-index: 2;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  color: var(--text-primary);
}

.beginners-page .collections-beginner__breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.beginners-page .collections-beginner__breadcrumbs a {
  color: var(--text-primary);
  text-decoration: none;
}

.beginners-page .collections-beginner__breadcrumbs a:hover {
  color: var(--text-accent);
}

.beginners-page .collections-beginner__breadcrumbs [aria-current="page"] {
  font-weight: var(--font-weight-regular);
}

.beginners-page .collections-beginner__breadcrumbs [aria-hidden="true"] {
  opacity: 1;
}

.plp-page-shop .plp__category-label {
  font-size: 24px !important;
  font-weight: var(--font-weight-semibold) !important;
}

.beginners-page .collections-beginner__hero-slogan {
  position: absolute;
  bottom: 64px;
  left: var(--space-24);
  right: var(--space-24);
  max-width: 898px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.beginners-page .collections-beginner__hero-heading {
  margin: 0;
  color: var(--text-primary);
  line-height: 1;
  font-size: 48px;
}

.beginners-page .collections-beginner__hero-desc {
  margin: 0;
  color: var(--text-primary);
  max-width: 700px;
}

.beginners-page .collections-beginner__hero-cta {
  align-self: flex-start;
  margin-top: var(--space-8);
}

/* Intro section */
.beginners-page .collections-beginner__intro {
  background: var(--color-cream-base);
  padding: 164px var(--space-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  text-align: center;
}

.beginners-page .collections-beginner__intro-heading {
  margin: 0;
  color: var(--text-accent);
  max-width: 1200px;
  font-size: 48px;
  line-height: 1;
}

.beginners-page .collections-beginner__intro-subhead {
  margin: 0;
  color: var(--color-neutral-1000);
  max-width: 700px;
}

.beginners-page .collections-beginner__intro-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: 1200px;
  color: var(--color-neutral-1000);
  font-size: 24px;
}

.beginners-page .collections-beginner__intro-body p {
  margin: 0;
}

/* Feature row */
.beginners-page .collections-beginner__feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 648px;
  background: var(--accent-default);
}

.beginners-page .collections-beginner__feature-media {
  position: relative;
  background: var(--color-neutral-1000);
  overflow: hidden;
}

.beginners-page .collections-beginner__feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

.beginners-page .collections-beginner__feature-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-24);
  padding: var(--space-48);
  color: var(--text-on-accent);
}

.beginners-page .collections-beginner__feature-step {
  color: var(--text-on-accent);
  font-size: 16px;
}

.beginners-page .collections-beginner__feature-content p {
  font-size: 24px;
}

.beginners-page .collections-beginner__feature-heading {
  margin: 0;
  color: var(--text-on-accent);
  font-size: 48px;
  line-height: 1;
}

.beginners-page .collections-beginner__feature-body {
  margin: 0;
  color: var(--text-on-accent);
  max-width: 700px;
}

/* Cardiovascular Conditioning reversed feature row (content left, image right) */
.beginners-page .collections-beginner__feature--reverse .collections-beginner__feature-media {
  order: 2;
}

.beginners-page .collections-beginner__feature--reverse .collections-beginner__feature-content {
  order: 1;
}

/* Products row */
.beginners-page .collections-beginner__products {
  background: var(--color-cream-base);
  padding: var(--space-48) var(--space-32);
  display: grid;
  grid-template-columns: 293px 1fr;
  gap: var(--space-64);
  color: var(--color-neutral-1000);
}

.beginners-page .collections-beginner__products-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.beginners-page .collections-beginner__products-category {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide);
}

.beginners-page .collections-beginner__products-subcats {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.beginners-page .collections-beginner__products-subcats a {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--color-neutral-1000);
}

.beginners-page .collections-beginner__products-subcats a:hover {
  color: var(--text-accent);
}

.beginners-page .collections-beginner__products-subcats a.is-active {
  color: var(--text-accent);
  font-weight: var(--font-weight-semibold);
}

.beginners-page .collections-beginner__products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

/* Product cards */
.beginners-page .collections-product-card {
  position: relative;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-1000);
  display: flex;
  flex-direction: column;
}

/* Stretched link: title anchor expands to cover the card so the whole card
   navigates to the PDP. The Add to Cart button stays interactive via z-index. */
.beginners-page .collections-product-card__title-link {
  color: inherit;
  text-decoration: none;
}

.beginners-page .collections-product-card__title-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.beginners-page .collections-product-card__cta {
  position: relative;
  z-index: 1;
}

/* Filtered cards: needed because display:flex above wins over [hidden]'s default display:none */
.beginners-page .collections-product-card[hidden] {
  display: none;
}

.beginners-page .collections-product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-neutral-0);
  padding: var(--space-16);
  overflow: hidden;
}

.beginners-page .collections-product-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

.beginners-page .collections-product-card__badge {
  position: absolute;
  top: calc(var(--space-16) + var(--space-8));
  right: calc(var(--space-16) + var(--space-8));
  display: inline-flex;
  background: var(--accent-default);
  color: var(--text-on-accent);
  padding: var(--space-8) var(--space-16);
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.beginners-page .collections-product-card__body {
  padding: 0 var(--space-16) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 1;
}

.beginners-page .collections-product-card__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-1000);
  line-height: var(--font-leading-snug);
}

.beginners-page .collections-product-card__prices {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
}

.beginners-page .collections-product-card__price {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--color-neutral-1000);
}

.beginners-page .collections-product-card__price--sale {
  font-weight: var(--font-weight-semibold);
}

.beginners-page .collections-product-card__price--original {
  color: var(--color-neutral-500);
  text-decoration: line-through;
}

.beginners-page .collections-product-card__cta {
  width: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  margin-top: auto;
}

/* Closer */
.beginners-page .collections-beginner__closer {
  background: var(--color-cream-base);
}

.beginners-page .collections-beginner__closer-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-64);
  padding: var(--space-148) var(--space-32) var(--space-64);
  color: var(--color-neutral-1000);
}

.beginners-page .collections-beginner__closer-heading {
  margin: 0;
  color: var(--color-neutral-1000);
  max-width: 600px;
  font-size: 32px;
}

.beginners-page .collections-beginner__closer-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
}

.beginners-page .collections-beginner__closer-info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.beginners-page .collections-beginner__closer-info-heading {
  margin: 0;
  color: var(--color-neutral-1000);
  text-transform: none;
  font-size: 32px;
}

.beginners-page .collections-beginner__closer-info-body {
  margin: 0;
  color: var(--color-neutral-1000);
}

.beginners-page .collections-beginner__closer-photo {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1920/288;
  overflow: hidden;
  background: var(--color-neutral-1000);
}

.beginners-page .collections-beginner__closer-photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
  object-position: center 56%;
}

.longevity-page {
  background: var(--color-cream-base);
  margin: 0;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.longevity-page .collections-longevity__hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 1920 / 748;
  min-height: 748px;
  overflow: hidden;
  background: var(--color-neutral-1000);
}

.longevity-page .collections-longevity__hero-media {
  position: absolute;
  inset: 0;
  display: block;
}

.longevity-page .collections-longevity__hero-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  z-index: 0;
  transform: scale(1.9);
  transform-origin: center;
}

/* Gradient overlay: dark on left fading to transparent on right — for text readability */
.longevity-page .collections-longevity__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.longevity-page .collections-longevity__breadcrumbs {
  position: absolute;
  top: calc(var(--space-24) + 58px + var(--space-24) + var(--space-32));
  left: var(--space-32);
  z-index: 2;
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--text-primary);
}

.longevity-page .collections-longevity__breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.longevity-page .collections-longevity__breadcrumbs a {
  color: var(--text-primary);
  text-decoration: none;
}

.longevity-page .collections-longevity__breadcrumbs a:hover {
  color: var(--text-accent);
}

.longevity-page .collections-longevity__breadcrumbs [aria-current="page"] {
  font-weight: var(--font-weight-semibold);
}

.longevity-page .collections-longevity__breadcrumbs [aria-hidden="true"] {
  opacity: 0.5;
}

.longevity-page .collections-longevity__hero-slogan {
  position: absolute;
  bottom: var(--space-64);
  left: var(--space-32);
  right: var(--space-32);
  max-width: 898px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.longevity-page .collections-longevity__hero-heading {
  margin: 0;
  color: var(--text-primary);
  line-height: var(--font-leading-tight);
}

.longevity-page .collections-longevity__hero-desc {
  margin: 0;
  color: var(--text-primary);
  max-width: 700px;
}

.longevity-page .collections-longevity__hero-cta {
  align-self: flex-start;
  margin-top: var(--space-8);
}

.longevity-page .collections-longevity__intro {
  background: var(--color-cream-base);
  padding: var(--space-148) var(--space-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}

.longevity-page .collections-longevity__intro-heading {
  margin: 0;
  color: var(--text-accent);
  max-width: 1200px;
}

.longevity-page .collections-longevity__intro-subhead {
  margin: 0;
  color: var(--color-neutral-1000);
  max-width: 700px;
}

.longevity-page .collections-longevity__intro-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: 1100px;
  color: var(--color-neutral-1000);
  margin-top: var(--space-12);
}

.longevity-page .collections-longevity__intro-body p {
  margin: 0;
}


.longevity-page .collections-longevity__feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 648px;
  background: var(--accent-default);
}

.longevity-page .collections-longevity__feature-media {
  position: relative;
  background: var(--color-neutral-1000);
  overflow: hidden;
}

.longevity-page .collections-longevity__feature-media--neutral {
  background: var(--color-neutral-300, #c8c4b8);
}

.longevity-page .collections-longevity__feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

.longevity-page .collections-longevity__feature-image--contain {
  object-fit: contain;
}

.longevity-page .collections-longevity__feature-media-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.longevity-page .collections-longevity__feature-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-24);
  padding: var(--space-48);
  color: var(--text-on-accent);
}

.longevity-page .collections-longevity__feature-step {
  color: var(--text-on-accent);
  opacity: 0.85;
}

.longevity-page .collections-longevity__feature-heading {
  margin: 0;
  color: var(--text-on-accent);
}

.longevity-page .collections-longevity__feature-body {
  margin: 0;
  color: var(--text-on-accent);
  max-width: 700px;
}

/* Feature reverse modifier */
.longevity-page .collections-longevity__feature--reverse .collections-longevity__feature-media {
  order: 2;
}

.longevity-page .collections-longevity__feature--reverse .collections-longevity__feature-content {
  order: 1;
}

/* Longevity products row */
.longevity-page .collections-longevity__products {
  background: var(--color-cream-base);
  padding: var(--space-48) var(--space-32);
  display: grid;
  grid-template-columns: 293px 1fr;
  gap: var(--space-64);
  color: var(--color-neutral-1000);
}

.longevity-page .collections-longevity__products-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.longevity-page .collections-longevity__products-category {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide);
}

.longevity-page .collections-longevity__products-subcats {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.longevity-page .collections-longevity__products-subcats a {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--color-neutral-1000);
}

.longevity-page .collections-longevity__products-subcats a:hover {
  color: var(--text-accent);
}

.longevity-page .collections-longevity__products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

/* Reuse product card pattern for longevity page */
.longevity-page .collections-product-card {
  position: relative;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-1000);
  display: flex;
  flex-direction: column;
}

.longevity-page .collections-product-card[hidden] {
  display: none;
}

.longevity-page .collections-product-card__title-link {
  color: inherit;
  text-decoration: none;
}

.longevity-page .collections-product-card__title-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.longevity-page .collections-product-card__cta {
  position: relative;
  z-index: 1;
}

.longevity-page .collections-longevity__products-subcats a.is-active {
  color: var(--text-accent);
  font-weight: var(--font-weight-semibold);
}

.longevity-page .collections-product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-neutral-0);
  padding: var(--space-16);
  overflow: hidden;
}

.longevity-page .collections-product-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

.longevity-page .collections-product-card__badge {
  position: absolute;
  top: calc(var(--space-16) + var(--space-8));
  right: calc(var(--space-16) + var(--space-8));
  display: inline-flex;
  background: var(--accent-default);
  color: var(--text-on-accent);
  padding: var(--space-8) var(--space-16);
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.longevity-page .collections-product-card__body {
  padding: 0 var(--space-16) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 1;
}

.longevity-page .collections-product-card__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-1000);
  line-height: var(--font-leading-snug);
}

.longevity-page .collections-product-card__prices {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
}

.longevity-page .collections-product-card__price {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--color-neutral-1000);
}

.longevity-page .collections-product-card__price--sale {
  font-weight: var(--font-weight-semibold);
}

.longevity-page .collections-product-card__price--original {
  color: var(--color-neutral-500);
  text-decoration: line-through;
}

.longevity-page .collections-product-card__cta {
  width: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  margin-top: auto;
}

.longevity-page .collections-longevity__cta {
  background: var(--color-cream-base);
  padding: var(--space-48) var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  color: var(--color-neutral-1000);
}

.longevity-page .collections-longevity__cta-heading {
  margin: 0;
  color: var(--color-neutral-1000);
  font-size: 48px;
}

.longevity-page .collections-longevity__cta-body {
  margin: 0;
  max-width: 801px;
}

.longevity-page .collections-longevity__cta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
}

.longevity-page .collections-longevity__closer {
  display: flex;
  flex-direction: column;
  background: var(--color-cream-base);
  color: var(--color-neutral-1000);
}

.longevity-page .collections-longevity__closer-row {
  display: grid;
  grid-template-columns: 556px 1fr;
  gap: 189px;
  padding: 100px var(--space-32);
  align-items: start;
}

.longevity-page .collections-longevity__closer-heading {
  margin: 0;
  color: var(--color-neutral-1000);
}

.longevity-page .collections-longevity__closer-offers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
}

.longevity-page .collections-longevity__closer-offer {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.longevity-page .collections-longevity__closer-offer-title {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-snug);
}

.longevity-page .collections-longevity__closer-offer-body {
  margin: 0;
}

.longevity-page .collections-longevity__closer-image {
  width: 100%;
  height: 288px;
  overflow: hidden;
}

.longevity-page .collections-longevity__closer-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-page {
  background: var(--color-cream-base);
  margin: 0;
}

.about-page .about__container {
  padding: 164px var(--space-32) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  color: var(--color-neutral-1000);
}

.about-page .about__intro {
  position: relative;
  min-height: 120vh;
}

.about-page .about__intro-sticky {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}

.about-page .about__intro-heading {
  margin: 0;
  color: var(--color-neutral-1000);
}

.about-page .about__intro-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: 1828px;
}

.about-page .about__intro-body p {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: 42px;
  line-height: 1.22;
}

.about-page .about__intro-rule {
  margin-top: var(--space-32);
  border: 0;
  border-top: 1px solid var(--color-neutral-1000);
  width: 100%;
}

/* Mission block */
.about-page .about__mission {
  display: flex;
  margin-top: 0 !important;
  padding: var(--space-64) var(--space-32);
  flex-direction: column;
  gap: var(--space-48);
}

.about-page .about__mission-heading {
  margin: 0;
  color: var(--text-accent);
}

.about-page .about__mission-grid {
  display: grid;
  grid-template-columns: 844fr 900fr;
  gap: 112px;
  align-items: start;
}

.about-page .about__mission-image {
  overflow: hidden;
}

.about-page .about__mission-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-page .about__mission-image--primary {
  height: 100%;
}

.about-page .about__mission-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  color: var(--color-neutral-1000);
  font-size: 24px;
}

.about__mission-right img {
  width: 100%;
}

.about-page .about__mission-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-44, 44px);
}

.about-page .about__mission-statement {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-24);
  line-height: var(--font-leading-normal);
  color: var(--color-neutral-1000);
}

.about-page .about__mission-text p.body-md {
  font-size: var(--font-size-24);
  line-height: var(--font-leading-normal);
}

.about-page .about__history {
  position: relative;
  background: var(--accent-default);
  color: var(--color-neutral-0);
  height: 405px;
  width: 100%;
  overflow: hidden;
}

.about-page .about__history-inner {
  padding: var(--space-48) 41px;
  display: flex;
  flex-direction: column;
  gap: var(--space-44, 44px);
  max-width: 100%;
  position: relative;
  z-index: 1;
}

.about-page .about__history-eyebrow {
  margin: 0;
  font-size: var(--font-size-32);
  color: var(--color-neutral-0);
  text-transform: uppercase;
  letter-spacing: normal;
  font-weight: var(--font-weight-regular);
}

.about-page .about__history-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-32);
}

.about-page .about__history-heading {
  margin: 0;
  color: var(--color-neutral-0);
  font-size: var(--font-size-64);
  line-height: 1;
}

.about-page .about__history-body {
  margin: 0;
  color: var(--color-neutral-0);
  font-family: var(--font-family-body);
  font-size: var(--font-size-32);
  line-height: 1.25;
  max-width: 489px;
}

.about-page .about__history-chevron {
  position: absolute;
  top: var(--space-48);
  left: 50%;
  transform: translateX(-50%);
  height: calc(100% - var(--space-48) * 2);
  width: auto;
  aspect-ratio: 668 / 519;
  pointer-events: none;
  z-index: 0;
}

.about-page .about__timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin-top: 0 !important;
}

.about-page .about__timeline-card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-100, #ddd);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.about-page .about__timeline-text {
  padding: var(--space-32) var(--space-48);
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.about-page .about__timeline-heading {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: 42px;
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-snug);
  text-transform: uppercase;
  color: var(--color-neutral-1000);
}

.about-page .about__timeline-body {
  margin: 0;
  color: var(--color-neutral-1000);
  font-size: var(--font-size-24);
  line-height: var(--font-leading-normal);
  max-width: 526px;
}

.about-page .about__timeline-image {
  aspect-ratio: 640/426;
  background: var(--color-neutral-200, #d9d9d9);
  overflow: hidden;
}

.about-page .about__timeline-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-page .about__gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 1920/840;
  overflow: hidden;
  background: var(--color-neutral-1000);
}

.about_hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--color-neutral-1000);
}

.about-page .about__gallery-slides {
  position: absolute;
  inset: 0;
}

.about-page .about__gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.8s ease;
}

/* Smooth fade — keep slide in flow but transparent so opacity transition can apply */
.about-page .about__gallery-slide[hidden] {
  display: block;
  opacity: 0;
  pointer-events: none;
}

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

.about-page .about__gallery-dots {
  position: absolute;
  bottom: var(--space-24);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-8);
  z-index: 5;
}

.about-page .about__gallery-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.about-page .about__gallery-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.about-page .about__gallery-dot[aria-selected="true"] {
  background: var(--accent-default);
  transform: scale(1.2);
}

.about-page .about__gallery-dot:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 4px;
}

/* About: Who We Are / Our Founder tabs section */
.about-page .about__who {
  padding: var(--space-64) var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  color: var(--color-neutral-1000);
}

.about-page .about__who-tabs {
  display: flex;
  gap: var(--space-32);
  align-items: center;
}

.about-page .about__who-tab {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  color: var(--color-neutral-1000);
  cursor: pointer;
  line-height: 1.4;
  text-decoration: none;
}

.about-page .about__who-tab[aria-selected="true"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.about-page .about__who-tab:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 4px;
}

.about-page .about__who-panel[hidden] {
  display: none;
}

.about-page .about__who-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

/* Who We Are panel: text + 2 small images row */
.about-page .about__who-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 148px;
  align-items: start;
}

.about-page .about__who-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.about-page .about__who-text p {
  margin: 0;
  font-size: var(--font-size-24);
}

.about-page .about__who-images {
  display: grid;
  height: 100%;
}

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

.about__who-images:has(> :only-child) {
  grid-template-columns: 1fr;
}

.about__who-images:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  transform: translateY(-110px);
  height: calc(100% + 110px);
}

.about-page .about__who-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.about-page .about__who-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Two-column quote row */
.about-page .about__who-quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
  max-width: 883px;
  margin-top: 61px;
}

.about-page .about__who-quote {
  margin: 0;
  font-size: var(--font-size-24);
  line-height: var(--font-leading-normal);
}

/* Our Founder panel (inside tabs): big image + long text */
.about-page .about__founder-row {
  display: grid;
  grid-template-columns: 1012px 1fr;
  gap: var(--space-48);
  align-items: start;
}

.about-page .about__founder-image {
  height: 800px;
  overflow: hidden;
}

.about-page .about__founder-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-page .about__founder-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-44, 44px);
}

.about-page .about__founder-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.about-page .about__founder-block p {
  margin: 0;
  font-size: var(--font-size-24);
  line-height: var(--font-leading-normal);
}

@media (max-width: 1280px) {
  .about-page .about__who-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-48);
  }

  .about-page .about__founder-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-48);
  }

  .about-page .about__founder-image {
    height: 640px;
  }
}

.contact-page {
  background: var(--color-cream-base);
  margin: 0;
}

.contact-page .contact__container {
  padding: 128px var(--space-32) 64px;
  display: flex;
  flex-direction: column;
  color: var(--color-neutral-1000);
}

.contact-page .contact__hero {
  display: flex;
  flex-direction: column;
  gap: 148px;
}

.contact-page .contact__title {
  margin: 0;
  color: var(--color-neutral-1000);
}

.contact-page .contact__rule {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-neutral-1000);
  width: 100%;
}

/* Generic 2-col row: label-left, content-right */
.contact-page .contact__row {
  display: flex;
  gap: var(--space-64);
  align-items: start;
  justify-content: space-between;
  padding: var(--space-48) 0 64px;
}

.contact-page .contact__row ul {
  padding: 0;
}

.returns-page ul {
  padding: 0;
}

.contact-page .contact__row ul li {
  padding-left: 25px;
  list-style: none;
  position: relative;
}

.returns-page ul li {
  padding-left: 25px;
  list-style: none;
  position: relative;
}

.contact-page .contact__row a {
  text-decoration: none !important;
}

.contact-page .contact__row ul li:before {
  content: '';
  position: absolute;
  left: 12px;
  top: 12px;
  width: 3px;
  height: 3px;
  background: var(--color-neutral-1000);
  transform: translateY(0px);
}

.returns-page ul li:before {
  content: '';
  position: absolute;
  left: 12px;
  top: 12px;
  width: 3px;
  height: 3px;
  background: var(--color-neutral-1000);
  transform: translateY(0px);
}

.contact-page .contact__row:last-child {
  padding-bottom: 0;
}

.contact-page .contact__row-label {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  color: var(--color-neutral-1000);
  line-height: 1.4;
  width: 525px;
}

.contact-page .contact__row-body {
  width: 730px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.contact-page .contact__row-body .wpcf7 {
  padding-right: 37px;
}

.contact-page .contact__faq-accordion {
  width: 730px;
  padding-right: 37px;
}

.contact-page .contact__row-text {
  padding-right: 56px;
}

.contact-page .contact__row-body p {
  margin: 0;
}

.contact-page .contact__row-body a:not(.btn) {
  color: var(--color-neutral-1000);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-page .contact__row-body a:not(.btn):hover {
  color: var(--text-accent);
}

.contact-page .contact__directions-btn {
  align-self: flex-start;
}

/* Form */
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.wpcf7-form label {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wpcf7-form input {
  height: 64px;
}

.wpcf7-form input,
.wpcf7-form textarea {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  padding: var(--space-16);
  width: 100%;
  border: 1px solid var(--color-neutral-1000);
  background: var(--color-neutral-0);
  color: var(--color-neutral-1000);
  border-radius: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpcf7-form input:hover,
.wpcf7-form textarea:hover {
  border-color: var(--accent-default);
  box-shadow: 0 0 0 1px var(--accent-default);
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

.wpcf7-form .wpcf7-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  color: #fff;
  background: var(--accent-default);
  height: 48px;
  padding: var(--space-12) var(--space-24);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  border: 0;
  cursor: pointer;
  transition: filter 0.15s ease, opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.wpcf7-form .wpcf7-submit:hover {
  filter: brightness(0.92);
  box-shadow: 0 4px 12px rgba(218, 41, 28, 0.25);
  transform: translateY(-1px);
}

.wpcf7-form .wpcf7-submit:active {
  filter: brightness(0.85);
  transform: translateY(0);
  box-shadow: none;
}

.wpcf7-form .wpcf7-submit:focus {
  outline: 0px solid var(--accent-default);
  outline-offset: 0px;
}

.wpcf7 form .wpcf7-response-output {
  margin: 0;
  margin-top: -32px;
}

/* FAQ */
.contact-page .contact__row--faq {
  align-items: start;
}

.contact-page .contact__faq-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 660px;
  flex: 1;
}

.contact-page .contact__faq-eyebrow {
  color: var(--text-accent);
  margin: 0;
}

.contact-page .contact__faq-heading {
  margin: 0;
  color: var(--color-neutral-1000);
  font-weight: var(--font-weight-semibold);
  font-size: 32px;
}

.contact-page .contact__faq-desc {
  margin: 0;
}

.contact-page .contact__faq-accordion {
  display: flex;
  flex-direction: column;
}

.contact-page .contact__faq-entry {
  border-bottom: 1px solid var(--color-neutral-1000);
}

.contact-page .contact__faq-entry:first-child {
  border-top: 0;
}

.contact-page .contact__faq-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-16) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-family-body);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-1000);
  gap: var(--space-16);
}

.contact-page .contact__faq-summary::-webkit-details-marker {
  display: none;
}

.contact-page .contact__faq-icon {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.contact-page .contact__faq-icon::before,
.contact-page .contact__faq-icon::after {
  content: '';
  position: absolute;
  background: var(--color-neutral-1000);
  top: 50%;
  left: 50%;
  transition: transform 0.2s ease;
}

.contact-page .contact__faq-icon::before {
  width: 16px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.contact-page .contact__faq-icon::after {
  width: 1.5px;
  height: 16px;
  transform: translate(-50%, -50%);
}

.contact-page .contact__faq-entry[open] .contact__faq-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.contact-page .contact__faq-body {
  padding: 0 0 var(--space-16);
}

.contact-page .contact__faq-body p {
  margin: 0;
}

.returns-page,
.shipping-page,
.warranty-page {
  background: var(--color-cream-base);
  margin: 0;
}

.returns-page .returns__container,
.shipping-page .returns__container,
.warranty-page .returns__container {
  padding: 129px 32px 15px;
  display: flex;
  flex-direction: column;
  color: var(--color-neutral-1000);
}

.returns-page .returns__hero,
.shipping-page .returns__hero,
.warranty-page .returns__hero {
  display: flex;
  flex-direction: column;
  gap: 148px;
}

.returns-page .returns__title,
.shipping-page .returns__title,
.warranty-page .returns__title {
  margin: 0;
  color: var(--color-neutral-1000);
}

.returns-page .returns__rule,
.shipping-page .returns__rule,
.warranty-page .returns__rule {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-neutral-1000);
  width: 100%;
}

.returns-page .returns__row,
.shipping-page .returns__row,
.warranty-page .returns__row {
  display: grid;
  grid-template-columns: 525px 1fr;
  gap: 116px;
  align-items: start;
  padding: var(--space-48) 0 64px;
}

.returns-page .returns__row-label,
.shipping-page .returns__row-label,
.warranty-page .returns__row-label {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  color: var(--color-neutral-1000);
  line-height: 1.4;
}

.returns-page .returns__row-body,
.shipping-page .returns__row-body,
.warranty-page .returns__row-body {
  max-width: 1148px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.returns-page .returns__row-body p,
.shipping-page .returns__row-body p,
.warranty-page .returns__row-body p {
  margin: 0;
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
}

.returns-page .returns__row-body a,
.shipping-page .returns__row-body a,
.warranty-page .returns__row-body a {
  color: var(--color-neutral-1000);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.returns-page .returns__row-body a:hover,
.shipping-page .returns__row-body a:hover,
.warranty-page .returns__row-body a:hover {
  color: var(--text-accent);
}

.returns-page .returns__list,
.shipping-page .returns__list,
.warranty-page .returns__list {
  margin: 0;
  padding-left: 1.5em;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  list-style: disc;
}

.returns-page .returns__list li,
.shipping-page .returns__list li,
.warranty-page .returns__list li {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
  color: var(--color-neutral-1000);
}

#page-collections-muscle:not([hidden]) {
  padding-top: 0;
  background: var(--color-cream-base);
  display: flex;
  flex-direction: column;
}

#page-collections-muscle .collections-muscle__hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 1920 / 748;
  min-height: 748px;
  overflow: hidden;
  background: var(--color-neutral-1000);
}

#page-collections-muscle .collections-muscle__hero-media {
  position: absolute;
  inset: 0;
  display: block;
}

#page-collections-muscle .collections-muscle__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

#page-collections-muscle .collections-muscle__breadcrumbs {
  position: absolute;
  top: calc(var(--space-24) + 58px + var(--space-24) + var(--space-32));
  left: var(--space-32);
  z-index: 2;
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--text-primary);
}

#page-collections-muscle .collections-muscle__breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

#page-collections-muscle .collections-muscle__breadcrumbs a {
  color: var(--text-primary);
  text-decoration: none;
}

#page-collections-muscle .collections-muscle__breadcrumbs a:hover {
  color: var(--text-accent);
}

#page-collections-muscle .collections-muscle__breadcrumbs [aria-current="page"] {
  font-weight: var(--font-weight-semibold);
}

#page-collections-muscle .collections-muscle__breadcrumbs [aria-hidden="true"] {
  opacity: 0.5;
}

/* Hero slogan overlay (heading + body + CTA) — bottom-left of hero image */
#page-collections-muscle .collections-muscle__hero-slogan {
  position: absolute;
  bottom: var(--space-64);
  left: var(--space-32);
  right: var(--space-32);
  max-width: 898px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

#page-collections-muscle .collections-muscle__hero-heading {
  margin: 0;
  color: var(--text-primary);
  line-height: var(--font-leading-tight);
}

#page-collections-muscle .collections-muscle__hero-desc {
  margin: 0;
  color: var(--text-primary);
  max-width: 700px;
}

#page-collections-muscle .collections-muscle__hero-cta {
  align-self: flex-start;
  margin-top: var(--space-8);
}

/* Intro section — cream bg, centered heading + subhead + body, 148px top/bottom */
#page-collections-muscle .collections-muscle__intro {
  background: var(--color-cream-base);
  padding: var(--space-148) var(--space-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}

#page-collections-muscle .collections-muscle__intro-heading {
  margin: 0;
  color: var(--text-accent);
  max-width: 1200px;
}

#page-collections-muscle .collections-muscle__intro-subhead {
  margin: 0;
  color: var(--color-neutral-1000);
  max-width: 700px;
}

#page-collections-muscle .collections-muscle__intro-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: 1100px;
  color: var(--color-neutral-1000);
  margin-top: var(--space-12);
}

#page-collections-muscle .collections-muscle__intro-body p {
  margin: 0;
}


.pdp-page {
  background: var(--color-cream-base);
  margin: 0;
}

.pdp-page .pdp__container {
  padding: 130px var(--space-32) var(--space-64);
  color: var(--color-neutral-1000);
}

.pdp-page .pdp__split {
  display: grid;
  grid-template-columns: minmax(0, 723fr) minmax(0, 589fr);
  gap: var(--space-48);
  align-items: start;
}

/* Gallery */
.pdp-page .pdp__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.pdp-page .pdp__gallery-main {
  width: 100%;
  aspect-ratio: 723 / 888;
  overflow: hidden;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  display: block;
}

.pdp-page .pdp__gallery-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}

.pdp-page .pdp__gallery-cell {
  aspect-ratio: 353 / 436;
  overflow: hidden;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  display: block;
}

.pdp-page .pdp__gallery-main:focus-visible,
.pdp-page .pdp__gallery-cell:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}

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

/* Buy box — sticks alongside the gallery so the info stays visible
   while the user scrolls through the image stack (Arc'teryx-style). */
.pdp-page .pdp__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  min-width: 0;
  position: sticky;
  top: calc(var(--space-24) + 58px + var(--space-24));
  align-self: start;
}

.pdp-page .pdp__breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-12);
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  color: var(--color-neutral-1000);
}

.pdp-page .pdp__breadcrumbs li {
  display: inline-flex;
}

.pdp-page .pdp__breadcrumbs a {
  color: var(--color-neutral-1000);
}

.pdp-page .pdp__breadcrumbs a:hover {
  color: var(--text-accent);
}

.pdp-page .pdp__breadcrumbs [aria-current="page"] {
  color: var(--color-neutral-1000);
}

.pdp-page .pdp__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  line-height: var(--lh-14);
  color: var(--color-neutral-1000);
}

.pdp-page .pdp__price-row {
  margin-top: var(--space-24);
  display: flex;
  gap: var(--space-16);
  align-items: baseline;
}

.pdp-page .pdp__price-original {
  font-family: var(--font-family-body);
  font-size: var(--font-size-24);
  color: var(--color-neutral-500);
  text-decoration: line-through;
}

.pdp-page .pdp__price-current {
  font-family: var(--font-family-body);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-semibold);
  color: var(--accent-default);
}

.pdp-page .pdp__rule {
  margin: var(--space-8) 0 0;
  border: 0;
  border-top: 1px solid var(--color-neutral-1000);
}

.pdp-page .pdp__description {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-top: var(--space-8);
}

.pdp__info form.cart {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  margin-top: var(--space-8);
}

.pdp-page .pdp__description p {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
}

/* Truncated by default: only the first paragraph shows. Toggles open when expanded. */
.pdp-page .pdp__description[data-pdp-description]>p:not(:first-of-type) {
  display: none;
}

.pdp-page .pdp__description[data-pdp-description].is-expanded>p {
  display: block;
}

.pdp-page .pdp__read-more {
  align-self: flex-start;
  display: inline-flex;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-normal);
  color: var(--color-neutral-1000);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
  -webkit-font-smoothing: antialiased;
}

/* Inner labels inherit color so the hover transitions smoothly */
.pdp-page .pdp__read-more>span {
  color: inherit;
  text-decoration: inherit;
}

.pdp-page .pdp__read-more:hover,
.pdp-page .pdp__read-more:focus-visible {
  color: var(--text-accent);
  outline: none;
}

.pdp-page .pdp__included {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.pdp-page .pdp__included-title {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
}

.pdp-page .pdp__included-list {
  margin: 0;
  padding-left: 1.5em;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.pdp-page .pdp__included-list li {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
  color: var(--color-neutral-1000);
}

.pdp-page .pdp__cta {
  width: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-accent);
}

.pdp-page .pdp__financing {
  margin: -8px 0 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--color-neutral-1000);
  display: flex;
  gap: var(--space-16);
  align-items: baseline;
}

.pdp-page .pdp__financing a {
  color: var(--color-neutral-1000);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Accordion */
.pdp-page .pdp__accordion {
  display: flex;
  flex-direction: column;
}

.pdp-page .pdp__acc-entry {
  border-bottom: 1px solid var(--text-muted);
}

.pdp-page .pdp__acc-entry:last-child {
  border-bottom: 0;
}

/* Button variant of the accordion entry (opens side modal instead of expanding) */
.pdp-page .pdp__acc-entry--button {
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.pdp-page .pdp__acc-entry--button .pdp__acc-summary {
  display: flex;
}

.pdp-page .pdp__acc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-1000);
  gap: var(--space-16);
}

.pdp-page .pdp__acc-summary::-webkit-details-marker {
  display: none;
}

.pdp-page .pdp__acc-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.pdp-page .pdp__acc-icon::before,
.pdp-page .pdp__acc-icon::after {
  content: '';
  position: absolute;
  background: var(--color-neutral-1000);
  top: 50%;
  left: 50%;
  transition: transform 0.2s ease;
}

.pdp-page .pdp__acc-icon::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.pdp-page .pdp__acc-icon::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.pdp-page .pdp__acc-entry[open] .pdp__acc-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.pdp-page .pdp__acc-body {
  padding: 0 0 var(--space-16);
}

.pdp-page .pdp__acc-body p {
  margin: 0;
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
}

.pdp-page .pdp__acc-body a:not(.btn) {
  color: var(--color-neutral-1000);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "You May Also Like" — chevron-down style icon when open (no rotation), per Figma */
.pdp-page .pdp__acc-icon--chevron::before {
  background: transparent;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-neutral-1000);
  border-bottom: 2px solid var(--color-neutral-1000);
  transform: translate(-50%, -75%) rotate(45deg);
  transition: transform 0.2s ease;
}

.pdp-page .pdp__acc-icon--chevron::after {
  display: none;
}

.pdp-page .pdp__acc-entry[open] .pdp__acc-icon--chevron::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

/* Recommendations: horizontal scroller with progress bar */
.pdp-page .pdp__acc-body--recs {
  padding: 0 0 var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.pdp-page .pdp__recs-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 195px;
  gap: var(--space-32);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--space-8);
}

.pdp-page .pdp__recs-scroller::-webkit-scrollbar {
  display: none;
}

.pdp-page .pdp__rec-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  position: relative;
}

/* Stretched link: title anchor covers the whole card. CTA stays clickable via z-index. */
.pdp-page .pdp__rec-title-link {
  color: inherit;
  text-decoration: none;
}

.pdp-page .pdp__rec-title-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.pdp-page .pdp__rec-cta {
  position: relative;
  z-index: 1;
}

.pdp-page .pdp__rec-image {
  width: 100%;
  aspect-ratio: 195 / 148;
  background: var(--color-neutral-200);
  overflow: hidden;
}

.pdp-page .pdp__rec-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-page .pdp__rec-title {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-1000);
  line-height: var(--font-leading-snug);
}

.pdp-page .pdp__rec-prices {
  display: flex;
  gap: var(--space-8);
  align-items: baseline;
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--color-neutral-1000);
}

.pdp-page .pdp__rec-price--sale {
  font-weight: var(--font-weight-semibold);
}

.pdp-page .pdp__rec-price--original {
  color: var(--color-neutral-500);
  text-decoration: line-through;
}

.pdp-page .pdp__rec-cta {
  width: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-8);
  color: var(--text-on-accent);
}

.pdp-page .pdp__recs-progress {
  position: relative;
  width: 100%;
  height: 4px;
  background: var(--color-neutral-200);
  border-radius: 16px;
  overflow: hidden;
}

.pdp-page .pdp__recs-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: var(--accent-default);
  border-radius: 16px;
  transition: width 0.15s ease, left 0.15s ease;
}

/* PDP — single product variant: quantity selector */
.pdp-page .pdp__quantity {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.pdp-page .pdp__quantity-label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-1000);
}

.pdp-page .pdp__quantity-input {
  display: inline-flex;
  align-items: stretch;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-1000);
  border-radius: 0;
  width: 88px;
  padding: var(--space-8) var(--space-16);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pdp-page .pdp__quantity-input:hover {
  border-color: var(--accent-default);
  box-shadow: 0 0 0 2px var(--accent-default);
}

.pdp-page .pdp__quantity-btn {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: 1;
  color: var(--color-neutral-1000);
  cursor: pointer;
}

.pdp-page .pdp__quantity-btn {
  transition: background 0.15s ease;
}

.pdp-page .pdp__quantity-btn:hover {
  background: var(--accent-default);
  color: var(--text-on-accent);
}

.pdp-page .pdp__quantity-value {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  color: var(--color-neutral-1000);
  padding: 0 var(--space-8);
  -moz-appearance: textfield;
  appearance: textfield;
}

.pdp-page .pdp__quantity-value::-webkit-outer-spin-button,
.pdp-page .pdp__quantity-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pdp-page .pdp__quantity-input:focus-within {
  outline: 2px solid var(--accent-default);
  outline-offset: 1px;
}

/* PDP — add-ons block */
.pdp-page .pdp__addons {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.pdp-page .pdp__addons-title {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-neutral-1000);
  margin: 0;
}

.pdp-page .pdp__addons-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.pdp-page .pdp__addon {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-neutral-1000);
  cursor: pointer;
}

.pdp-page .pdp__addon img {
  display: none;
}

.pdp-page .pdp__addon:hover {
  background: var(--color-cream-base);
}

.pdp-page .pdp__addon-checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent-default);
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.pdp__addon img {
  width: 48px;
  height: 48px;
  object-fit: cover;
}

.pdp-page .pdp__addon-image {
  width: 48px;
  height: 48px;
  object-fit: cover;
  display: block;
}

.pdp-page .pdp__addon-text {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
  width: 100%;
}

.pdp-page .pdp__addon:has(.pdp__addon-checkbox:checked) {
  box-shadow: inset 0 0 0 1px var(--color-neutral-1000);
}

.pdp-page .pdp__addon-top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  align-items: baseline;
}

.pdp-page .pdp__addon-name {
  flex: 1 1 auto;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-1000);
  text-decoration: underline;
}

.pdp-page .pdp__addon-price {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  color: var(--accent-default);
}

.pdp-page .pdp__acc-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-neutral-1000);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-1000);
}

.pdp-page .pdp__addon-desc {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--color-neutral-1000);
  line-height: var(--font-leading-normal);
  padding-right: 100px;
}

/* PDP single — secondary content: full-bleed feature + 2 product cards on dark band */
.pdp-single .pdp-single__secondary {
  background: var(--color-neutral-1000);
  color: var(--color-neutral-0);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 99px;
  padding-bottom: var(--space-48);
}

.pdp-single .pdp-single__feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  align-items: center;
}

.pdp-single .pdp-single__feature-image {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.pdp-single .pdp-single__feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-single .pdp-single__feature-text,
.pdp-single .pdp-single__product-text {
  max-width: 394px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  text-align: center;
}

.pdp-single .pdp-single__feature-title {
  margin: 0;
  font-family: "Field Gothic No.64 Demi", "Impact", system-ui, sans-serif;
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  line-height: var(--font-leading-snug);
  color: var(--color-neutral-0);
}

.pdp-single .pdp-single__feature-body,
.pdp-single .pdp-single__product-body {
  margin: 0;
  width: 300px;
  max-width: 100%;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
  color: var(--color-neutral-0);
}

.pdp-single .pdp-single__products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  width: 100%;
}

.pdp-single .pdp-single__products--three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  width: 100%;
  padding-bottom: 48px;
}

.pdp-single .pdp-single__products--light {
  gap: 0;
  background: var(--color-cream-base);
  color: var(--color-neutral-1000);
  margin-bottom: -48px;
}

.pdp-single .pdp-single__products--light .pdp-single__product {
  padding-bottom: 48px;
}

.pdp-single .pdp-single__product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
}

.pdp-single .pdp-single__product-image {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.pdp-single .pdp-single__product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-single .pdp-single__product-title {
  margin: 0;
  font-family: "Field Gothic No.64 Demi", "Impact", system-ui, sans-serif;
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  line-height: var(--font-leading-snug);
  color: var(--color-neutral-0);
}

.pdp-generic .pdp-generic__feature {
  width: 100%;
  margin-top: 19px;
  padding: var(--space-48) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-neutral-1000);
  color: #fff;
}

.pdp-generic .pdp-generic__feature-image {
  width: 100%;
  height: auto;
  overflow: hidden;
  aspect-ratio: 1438/500;
}

.pdp-generic .pdp-generic__feature-image--not-first {
  height: 623px;
}

.pdp-generic .pdp-generic__feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-generic .pdp-generic__feature-card {
  padding: var(--space-48) 0;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  text-align: center;
}

.pdp-generic .pdp-generic__feature-card h1,
.pdp-generic .pdp-generic__feature-card h2,
.pdp-generic .pdp-generic__feature-card h3,
.pdp-generic .pdp-generic__feature-card h4,
.pdp-generic .pdp-generic__feature-card h5,
.pdp-generic .pdp-generic__feature-card h6,
.pdp-single__product-text h1,
.pdp-single__product-text h2,
.pdp-single__product-text h3,
.pdp-single__product-text h4,
.pdp-single__product-text h5,
.pdp-single__product-text h6 {
  margin: 0;
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  line-height: var(--lh-1);
}

.pdp__addon-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdp-generic .pdp-generic__feature-title {
  margin: 0;
  font-family: "Field Gothic No.64 Demi", "Impact", system-ui, sans-serif;
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  line-height: var(--font-leading-snug);
  color: var(--color-neutral-1000);
}

.pdp-generic .pdp-generic__feature-body {
  margin: 0;
  width: 480px;
  max-width: 100%;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
  color: var(--color-neutral-1000);
}

/* PDP generic — featured products: single full-bleed carousel with 3 dots */
.pdp-generic .pdp-generic__featured {
  position: relative;
  width: 100%;
  height: 623px;
  overflow: hidden;
  background: var(--color-neutral-1000);
  padding: 0 var(--space-24);
}

.pdp-generic .pdp-generic__featured-slides {
  position: absolute;
  inset: 0;
}

.pdp-generic .pdp-generic__featured-slide {
  position: absolute;
  inset: 0;
}

.pdp-generic .pdp-generic__featured-slide[hidden] {
  display: none;
}

.pdp-generic .pdp-generic__featured-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-generic .pdp-generic__featured-dots {
  position: absolute;
  left: 50%;
  bottom: var(--space-32);
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-16);
  z-index: 5;
}

.pdp-generic .pdp-generic__featured-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.pdp-generic .pdp-generic__featured-dot:hover {
  background: rgba(255, 255, 255, 0.85);
}

.pdp-generic .pdp-generic__featured-dot[aria-selected="true"] {
  background: var(--accent-default);
  transform: scale(1.15);
}

.pdp-generic .pdp-generic__featured-dot:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 4px;
}

.pdp-single__recs {
  background: var(--color-cream-base);
  padding: var(--space-64) var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  color: var(--color-neutral-1000);
}

.pdp-single__recs-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: 825px;
}

.pdp-single__recs-heading {
  margin: 0;
  font-size: var(--font-size-32);
  line-height: var(--font-leading-tight);
  color: var(--color-neutral-1000);
}

.pdp-single__recs-desc {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
  color: var(--color-neutral-1000);
  width: 480px;
  max-width: 100%;
}

.pdp-single__recs-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
}

.pdp-single__rec-card {
  position: relative;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-1000);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Stretched link: title anchor covers the whole card so it navigates to a PDP.
   Add To Cart stays interactive via z-index. */
.pdp-single__rec-title-link {
  color: inherit;
  text-decoration: none;
}

.pdp-single__rec-title-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.pdp-single__rec-cta {
  position: relative;
  z-index: 1;
}

.pdp-single__rec-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.added_to_cart.wc-forward {
  display: none !important;
}

.pdp-single__rec-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-single__rec-badge {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  background: var(--accent-default);
  color: var(--text-on-accent);
  padding: var(--space-8) var(--space-16);
  font-family: var(--font-family-body);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  line-height: 1;
}

.pdp-single__rec-title {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-1000);
  line-height: var(--font-leading-snug);
}

.pdp-single__rec-prices {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--color-neutral-1000);
}

.pdp-single__rec-price--sale {
  font-weight: var(--font-weight-semibold);
}

.pdp-single__rec-price--original {
  color: var(--color-neutral-500);
  text-decoration: line-through;
}

.pdp-single__rec-cta {
  width: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-accent);
  margin-top: auto;
}

.pdp-single__recs-shop-all {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  color: var(--color-neutral-1000);
  text-decoration: none;
}

.pdp-single__recs-shop-all:hover {
  color: var(--text-accent);
}

.pdp-single__recs-shop-all svg {
  display: block;
}


.pdp-page .pdp__key-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.pdp-page .pdp__key-features-title {
  margin: 0;
  font-family: "Field Gothic No.64 Demi", "Impact", system-ui, sans-serif;
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-1000);
}

.pdp-page .pdp__key-features-list {
  margin: 0;
  padding-left: 1.5em;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.pdp-page .pdp__key-features-list li {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
  color: var(--color-neutral-1000);
}

/* PDP "Why The Performance Package" — full-bleed dark band */
.pdp-page .pdp__why {
  background: var(--color-neutral-1000);
  color: var(--color-neutral-0);
  padding: var(--space-48) var(--space-32);
  width: 100%;
}

.pdp-page .pdp__why-inner {
  max-width: 1637px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  align-items: center;
}

.pdp-page .pdp__why-intro {
  width: 100%;
  max-width: 701px;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  align-items: center;
  text-align: center;
}

.pdp-page .pdp__why-heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-tight);
  text-transform: uppercase;
  color: var(--color-neutral-0);
}

.pdp-page .pdp__why-desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.pdp-page .pdp__why-desc p {
  margin: 0;
  width: 480px;
  max-width: 100%;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
  color: var(--color-neutral-0);
}

.pdp-page .pdp__why-hero {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.pdp-page .pdp__why-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-page .pdp__why-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  width: 100%;
}

.pdp-page .pdp__why-testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-24);
}

.pdp-page .pdp__why-testimonial-image {
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.pdp-page .pdp__why-testimonial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-page .pdp__why-testimonial-title {
  margin: 0;
  font-family: "Field Gothic No.64 Demi", "Impact", system-ui, sans-serif;
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  color: var(--color-neutral-0);
  line-height: var(--font-leading-snug);
}

.pdp-page .pdp__why-testimonial-body {
  margin: 0;
  width: 300px;
  max-width: 100%;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
  color: var(--color-neutral-0);
}

.pdp-page .pdp__featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-cream-base);
  width: 100%;
  padding: var(--space-24) var(--space-24) 0;
}

.pdp-page .pdp__featured-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
  padding-bottom: var(--space-48);
}

.pdp-page .pdp__featured-image {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.pdp-page .pdp__featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-page .pdp__featured-text {
  max-width: 394px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  text-align: center;
  color: var(--color-neutral-1000);
}

.pdp-page .pdp__featured-title {
  margin: 0;
  font-family: "Field Gothic No.64 Demi", "Impact", system-ui, sans-serif;
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  line-height: var(--font-leading-snug);
}

.pdp-page .pdp__featured-body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
}

.plp-page {
  background: var(--color-cream-base);
  margin: 0;
}

.plp-page .plp__container {
  padding: 121px 32px 64px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  color: var(--color-neutral-1000);
}

.plp-page .plp__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-bottom: -32px;
}

.plp-page .plp__breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-family-body);
  font-size: 14px;
  color: var(--color-neutral-1000);
}

.plp-page .plp__breadcrumbs a {
  color: var(--color-neutral-1000);
}

.plp-page .plp__breadcrumbs a:hover {
  color: var(--text-accent);
}

.plp-page .plp__title {
  margin: 0;
  font-size: 48px;
  color: var(--color-neutral-1000);
}

.plp-page .plp__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  margin-top: 8px;
  flex-wrap: wrap;
}

.plp-page .plp__filters {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-16);
  list-style: none;
  padding: 0 0 var(--space-8);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 0%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.plp-page .plp__filters::-webkit-scrollbar {
  display: none;
}

.plp-page .plp__filters>li {
  scroll-snap-align: start;
  flex-shrink: 0;
}

.plp-page .plp__filter {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  color: var(--color-neutral-1000);
  text-decoration: none;
  white-space: nowrap;
}

.plp-page .plp__filter:hover {
  color: var(--text-accent);
}

.plp-page .plp__filter:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 4px;
}

.plp-page .plp__filter--active {
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 4px;
  color: #DA291C;
}

.plp-page .plp__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  color: var(--color-neutral-1000);
}

.plp-page .plp__sort-label {
  font-weight: var(--font-weight-semibold);
}

.plp-page .plp__sort-select {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: 1.2;
  padding: var(--space-12) var(--space-48) var(--space-12) var(--space-16);
  border: 1px solid var(--color-neutral-1000);
  background-color: var(--color-neutral-0);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%23101820' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
  color: var(--color-neutral-1000);
  border-radius: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.plp-page .plp__sort-select:hover {
  border-color: var(--accent-default);
  box-shadow: 0 0 0 2px var(--accent-default);
}

.plp-page .plp__sort-select:focus {
  outline: 2px solid var(--accent-default);
  outline-offset: 1px;
}

/* Title row — H1 + sort icon on the same line at mobile (Shop All Equipment) */
.plp-page .plp__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

/* Sort icon — hidden at desktop, replaces dropdown visually at mobile.
   Mirrors the main-nav icon buttons (search, account, cart) — same padding,
   color, hover, and 20x20 SVG. */
.plp-page .plp__sort-icon {
  display: none;
  background: transparent;
  border: 0;
  padding: var(--space-8);
  cursor: pointer;
  color: var(--color-neutral-1000);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.plp-page .plp__sort-icon svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.plp-page .plp__sort-icon:hover {
  color: var(--text-accent);
}

.plp-page .plp__sort-icon:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 2px;
}


.plp-page .plp__category {
  display: grid;
  grid-template-columns: 293px 1fr;
  gap: var(--space-64);
  align-items: start;
}

.plp-page .plp__category[hidden] {
  display: none;
}

.plp-page .plp__category-label {
  display: block;
  margin: 0;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  color: var(--color-neutral-1000);
  line-height: var(--font-leading-snug);
  position: sticky;
  top: calc(var(--space-48) + 64px);
}

.plp-page .plp__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

.plp-page .plp__card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-1000);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  position: relative;
}

.plp-page .plp__card-title-link {
  color: inherit;
  text-decoration: none;
}

.plp-page .plp__card-title-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.plp-page .plp__card-cta {
  position: relative;
  margin-top: var(--space-8);
  z-index: 1;
}

.plp-page .plp__card-image {
  position: relative;
  aspect-ratio: 435 / 317;
  overflow: hidden;
}

.plp-page .plp__card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.plp__card-prices ins {
  text-decoration: none !important;
  color: var(--accent-default);
}

.plp-page .plp__card-badge {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  background: var(--accent-default);
  color: var(--text-on-accent);
  padding: var(--space-8) var(--space-16);
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.plp-page .plp__card-title {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-1000);
  line-height: 1.3;
}

.plp-page .plp__card-prices {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  color: var(--color-neutral-1000);
  margin: auto 0 0 0;
}

.plp-page .plp__card-price--sale {
  font-weight: var(--font-weight-semibold);
}

.plp-page .plp__card-price--original {
  color: var(--color-neutral-500);
  text-decoration: line-through;
}

.plp-page .plp__card-cta {
  width: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-accent);
  letter-spacing: 0.84px;
}

/* PLP — Individual category page (plp-racks-benches.html, etc.) */
.plp-category .plp__container {
  gap: var(--space-48);
}

.plp-category .plp-category__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.plp-category__rule {
  margin: var(--space-16) 0 0;
  border: 0;
  border-top: 1px solid var(--color-neutral-1000);
  width: 100%;
}

.plp-category__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.plp-category .plp-category__count {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  color: var(--color-neutral-1000);
}

.plp-category .plp-category__sort-select {
  font-size: var(--font-size-14);
  border-color: var(--color-neutral-500);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  min-width: 165px;
}

.plp-category .plp-category__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
}

/* Full-bleed footer feature: image + centered caption below */
.plp-category .plp-category__feature {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  align-items: center;
  background: var(--color-cream-base);
  padding: 0 0 var(--space-64);
  color: var(--color-neutral-1000);
}

.plp-category .plp-category__feature-image {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.plp-category .plp-category__feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.plp-category .plp-category__feature-text {
  max-width: 556px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  text-align: center;
}

.plp-category .plp-category__feature-text h1,
.plp-category .plp-category__feature-text h2,
.plp-category .plp-category__feature-text h3,
.plp-category .plp-category__feature-text h4,
.plp-category .plp-category__feature-text h5,
.plp-category .plp-category__feature-text h6 {
  margin: 0;
  font-family: "Field Gothic No.64 Demi", "Impact", system-ui, sans-serif;
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  line-height: var(--font-leading-snug);
  color: var(--color-neutral-1000);
}

.plp-category .plp-category__feature-body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
  color: var(--color-neutral-1000);
}

.plp-search--empty .plp-search__empty {
  max-width: 650px;
  margin: var(--space-64) auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  color: var(--color-neutral-1000);
}

.plp-search--empty .plp-search__empty-title {
  margin: 0;
  font-family: "Field Gothic No.64 Demi", "Impact", system-ui, sans-serif;
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
}

.plp-search--empty .plp-search__empty-body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  line-height: var(--font-leading-normal);
}

.blog-page {
  background: var(--color-cream-base);
  margin: 0;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.blog-page .blog__container {
  padding: 131px var(--space-32) 96px;
  color: var(--color-neutral-1000);
}

.blog-page .blog__layout {
  display: grid;
  grid-template-columns: 365px 1fr;
  gap: 60px;
  align-items: start;
}

.blog-page .blog__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.blog-page .blog__title {
  margin: 0;
  font-size: var(--font-size-48);
  line-height: var(--font-leading-tight);
}

.blog-page .blog__intro-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
}

.blog-page .blog__intro-body p {
  margin: 0;
}

.blog-page .blog__intro-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.blog__intro ul {
  padding: 0;
}

.blog__intro ul li {
  padding-left: 15px;
  list-style: none;
  position: relative;
}

.blog__intro ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 12px;
  width: 3px;
  height: 3px;
  background: var(--color-neutral-1000);
  transform: translateY(0px);
}

/* Articles grid (right) — 2 cols, n rows */
.blog-page .blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-48) var(--space-24);
}

.blog-page .blog-article {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: 0;
}

.blog-page .blog-article__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  text-decoration: none;
  color: inherit;
}

.blog-page .blog-article__media {
  position: relative;
  aspect-ratio: 439/317;
  overflow: hidden;
  background: var(--color-neutral-200);
}

.blog-page .blog-article__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

/* Tighter crop for the first article ("Anatomy Of A York Olympic Bar") */

.blog-page .blog-article__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.blog-page .blog-article__date {
  margin: 0;
  font-family: "Field Gothic No.64 Demi", "Impact", system-ui, sans-serif;
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-semibold);
  line-height: 32px;
  color: var(--text-accent);
}

.blog-page .blog-article__title {
  margin: 0;
  font-family: "Field Gothic No.64 Demi", "Impact", system-ui, sans-serif;
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-tight);
  text-transform: uppercase;
  color: var(--color-neutral-1000);
}

.blog-page .blog-article__desc {
  margin: var(--space-8) 0 0;
}

.blog-page .blog-article__divider {
  border: 0;
  border-top: 1px solid var(--color-neutral-1000);
  margin: 0;
}

.blog-page .blog-article:hover .blog-article__title {
  color: var(--text-accent);
}

.blog-page .blog-article:hover .blog-article__image {
  opacity: 0.9;
}

#page-home .home__bestsellers-heading {
  font-size: 48px;
  line-height: 48px;
}

.product-card .btn {
  margin-top: 8px;
}


.product-card__price--original,
.collections-product-card__price--original,
.muscle-page .collections-product-card__price--original,
.beginners-page .collections-product-card__price--original,
.longevity-page .collections-product-card__price--original,
.pdp-page .pdp__price-original,
.pdp-page .pdp__rec-price--original,
.pdp-single__rec-price--original,
.plp-page .plp__card-price--original {
  color: var(--color-neutral-500);
  font-weight: var(--font-weight-regular);
}

#page-home .home__bestsellers-grid .product-card__price,
#page-home .home__bestsellers-grid .product-card__price--sale,
.product-card__price,
.product-card__price--sale,
.collections-product-card__price,
.collections-product-card__price--sale,
#page-collections-beginner .collections-product-card__price,
#page-collections-beginner .collections-product-card__price--sale,
.muscle-page .collections-product-card__price,
.muscle-page .collections-product-card__price--sale,
.beginners-page .collections-product-card__price,
.beginners-page .collections-product-card__price--sale,
.longevity-page .collections-product-card__price,
.longevity-page .collections-product-card__price--sale,
.pdp-page .pdp__rec-price,
.pdp-page .pdp__rec-price--sale,
.pdp-single__rec-price,
.pdp-single__rec-price--sale,
.plp-page .plp__card-price,
.plp-page .plp__card-price--sale {
  font-weight: var(--font-weight-semibold);
}

.plp-page .plp__card:hover,
.beginners-page .collections-product-card:hover,
.muscle-page .collections-product-card:hover,
.longevity-page .collections-product-card:hover,
#page-collections-beginner .collections-product-card:hover,
.pdp-single__rec-card:hover,
.about-page .about__timeline-card:hover {
  border-color: var(--accent-default);
}

.product-card__image,
.collections-product-card__image,
.plp__card-image img,
.pdp__rec-image img,
.pdp-single__rec-image img,
.pdp-single__product-image img,
.pdp__featured-image img,
.about__timeline-image img {
  transition: transform 0.3s ease-in-out;
}

.beginners-page .collections-product-card__media,
.muscle-page .collections-product-card__media,
.longevity-page .collections-product-card__media {
  padding: 0;
  border: var(--space-16) solid var(--color-neutral-0);
}

.product-card:hover .product-card__image,
.collections-product-card:hover .collections-product-card__image,
.plp__card:hover .plp__card-image img,
.pdp__rec-card:hover .pdp__rec-image img,
.pdp-single__rec-card:hover .pdp-single__rec-image img,
.pdp-single__product:hover .pdp-single__product-image img,
.pdp__featured-card:hover .pdp__featured-image img,
.about__timeline-card:hover .about__timeline-image img {
  transform: scale(1.05);
}

.about_hr {
  margin: 0;
}

.mobile-breadcrumbs {
  display: none;
}

.blog-pagination {
  width: 100%;
  grid-column: 1/4;
  justify-content: center;
  display: flex;
  gap: 12px;
}

.blog-pagination .prev {
  transform: rotate(180deg);
}

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

.blog-pagination .current {
  color: var(--text-accent);
}

.pdp__variation-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pdp__variation-label {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
}

.pdp__variation-values {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  border: 0;
  padding: 0;
  margin: 0;
}

.pdp__variation-options {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pdp__variation-option {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-neutral-1000);
  cursor: pointer;
  background: transparent;
}

.pdp__variation-option--desc {
  position: relative;
  padding-left: 36px;
}

.pdp__variation-option--desc::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #cecece;
}

.pdp__variation-option.is-active {
  box-shadow: inset 0 0 0 1px var(--color-neutral-1000);
  background: var(--cream-base, #fbf7eb);
}

.pdp__variation-option--desc.is-active .pdp__variation-option--desc::before {
  border: 1px solid var(--accent-default);
}

.pdp__variation-option.is-active .pdp__variation-option--desc::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent-default);
}

.pdp-page .pdp__pkg {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.pdp__pkg-included .pdp__pkg-included-title {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-neutral-1000);
  margin: 0 0 var(--space-8);
}

.pdp-page .pdp__soi-tabs {
  display: flex;
}

.pdp-page .pdp__soi-tab {
  flex: 1 1 0;
  padding: var(--space-12) var(--space-16);
  background: var(--color-neutral-0);
  border: 0;
  border-bottom-width: 0px;
  border-bottom-style: none;
  border-bottom-color: currentcolor;
  border-bottom: 1px solid var(--color-neutral-1000);
  cursor: pointer;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-neutral-1000);
}

.pdp-page .pdp__soi {
  border: 1px solid var(--color-neutral-1000);
}

.pdp-page .pdp__soi-label {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-1000);
}

.pdp-page .pdp__soi-select {
  width: 100%;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-neutral-1000);
  background: var(--color-neutral-0);
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  color: var(--color-neutral-1000);
  border-radius: 0;
}

.pdp-page .pdp__soi-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-neutral-1000);
  width: 164px;
}

.pdp-page .pdp__soi-qty-btn {
  width: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-family-body);
  font-size: var(--font-size-20);
  line-height: 1;
  color: var(--color-neutral-1000);
  transition: background 0.15s ease;
}

.pdp-page .pdp__soi-qty-btn:hover {
  background: var(--accent-default);
  color: var(--text-on-accent);
}

.pdp-page .pdp__soi .pdp__weight-selector-label {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-1000);
}

.pdp-page .pdp__soi-qty-value {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  border-left: 1px solid var(--color-neutral-1000);
  border-right: 1px solid var(--color-neutral-1000);
  text-align: center;
  background: transparent;
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  color: var(--color-neutral-1000);
  -moz-appearance: textfield;
  appearance: textfield;
}

.pdp-page .pdp__soi-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-12) var(--space-16);
  border-top: 1px solid var(--color-neutral-1000);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-1000);
}

.pdp-page .pdp__soi-total-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pdp-page .pdp__soi-total-value {
  font-size: var(--font-size-20);
}

.pdp-page .pdp__soi-tab.is-active {
  background: var(--color-neutral-1000);
  color: var(--color-neutral-0);
  border-bottom-color: transparent;
}

.pdp-page .pdp__soi-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-16);
}

.pdp-page .pdp__soi-panel[hidden] {
  display: none;
}

.pdp-single .pdp-single__products--light .pdp-single__product:hover {
  transform: translateY(0px);
  box-shadow: 0 0 0;
}

.pdp-page .pdp__pkg-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-neutral-1000);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-1000);
}

.pdp__pkg-included .pdp__pkg-included-list {
  list-style: disc;
  padding-left: var(--space-16);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  font-family: var(--font-family-body);
  font-size: var(--font-size-14, 14px);
  color: var(--color-neutral-1000);
}


/* ── Responsive: 1440 breakpoint ── */
@media (max-width: 1440px) {

  #page-home .home__bestsellers-grid .product-card__media {
    aspect-ratio: 278 / 317;
  }

  .beginners-page .collections-beginner__closer-photo {
    aspect-ratio: 1440/288;
  }

  .beginners-page .collections-beginner__closer-photo-image {
    object-position: center 50%;
  }

  .blog-pagination {
    grid-column: 1/3;
  }

  .about-page .about__who {
    gap: 48px;
  }

  .about__who-images:has(> :nth-child(2):last-child) {
    transform: translateY(0px);
    height: auto;
  }

  .about__who-images img {
    aspect-ratio: 1/1;
  }

  .beginners-page .collections-beginner__closer-header {
    gap: 180px;
  }

  .beginners-page .collections-beginner__feature-heading {
    font-size: 32px;
  }

  .beginners-page .collections-beginner__feature-content p {
    font-size: 16px;
  }

  .about-page .about__intro-heading {
    font-size: 48px;
  }

  .display-lg {
    font-size: 48px;
  }

  .about-page .about__mission {
    padding: 64px 32px 75px;
  }

  .about-page .about__mission {
    gap: 32px;
  }

  .about-page .about__mission-grid {
    gap: 68px;
  }

  .about-page .about__mission-right {
    font-size: 16px;
  }

  .about-page .about__history-eyebrow {
    font-size: 24px;
  }

  .about-page .about__history-heading {
    font-size: 48px;
  }

  .about-page .about__history-inner {
    gap: 33px;
  }

  .about-page .about__history-body {
    font-size: 24px;
    max-width: 367px;
    width: 100%;
  }

  .about-page .about__history-chevron {
    left: auto;
    right: 460px;
    transform: translate(0);
  }

  .about-page .about__timeline-heading {
    font-size: 32px;
  }

  .about-page .about__timeline-body {
    font-size: 16px;
  }

  .about-page .about__timeline-text {
    gap: 24px;
    padding: 24px 32px 44px;
  }

  .about-page .about__timeline-image {
    aspect-ratio: 480/226;
  }

  .about-page .about__who-text p {
    font-size: 16px;
  }

  .about-page .about__history {
    height: 304px;
  }

  .about-page .about__intro-body p {
    font-size: 32px;
  }

  .about-page .about__container {
    gap: 24px;
  }

  .about-page .about__intro-body {
    margin-top: 0;
  }

  .about-page .about__container {
    padding-top: 130px;
  }

  .contact-page .contact__faq-heading {
    font-size: 24px;
  }

  .wpcf7-form textarea {
    height: 132px;
  }

  .wpcf7-form input {
    height: 48px;
  }

  .contact-page .contact__container {
    padding: 114px 32px 65px;
  }

  .contact-page .contact__title {
    font-size: 48px;
  }

  .contact-page .contact__hero {
    gap: 64px;
  }

  .contact-page .contact__row-body {
    width: 526px;
  }

  .contact-page .contact__row-text {
    padding-right: 25px;
  }

  .contact-page .contact__row-body .wpcf7 {
    padding: 0;
  }

  .contact-page .contact__faq-accordion {
    padding: 0;
    width: 526px;
  }

  .contact-page .contact__row-label {
    width: 495px;
    font-size: 24px;
  }

  .contact__faq-intro .label-sm-uppercase {
    font-size: 12px;
  }

  .contact-page .contact__faq-intro {
    max-width: 495px;
  }

  .contact__row {
    padding: 48px 0 56px;
  }

  .blog-page .blog__container {
    padding: 131px var(--space-32) 64px;
  }

  .blog-page .blog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .returns-page .returns__container,
  .shipping-page .returns__container,
  .warranty-page .returns__container {
    padding: 103px 32px 0;
  }

  .returns-page .returns__hero,
  .shipping-page .returns__hero,
  .warranty-page .returns__hero {
    gap: 54px;
  }

  .returns-page .returns__row,
  .shipping-page .returns__row,
  .warranty-page .returns__row {
    grid-template-columns: 394px 1fr;
    gap: 87px;
  }

  .returns-page .returns__row-label,
  .shipping-page .returns__row-label,
  .warranty-page .returns__row-label {
    font-size: 24px;
  }

  .site-footer__nav-columns {
    flex-wrap: wrap;
    padding-right: 90px;
  }

  #page-home .home__blog-ctas {
    margin-top: 112px;
  }

  .pdp-page .pdp__container {
    padding: calc(var(--space-24) + 58px + var(--space-48)) var(--space-32) var(--space-64);
  }

  .about-page .about__gallery {
    height: 548px;
  }

  .plp-page .plp__container {
    padding: calc(var(--space-24) + 58px + var(--space-48)) var(--space-32) var(--space-64);
  }

  #page-home .goal-card__media {
    aspect-ratio: 480/365;
  }

  #page-home .home__history-decoration {
    left: 890px;
    margin-left: 0px;
  }

  .dropdown__inner {
    padding: var(--space-32) var(--space-24);
  }

  .mega-goals {
    gap: var(--space-16);
  }

  #page-home .home__hero {
    aspect-ratio: 1441 / 636;
  }

}

@media (max-width: 1199px) {
  .site-footer__inner {
    grid-template-columns: 450px 1fr;
  }

  .blog-page .blog__layout {
    grid-template-columns: 265px 1fr;
  }
}

/* ── Responsive: tablet (1024px) ── */
@media (max-width: 1024px) {
  :root {
    --space-148: 96px;
  }

  .contact-page .contact__row {
    display: grid;
  }

  .contact-page .contact__row-label {
    width: 100%;
  }

  .contact-page .contact__row-text {
    width: 100%;
    padding-right: 0;
  }

  .contact-page .contact__faq-intro {
    width: 100%;
    max-width: 100%;
  }

  .contact-page .contact__faq-accordion {
    width: 100%;
  }

  #page-home .goal-card__title {
    font-size: 28px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-48);
    padding: 0 var(--space-32);
  }

  .plp-category .plp-category__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plp-page .plp__sort-label,
  {
  display: none;
}

.plp-page .plp__sort-select {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  position: relative;
  background: url(../icons/sort.svg) no-repeat;
  background-size: contain;
  font-size: 0px;
  transform: translateY(38px);
}

.plp-page .plp__sort-select:focus,
.plp-page .plp__sort-select:hover {
  border: 0 !important;
  box-shadow: 0 0 0 !important;
  outline: 0 !important;
}

.plp-category .plp__sort-select {
  transform: translateY(0px);
  min-width: 0;
}

.plp-page .plp__sort-select option {
  font-size: 14px;
}


.plp-page .plp__sort-icon {
  display: inline-flex;
}

.plp-category .plp-category__feature-image {
  height: 360px;
}

.pdp-page .pdp__featured {
  grid-template-columns: 1fr;
}

.pdp-page .pdp__featured-image {
  height: 360px;
}

.pdp-page .pdp__why-testimonials {
  grid-template-columns: 1fr;
}

.pdp-page .pdp__why-hero {
  height: 360px;
}

.pdp-single__recs-row {
  grid-template-columns: repeat(2, 1fr);
}

.pdp-generic .pdp-generic__feature-image {
  height: 360px;
}

.pdp-generic .pdp-generic__featured {
  height: 480px;
}

.pdp-single .pdp-single__products {
  grid-template-columns: 1fr;
}

#page-collections-muscle .collections-muscle__hero {
  min-height: 600px;
}

#page-collections-muscle .collections-muscle__intro {
  padding: var(--space-64) var(--space-32);
}

.returns-page .returns__row,
.shipping-page .returns__row,
.warranty-page .returns__row {
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

.contact-page .contact__row {
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

.pdp-single .pdp-single__feature-image,
.pdp-single .pdp-single__product-image {
  height: 360px;
}

.about-page .about__who-row {
  grid-template-columns: 1fr;
}

.about-page .about__timeline {
  grid-template-columns: 1fr;
}

.about-page .about__timeline-card {
  min-height: 0;
}

.about-page .about__timeline-text {
  height: auto;
  padding: var(--space-32);
}

.about-page .about__timeline-image {
  min-height: 320px;
}

.about-page .about__history {
  height: auto;
  min-height: 340px;
  padding-bottom: var(--space-48);
}

.about-page .about__history-inner {
  padding: var(--space-48) var(--space-32);
}

.about-page .about__mission-grid {
  grid-template-columns: 1fr;
  gap: var(--space-48);
}

.about-page .about__mission-image--primary {
  height: 560px;
}

.about-page .about__mission-image--secondary {
  height: 360px;
}

.about-page .about__founder-row {
  grid-template-columns: 1fr;
}

.about-page .about__founder-image {
  height: 480px;
}

.about-page .about__who-quotes {
  grid-template-columns: 1fr;
  max-width: none;
}

.longevity-page .collections-longevity__closer-row {
  grid-template-columns: 1fr;
  gap: var(--space-48);
  padding: var(--space-64) var(--space-32);
}

.longevity-page .collections-longevity__cta-grid {
  grid-template-columns: repeat(2, 1fr);
}

.longevity-page .collections-longevity__feature {
  grid-template-columns: 1fr;
}

.longevity-page .collections-longevity__intro {
  padding: var(--space-64) var(--space-32);
}

.longevity-page .collections-longevity__hero {
  min-height: 600px;
}

.longevity-page .collections-longevity__feature-media {
  min-height: 320px;
}

.longevity-page .collections-longevity__feature--reverse .collections-longevity__feature-media {
  order: 1;
}

.longevity-page .collections-longevity__feature--reverse .collections-longevity__feature-content {
  order: 2;
}

.longevity-page .collections-longevity__products {
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

.longevity-page .collections-longevity__products-grid {
  grid-template-columns: repeat(2, 1fr);
}

.beginners-page .collections-beginner__hero {
  min-height: 600px;
}

.muscle-page .collections-muscle__closer-header {
  grid-template-columns: 1fr;
  gap: var(--space-32);
  padding: var(--space-64) var(--space-32);
}

.muscle-page .collections-muscle__footer-cta {
  padding: var(--space-64) var(--space-32);
}

.muscle-page .collections-muscle__footer-cta-grid {
  grid-template-columns: repeat(2, 1fr);
}

.muscle-page .collections-muscle__closer-info {
  grid-template-columns: 1fr 1fr;
}

.beginners-page .collections-beginner__intro {
  padding: var(--space-64) var(--space-32);
}

.beginners-page .collections-beginner__feature {
  grid-template-columns: 1fr;
}

.beginners-page .collections-beginner__feature-media {
  min-height: 320px;
}

.beginners-page .collections-beginner__feature--reverse .collections-beginner__feature-media {
  order: 1;
}

.beginners-page .collections-beginner__feature--reverse .collections-beginner__feature-content {
  order: 2;
}

.beginners-page .collections-beginner__products {
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

.beginners-page .collections-beginner__products-grid {
  grid-template-columns: repeat(2, 1fr);
}

.beginners-page .collections-beginner__closer-header {
  grid-template-columns: 1fr;
  gap: var(--space-32);
  padding: var(--space-64) var(--space-32);
}

.beginners-page .collections-beginner__closer-info {
  grid-template-columns: 1fr 1fr;
}

.muscle-page .collections-muscle__feature--reverse .collections-muscle__feature-media {
  order: 1;
}

.muscle-page .collections-muscle__feature--reverse .collections-muscle__feature-content {
  order: 2;
}

.muscle-page .collections-muscle__hero {
  min-height: 600px;
}

.muscle-page .collections-muscle__intro {
  padding: var(--space-64) var(--space-32);
}

.muscle-page .collections-muscle__feature {
  grid-template-columns: 1fr;
}

.muscle-page .collections-muscle__feature-media {
  min-height: 320px;
}

.muscle-page .collections-muscle__products {
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

.muscle-page .collections-muscle__products-grid {
  grid-template-columns: repeat(2, 1fr);
}

#page-collections-beginner .collections-beginner__closer-header {
  grid-template-columns: 1fr;
  gap: var(--space-32);
  padding: var(--space-64) var(--space-32);
}

#page-collections-beginner .collections-beginner__closer-info {
  grid-template-columns: 1fr 1fr;
}

#page-collections-beginner .collections-beginner__feature--reverse .collections-beginner__feature-media {
  order: 1;
}

#page-collections-beginner .collections-beginner__feature--reverse .collections-beginner__feature-content {
  order: 2;
}

#page-collections-beginner .collections-beginner__feature {
  grid-template-columns: 1fr;
}

#page-collections-beginner .collections-beginner__feature-media {
  min-height: 320px;
}

#page-collections-beginner .collections-beginner__products {
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

#page-collections-beginner .collections-beginner__products-grid {
  grid-template-columns: repeat(2, 1fr);
}

#page-collections-beginner .collections-beginner__hero {
  min-height: 600px;
}

#page-collections-beginner .collections-beginner__intro {
  padding: var(--space-64) var(--space-32);
}

#page-home .home__blog-callout {
  padding: var(--space-48);
}

#page-home .home__bestsellers-grid {
  grid-template-columns: repeat(2, 1fr);
}

.pdp-page .pdp__split {
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

.pdp-page .pdp__info {
  position: static;
  top: auto;
}

.about-page .about__gallery {
  height: 548px;
}

.plp-page .plp__category {
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

.plp-page .plp__category-label {
  position: static;
}

.plp-page .plp__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#page-home .home__history-content {
  padding-bottom: var(--space-48);
}

#page-home .home__history-body {
  font-size: var(--font-size-24);
}

#page-home .home__hero-heading {
  font-size: var(--font-size-48);
}

#page-home .home__hero-content {
  padding: 0 var(--space-32) var(--space-48);
}

.site-footer__input-row {
  width: 100%;
}

.site-footer__nav-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-32) var(--space-24);
}

.site-footer__right {
  order: -1;
}

.site-footer__back-to-top {
  position: static;
  justify-content: flex-start;
}

.blog-page .blog__layout {
  grid-template-columns: 1fr;
  gap: var(--space-64);
}

.blog-page .blog__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 980px) {
  #page-home .goal-card__title {
    font-size: 24px;
  }

  .display-lg {
    font-size: 56px;
    line-height: 1;
  }

  #page-home .home__history-content {
    max-width: 600px;
  }

  #page-home .home__history-decoration {
    left: 640px;
  }

  #page-home .home__bestsellers-grid .product-card__media {
    aspect-ratio: 294 / 280;
  }
}

/* ── Responsive: mobile (767px) ── */
@media (max-width: 767px) {

  .blog-pagination {
    grid-column: 1;
  }

  .modal--gallery-image[open] {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .modal--gallery-image__carousel {
    padding: 0 25px;
  }

  .about__history-heading {
    font-size: 24px !important;
  }

  .announcement-bar {
    padding: 14px var(--space-24);
  }

  .plp-page .plp__card-prices {
    margin: auto 0 0 0;
  }

  .plp-page .plp__card-cta {
    margin-top: 0;
  }

  .plp-page .plp__card-badge {
    font-size: 11px;
    padding: 4px 8px;
    top: 8px;
  }

  .site-footer__newsletter form label br {
    display: none;
  }

  .pdp-page .pdp__split {
    margin-top: 32px;
  }

  .pdp-page .pdp__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .pdp-page .pdp__gallery-main {
    grid-column: 1/3;
    aspect-ratio: 1/1;
  }

  .pdp-page .pdp__gallery-cell {
    aspect-ratio: 1/1;
  }

  .pdp-page .pdp__gallery-row {
    gap: 8px;
  }

  .pdp__info .pdp__breadcrumbs {
    display: none;
  }

  .mobile-breadcrumbs {
    display: block;
  }

  .beginners-page .collections-beginner__feature-media {
    min-height: 0;
    aspect-ratio: 390/400;
  }

  .announcement-bar__nav {
    display: none;
  }

  .contact__faq-desc {
    font-size: 16px;
    margin-top: 8px;
  }

  .contact-page .contact__faq-intro {
    gap: 8px;
  }

  .contact__faq-intro .label-sm-uppercase {
    font-size: 10px;
  }

  .wpcf7-form input {
    height: 33px;
  }

  .wpcf7-form textarea {
    height: 88px;
  }

  .returns-page .returns__hero,
  .shipping-page .returns__hero,
  .warranty-page .returns__hero {
    gap: 32px;
  }

  #page-home .home__bestsellers::before {
    top: 112px;
    height: 130px;
    background-size: 100% 100%;
  }

  .returns-page .returns__row,
  .shipping-page .returns__row,
  .warranty-page .returns__row {
    padding: 48px 0;
  }

  .returns-page .returns__row,
  .shipping-page .returns__row,
  .warranty-page .returns__row {
    gap: 16px;
  }

  .returns-page .returns__row-body,
  .shipping-page .returns__row-body,
  .warranty-page .returns__row-body {
    gap: 16px;
  }

  #page-home .home__hero-dots {
    display: none;
  }

  .plp-search--empty .plp-search__empty-body {
    width: 300px;
    max-width: 100%;
  }

  .plp-category .plp-category__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pdp-page .pdp__featured-image {
    height: 280px;
  }

  .pdp-page .pdp__why {
    padding: var(--space-48) var(--space-16);
  }

  .pdp-page .pdp__why-heading {
    font-size: var(--font-size-32);
  }

  .pdp-page .pdp__why-hero {
    height: 240px;
  }

  .pdp-page .pdp__featured-text {
    padding: 0 var(--space-16);
  }

  .plp-category .plp-category__feature-image {
    height: 240px;
  }

  .plp-category .plp-category__feature-text {
    padding: 0 var(--space-24);
  }

  .plp-category .plp-category__feature {
    padding-bottom: 48px;
  }

  .plp-category .plp-category__feature-body {
    width: 300px;
    max-width: 100%;
  }

  .plp-search.plp-category .plp-category__toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .pdp-single__recs {
    padding: var(--space-48) var(--space-16);
    gap: var(--space-48);
  }

  .pdp-generic .pdp-generic__feature {
    padding: var(--space-48) var(--space-16);
  }

  .pdp-single .pdp-single__secondary {
    gap: var(--space-64);
  }

  #page-collections-muscle .collections-muscle__intro {
    padding: var(--space-64) var(--space-16);
  }

  #page-collections-muscle .collections-muscle__hero {
    min-height: 560px;
  }

  #page-collections-muscle .collections-muscle__breadcrumbs {
    top: calc(var(--space-24) + 58px + var(--space-24) + var(--space-16));
    left: var(--space-16);
    font-size: var(--font-size-12);
  }

  #page-collections-muscle .collections-muscle__hero-slogan {
    bottom: var(--space-64);
    left: var(--space-24);
    right: var(--space-24);
  }

  #page-collections-muscle .collections-muscle__hero-heading {
    font-size: var(--font-size-32);
  }

  .pdp-single .pdp-single__feature-image,
  .pdp-single .pdp-single__product-image {
    height: 240px;
  }

  .pdp-single .pdp-single__feature-text,
  .pdp-single .pdp-single__product-text {
    padding: 0 var(--space-16);
  }

  .pdp-generic .pdp-generic__feature-card {
    padding: 16px 0 24px 0;
  }

  .pdp-generic__features-row {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 16px 0 24px 0;
  }

  .pdp-single .pdp-single__product {
    gap: 16px;
  }

  .pdp-page .pdp__addon {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .pdp-page .pdp__addon-text {
    width: 100%;
    padding-left: 30px;
  }

  .pdp-single .pdp-single__products {
    gap: 24px;
  }

  .pdp-single__recs .pdp-single__recs-heading {
    font-size: 24px;
  }

  .pdp-generic .pdp-generic__feature-body {
    width: 300px;
  }

  .pdp-generic .pdp-generic__feature-image {
    height: 240px;
  }

  .pdp-generic .pdp-generic__featured {
    height: 320px;
  }

  .pdp-single__recs-desc {
    font-size: var(--font-size-16);
  }

  .pdp-single__recs-row {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }

  .pdp-single__rec-card {
    padding: 16px;
  }

  .pdp-single__rec-card {
    gap: 8px;
  }

  .pdp-single__rec-title {
    font-weight: var(--font-weight-semibold);
  }

  .pdp__weight-selector {
    margin-top: 16px;
  }

  .pdp__weight-grid {
    grid-template-columns: 1fr;
  }

  .pdp__weight-stepper {
    padding: 4px 16px;
  }

  .returns-page .returns__container,
  .shipping-page .returns__container,
  .warranty-page .returns__container {
    padding: 88px 24px 0;
  }

  .contact-page .contact__container {
    padding: 88px var(--space-16) var(--space-48);
  }

  .contact-page .contact__hero {
    gap: 32px;
  }

  .about-page .about__who {
    padding: var(--space-48) var(--space-16);
    gap: var(--space-48);
  }

  .about-page .about__timeline {
    padding: var(--space-32) var(--space-16);
    gap: var(--space-24);
    background: var(--color-cream-base);
  }

  .about-page .about__timeline-card {
    height: 540px;
    grid-template-rows: auto 1fr;
  }

  .about-page .about__timeline-text {
    padding: var(--space-24);
    gap: var(--space-16);
  }

  .about-page .about__timeline-heading {
    font-size: var(--font-size-24);
  }

  .about-page .about__timeline-body {
    font-size: var(--font-size-16);
  }

  .about-page .about__timeline-image {
    min-height: 0;
  }

  .about-page .about__who-tab {
    font-size: var(--font-size-24);
  }

  .about-page .about__who-images {
    gap: var(--space-16);
  }

  .about-page .about__founder-image {
    height: 360px;
  }

  .contact-page .contact__title,
  .contact-page h1.contact__title.display-lg {
    font-size: 24px;
  }

  .contact-page .contact__row {
    gap: 16px;
  }

  .contact-page .contact__row-body {
    max-width: 526px;
    width: 100%;
  }

  .contact-page .contact__row--faq {
    gap: 24px !important;
  }

  .contact-page .contact__faq-summary {
    font-size: 16px;
    font-weight: 400;
    padding: 12px 0;
  }

  .contact__faq-body * {
    font-size: 14px;
  }

  .wpcf7-form label {
    gap: 6px;
  }

  .wpcf7-form {
    gap: 16px;
  }

  .wpcf7-form .wpcf7-submit {
    height: 33px;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    padding: 0 24px;
  }

  .btn {
    font-size: 14px;
    height: 33px;
  }

  .contact-page .contact__row-body {
    gap: 16px;
  }

  .contact-page .contact__row-label {
    font-size: var(--font-size-24);
  }

  .returns-page .returns__title,
  .shipping-page .returns__title,
  .warranty-page .returns__title,
  .returns-page h1.returns__title.display-lg,
  .shipping-page h1.returns__title.display-lg,
  .warranty-page h1.returns__title.display-lg {
    font-size: 24px;
    line-height: 1;
  }

  .returns-page .returns__row-label,
  .shipping-page .returns__row-label,
  .warranty-page .returns__row-label {
    font-size: var(--font-size-24);
  }

  .about-page .about__history {
    min-height: 0;
  }

  .about-page .about__container {
    padding: calc(var(--space-24) + 44px + var(--space-24)) var(--space-16) var(--space-48);
    gap: var(--space-48);
  }

  .about-page .about__intro {
    min-height: 120vh;
  }

  .about-page .about__intro-heading,
  .about-page h1.about__intro-heading.display-lg,
  .about-page .about__mission-heading,
  .about-page h2.about__mission-heading.display-lg,
  .about-page .about__history-heading,
  .about-page h2.about__history-heading {
    font-size: var(--font-size-48);
    line-height: var(--font-leading-tight);
  }

  .about-page .about__intro-body p {
    font-size: var(--font-size-20);
  }

  .about-page .about__mission-text p.body-md {
    font-size: var(--font-size-16);
  }

  .about-page .about__mission-statement {
    font-size: var(--font-size-20);
  }

  .about-page .about__mission-image--primary {
    height: 420px;
  }

  .about-page .about__mission-image--secondary {
    height: 280px;
  }

  .about-page .about__history-inner {
    padding: var(--space-48) var(--space-16) var(--space-48);
    gap: 8px;
  }

  .about-page .about__history-row {
    flex-direction: column;
    gap: var(--space-16);
  }

  .about-page .about__history-eyebrow {
    font-size: var(--font-size-14);
    letter-spacing: var(--font-tracking-wider);
  }

  .about-page .about__history-heading {
    font-size: var(--font-size-24);
  }

  .about-page .about__history-body {
    font-size: var(--font-size-16);
    max-width: 220px;
  }

  .about-page .about__history {
    padding-bottom: 0;
  }

  .about-page .about__history-chevron {
    display: block;
    top: 50%;
    left: auto;
    right: 10px;
    transform: translateY(-50%);
    height: 115px;
    width: auto;
    aspect-ratio: 668 / 519;
  }

  .longevity-page .collections-longevity__closer {
    flex-direction: column-reverse;
  }

  .longevity-page .collections-longevity__cta {
    padding: var(--space-24) var(--space-24);
  }

  .longevity-page .collections-longevity__cta {
    gap: 16px;
  }

  .plp-page .plp__category {
    gap: 32px;
  }

  .plp-page-shop .plp__category {
    gap: 16px;
  }

  .plp-category .plp-category__header {
    margin-bottom: -32px;
  }

  .plp-page .plp__category-label {
    font-size: 16px !important;
  }

  .plp-page .plp__card {
    padding: 16px;
  }

  .plp-page .plp__card-title {
    font-size: 14px;
  }

  .plp-page .plp__card-image {
    aspect-ratio: 1/1;
  }

  .longevity-page .collections-longevity__cta-heading {
    font-size: 24px;
  }

  .longevity-page .collections-longevity__cta-grid {
    margin-top: 16px;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .longevity-page .collections-longevity__feature-content {
    padding: var(--space-32) var(--space-16);
  }

  .longevity-page .collections-longevity__feature-heading,
  .longevity-page h2.collections-longevity__feature-heading.display-lg {
    font-size: var(--font-size-32);
    line-height: var(--font-leading-tight);
  }

  .longevity-page .collections-longevity__products {
    padding: var(--space-48) var(--space-24);
  }

  .longevity-page .collections-longevity__products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-24);
  }

  .longevity-page .collections-longevity__closer-row {
    padding: var(--space-48) var(--space-16);
    gap: var(--space-32);
  }

  .longevity-page .collections-longevity__closer-heading,
  .longevity-page h2.collections-longevity__closer-heading.display-lg {
    font-size: var(--font-size-24);
    line-height: var(--font-leading-tight);
  }

  .longevity-page .collections-longevity__closer-offer-title {
    font-size: var(--font-size-16);
  }

  .longevity-page .collections-longevity__closer-offers {
    grid-template-columns: 1fr;
  }

  .longevity-page .collections-longevity__closer-image {
    height: 200px;
  }

  .longevity-page .collections-longevity__intro {
    padding: var(--space-32) var(--space-24);
    gap: var(--space-16);
    text-align: left;
    align-items: flex-start;
  }

  .longevity-page .collections-longevity__hero {
    min-height: 560px;
  }

  .longevity-page .collections-longevity__breadcrumbs {
    top: calc(var(--space-24) + 44px + var(--space-24));
    left: var(--space-16);
    font-size: var(--font-size-12);
  }

  .longevity-page .collections-longevity__hero-slogan {
    bottom: var(--space-64);
    left: var(--space-24);
    right: var(--space-24);
  }

  .longevity-page .collections-longevity__hero-heading {
    font-size: var(--font-size-32);
  }

  .longevity-page .collections-longevity__intro .collections-longevity__intro-heading,
  .longevity-page h2.collections-longevity__intro-heading.display-xl {
    font-size: var(--font-size-32);
    line-height: var(--font-leading-tight);
  }

  .longevity-page .collections-longevity__intro-body {
    gap: var(--space-16);
  }

  .longevity-page .collections-longevity__intro-body p {
    font-size: var(--font-size-16);
  }

  .beginners-page .collections-beginner__hero {
    min-height: 560px;
  }

  .beginners-page .collections-beginner__breadcrumbs {
    top: 88px;
    left: var(--space-24);
    font-size: var(--font-size-12);
  }

  .beginners-page .collections-beginner__hero-slogan {
    bottom: 24px;
    left: var(--space-24);
    right: var(--space-24);
  }

  .beginners-page .collections-beginner__hero-heading {
    font-size: var(--font-size-24);
  }

  .beginners-page .collections-beginner__intro {
    padding: 84px var(--space-24);
    gap: var(--space-16);
    text-align: center;
    align-items: flex-start;
  }

  .beginners-page .collections-beginner__intro .collections-beginner__intro-heading,
  .beginners-page h2.collections-beginner__intro-heading.display-xl {
    font-size: var(--font-size-32);
    line-height: var(--font-leading-tight);
  }

  .beginners-page .collections-beginner__intro-body {
    gap: var(--space-16);
  }

  .beginners-page .collections-beginner__intro-body p {
    font-size: var(--font-size-16);
  }

  .beginners-page .collections-beginner__feature-heading,
  .beginners-page h2.collections-beginner__feature-heading.display-lg {
    font-size: var(--font-size-24);
    line-height: var(--font-leading-tight);
  }

  .beginners-page .collections-beginner__feature-content {
    padding: var(--space-48) var(--space-24);
  }

  .beginners-page .collections-beginner__products {
    padding: var(--space-48) var(--space-24);
  }

  .beginners-page .collections-beginner__products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-24);
  }

  .beginners-page .collections-beginner__closer {
    display: flex;
    flex-direction: column-reverse;
  }

  .beginners-page .collections-beginner__closer-header {
    padding: var(--space-48) var(--space-16);
  }

  .beginners-page .collections-beginner__closer-heading,
  .beginners-page h2.collections-beginner__closer-heading.display-lg {
    font-size: var(--font-size-24);
    line-height: var(--font-leading-tight);
  }

  .beginners-page .collections-beginner__closer-info-heading {
    font-size: var(--font-size-16);
  }

  .beginners-page .collections-beginner__closer-info {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  .beginners-page .collections-beginner__closer-photo {
    height: 200px;
  }

  .muscle-page .collections-muscle__closer {
    display: flex;
    flex-direction: column-reverse;
  }

  .muscle-page .collections-muscle__footer-cta {
    padding: var(--space-64) var(--space-16);
  }

  .muscle-page .collections-muscle__footer-cta-grid {
    grid-template-columns: 1fr;
  }

  .muscle-page .collections-muscle__closer-header {
    padding: var(--space-48) var(--space-16);
  }

  .muscle-page .collections-muscle__closer-heading,
  .muscle-page h2.collections-muscle__closer-heading.display-lg {
    font-size: var(--font-size-24);
    line-height: var(--font-leading-tight);
  }

  .muscle-page .collections-muscle__closer-info-heading {
    font-size: var(--font-size-16);
  }

  .muscle-page .collections-muscle__closer-info {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  .muscle-page .collections-muscle__closer-photo {
    height: 200px;
  }

  .muscle-page .collections-muscle__hero {
    min-height: 560px;
  }

  #page-collections-beginner .collections-beginner__closer-header {
    padding: var(--space-48) var(--space-16);
  }

  #page-collections-beginner .collections-beginner__closer-info {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  .collections-beginner__intro-heading {
    width: 100%;
  }

  #page-collections-beginner .collections-beginner__closer-photo {
    height: 200px;
  }

  #page-collections-beginner .collections-beginner__feature-content {
    padding: var(--space-32) var(--space-16);
  }

  #page-collections-beginner .collections-beginner__products {
    padding: var(--space-48) var(--space-16);
  }

  #page-collections-beginner .collections-beginner__products-grid {
    grid-template-columns: 1fr;
  }

  .muscle-page .collections-muscle__breadcrumbs {
    top: calc(var(--space-24) + 44px + var(--space-24));
    left: var(--space-16);
    font-size: var(--font-size-12);
  }

  .muscle-page .collections-muscle__hero-slogan {
    bottom: var(--space-64);
    left: var(--space-24);
    right: var(--space-24);
  }

  .muscle-page .collections-muscle__hero-heading {
    font-size: var(--font-size-32);
  }

  .muscle-page .collections-muscle__intro {
    padding: var(--space-32) var(--space-24);
    gap: var(--space-16);
    text-align: left;
    align-items: flex-start;
  }

  .muscle-page .collections-muscle__intro .collections-muscle__intro-heading,
  .muscle-page h2.collections-muscle__intro-heading.display-xl {
    font-size: var(--font-size-32);
    line-height: var(--font-leading-tight);
  }

  .muscle-page .collections-muscle__intro-body {
    gap: var(--space-16);
  }

  .muscle-page .collections-muscle__intro-body p {
    font-size: var(--font-size-16);
  }

  .muscle-page .collections-muscle__feature-content {
    padding: var(--space-32) var(--space-16);
  }

  .muscle-page .collections-muscle__feature-heading,
  .muscle-page h2.collections-muscle__feature-heading.display-lg {
    font-size: var(--font-size-32);
    line-height: var(--font-leading-tight);
  }

  .muscle-page .collections-muscle__products {
    padding: var(--space-48) var(--space-24);
  }

  .muscle-page .collections-muscle__products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-24);
  }

  #page-collections-beginner .collections-beginner__intro {
    padding: var(--space-64) var(--space-16);
    gap: var(--space-24);
  }

  #page-home .home__blog {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  #page-home .home__blog-image-wrapper {
    order: 1;
    aspect-ratio: 390/410;
  }

  #page-home .home__blog-callout {
    order: 2;
    padding: var(--space-32) var(--space-24);
    gap: 32px;
  }

  #page-home .home__blog-heading {
    font-size: var(--font-size-32);
  }

  #page-home .home__blog-ctas {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 16px;
    gap: var(--space-16);
  }

  .site-footer__newsletter-body {
    font-size: 14px;
  }

  .site-footer__address {
    margin-top: 5px;
  }

  .site-footer__contact {
    margin-top: 12px;
  }

  .site-footer__address strong {
    margin-bottom: -8px;
    display: block;
  }

  .home__blog-ctas--link {
    font-size: 14px;
  }

  #page-home .home__blog-cta--button {
    width: 100%;
  }

  #page-home .home__blog-cta:not(.home__blog-cta--button) {
    align-self: flex-end;
  }

  #page-collections-beginner .collections-beginner__hero {
    min-height: 560px;
  }

  #page-collections-beginner .collections-beginner__breadcrumbs {
    top: calc(var(--space-24) + 58px + var(--space-24) + var(--space-16));
    left: var(--space-16);
    font-size: var(--font-size-12);
  }

  #page-collections-beginner .collections-beginner__hero-slogan {
    bottom: var(--space-64);
    left: var(--space-24);
    right: var(--space-24);
  }

  #page-collections-beginner .collections-beginner__hero-heading {
    font-size: var(--font-size-32);
  }

  .site-nav__cart-badge {
    left: 14px;
  }

  #page-home .home__goals {
    padding: 0;
    gap: 0;
  }

  #page-home .home__goals-header {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-24);
    gap: var(--space-16);
  }

  #page-home .home__goals-heading {
    font-size: 24px;
    line-height: 24px;
    margin: 0;
  }

  #page-home .home__goals-cta {
    display: none;
  }

  #page-home .home__goals-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .announcement-bar__message {
    font-size: 12px;
    white-space: normal;
  }

  #page-home .goal-card__header {
    padding: 32px 24px 44px;
    gap: 32px;
  }

  .modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
  }

  .modal--gallery-image::backdrop {
    background: rgba(16, 24, 32, 0.85);
  }

  .modal--gallery-image__slides {
    aspect-ratio: 3 / 4;
  }

  .modal--gallery-image__slide img {
    object-fit: cover;
  }

  .modal--side {
    width: 100%;
  }

  .modal--side__heading {
    font-size: var(--font-size-32);
  }

  #page-home .home__bestsellers {
    padding: 112px var(--space-24) 48px;
    gap: var(--space-24);
  }

  #page-home .home__bestsellers-grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  #page-home .home__bestsellers-heading {
    font-size: var(--font-size-32);
    line-height: 1;
  }

  #page-home .home__bestsellers-header {
    gap: 32px;
  }

  #page-home .home__bestsellers-footer {
    margin-top: 16px;
  }

  .product-card .btn {
    margin-top: 30px;
  }

  #page-home>*+* {
    margin-top: var(--space-64);
  }

  .pdp-page .pdp__container {
    padding: 72px 24px 38px;
  }

  .pdp-page .pdp__breadcrumbs ol {
    font-size: 14px;
    gap: 4px;
  }

  .pdp-page .pdp__title {
    font-size: 32px;
  }

  .pdp-page .pdp__info {
    gap: 0;
  }

  .pdp-page .pdp__rule {
    border-top: 1px solid rgba(217, 217, 217, 1);
  }

  .pdp-page .pdp__description {
    margin-top: 16px;
  }

  .pdp__info form.cart {
    margin-top: 16px;
    gap: 32px;
  }

  .pdp-page .pdp__quantity-input {
    height: 35px;
  }

  .pdp-page .pdp__quantity-input .quantity {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pdp-page .pdp__price-row {
    margin-top: 32px;
    gap: 8px;
  }

  .pdp-page .pdp__financing {
    margin-top: 24px;
  }

  .pdp-page .pdp__accordion {
    margin-top: 48px;
  }

  .pdp-page .pdp__key-features {
    margin-top: 24px;
  }

  .pdp-generic .pdp-generic__feature {
    margin-top: 0;
  }

  .cart-drawer {
    width: 100%;
  }

  .about-page .about__gallery {
    height: 400px;
  }

  #page-home .home__history-inner {
    padding: 0 var(--space-24);
  }

  #page-home .home__history-heading {
    font-size: var(--font-size-32);
  }

  #page-home .home__history-content {
    padding-bottom: 44px;
    gap: 32px;
  }

  #page-home .home__history-body {
    font-size: var(--font-size-20);
  }

  #page-home .home__history-cta {
    margin-top: 12px;
    height: 33px;
    font-size: 14px;
  }

  #page-home .home__history-decoration {
    left: calc(58vw + 24px);
    right: auto;
    top: auto;
    bottom: -88px;
    z-index: 9;
    width: 177px;
    height: 188px;
    object-fit: contain;
  }

  #page-home .home__history-divider {
    max-width: 53vw;
    margin: 0;
    margin-left: 24px;
  }

  .site-header {
    left: 0;
    right: 0;
    top: auto;
  }

  #page-home .home__hero {
    aspect-ratio: 390 / 600;
    min-height: 600px;
    margin-top: 0 !important;
  }

  #page-home .home__hero-overlay {
    background: rgba(0, 0, 0, 0.20);
  }

  #page-home .home__hero-content {
    padding: 0 var(--space-24) 40px;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0;
  }

  .home__hero-content .btn {
    height: 33px;
    font-size: 14px;
  }

  #page-home .home__hero-heading {
    font-size: 24px;
    max-width: 100%;
    text-align: left;
    margin-bottom: var(--space-16);
  }

  #page-home .home__hero-subhead {
    max-width: 100%;
    text-align: left;
    margin-bottom: var(--space-24);
  }

  #page-home .home__hero-actions {
    justify-content: flex-start;
    margin: 0;
  }

  .page:not(#page-home) {
    padding-top: var(--space-24);
  }

  .plp-page .plp__container {
    padding: 72px var(--space-24) var(--space-24);
    gap: var(--space-48);
  }

  .plp-page .plp__header {
    gap: 0;
  }

  .plp-page .plp__title-row {
    margin-top: 40px;
  }

  .plp-page .plp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plp-page .plp__category-label {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
  }

  .plp-page .plp__toolbar {
    margin-top: 24px;
    flex-direction: column;
    align-items: flex-start;
  }

  .plp-page .plp__filters {
    padding-bottom: 24px;
    scrollbar-width: thin;
    scrollbar-color: #DA291C #D9D9D9;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .plp-page .plp__filters::-webkit-scrollbar {
    height: 4px;
  }

  .plp-category__rule {
    margin-top: 0;
  }

  .plp-page .plp__filters::-webkit-scrollbar-track {
    background: rgba(217, 217, 217, 1);
    border-radius: 16px;
  }

  .plp-page .plp__filters::-webkit-scrollbar-thumb {
    background: #DA291C;
    border-radius: 16px;
  }

  .plp-category__toolbar {
    margin-top: 24px;
  }

  .plp-page .plp__sort {
    width: 100%;
    justify-content: space-between;
  }

  .site-nav {
    padding: 16px 24px;
    gap: 8px;
  }

  .site-nav__logo img {
    height: 20px;
  }

  .site-nav__links {
    display: none;
  }

  .site-nav__icon-btn[aria-label="Account"] {
    display: none;
  }

  .site-nav__cart-total {
    display: none;
  }

  .blog-page .blog__container {
    padding: 88px var(--space-24) 51px;
  }

  .blog-page .blog__layout {
    gap: var(--space-48);
  }

  .blog-page .blog__title {
    font-size: var(--font-size-32);
  }

  .blog-page .blog__grid {
    grid-template-columns: 1fr;
    gap: var(--space-48);
  }

  .blog-page .blog-article {
    padding: 0;
  }

  .blog-page .blog-article__media {
    aspect-ratio: 345/317;
  }

  .blog-page .blog-article__date {
    font-size: 24;
    line-height: 1.3;
  }

  .blog-page .blog-article__title {
    font-size: 24px;
    line-height: 1.3;
  }

  .site-nav__hamburger {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin-left: auto;
  }

  .site-nav__hamburger svg {
    width: 24px;
    height: 24px;
  }

  .site-nav__icons {
    gap: var(--space-8);
  }

  .site-nav__icon-btn {
    padding: 0;
  }

  .dropdown {
    display: none !important;
  }

  .search-overlay__inner {
    padding: var(--space-32) var(--space-16);
    gap: var(--space-32);
  }

  .search-overlay__close {
    font-size: var(--font-size-12);
  }


  .site-footer {
    padding: var(--space-32) 0 170px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-48);
    padding: 0 var(--space-24);
  }

  .site-footer__left {
    gap: var(--space-32);
    order: 1;
  }

  .site-footer__right {
    order: 2;
    gap: 44px;
  }

  .site-footer__social {
    order: -1;
  }

  .site-footer__input-row {
    width: 100%;
  }

  .site-footer__nav-columns {
    display: flex;
    flex-direction: column;
    gap: var(--space-44);
  }

  .site-footer__col {
    flex: none;
    gap: 16px;
  }

  .site-footer__col li a br {
    display: none;
  }

  .site-footer__back-to-top {
    position: static;
    justify-content: flex-start;
  }

  .site-footer__bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 38px;
    border-top: 0;
    padding-top: 0;
    position: absolute;
    bottom: 74px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .product-card:hover .product-card__image,
  .collections-product-card:hover .collections-product-card__image,
  .plp__card:hover .plp__card-image img,
  .pdp__rec-card:hover .pdp__rec-image img,
  .pdp-single__rec-card:hover .pdp-single__rec-image img,
  .pdp-single__product:hover .pdp-single__product-image img,
  .pdp__featured-card:hover .pdp__featured-image img,
  .about__timeline-card:hover .about__timeline-image img {
    transform: none;
  }
}