#model-colour-selector {
  padding-bottom: 0;
}
.brough-model-detail-selector:after {
  content: "";
  display: block;
  width: 100%;
  height: 70px;
}

.brough-product-detail-page #product-media {
  position: relative;
  min-height: min(56.25vw, 1080px);
  margin-top: 0;
  padding-top: 0;
  color: #fff;
  background: #030303;
}

.brough-product-detail-page #product-media .brough-hero-section__media {
  height: min(56.25vw, 1080px);
  min-height: 560px;
}

.brough-product-detail-page #product-media .brough-hero-section__image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.brough-product-detail-page #product-media .brough-hero-section__inner {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0 clamp(24px, 6vw, 96px);
  pointer-events: none;
  place-items: center;
  text-align: center;
}

.brough-product-detail-page #product-media .brough-block__heading {
  color: #fff;
  font-family: var(--brough-font-heading, inherit);
  font-size: clamp(4rem, 7vw, 8.3rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

.brough-product-detail-page #product-nav {
  color: #fff;
  background: #050505;
}

.brough-product-detail-page #product-nav .brough-card-grid__inner {
  width: min(100%, 1120px);
}

.brough-product-detail-page #product-nav .brough-card-grid__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(22px, 4vw, 62px);
  margin-top: 0;
}

.brough-product-detail-page #product-nav .brough-card-grid__card {
  flex: 0 0 auto;
}

.brough-product-detail-page #product-nav .brough-card-grid__content {
  padding-top: 0;
}

.brough-product-detail-page #product-nav .brough-card-grid__title {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.9rem;
  line-height: 1;
  text-transform: uppercase;
}

.brough-product-detail-page .brough-model-detail-intro,
.brough-model-detail-page main,
.brough-model-detail-selector,
.brough-model-detail .brough-model-detail-specifications {
  background: #000 !important;
}
/* Model detail page styles moved out of the shared Vite stylesheet. */

.brough-model-detail-tabs {
  position: sticky;
  top: calc(var(--brough-admin-bar-offset, 0px) + var(--brough-header-current-height, 93px));
  z-index: 45;
  color: #fff;
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.brough-model-detail-tabs__scroller {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.brough-model-detail-tabs__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex: 0 0 min(100% - 40px, 1440px);
  width: min(100% - 40px, 1440px);
  min-height: 42px;
  margin: 0 auto;
  gap: clamp(34px, 5.4vw, 86px);
}

.brough-model-detail-tabs__model-name {
  position: absolute;
  left: 0px;
  font-family: var(--brough-font-body, inherit);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.brough-model-detail-tabs__scroller::-webkit-scrollbar {
  display: none;
}

.brough-model-detail-tabs__link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--brough-font-body, inherit);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.brough-model-detail-tabs__link--current,
.brough-model-detail-tabs__link--active,
.brough-model-detail-tabs__link:hover,
.brough-model-detail-tabs__link:focus-visible {
  color: #fff;
}

.brough-model-detail-tabs__link:focus-visible {
  outline: 2px solid #bca77a;
  outline-offset: -6px;
}

.brough-model-detail-page main {
  background: #030303;
}

.brough-product-detail-page .brough-model-detail-intro {
  display: flex;
  flex-direction: column-reverse;
  background: #030303;
}

.brough-product-detail-page .brough-model-detail-intro .brough-hero-section__inner {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 154px) clamp(24px, 6vw, 96px) clamp(20px, 4vw, 56px);
  text-align: center;
}

.brough-product-detail-page .brough-model-detail-intro .brough-block__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.7vw, 24px);
}

.brough-product-detail-page .brough-model-detail-intro .brough-block__intro::before {
  display: block;
  color: #fff;
  font-family: var(--brough-font-heading, inherit);
  font-size: clamp(4.5rem, 11vw, 10.8rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brough-product-detail-page .brough-model-detail-intro .brough-block__heading {
  max-width: 760px;
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  line-height: 1.18;
}

.brough-product-detail-page .brough-model-detail-intro .brough-block__text {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.brough-product-detail-page .brough-model-detail-intro .brough-hero-section__media {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: clamp(680px, 58vw, 1020px);
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.11), transparent 32%),
    #030303;
}

.brough-product-detail-page .brough-model-detail-intro .brough-hero-section__image {
  width: min(1540px, 92vw);
  min-height: 0;
  max-height: clamp(560px, 48vw, 880px);
  margin: 0 auto clamp(42px, 5vw, 90px);
  object-fit: contain;
  filter: drop-shadow(0 52px 74px rgba(0, 0, 0, 0.78));
}

.brough-model-detail-selector .brough-product-selector__inner {
	width: min(100%, 1280px);
	max-width: none;
	gap: clamp(18px, 2.4vw, 32px);
}

.brough-product-selector__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vw, 56px);
}

.brough-product-selector__controls {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 18px);
  align-items: center;
}

.brough-product-selector__option {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  color: currentColor;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.brough-product-selector__option[disabled] {
  cursor: not-allowed;
  opacity: 0.38;
}

.brough-product-selector__option:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

.brough-product-selector__swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, currentColor 44%, transparent);
  border-radius: 999px;
  background: var(--brough-selector-swatch, transparent);
  overflow: hidden;
}

.brough-product-selector__option.is-active .brough-product-selector__swatch {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.brough-product-selector__swatch-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brough-product-selector__option-label {
  max-width: 112px;
  font-size: 0.7rem;
  line-height: 1.25;
  text-align: center;
}

.brough-product-selector__image,
.brough-product-selector__video {
  display: block;
  width: 100%;
  height: auto;
}

.brough-product-selector__label {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 4vw, 3.25rem);
  line-height: 1.05;
}

.brough-product-selector__model,
.brough-product-selector__spec,
.brough-product-selector__story {
  max-width: 620px;
}

.brough-product-selector__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vw, 56px);
}

.brough-product-selector__controls {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 18px);
  align-items: center;
}

.brough-product-selector__option[disabled] {
  cursor: not-allowed;
  opacity: 0.38;
}

.brough-product-selector__option:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

.brough-product-selector__swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 2px solid color-mix(in srgb, currentColor 44%, transparent);
  border-radius: 999px;
  background: var(--brough-selector-swatch, transparent);
  overflow: hidden;
}

.brough-product-selector__option.is-active .brough-product-selector__swatch {
  /*outline: 1px solid currentColor;*/
  outline-offset: -2px;
}

.brough-product-selector__swatch-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brough-product-selector__option-label {
  max-width: 112px;
  font-size: 0.7rem;
  line-height: 1.25;
  text-align: center;
}

.brough-product-selector__image,
.brough-product-selector__video {
  display: block;
  width: 100%;
  height: auto;
}

.brough-product-selector__label {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 4vw, 3.25rem);
  line-height: 1.05;
}

.brough-product-selector__model,
.brough-product-selector__spec,
.brough-product-selector__story {
  max-width: 620px;
}

.brough-model-detail-selector {
  padding-top: clamp(96px, 9vw, 170px);
  padding-bottom: clamp(120px, 10vw, 210px);
  background: #030303;
}

.brough-model-detail-selector .brough-product-selector__inner::before {
  display: block;
  color: #fff;
  font-family: var(--brough-font-heading, inherit);
  font-size: clamp(4.25rem, 7.4vw, 9.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.brough-model-detail-selector .brough-product-selector__logo {
  width: 100%;
  bottom: 100%;
}

.brough-model-detail-selector .brough-product-selector__heading {
  max-width: 820px;
  margin: 0;
  font-family: "helvetica-neue-lt-pro", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 0.98;
  margin-top: 40px;
}
/* Was a discrete .is-spec-panel-open visibility:hidden toggle — folded into
   the continuous opacity/max-height collapse on the heading/sub-header/text
   rule below, driven by --brough-specs-progress. */

.brough-model-detail-selector .brough-product-selector__sub-header,
.brough-model-detail-selector .brough-product-selector__text {
  max-width: 620px;
  margin: 0;
  font-family: "DM Sans", sans-serif;
}

.brough-model-detail-selector .brough-product-selector__sub-header {
  font-size: clamp(0.92rem, 1vw, 1.12rem);
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.brough-model-detail-selector .brough-product-selector__text {
  font-size: clamp(0.95rem, 0.95vw, 1.08rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

.brough-model-detail-selector .brough-product-selector__text > * {
  margin: 0;
}

/* .container reserves the scroll room the pin needs: .pin-inner's own
   natural content height — --brough-pin-inner-height-closed, state 1's
   (tall) box, since that's what .pin-inner actually renders at in plain
   normal flow (progress 0, before the pin has engaged — see that rule) —
   plus a "pause" zone (the media settles into view and holds still,
   state 1), a "reveal" zone (the specs-panel slide-in animation), and a
   second "post-pause" hold zone (holds fully revealed before releasing,
   state 2 — no longer the same length as the pause zone), all expressed
   in vh so they scale with viewport height the same way the matching
   pauseRangePx/revealRangePx/postPauseRangePx constants in
   initBroughProductSelectorSpecs (src/blocks/brough-product-selector/
   index.js) do — keep these numbers in sync if any of them change.
   .pin-inner (the actual visible row) is translated by JS on every scroll
   tick to compensate for the page scrolling through that extra height, so
   it visually holds in place instead of scrolling normally — see that
   function for the transform math. */
.brough-model-detail-selector .brough-product-selector__container {
  position: relative;
  width: 100%;
  height: calc(var(--brough-pin-inner-height-closed) + 55vh + 100vh + 27.5vh);
  box-sizing: border-box;
}

.brough-model-detail-selector .brough-product-selector__pin-inner {
  position: relative;
  display: flex;
  width: min(100%, 1360px);
  /* Unconditional — NOT gated to only apply once actually pinned — so
     this already renders at state 1's height (--brough-pin-inner-height
     -closed) in plain normal document flow, before the pin has even
     engaged. That's deliberate: the image inside (its own max-height,
     below) needs to already be state 1's size *before* state 1, so the
     only thing that visibly changes the moment the pin engages is
     position mode (static → fixed) — the same jump-masked-by-FLIP
     transition every other position change here already gets — rather
     than the image *also* visibly growing at that same instant. Interpo-
     lates down to the unchanged, compact state 2 box as
     --brough-specs-progress goes 0→1, exactly like the .style.top JS sets
     for the fixed state below (setPinState, index.js) — both read the
     same live custom property, so they stay in lockstep automatically. */
  height: calc(var(--brough-pin-inner-height-closed) + (var(--brough-pin-inner-height) - var(--brough-pin-inner-height-closed)) * var(--brough-specs-progress, 0));
  margin-inline: auto;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(36px, 5vw, 96px);
  /* Below the sticky site header (z-index: 100), the model-detail tab bar
     (z-index: 45), and .row--toggle (z-index: 4, the circular spec-toggle
     button, positioned to overlap this row) — the toggle needs to stay
     clickable/on top, so this only needs to be low enough to not cover it
     while still being high enough to composite predictably once
     position: fixed is applied while scrolling through the pin. */
  z-index: 1;
  /* The spec panel's off-screen resting position (translateX(128%) when
     closed) needs horizontal clipping so it doesn't create page-level
     horizontal scroll. .brough-model-detail-selector's own overflow:
     hidden normally handles that, but position: fixed (applied here while
     pinned) escapes ALL ancestor overflow clipping by design, so this
     element needs its own — clip-path instead of overflow-x: hidden
     specifically because overflow's cross-axis rule (an unset/visible axis
     becomes 'auto' whenever the other isn't) would otherwise turn this
     into an accidental vertical scroll container, exactly the bug fixed
     here previously. clip-path has no such cross-axis coupling: the large
     negative vertical insets disable vertical clipping outright.
     Horizontally, insetting flush with this element's own (this element is
     only min(100%, 1360px) wide) edges clipped the reveal off much sooner
     than the old ancestor-based clip did — that clipped at the much wider
     outer section's edges, roughly the viewport width, so the panel had
     much more room to visibly travel before being cut off. The negative
     calc() below is the same full-bleed-breakout trick used for the
     museum gallery's peek carousel (tailwind.css) — it pushes the clip
     boundary outward by exactly the gap between this element's edge and
     the viewport edge, landing the clip back at the true viewport edge
     instead of this element's own, narrower edge. */
  clip-path: inset(-9999px calc(-1 * (100vw - 100%) / 2));
  /* No overflow rule here on purpose. The spec panel's off-screen resting
     position (translateX(128%) when closed) still needs clipping so it
     doesn't create page-level horizontal scroll, but that's already
     handled by .brough-model-detail-selector's own overflow: hidden
     further up — this element doesn't need its own. An earlier version of
     this rule added overflow-x: hidden here directly, which (via the CSS
     rule that an unset/visible axis becomes 'auto' whenever the other axis
     is non-visible — true even if 'visible' is written explicitly) turned
     this fixed 900px-tall box into an accidental scroll container that
     silently clipped/scrolled any real content taller than 900px. */
}

.brough-model-detail-selector .brough-product-selector__states__outer {
  position: relative;
}

.brough-model-detail-selector .brough-product-selector__controls {
  display: flex;
  background: rgba(255, 255, 255, 0.08);
  gap: clamp(8px, 0.7vw, 12px);
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: calc(100vw - 48px);
  margin: 0 auto;
  padding: 10px clamp(16px, 1.65vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 44px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
}

.brough-model-detail-selector .brough-product-selector__image {
  width: min(780px, 100%);
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 36px 52px rgba(0, 0, 0, 0.72));
}

.brough-model-detail-selector .brough-product-selector__content {
  display: none;
}

.brough-model-detail-selector .brough-product-selector__content {
  display: block;
  width: 100%;
}

.brough-model-detail-selector .brough-product-selector__label {
  position: relative;
  display: block;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}

.brough-model-detail-specifications {
  position: relative;
  z-index: 2;
  margin-top: clamp(-820px, -43vw, -560px);
  padding-top: 0;
  padding-bottom: clamp(96px, 9vw, 170px);
  background: transparent;
}

.brough-model-detail-specifications .brough-spec-table__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: min(100%, 1320px);
}

.brough-model-detail-specifications .brough-block__intro,
.brough-model-detail-specifications .brough-spec-table__tabs,
.brough-model-detail-specifications .brough-spec-table__rows,
.brough-model-detail-specifications .brough-block__actions {
  width: min(100%, 560px);
}

.brough-model-detail-specifications .brough-block__heading {
  font-size: clamp(2.1rem, 3vw, 3.1rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.brough-model-detail-specifications .brough-spec-table__tabs {
  display: flex;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.brough-model-detail-specifications .brough-spec-table__tabs li {
  flex: 1 1 0;
  border: 0;
  text-align: center;
}

.brough-model-detail-specifications .brough-spec-table__tabs li:first-child {
  color: #030303;
  background: #fff;
}

.brough-model-detail-page #story .brough-media-section__inner {
  display: block;
  width: min(100%, 1280px);
}

.brough-model-detail-page #story .brough-media-section__copy {
  max-width: none;
}

.brough-model-detail-page #story .brough-block__intro {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 4.4vw, 78px);
  align-items: start;
}

.brough-model-detail-page #story .brough-block__heading {
  flex: 0 1 540px;
  margin: 0;
  max-width: 540px;
  font-size: clamp(2.8rem, 3.75vw, 4.45rem);
  line-height: 1;
}

.brough-model-detail-page #story .brough-block__text {
  flex: 1 1 560px;
  width: 100%;
  max-width: 680px;
  columns: 1;
}

.brough-model-detail-page #story .brough-block__actions {
  width: min(100%, 680px);
  margin-left: auto;
}

.brough-model-detail-page #story-road,
.brough-model-detail-page #technical-drawing {
  background: #fff;
}

.brough-model-detail-page #story-road .brough-hero-section__inner,
.brough-model-detail-page #technical-drawing .brough-hero-section__inner {
  display: none;
}

.brough-model-detail-page #story-road .brough-hero-section__media {
  height: clamp(420px, 43vw, 826px);
}

.brough-model-detail-page #story-road .brough-hero-section__image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.brough-model-detail-page #technical-drawing .brough-hero-section__media {
  background: #fff;
}

.brough-model-detail-page #technical-drawing .brough-hero-section__image {
  width: 100%;
  min-height: 0;
  object-fit: contain;
}

/* Below 768px there's no hover to reveal the alternate drawing, and
   tailwind.css hides .brough-hero-section__hover-image entirely on mobile
   (display: none) — so this section would otherwise be stuck showing only
   the base image. Flip that here: show just the hover-version drawing. */
@media (max-width: 767px) {
  .brough-model-detail-page #technical-drawing .brough-hero-section__image:not(.brough-hero-section__hover-image) {
    display: none;
  }

  .brough-model-detail-page #technical-drawing .brough-hero-section__hover-image {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
    opacity: 1;
  }
}

.brough-model-detail-page #gallery .brough-card-grid__inner {
  width: min(100%, 1320px);
}

.brough-model-detail-page #gallery .brough-card-grid__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: clamp(28px, 3vw, 48px);
}

.brough-model-detail-page #gallery .brough-card-grid__card {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.brough-model-detail-page #gallery .brough-card-grid__card:nth-child(-n + 2) {
  flex: 0 0 50%;
}

.brough-model-detail-page #gallery .brough-card-grid__card:nth-child(n + 3) {
  flex: 0 0 20%;
}

.brough-model-detail-page #gallery .brough-card-grid__content {
  order: 1;
  min-height: 48px;
  padding: 0 0 12px;
}

.brough-model-detail-page #gallery .brough-card-grid__media {
  order: 2;
  background: #101010;
}

.brough-model-detail-page #gallery .brough-card-grid__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brough-model-detail-page #gallery .brough-card-grid__card:nth-child(-n + 2) .brough-card-grid__media {
  height: clamp(360px, 31vw, 540px);
}

.brough-model-detail-page #gallery .brough-card-grid__card:nth-child(n + 3) .brough-card-grid__media {
  height: clamp(86px, 8vw, 120px);
}

.brough-model-detail-page #gallery .brough-card-grid__title {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  line-height: 1.1;
  text-transform: none;
}

.brough-model-detail-page #product-cta .brough-card-grid__items {
  display: flex;
  flex-wrap: wrap;
}

.brough-model-detail-page #product-cta .brough-card-grid__card {
  display: flex;
  flex: 1 1 min(100%, 420px);
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

@media (max-width: 760px) {

  .brough-product-detail-page #product-media .brough-block__heading {
    font-size: clamp(3rem, 16vw, 4.9rem);
  }

  .brough-product-detail-page #product-nav .brough-card-grid__items {
    justify-content: flex-start;
    gap: 18px 28px;
  }

  .brough-product-detail-page #product-media,
  .brough-model-detail-page #product-media {
    min-height: 320px;
  }

  .brough-product-detail-page #product-media .brough-hero-section__media,
  .brough-model-detail-page #product-media .brough-hero-section__media {
    height: 320px;
    min-height: 320px;
  }

  .brough-model-detail-tabs__inner {
    justify-content: flex-start;
    flex: 0 0 calc(100% - 28px);
    width: calc(100% - 28px);
    min-height: 40px;
    gap: 28px;
  }

  .brough-model-detail-tabs__model-name {
    display: none;
  }

  .brough-model-detail-tabs__link {
    min-height: 40px;
    font-size: 0.68rem;
  }

  .brough-product-detail-page .brough-model-detail-intro .brough-hero-section__inner {
    padding-inline: 24px;
    text-align: left;
  }

  .brough-product-detail-page .brough-model-detail-intro .brough-block__intro {
    align-items: flex-start;
  }

  .brough-product-detail-page .brough-model-detail-intro .brough-block__intro::before {
    font-size: clamp(3.25rem, 17vw, 5.5rem);
  }

  .brough-product-detail-page .brough-model-detail-intro .brough-block__text {
    text-align: left;
  }

  .brough-product-detail-page .brough-model-detail-intro .brough-hero-section__media {
    min-height: 420px;
  }

  .brough-product-detail-page .brough-model-detail-intro .brough-hero-section__image {
    width: 112vw;
    max-width: none;
    margin-bottom: 34px;
  }

  .brough-model-detail-selector {
    padding-top: 72px;
    padding-bottom: 54px;
  }

  .brough-model-detail-selector .brough-product-selector__inner::before {
    font-size: clamp(3.1rem, 16vw, 5rem);
    text-align: left;
  }

  .brough-model-detail-selector .brough-product-selector__media {
    min-height: 300px;
  }

  .brough-model-detail-selector .brough-product-selector__content {
    display: block;
    padding-bottom: 0;
  }

  .brough-model-detail-selector .brough-product-selector__controls {
    justify-content: flex-start;
    width: 100%;
    margin-top: 18px;
    overflow-x: auto;
  }

  .brough-model-detail-specifications {
    margin-top: 0;
    padding-top: 54px;
    padding-bottom: 72px;
    background: #030303;
  }

  .brough-model-detail-specifications .brough-block__intro,
  .brough-model-detail-specifications .brough-spec-table__tabs,
  .brough-model-detail-specifications .brough-spec-table__rows,
  .brough-model-detail-specifications .brough-block__actions,
  .brough-model-detail-page #story .brough-block__actions {
    width: 100%;
  }

  .brough-model-detail-page #story .brough-block__text {
    columns: 1;
  }

  .brough-model-detail-page #story .brough-block__heading {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .brough-model-detail-page #story-road .brough-hero-section__media {
    height: 300px;
  }

  .brough-model-detail-page #gallery .brough-card-grid__items,
  .brough-model-detail-page #product-cta .brough-card-grid__items {
    flex-direction: column;
  }

  .brough-model-detail-page #gallery .brough-card-grid__card:nth-child(-n + 2),
  .brough-model-detail-page #gallery .brough-card-grid__card:nth-child(n + 3) {
    flex-basis: auto;
  }

  .brough-model-detail-page #gallery .brough-card-grid__card:nth-child(-n + 2) .brough-card-grid__media,
  .brough-model-detail-page #gallery .brough-card-grid__card:nth-child(n + 3) .brough-card-grid__media {
    height: auto;
    min-height: 210px;
  }
}

.brough-model-detail-intro {
  min-height: clamp(520px, 41vw, 790px);
  padding-top: clamp(142px, 11vw, 214px);
  padding-bottom: clamp(44px, 4.5vw, 88px);
  text-align: center;
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.09), rgba(3, 3, 3, 0) 46%),
    #030303;
}

.brough-model-detail-intro .brough-content-section__inner,
.brough-model-detail-intro .brough-block__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(760px, calc(100vw - 48px));
}

.brough-model-detail-intro .brough-block__intro {
  margin-right: auto;
  margin-left: auto;
}

.brough-model-detail-intro .brough-block__intro-image {
  width: clamp(260px, 34vw, 590px);
  margin: 0 auto clamp(34px, 3.2vw, 58px);
}

.brough-model-detail-intro .brough-block__intro-image img {
  display: block;
  width: 100%;
  height: auto;
}

.brough-model-detail-intro .brough-block__heading {
  max-width: 760px;
  margin: 0 auto 9px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(20px, 1.25vw, 24px);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: 0;
  color: #fff;
  text-align: center;
  text-transform: none;
}

.brough-model-detail-intro .brough-block__text {
  max-width: 690px;
  margin: 0 auto;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #fff;
  text-align: center;
}

.brough-model-detail-intro .brough-block__text p {
  max-width: 690px;
  margin-right: auto;
  margin-left: auto;
}

.brough-model-detail-intro .brough-block__text p:first-child {
  margin-bottom: clamp(28px, 2.65vw, 48px);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 0.95vw, 18px);
  line-height: 1.8;
}

.brough-model-detail-selector {
  min-height: clamp(760px, 78vw, 1040px);
  padding-top: clamp(16px, 2.2vw, 42px);
  padding-bottom: clamp(62px, 6vw, 112px);
  overflow: hidden;
  overflow-anchor: none;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.12), rgba(3, 3, 3, 0) 52%),
    #030303;
}

.brough-model-detail-selector .brough-product-selector__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: min(100%, 1440px);
  max-width: none;
  min-height: inherit;
  padding-right: 0;
  padding-left: 0;
  /* Space permanently unavailable at the top of the viewport, below which
     the pinned content actually has room to render — the sticky site
     header plus the sticky model-detail tab bar. 44px is this tab bar's
     own rendered height (it has no explicit height rule of its own to
     reference); keep in sync if its content/padding changes. */
  --brough-model-sticky-offset: calc(var(--brough-admin-bar-offset, 0px) + var(--brough-header-current-height, 93px) + 44px);
  /* The pinned row's own height, fluid so both the closed and fully-open
     states of the reveal (initBroughProductSelectorSpecs,
     src/blocks/brough-product-selector/index.js) fit within the space
     below the sticky bars on short viewports instead of overflowing
     behind/past them, while staying at the original 900px on tall ones.
     32px is breathing room above/below the pinned content once centered
     in the remaining space. */
  --brough-pin-inner-height: clamp(460px, calc(100vh - var(--brough-model-sticky-offset) - 32px), 900px);
  /* How far above the viewport's bottom edge state 1 (specs closed) should
     stop — named so it's a single number to change rather than a value
     buried in a calc(). */
  --brough-model-closed-bottom-gap: 50px;
  /* State 1's box: flush against the sticky bars at the top (no centering
     slack there at all) and reaching down to --brough-model-closed-bottom
     -gap above the viewport bottom — deliberately NOT clamped/capped like
     --brough-pin-inner-height above, since the whole point is for it to
     use essentially the full available height, on any screen. Unconditional
     — .pin-inner and the image both interpolate against this and
     --brough-pin-inner-height via --brough-specs-progress at all times
     (not just once actually pinned), so state 1 is already sized
     correctly in plain normal document flow before the pin engages, and
     shrinks into state 2's existing, unchanged compact/centered box
     continuously as the reveal scrolls — the only thing that changes at
     the engage moment itself is position mode (see .pin-inner below). */
  --brough-pin-inner-height-closed: calc(100vh - var(--brough-model-sticky-offset) - var(--brough-model-closed-bottom-gap));
}

.brough-model-detail-selector .brough-product-selector__row {
  box-sizing: border-box;
  width: min(100%, 1360px);
}

/* Logo: 1st State */
.brough-model-detail-selector .brough-product-selector__intro {
  position: relative;
  z-index: 2;
  order: 0;
  width: min(920px, calc(100% - 48px));
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.2vw, 20px);
  pointer-events: none;
  height: 540px;
}

.brough-model-detail-selector .brough-product-selector__row--toggle {
  /* Shrink-wraps the toggle button exactly, with no internal offset — JS
     (initBroughProductSelectorSpecs) positions this row explicitly in every
     state (5px above the specs column, right-aligned to it), so its own box
     needs to match the button 1:1 for that math to land precisely. */
  position: relative;
  z-index: 4;
  display: flex;
  width: fit-content;
  height: fit-content;
  pointer-events: none;
}

/* Exempt from the --brough-specs-progress reveal — these stay fully visible
   and at their initial position throughout, unlike the rest of the
   choreography below which is continuously driven by that variable. */
.brough-model-detail-selector .brough-product-selector__heading,
.brough-model-detail-selector .brough-product-selector__sub-header,
.brough-model-detail-selector .brough-product-selector__text {
  opacity: 1;
}

.brough-model-detail-selector .brough-product-selector__logo {
  position: relative;
  bottom: auto;
  max-width: min(740px, 56vw);
  height: auto;
}

.brough-model-detail-selector .brough-product-selector__states__outer {
  position: relative;
  flex: 0 0 auto;
  width: calc(100% - 42% * var(--brough-specs-progress, 0));
  max-width: calc(1360px - 640px * var(--brough-specs-progress, 0));
  min-width: 0;
  transition: none;
}

.brough-model-detail-selector .brough-product-selector__state {
  width: 100%;
}

.brough-model-detail-selector .brough-product-selector__image,
.brough-model-detail-selector .brough-product-selector__video {
  display: block;
  width: min(74vw, 100%);
  max-width: none;
  height: auto;
  /* Nothing above constrains height by viewport — width is entirely
     vw/container driven — so this is what actually sizes the bike to
     match state 1's box (170px reservation: the label's own top/bottom
     margins, .label below, plus the controls row's height) at progress 0,
     shrinking continuously to match state 2's unchanged, compact box
     (320px reservation: the extra 150px is slack .states__outer needs to
     be shorter than --brough-pin-inner-height by, so that once centered —
     align-items: center, .pin-inner — there's still room below its own
     box, within the pinned row, for the absolutely positioned enquiry
     button, .enquiry-button, out of flow entirely — to fade up into
     without spilling off-screen) as --brough-specs-progress goes 0→1.
     Unconditional — not gated to only apply once actually pinned — so the
     image already renders at state 1's size in plain normal document
     flow, before the pin has even engaged: the only thing that visibly
     changes at that engage moment is position mode (static → fixed, via
     .pin-inner's own matching, unconditional height above), the same
     jump-masked-by-FLIP transition every other position change here
     already gets, rather than the image *also* visibly resizing at that
     same instant.

     The 30px margin-top (state 1 only — faded out by the same (1 -
     progress) term as progress rises, so state 2 is untouched) and the
     matching 30px extra subtracted from max-height cancel out in
     .states__outer's total flow height — the image's own margin-box
     (margin-top + rendered height) is exactly as tall as it was before
     this pair of changes, just with 30px of it reassigned from the
     image's own height to space above it. That's what makes this a pure
     "push the image down and shrink it to match" — .states__outer's
     total height (and so its centering slack within .pin-inner,
     align-items: center) doesn't change, so neither does anything below
     the image: the label/controls stay exactly where they were, and so
     does the gap between the image's own bottom edge and the label. */
  max-height: calc(
    (var(--brough-pin-inner-height-closed) - 170px) +
    ((var(--brough-pin-inner-height) - 320px) - (var(--brough-pin-inner-height-closed) - 170px)) * var(--brough-specs-progress, 0)
    - 30px * (1 - var(--brough-specs-progress, 0))
  );
  margin: calc(30px * (1 - var(--brough-specs-progress, 0))) auto 0;
  object-fit: contain;
  filter: drop-shadow(0 42px 60px rgba(0, 0, 0, 0.72));
}

.brough-model-detail-selector .brough-product-selector__label {
  position: relative;
  display: block;
  margin: clamp(18px, 1.8vw, 28px) auto clamp(20px, 2vw, 32px);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.brough-model-detail-selector .brough-product-selector__controls {
  display: flex;
  width: fit-content;
  max-width: calc(100vw - 48px);
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 0.7vw, 12px);
  margin: 0 auto;
  padding: 10px clamp(16px, 1.65vw, 30px);
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
  scrollbar-width: none;
  /* translateY here (and the matching one on .states below) is the state-2
     "push up 25px" — applied to .states/.controls individually rather
     than to their shared parent .states__outer, since .states__outer is
     the enquiry button's own position: absolute containing block (see
     that rule) — transforming the parent would carry the button along
     with it, which needs to stay exactly where it is. Transforming its
     two in-flow children instead moves only the visible content; .states
     __outer's own box (what the button's top: calc(100% + gap) actually
     measures from) never changes. */
  transform: translateY(calc(-25px * var(--brough-specs-progress, 0))) scale(calc(1 - 0.08 * var(--brough-specs-progress, 0)));
  transition: none;
}

.brough-model-detail-selector .brough-product-selector__controls::-webkit-scrollbar {
  display: none;
}

.brough-model-detail-selector .brough-product-selector__spec-toggle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: clamp(34px, 2.7vw, 46px);
  height: clamp(34px, 2.7vw, 46px);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  color: #fff;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  pointer-events: auto;
  /* Rotating the whole button (rather than just the +/x glyph) is safe
     precisely because it's a circle — border-radius: 50% looks identical
     at any rotation, so there's no need to isolate the icon from the
     border/background to get a clean 0deg-to-45deg turn. This is what
     morphs the plus into an x (see ::after below) — a plus rotated 45deg
     is an x by construction, not a separate icon. */
  transform: rotate(calc(45deg * var(--brough-specs-progress, 0)));
  /* opacity starts at 0 and only reaches 1 once .is-toggle-revealed lands
     on .brough-product-selector__inner (initBroughProductSelectorSpecs,
     index.js) — a one-time fade the first time this section scrolls into
     view, not tied to --brough-specs-progress like everything else here. */
  opacity: 0;
  transition: background-color 0.2s ease-out, opacity 0.5s ease;
}

.brough-model-detail-selector .brough-product-selector__inner.is-toggle-revealed .brough-product-selector__spec-toggle {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .brough-model-detail-selector .brough-product-selector__spec-toggle {
    transition: background-color 0.2s ease-out;
  }
}

.brough-model-detail-selector .brough-product-selector__spec-toggle:hover,
.brough-model-detail-selector .brough-product-selector__spec-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.brough-model-detail-selector .brough-product-selector__spec-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.brough-model-detail-selector .brough-product-selector__spec-toggle::before,
.brough-model-detail-selector .brough-product-selector__spec-toggle::after {
  position: absolute;
  content: "";
  background: currentColor;
}

.brough-model-detail-selector .brough-product-selector__spec-toggle::before {
  width: clamp(14px, 1.05vw, 18px);
  height: 2px;
}

.brough-model-detail-selector .brough-product-selector__spec-toggle::after {
  width: 2px;
  height: clamp(14px, 1.05vw, 18px);
}

/* Model: 1st state */
.brough-model-detail-selector .brough-product-selector__state .brough-product-selector__image,
.brough-model-detail-selector .brough-product-selector__state .brough-product-selector__video {
  width: min(74vw, 100%);
  margin-right: auto;
  margin-left: auto;
  /* Expect the image to be around 1360x780, the transition does not go well otherwise */
  max-width: 1360px;
  /* More specific than the .image/.video rule above (this one wins), so
     the fluid, unconditional (state 1 ↔ state 2) max-height formula needs
     to live here too, not just there — see that rule for what it's
     driven by, including the state-1-only 30px reduction (also mirrored
     by a margin-top there, which this rule doesn't touch/override). */
  max-height: calc(
    (var(--brough-pin-inner-height-closed) - 170px) +
    ((var(--brough-pin-inner-height) - 320px) - (var(--brough-pin-inner-height-closed) - 170px)) * var(--brough-specs-progress, 0)
    - 30px * (1 - var(--brough-specs-progress, 0))
  );
}

/* Tech Spec: 1st state */
.brough-model-detail-selector .brough-product-selector__spec-panel {
  color: #fff;
  flex: 0 0 609px;
  max-width: 609px;
  opacity: var(--brough-specs-progress, 0);
  /* translateX is the intentional slide-in. translateY compensates for a
     side effect of .pin-inner's own top also being progress-driven now
     (state 1 flush-below-the-tabs → state 2's unchanged, centered
     position — see .pin-inner below): this panel is align-self: start,
     so without this it rides along with .pin-inner's own vertical
     movement on top of its horizontal slide, arriving at a slight
     diagonal instead of dead straight. The term here is the exact
     negative of .pin-inner's own top formula's progress-driven component
     (both read the same --brough-specs-progress), so the two cancel and
     this panel's absolute on-screen Y position stays constant through the
     whole reveal — pure horizontal travel. */
  transform: translate(
    calc(128% * (1 - var(--brough-specs-progress, 0))),
    calc(-1 * ((100vh - var(--brough-model-sticky-offset) - var(--brough-pin-inner-height)) / 2) * var(--brough-specs-progress, 0))
  );
  transition: none;
  pointer-events: none;
  scrollbar-width: thin;
  align-self: start;
  /* Fluid so the heading + tablist + rows + enquiry button all still fit
     within --brough-pin-inner-height on short screens instead of
     overflowing past it — 120px only survives once the pinned row is
     tall enough to spare it. */
  padding-top: clamp(24px, calc(var(--brough-pin-inner-height) * 0.13), 120px);
  /* Pinned to a definite height (state 2's — this column is invisible
     until progress is near 1 anyway, so it has no need to track state 1's
     separately) rather than sizing to its own content, specifically so a
     spec group taller than the available room (e.g. Frame, with far more
     rows than Dimensions/Engine) can't push past the bottom of the pinned
     block — the tallest tab used to overflow it by up to ~265px on short
     screens. display: flex + flex-direction: column is what lets
     .spec-panel-inner below claim exactly "whatever's left after the
     heading and tablist" and scroll internally within that, instead of
     the whole column simply growing past its bounds. */
  display: flex;
  flex-direction: column;
  height: var(--brough-pin-inner-height);
}

/* The actual scrolling region: claims whatever height is left in
   .spec-panel's flex column after .spec-title and .spec-tablist-wrap
   (both flex: 0 1 auto by default, so they keep their own natural
   content height, untouched) take theirs. min-height: 0 overrides the
   flex default of min-height: auto, which otherwise refuses to let a
   flex item shrink below its content's natural size — without it this
   would just grow the whole column past .spec-panel's own height instead
   of scrolling. padding-bottom is breathing room at the scroll cutoff
   for a tall (e.g. Frame) tab; for a short tab (e.g. Dimensions) this
   element still fills the full remaining height regardless (flex: 1 1
   auto), so the same space reads as empty room below the last row rather
   than a scroll cutoff. */
.brough-model-detail-selector .brough-product-selector__spec-panel-inner {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
  padding-bottom: 24px;
  /* Firefox: thumb color, then track color. scrollbar-width lives here
     (not just on .spec-panel, which had it before this element existed)
     since this is the element that actually scrolls now. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) black;
}

/* WebKit/Blink (Chrome, Safari, Edge) equivalent of the scrollbar-color
   line above — no shorthand covers both, so each color needs its own
   pseudo-element. */
.brough-model-detail-selector .brough-product-selector__spec-panel-inner::-webkit-scrollbar {
  width: 8px;
}

.brough-model-detail-selector .brough-product-selector__spec-panel-inner::-webkit-scrollbar-track {
  background: black;
}

.brough-model-detail-selector .brough-product-selector__spec-panel-inner::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

/* Only rendered by browsers whose scrollbar has up/down buttons at all
   (mainly older WebKit/Windows Chrome) — harmless no-op everywhere else. */
.brough-model-detail-selector .brough-product-selector__spec-panel-inner::-webkit-scrollbar-button {
  background: rgba(255, 255, 255, 0.12);
}

/* Progress > 0 is enough to allow interaction — at exactly 0 the panel is
   fully transparent and off to the side, so pointer-events staying none
   there just prevents an invisible element from being tab-focusable. */
.brough-model-detail-selector .brough-product-selector__inner.is-spec-panel-interactive .brough-product-selector__spec-panel {
  pointer-events: auto;
}

.brough-model-detail-selector .brough-product-selector__spec-panel[hidden] {
  display: none;
}

.brough-model-detail-selector .brough-product-selector__spec-panel[data-brough-product-spec-tabs] {
  backdrop-filter: none;
  box-shadow: none;
}

.brough-model-detail-selector .brough-product-selector__spec-title {
  margin: 0 0 clamp(16px, 1.7vw, 24px);
  font-family: "DM Sans", sans-serif;
  font-size: clamp(1.6rem, 2.5vw, 2.65rem);
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  text-transform: uppercase;
}

.brough-model-detail-selector .brough-product-selector__spec-tablist {
  position: relative;
  display: flex;
  /* Shrink-wraps the (now content-sized, see .spec-tab below) tabs
     instead of stretching to the panel's full width — that's what keeps
     the left-edge-to-"Dimensions" gap equal to the "Frame"-to-right-edge
     gap for any label length: both are just that tab's own padding
     (10px 16px below), with no leftover flex-grown space to distribute
     unevenly between differently-sized labels. */
  width: fit-content;
  margin-bottom: clamp(20px, 2vw, 30px);
  overflow: hidden;
  background-color: #0A0A0A;
  border: 1px solid #262626;
  border-radius: 999px;
}

.brough-model-detail-selector .brough-product-selector__spec-tab-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: linear-gradient(to bottom, #454545 0%, #212121 100%);
  border: 2px solid #fff;
  border-radius: 999px;
  transition: transform 0.3s ease, width 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.brough-model-detail-selector .brough-product-selector__spec-tab {
  position: relative;
  z-index: 1;
  /* Content-sized rather than equal-width (flex: 1 1 0) — each tab's own
     24px left/right padding is what keeps its label's surrounding space
     consistent regardless of the label's own length, which .spec-tablist
     above relies on for its outer edges to line up the same way. */
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 24px;
  color: rgba(255, 255, 255, 0.6);
  font-family: "helvetica-neue-lt-pro", sans-serif;
  font-size: clamp(0.74rem, 0.78vw, 0.9rem);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}

.brough-model-detail-selector .brough-product-selector__spec-tab.is-active,
.brough-model-detail-selector .brough-product-selector__spec-tab[aria-selected="true"] {
  color: #fff;
}

.brough-model-detail-selector .brough-product-selector__spec-tab:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #fff;
  outline-offset: -3px;
}

.brough-model-detail-selector .brough-product-selector__spec-group[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .brough-model-detail-selector .brough-product-selector__spec-tablist {
    flex-direction: row;
    flex-wrap: nowrap;
    border-radius: 999px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .brough-model-detail-selector .brough-product-selector__spec-tablist::-webkit-scrollbar {
    display: none;
  }

  .brough-model-detail-selector .brough-product-selector__spec-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .brough-model-detail-selector .brough-product-selector__spec-tablist-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    background: linear-gradient(to right, transparent 0%, #000 100%);
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.2s ease;
  }

  .brough-model-detail-selector .brough-product-selector__spec-tablist-wrap.is-at-scroll-end::after {
    opacity: 0;
  }
}

.brough-model-detail-selector .brough-product-selector__spec-heading {
  margin: 0 0 14px;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(0.82rem, 0.75vw, 0.95rem);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
}

.brough-model-detail-selector .brough-product-selector__spec-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.brough-model-detail-selector .brough-product-selector__spec-rows > div {
  display: flex;
  gap: 18px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.brough-model-detail-selector .brough-product-selector__spec-rows dt,
.brough-model-detail-selector .brough-product-selector__spec-rows dd {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(0.84rem, 0.78vw, 0.96rem);
  line-height: 1.45;
}

/* Desktop only (same 1480px breakpoint as mobileQuery in
   initBroughProductSelectorSpecs, src/blocks/brough-product-selector/
   index.js) — mobile keeps the fluid clamp() above. */
@media (min-width: 1480px) {
  .brough-model-detail-selector .brough-product-selector__spec-rows dt,
  .brough-model-detail-selector .brough-product-selector__spec-rows dd {
    font-size: 13.5px;
  }
}

.brough-model-detail-selector .brough-product-selector__spec-rows dt {
  flex: 0 0 min(42%, 160px);
  color: rgba(255, 255, 255, 0.54);
}

.brough-model-detail-selector .brough-product-selector__spec-rows dd {
  flex: 1 1 0;
  color: rgba(255, 255, 255, 0.9);
}

/* is-spec-panel-layout no longer used — its only rule (align-items: center)
   was already redundant with .brough-product-selector__inner's own base
   align-items: center. */

.brough-model-detail-selector .brough-product-selector__swatch {
  position: relative;
  width: 100%;
  height: 100%;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 10px rgba(255, 255, 255, 0.12), 0 8px 18px rgba(0, 0, 0, 0.38);
}

.brough-model-detail-selector .brough-product-selector__option {
  position: relative;
}

.brough-model-detail-selector .brough-product-selector__option.is-active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
}

.brough-model-detail-selector .brough-product-selector__option.is-active .brough-product-selector__swatch {
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.61);
}

.brough-model-detail-selector .brough-product-selector__option {
  position: relative;
}

.brough-model-detail-selector .brough-product-selector__option.is-active::after {
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  width: 16px;
  height: 16px;
  background-image: url('/wp-content/themes/ifactory-theme/assets/tick-icon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2;
}
/* Make An Enquiry: lives inside .states__outer now (render.php), right
   after .controls, so it reads as part of the media column rather than the
   specs column. It used to be a DOM sibling positioned way down the page
   after .container's huge scroll-room spacer, opacity-tied to the reveal
   but never actually visible on screen at the same time as it.
   position: absolute here takes it out of flow entirely — deliberately, so
   it has zero footprint below .controls while closed instead of reserving
   a permanent gap for a button that isn't there yet — which needs
   !important to beat the unscoped, global
   .brough-product-selector__enquiry-button rule in src/tailwind.css
   (shared by every other block that uses this button); being scoped to
   .brough-model-detail-selector, same as the mobile override further down
   this file, is specific enough to still win against that regardless of
   both having !important. .states__outer (this button's nearest positioned
   ancestor) is what top/left below are relative to.

   Deliberately NOT driven by --brough-specs-progress like the rest of the
   reveal (panel slide/fade, media column width, controls scale, toggle
   icon morph) — those are scroll-scrubbed pixel by pixel so they can be
   recomputed instantly and reversibly at any scroll position. This button
   instead reads is-spec-panel-fully-open (index.js), a class toggled once
   progress crosses ~1, and animates with a real CSS transition — a timed
   "arrival" once the specs panel is fully open, rather than tracking the
   scrollbar directly, while still reversing correctly if scrolled back out
   of that state. */
.brough-model-detail-selector .brough-product-selector__enquiry-button {
  position: absolute !important;
  top: calc(100% + clamp(10px, 2vh, 20px));
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.2s ease-out, color 0.2s ease-out;
  pointer-events: none;
}

.brough-model-detail-selector .brough-product-selector__inner.is-spec-panel-fully-open .brough-product-selector__enquiry-button {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.brough-product-selector__enquiry-button:hover,
.brough-product-selector__enquiry-button:focus-visible {
  color: #030303;
  background: #fff;
}

.brough-product-selector__enquiry-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.brough-model-detail-selector .brough-product-selector__row--enquiry {
  display: flex;
  justify-content: center;
}

.brough-model-detail-selector .brough-product-selector__option-label,
.brough-model-detail-selector .brough-product-selector__story,
.brough-model-detail-selector .brough-product-selector__spec,
.brough-model-detail-selector .brough-product-selector__cta-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 1479px) {
  .brough-model-detail-intro {
    min-height: auto;
    padding-top: 96px;
  }

  .brough-model-detail-selector {
    min-height: auto;
  }

  /* No scroll-scrubbed reveal on mobile — specs are just part of the normal
     stacked layout (see initBroughProductSelectorSpecs in
     src/blocks/brough-product-selector/index.js), so every property that's
     continuously driven by --brough-specs-progress on desktop gets reset
     to a plain, always-visible value here instead. That variable is never
     set on mobile, so without these resets the calc() expressions above
     would fall back to their *closed*-state math (e.g. the spec panel's
     opacity: var(--brough-specs-progress, 0) would default to invisible).
     .brough-product-selector__heading/__sub-header/__text/__logo aren't
     part of the reveal at all (see above) and .brough-product-selector
     __controls/__spec-toggle already default to their fully-open math at
     progress 0, so none of those four need a reset here.

     This used to just be .image/.video (2 classes) here, which — despite
     being inside this media query — was always losing the cascade to the
     unscoped, always-on .state .image rule elsewhere in this file (3
     classes beats 2 regardless of which one is inside a media query;
     media queries add zero specificity of their own). That rule's
     width: min(74vw, 100%) capped by max-width: 1360px was what was
     actually rendering on mobile the whole time, not this block — full-
     bleed needs matching that rule's specificity (.state .image, 3
     classes) to actually win here. */
  .brough-model-detail-selector .brough-product-selector__state .brough-product-selector__image,
  .brough-model-detail-selector .brough-product-selector__state .brough-product-selector__video {
    width: 100%;
    max-width: none;
    /* The desktop max-height formula (state 1's viewport-height-driven
       size, now unconditional rather than gated to the pin actually being
       engaged — see that rule) isn't overridden by anything else at this
       width, and would otherwise leak through here too. Mobile never pins
       at all, so it has no use for it — width alone already keeps the
       image a sensible size via its own aspect ratio. */
    max-height: none;
  }

  /* .states__outer's own max-width: calc(1360px - ...) (base rule,
     elsewhere in this file) never gets reset for mobile anywhere else —
     harmless below ~1360px viewport width (the cap simply doesn't bind),
     but on the wider end of this "mobile" breakpoint (up to 1479px) it
     would otherwise cap the image's own containing block below the true
     viewport width, centered by .pin-inner's align-items: center, leaving
     a visible gap on both sides instead of true edge-to-edge. */
  .brough-model-detail-selector .brough-product-selector__states__outer {
    max-width: none;
  }

  /* No pin/pause/reveal scroll room needed on mobile — .container reverts
     to a plain auto-height wrapper and .pin-inner (which holds the actual
     flex layout, see the desktop rule above) stacks normally instead of
     being scroll-transformed. */
  .brough-model-detail-selector .brough-product-selector__container {
    width: 100%;
    height: auto;
    padding-top: 0;
  }

  .brough-model-detail-selector .brough-product-selector__pin-inner {
    width: 100%;
    height: auto;
    min-height: clamp(520px, 126vw, 760px);
    flex-direction: column;
    gap: clamp(18px, 7vw, 34px);
    overflow-x: visible;
    clip-path: none;
    position: static !important;
  }

  /* Base rule fixes this at 540px for the desktop layout's absolute
     positioning — on mobile it's a normal flow item and should only be as
     tall as its actual heading/text content. */
  .brough-model-detail-selector .brough-product-selector__intro {
    height: auto;
  }

  .brough-model-detail-selector .brough-product-selector__row--toggle {
    display: none;
  }

  .brough-model-detail-selector .brough-product-selector__states {
    min-height: clamp(250px, 70vw, 380px);
  }

  .brough-model-detail-selector .brough-product-selector__spec-panel {
    position: relative;
    top: auto;
    left: 24px;
    right: 24px;
    width: calc(100% - 48px);
    max-width: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding: clamp(22px, 6vw, 30px);
    background: rgba(4, 4, 4, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.16);
    /* The desktop rule's display: flex + definite height (sized to
       --brough-pin-inner-height, a viewport-height-driven value tied to
       the pin that doesn't exist on mobile at all) exists purely to
       constrain .spec-panel-inner's scroll region within the pinned
       block — mobile has no pinned block to overflow, specs are just
       part of the normal stacked page scroll, so none of that applies
       here. Reset to a plain auto-height block so it sizes to its actual
       content like everything else on mobile. */
    display: block;
    height: auto;
  }

  .brough-model-detail-selector .brough-product-selector__spec-panel-inner {
    overflow-y: visible;
    padding-right: 0;
  }

  /* Desktop's #0A0A0A reads as a barely-lighter grey against this panel's
     rgba(4, 4, 4, 0.92) background; pure black on mobile removes that
     mismatch. */
  .brough-model-detail-selector .brough-product-selector__spec-tablist {
    background-color: #000;
  }

  .brough-model-detail-selector .brough-product-selector__spec-rows > div {
    flex-direction: column;
    gap: 4px;
  }

  /* position/opacity/transform/pointer-events are NOT set here — a
     separate, unscoped .brough-product-selector__enquiry-button rule in
     tailwind.css sets position: relative !important, and tailwind's CSS
     file loads dead last in <head> (after this one), so its !important
     always wins here regardless of !important/specificity added on this
     side. The actual override lives in src/tailwind.css instead, scoped to
     .brough-model-detail-selector so it's specific enough to beat that
     rule outright.

     Centering: the button itself stays display: inline-flex (forced by
     that same global tailwind.css rule, !important, so overriding display
     here wouldn't win either) — text-align: center on its parent is what
     centers it instead, since inline-level content (inline-flex included)
     respects the containing block's text-align. Every other child of
     .states__outer (.states, .controls) is block/flex-level and ignores
     text-align entirely, so this has no effect on them. */
  .brough-model-detail-selector .brough-product-selector__states__outer {
    text-align: center;
  }

  .brough-product-selector__enquiry-button {
    margin-top: 32px;
  }
}

/*
  Crossfade between colour/model states.
  The outgoing state is lifted out of flow (position: absolute, z-index 2)
  and fades to transparent while the incoming state is revealed in normal
  flow beneath it — both images are on screen simultaneously.
*/
.brough-model-detail-selector .brough-product-selector__states {
  position: relative;
  /* Matches .controls' own translateY (see that rule for why this is on
     .states/.controls individually, not their shared parent
     .states__outer) — moves the image+label up 25px by state 2. */
  transform: translateY(calc(-25px * var(--brough-specs-progress, 0)));
  transition: none;
}

.brough-model-detail-selector .brough-product-selector__state {
  transition: opacity 0.35s ease;
}

.brough-model-detail-selector .brough-product-selector__state.is-leaving {
  position: absolute;
  /* Not a plain 0 — compensates for a real, confirmed bug: the image's
     own margin-top (calc(30px * (1 - progress)), see .image/.video above
     — state 1's "flush below the tabs" gap) normally CSS-collapses
     through .media/.state and gets absorbed into this state's own
     position while it's in normal flow (position: static). The instant
     it becomes THIS state (.is-leaving, position: absolute), that
     collapse is blocked — position: absolute always establishes a new
     block formatting context, by spec, with no way to opt back in — so
     the full margin suddenly appears as a real internal gap it never had
     a moment before, landing its image (and everything after it: label,
     etc.) 30px lower than the incoming state's, for exactly as long as
     this state is mid-crossfade. Negating the same formula here cancels
     that gap back out, landing this state at the same position it had
     the instant before it started leaving. Naturally fades to 0 by state
     2 along with the margin formula it mirrors, so this only ever matters
     while state 1's extra gap is actually in effect. */
  top: calc(-30px * (1 - var(--brough-specs-progress, 0)));
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .brough-model-detail-selector .brough-product-selector__state {
    transition: none;
  }
}

.brough-model-detail-selector .brough-product-selector__spec-tablist {
  max-width: 400px;
}

.brough-model-detail-selector .brough-product-selector__spec-tablist-wrap {
  position: relative;
}